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

마이크로시멘트 전문 기업 GM Microcementos를 위한 기업 웹 플랫폼 완전 개발. 성능, SEO, 뛰어난 사용자 경험에 초점을 맞춤 15개 최적화 페이지로 구성된 전문 웹사이트. 예산 계산기, 필터링 가능한 프로젝트 갤러리, 고급 양식, 미니멀 디자인 시스템을 포함. 100개 이상의 재사용 가능한 컴포넌트와 Core Web Vitals 최적화를 갖춘 모듈러 아키텍처.

말라가의 사법 경쟁 시험을 전문으로 하는 Academia CEJ의 웹 플랫폼. 블로그, 가상 캐퍼스, 지식 테스트 시스템, 등록 시스템, 코스 관리를 갖춘 완전 반응형 웹사이트. Next.js 14, React 18, Tailwind CSS, Framer Motion, Docker로 개발.

Next.js 15, React 19, Redux Toolkit, TailwindCSS 기반의 현대적인 애플리케이션인 Dimap 기업 웹사이트 개발. 최적의 성능과 부드러운 사용자 경험을 제공하도록 설계되었습니다. 서비스 페이지, 블로그, 기업 섹션, 리드 추적 폼 등을 포함하며, SSG, Lazy Loading, ClientLoader를 이용한 고도로 최적화된 모듈형 아키텍처로 구축되었습니다.

이 프로젝트에서 저는 팀과 협력하여 고품질 제품 판매 및 지역 상거래 지원에 초점을 맞춘 플랫폼을 처음부터 구축했습니다. 개념에서 실습까지 백엔드와 프론트엔드를 모두 만들며 작업했습니다. 다양한 기술 외에도 사용자 계정 관리 및 로그인을 위한 JWT, 모든 데이터 제어를 위한 대시보드 등의 통합을 구현했습니다. 다양한 소셜 네트워크로 로그인, 제품 구매를 위한 사용자 계정 생성 또는 제품 추가를 위한 회사 계정, 해당 제품을 찾을 수 있는 가장 가까운 위치의 지도 등의 기능이 있습니다. 기밀상의 이유로 코드는 표시되지 않습니다.

DevCrate는 개발 리소스(도구, 라이브러리, 에셋, 문서, 챌린지)를 발견하기 위한 플랫폼입니다. 프로젝트에 필요한 리소스나 단순한 영감을 찾다가 끝없이 많은 페이지를 떠돌게 된 적이 있지 않나요? 그래서 이 플랫폼을 만들었습니다. 수년 동안 발견한 리소스를 체계적으로 정리해 잃어버리지 않고, 흩어진 북마크에 의존하지 않아도 빠르게 찾을 수 있게 하기 위해서입니다. 고급 검색, 태그 필터, 전체 콘텐츠를 관리할 수 있는 관리자 영역을 포함하고 있습니다. 또한 커뮤니티 제안을 받아 유용한 도구를 계속 수집할 수 있습니다. Next.js, React, TypeScript, MongoDB로 구축했으며, 안전한 인증과 shadcn/ui 기반의 현대적인 인터페이스를 제공합니다.

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

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

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

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

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 이후 재시작 흐름을 포함합니다.