만들고, 테스트하고, 개선하기

마이크로시멘트 애플리케이션 전문 회사인 GM Microcementos를 위한 기업용 웹 플랫폼 개발 완료. 성능, SEO 및 탁월한 사용자 경험에 중점을 둔 15개의 최적화된 페이지로 구성된 전문 웹사이트. 예산 계산기, 필터링 가능한 프로젝트 갤러리, 고급 양식 및 미니멀리스트 디자인 시스템을 포함합니다. 100개 이상의 재사용 가능한 구성요소가 포함된 모듈식 아키텍처로 핵심 웹 바이탈에 최적화되어 있습니다.

말라가의 공무원 시험 전문 아카데미인 아카데미아 CEJ를 위한 웹 플랫폼입니다. 블로그, 가상 캠퍼스, 지식 테스트, 등록 시스템 및 코스 관리 기능을 갖춘 완전 반응형 웹사이트입니다. Next.js 14, React 18, Tailwind CSS, Framer Motion 및 Docker로 개발되었습니다.

최적의 성능과 원활한 경험을 제공하는 데 중점을 둔 Next.js 15, React 19, Redux 툴킷 및 TailwindCSS 기반의 최신 애플리케이션인 Dimap의 기업 사이트 개발 프로젝트입니다. 이 프로젝트에는 서비스 페이지, 블로그, 기업 섹션 및 리드 추적 양식이 포함되어 있으며, 모두 모듈식 아키텍처를 기반으로 구축되었고 SSG, 지연 로딩 및 ClientLoader를 사용하여 고도로 최적화된 로딩이 이루어졌습니다.

DevCrate는 개발 리소스(도구, 라이브러리, 에셋, 문서, 챌린지)를 검색할 수 있는 플랫폼입니다. 프로젝트에 필요한 리소스가 필요하거나 영감을 얻기 위해 수많은 페이지를 검색한 적이 있으신가요? 그래서 제가 이 플랫폼을 만든 이유는 수년 동안 발견한 리소스를 정리하고 잃어버리지 않고, 흩어진 북마크에 의존하지 않고도 빠르게 찾을 수 있도록 하기 위해서입니다. 이 플랫폼에는 고급 검색, 태그별 필터, 모든 콘텐츠를 관리할 수 있는 관리자 영역이 포함되어 있습니다. 또한 커뮤니티의 제안을 통해 유용한 도구를 계속 수집할 수 있습니다. 이 앱은 보안 인증과 shadcn/ui 기반의 최신 인터페이스를 갖춘 Next.js, React, TypeScript 및 MongoDB로 구축되었습니다.

Cmd+kit은 웹 제품을 위한 재사용 가능한 명령 팔레트 시스템으로, 일관되고 접근하기 쉬운 인터페이스에서 빠른 검색, 키보드 탐색 및 작업 실행을 제공하도록 설계되었습니다. 동작 및 시각적 사용자 지정의 동일한 기반을 유지하면서 React, Vue, Preact 및 Astro용 공식 어댑터를 사용하여 다양한 스택에 쉽게 통합할 수 있도록 설계되었습니다. 전체 문서와 테마 구성, 명령 구조, 바로 사용 가능한 코드 내보내기를 위한 대화형 플레이그라운드가 포함되어 있습니다. 각 프로젝트의 흐름에 따라 npm, pnpm, yarn 또는 bun으로 설치할 수 있습니다.

npm에 게시된 CLI 툴킷 + 라이브러리로, 단일 타입의 JSON 파일에 API 계약을 정의하고 공유 TypeScript 유형, Angular 클라이언트, Zod를 사용한 런타임 유효성 검사 및 NestJS용 컨트롤러를 자동으로 생성할 수 있습니다. 프론트엔드와 백엔드 간의 동기화 불일치를 제거하고, 코드 중복을 방지하며, 계약 스냅샷을 통해 변경 사항을 감지합니다. 테스트를 위한 모의 생성 및 재사용 가능한 여러 패키지를 기반으로 하는 모듈식 아키텍처를 포함합니다.

Apple AirPods Pro 2 공식 히어로 섹션을 재현하며, GSAP과 ScrollTrigger를 활용한 고급 애니메이션 기술 습득에 집중한 프로젝트입니다. 스크롤과 동기화된 65프레임 Canvas 렌더링 시퀀스, 부드러운 트랜지션, 동적 내비게이션, 그리고 Apple의 원본 경험에서 영감을 받은 시각 효과를 구현했습니다. 고성능 웹 애니메이션을 향상시키기 위한 프로젝트입니다.

Angular 19와 TensorFlow.js를 사용하여 실시간 객체 감지를 위한 PWA를 개발합니다. PWA 구성, TensorFlow.js 통합, 실시간 이미지 캡처 및 처리, Web Workers와 Lazy Loading을 통한 최적화, IndexedDB를 이용한 오프라인 저장소, 모바일 기기 배포가 포함됩니다.

