Behind
the Scenes
이 포트폴리오 사이트의 디자인 철학, 주요 기능 구현 방법, 그리고 개발 과정에 대한 이야기입니다.
the buildOverview.
Claude와 함께 만든 풀스택 포트폴리오. Next.js 16 App Router를 기반으로 GSAP·Framer Motion 애니메이션, Lenis 무한 스크롤, Supabase 블로그까지 직접 설계하고 구현했습니다.
Key Features.
페이지 끝에 도달해도 끊김 없이 처음으로 돌아가는 무한 스크롤을 구현했습니다. 마지막과 첫 섹션 사이에 Bridge Section을 삽입해 루프 이음새가 자연스럽습니다.
Lenis · Infinite Scroll · Bridge Section
한국어/영어 전환을 지원하는 다국어 시스템입니다. Context API 기반으로 모든 UI가 즉시 전환되며, 어드민 콘텐츠도 이중 언어를 지원합니다. DeepL/Google/Gemini/Claude API 기반 자동 번역도 제공합니다.
Context API · JSON Locale · Bilingual Content · DeepL/Gemini/Claude
성능 분석을 통해 모바일 Lighthouse 점수를 60점에서 98점으로 끌어올리고, 페이지 용량을 70% 줄였습니다.
Font Subsetting · Lazy Loading · font-display · browserslist
작품들을 좌우로 스크롤하며 감상할 수 있는 가로 갤러리입니다. GSAP 기반 양방향 무한 래핑과 한/영 레이아웃 분기를 지원합니다.
GSAP · Infinite Wrapping · i18n Layout · Responsive
다크 모드와 라이트 모드를 전환하면 모든 요소가 부드럽게 테마에 맞춰 변합니다. 시스템 설정 감지와 사용자 선택 기억을 동시에 지원합니다.
CSS Variables · data-theme · prefers-color-scheme · localStorage
스크롤하면 화면 위를 떠다니는 금속 느낌의 3D 도넛 오브젝트입니다. 리사주 곡선 경로를 따라 움직이며 테마에 따라 질감이 바뀝니다.
Three.js · React Three Fiber · Lissajous Curve · Environment Map
Supabase 기반 블로그 시스템. Markdown/Rich Text 전환 에디터, 시리즈 발행, 카테고리별 책 모양 카드 탐색, 검색·태그 필터, 커버 이미지(프리셋/Unsplash/AI 생성), 발행 시 Gemini/OpenAI/Claude AI 자동 요약(ko+en)을 지원합니다.
Supabase · Plate · Series · Canvas API · AI Cover · AI Summary
로그인 없이 쓰는 쓰레드형 댓글입니다. 비밀번호를 함께 받아 수정·삭제 때 대조하고, 관리자 답변 시 이메일로 알립니다. 댓글에는 giscus 식 이모지 반응 8종을, 게시물에는 IP 기준 좋아요를 답니다.
Supabase · Threaded Replies · Emoji Reactions · bcrypt · Email Notify
로그인 버튼 없이 URL 직접 접속 방식의 숨겨진 어드민입니다. 포스트·작품·프로필을 이중 언어로 CRUD하고, 테마·폰트·사이트 설정을 실시간으로 변경할 수 있습니다. DB 미연결 시 정적 데이터로 자동 fallback됩니다.
Supabase Auth · Next.js Middleware · JSONB · Static Fallback
Design System.
Open↗
4가지 서체 시스템
Inter(UI), Instrument Serif(디스플레이), JetBrains Mono(코드), Space Grotesk(보조) — 각 역할에 맞는 서체를 선택해 가독성과 개성을 동시에 확보했습니다.
다크/라이트 듀얼 팔레트
CSS Variables 기반 디자인 토큰으로 다크/라이트 테마를 전환합니다. Accent, Neutral, Background 3계층 팔레트가 모든 컴포넌트에 일관되게 적용됩니다.
물리 기반 인터랙션
Lenis smooth scroll, GSAP horizontal scroll, Framer Motion spring physics — 세 라이브러리를 조합하여 자연스러운 무게감의 인터랙션을 구현했습니다.
일관된 스페이싱 스케일
2xs(4px)부터 4xl(64px)까지 7단계 스페이싱 토큰을 정의하여 모든 컴포넌트에 일관된 간격 시스템을 적용했습니다.
7단계 반응형 브레이크포인트
XS(320px)부터 4K(1920px)까지 7단계 브레이크포인트로 모든 디바이스에서 최적화된 레이아웃을 제공합니다.
Lucide + 브랜드 아이콘
Lucide React 아이콘과 커스텀 브랜드 SVG를 조합하여 일관된 아이콘 시스템을 구축했습니다.
Design Process.
설계 및 디자인 시스템 구축
CSS Variables 기반 디자인 토큰을 정의하고, 다크/라이트 테마 전환 시스템과 CSS Modules 캡슐화 구조를 설계했습니다. 타이포그래피, 색상, 간격 체계를 확립하고 전체 레이아웃의 기반을 잡았습니다.
UI 컴포넌트와 인터랙션 구현
Hero 섹션, Navigation, Contact Drawer, Loading Screen 등 주요 UI 컴포넌트를 구현했습니다. 각 컴포넌트의 움직임은 GSAP과 Framer Motion으로 처리해 Image Velocity, StaggerText, Mouse Parallax, Magnetic Hover 를 만들었습니다. 스크롤 속도와 마우스 움직임에 스프링 감쇠로 반응하도록 해서, 값이 목표치로 점차 수렴하며 멈춥니다.
다국어 지원 및 반응형 최적화
한/영 다국어(i18n) 시스템을 도입하고, 언어별 텍스트 길이 차이로 발생하는 레이아웃 시프트를 min-height 예약 방식으로 해결했습니다. 데스크톱·태블릿·모바일 각 환경에 맞는 반응형 레이아웃을 구현하고, clamp() 기반 유동 사이징을 적용했습니다.
성능 최적화
Lighthouse CLI로 프로덕션 빌드를 측정하며 2차에 걸쳐 최적화를 진행했습니다. reCAPTCHA를 invisible 모드 + 지연 로딩으로 전환하고, 미사용 폰트 4종(12파일)을 제거하여 페이지 용량을 70% 절감, 모바일 Performance 98점을 달성했습니다.
문서화 및 프로젝트 회고
기술 선택의 이유, 문제 해결 과정, 아키텍처 구조를 기록하는 About 페이지를 구현했습니다. Code Highlights, Design Decisions, Architecture 시각화 등 15개 패널을 데스크톱 가로 스크롤과 모바일 세로 레이아웃으로 완성했습니다.
설계 및 디자인 시스템 구축
CSS Variables 기반 디자인 토큰을 정의하고, 다크/라이트 테마 전환 시스템과 CSS Modules 캡슐화 구조를 설계했습니다. 타이포그래피, 색상, 간격 체계를 확립하고 전체 레이아웃의 기반을 잡았습니다.
UI 컴포넌트와 인터랙션 구현
Hero 섹션, Navigation, Contact Drawer, Loading Screen 등 주요 UI 컴포넌트를 구현했습니다. 각 컴포넌트의 움직임은 GSAP과 Framer Motion으로 처리해 Image Velocity, StaggerText, Mouse Parallax, Magnetic Hover 를 만들었습니다. 스크롤 속도와 마우스 움직임에 스프링 감쇠로 반응하도록 해서, 값이 목표치로 점차 수렴하며 멈춥니다.
다국어 지원 및 반응형 최적화
한/영 다국어(i18n) 시스템을 도입하고, 언어별 텍스트 길이 차이로 발생하는 레이아웃 시프트를 min-height 예약 방식으로 해결했습니다. 데스크톱·태블릿·모바일 각 환경에 맞는 반응형 레이아웃을 구현하고, clamp() 기반 유동 사이징을 적용했습니다.
성능 최적화
Lighthouse CLI로 프로덕션 빌드를 측정하며 2차에 걸쳐 최적화를 진행했습니다. reCAPTCHA를 invisible 모드 + 지연 로딩으로 전환하고, 미사용 폰트 4종(12파일)을 제거하여 페이지 용량을 70% 절감, 모바일 Performance 98점을 달성했습니다.
문서화 및 프로젝트 회고
기술 선택의 이유, 문제 해결 과정, 아키텍처 구조를 기록하는 About 페이지를 구현했습니다. Code Highlights, Design Decisions, Architecture 시각화 등 15개 패널을 데스크톱 가로 스크롤과 모바일 세로 레이아웃으로 완성했습니다.
Tech Stack.
Next.js 16Framework
React 19Library
TypeScriptLanguage
GSAPAnimation
Framer MotionInteraction
CSS ModulesStylingCSS VariablesDesign Tokens
Three.js3D Graphics
SupabaseBackend (DB/Auth/Storage)
Hugging FaceAI Image Generation
VercelDeployment
VitestTestingSecurity.
모든 DB 쿼리에 Supabase 파라미터화 쿼리(prepared statements)를 사용합니다. 사용자 입력이 쿼리 문자열에 직접 삽입되지 않아 SQL Injection 공격을 원천 차단합니다.
모든 DB 쿼리React JSX가 모든 사용자 입력을 자동 이스케이프합니다. dangerouslySetInnerHTML을 사용하지 않으며, 서버 측에서 HTML 태그 스트리핑과 제어문자 제거를 추가로 적용합니다.
모든 공개 API 엔드포인트에서 UUID 포맷 검증, 길이 제한(content 2000자, password 72B, email 254자, nickname 50자), 이메일 포맷 검증, enum 타입 검증, 카테고리 화이트리스트 검증을 수행합니다.
모든 공개 API익명 댓글의 수정/삭제는 bcrypt(salt round 10) 비밀번호 한 경로로만 인증합니다. 브라우저 UUID 기반 commenter_hash 로도 통과시키던 경로는 제거했습니다. 31비트 비암호 해시라 위변조가 가능했고, 아바타 표시를 위해 공개 응답에 포함되는 값이기 때문입니다. 관리자는 Supabase Auth 세션으로 인증합니다.
Supabase RLS 정책으로 테이블별 접근 권한을 DB 레벨에서 제어합니다. 서버 API를 우회하더라도 인증되지 않은 데이터 접근이 불가능합니다.
모든 테이블Layout 레벨에서 Supabase Auth 세션을 확인합니다. 미인증 시 접근 거부 페이지로 리다이렉트되며, 로그인 URL을 외부에 노출하지 않습니다.
/admin/* 전체좋아요·방문자 통계에 IP 기반 UNIQUE 제약조건을 적용합니다. UNIQUE(target_type, target_id, ip) 하나로 모든 엔티티의 중복을 DB 레벨에서 차단합니다.
API 키는 DB site_settings에 암호화 저장되며, SUPABASE_SERVICE_ROLE_KEY는 서버 사이드에서만 접근 가능합니다. 클라이언트에 노출되는 키는 NEXT_PUBLIC_ 접두사만 허용합니다.