Three.js와 TresJS를 3D 모델로 학습하기 위한 연습 프로젝트. 다양한 마감 및 색상 옵션으로 스탠딩 데스크를 맞춤 설정할 수 있는 대화형 웹 애플리케이션. 궤도 컨트롤이 있는 3D 뷰, 노트북, 헤드폰, 장식용 식물의 3D 모델을 포함합니다. 데스크 마감을 맞춤 설정하고 실시간 미리보기로 액세서리 색상을 선택하세요. Vue 3, TresJS(Three.js와 Vue 통합), TypeScript, Vite, UnoCSS로 개발.

Grand Theft Auto VI 랜딩 페이지 클론. 교육 목적과 웹 개발 기술 시연을 위해 만들어졌습니다. 모든 데스크톱 해상도(1024px - 4K)에 최적화된 반응형 디자인을 갖춘 현대적인 웹사이트. GSAP를 사용한 고급 애니메이션이 있는 드롭다운 메뉴, 이미지가 있는 동적 캐릭터 및 위치 쇼케이스 시스템, 미리보기가 있는 인터렉티브 트레일러 섹션, 애니메이션 카드가 있는 다운로드 섹션을 포함합니다. 비영리 교육 프로젝트로 Astro, Tailwind CSS, JavaScript로 개발.

Strapi를 CMS이자 백엔드로 연습하기 위한 소규모 프로젝트입니다. React/Next.js, TypeScript, Tailwind CSS로 개발했습니다. 데모에서는 모킹 데이터를 사용하지만, 코드에는 콘텐츠 조회와 관리를 위한 실제 Strapi 연동이 구현되어 있습니다.

프로덕션 지향 백엔드 아키텍처를 갖춘 실시간 채팅 프로젝트입니다. Node.js + Express와 Socket.IO로 양방향 통신을 구현했으며, 저장 방식은 메모리(mock)와 Supabase 기반 선택적 영속 저장의 두 가지 모드를 지원합니다. 프론트엔드(Vite)는 demo 또는 live 모드로 실행할 수 있고, 솔루션은 계층형(configuration, HTTP, realtime, domain, storage)으로 구성되어 유지보수성, 테스트 용이성, 확장성을 높였습니다.

decapapi의 작업을 기반으로 교육 목적으로 Phaser 3.55.2로 구축된 클래식 Super Mario Bros의 HTML5 구현입니다. 이 프로젝트는 애니메이션, 블록, 구조, 개체, 플레이어 컨트롤 및 HUD를 위한 모듈식 아키텍처와 html2canvas를 사용한 스크린샷 캡처와 같은 추가 기능을 통해 2D 플랫폼 경험을 재현합니다. Vite를 사용한 웹 배포 및 로컬 개발을 지원하므로 MIT 라이선스에 따른 테스트 및 오픈 소스 기여가 간단해집니다.

Paint Win 95'는 Windows 95 스타일의 레트로 UI와 현대적인 웹 동작으로 클래식 Microsoft Paint 경험을 재현합니다. 그리기/선택 도구, 기본/보조 색상 팔레트, 실행 취소/다시 실행 기록, 작업용 확대 단계, 로컬 이미지 열기, PNG 내보내기, 그리고 Pointer Events를 통한 마우스·키보드·터치/스타일러스 입력을 지원합니다.

Bookshop View Transitions는 View Transitions API로 페이지 간 부드러운 전환을 구현하는 데 초점을 맞춘 React + Vite 데모로, 시각적으로 연속적인 내비게이션을 구현하기 위해 요소(제목, 표지, 내비게이션) 간 공유 애니메이션을 포함합니다.

React, TypeScript, Vite로 구축한 TikTok 클론으로, mobile-first 접근으로 설계되었습니다. 자동 재생되는 세로 피드, Following/For You 내비게이션, 인터랙티브 액션(좋아요, 댓글, 저장, 공유), Friends/Inbox/Profile 페이지, 그리고 피드 게시 업로드 기능을 포함합니다. 서비스 기반 아키텍처로 동작하며(기본값은 localStorage 영속성을 사용하는 mock), 실제 백엔드 연결을 위해 Supabase를 준비해 두었습니다.

고전 Breakout에서 영감을 받은 오픈소스 프로젝트로, Astro와 Canvas 기반 TypeScript 게임 로직으로 구현했습니다. 캔버스 내 난이도 선택, 조절 가능하고 점진적으로 증가하는 공 속도, 내구도가 다른 벽돌과 손상 상태, 키보드 조작, Game Over 이후 재시작 흐름을 포함합니다.

이 프로젝트에서 저는 팀과 함께 고품질 제품 판매와 지역 상거래에 전념하는 플랫폼을 처음부터 개발했습니다. 콘셉트부터 백엔드와 프론트엔드를 모두 만드는 실무까지 처음부터 작업했습니다. 다양한 기술 외에도 사용자 계정 및 로그인 제어를 위한 jwt, 모든 데이터 제어를 위한 대시보드와 같은 통합 기능을 통합했습니다. 다른 소셜 네트워크로 로그인할 수 있는 기능, 제품을 구매하기 위한 사용자 또는 제품을 추가하기 위한 회사 계정 생성, 해당 제품을 찾을 수 있는 가장 가까운 장소의 지도 등의 기능도 포함되었습니다. 기밀유지를 위해 코드는 표시되지 않습니다.