사용자 경험을 시각적 설계와 공학적 구조로 완성하는 웹 프론트엔드 개발자입니다.
시각적 완성도와 성능 사이의 균형을 설계하며, 직관적이고 몰입도 높은 사용자 경험을 구현합니다.
사용자의 행동과 인지 흐름을 기준으로 인터랙션 구조를 설계하고, 렌더링 · 성능 · 접근성까지 고려해 경험의 완성도를 높입니다.
CS 기반의 문제 분석 역량을 바탕으로 구현 방식을 선택하며, AI와 자동화 도구를 프로세스에 통합해 개발 효율과 품질을 함께 개선합니다.
버텍스: Subdivision Apply를 적용하는 대신 버텍스 수를 직접 조절, 하이폴리 노멀맵 적용 → 폴리곤 수 유지 · 하이폴리 품질 확보
ORM 패킹: Occlusion · Roughness · Metalness → 단일 이미지 R·G·B 채널 패킹. 텍스처 3장 → 1장, GPU 메모리 및 전송량 동시 절감
인스턴싱 & 반응형:scene.clone(true) + 독립 AnimationMixer → main/contact 두 씬에서 지오메트리 공유. Viewport 비율 기반 씬 모드 분리 — DPR 상한 제어, prefers-reduced-motion 분기, WebGL 미지원 fallback
캐릭터 인터랙션: 상태머신(idle/typing/notification/music) — 표정 Shape Key · 메시 가시성 · 사운드를 GSAP으로 연동. 기타 원샷 사운드와 루프 트랙, 카메라 클릭 후 이미지 뷰어 · 액자 텍스처 교체 흐름 구현
스크롤 전환: GSAP ScrollTrigger 기반 카메라 180° 회전 → 노트북 클로즈업 → HTML Overlay 페이드 인 → 프로젝트 쇼케이스로 연결
씬 모드 분리: Viewport 비율 기준으로 stacked / wide 씬 모드를 분리해 세로 화면은 탭 · 드래그 · bottom sheet, 가로 화면은 스크롤 전환 중심으로 UX를 최적화
문제 다국어 Locale Fallback 처리와 서버 캐시 미적용으로 인해 초기 진입 속도가 5초 이상 소요되어 사용자 이탈 위험 확인
분석 DB 권한부터 Layout Auth, new Date(), Runtime 의존성까지 단계적 격리 테스트를 수행하여, 배포 환경의 empty generateStaticParams가 런타임 First-hit 시 500 에러를 유발하는 병목 지점임을 특정
해결
Seeded First-hit Static: 전체 콘텐츠를 사전 빌드하지 않고, 로캘별 대표 슬러그 1개만 Seed로 제공하여 빌드 안정성과 런타임 생성 성능을 동시에 확보
캐시 경계 설정:unstable_cacheTag와 use cache를 도입하여 도메인별 캐시 경계를 설계하고, 업데이트 시 필요한 데이터만 정밀하게 무효화하도록 최적화
의존성 격리: 시각 판정 로직을 JS Runtime에서 DB RPC(now())로 위임하여 서버 컴포넌트의 정적 특성을 유지
결과 초기 렌더링 시간 80% 단축 (1s 이내), 배포 환경에서의 안정적인 200 응답 확인
문제 기존 Offset 방식의 데이터 중복 노출 이슈 해결 및 콘텐츠 증가에 따른 조회 성능 저하(O(N)) 방지 필요
해결
Keyset Pagination:publish_at + id 조합의 고유 커서를 설계하여 절대 좌표 기반의 피드 고정. 데이터 규모와 무관하게 일정한 O(log N) 성능 보장
SEO 최적화: 커서 기반 URL에 noindex, follow 및 Canonical 태그를 설정하여, Stateful 페이지가 검색 색인 결과에 부정적인 영향을 미치지 않도록 구조화
UX 복원력: 이전 페이지 순차 추적 병목을 방지하기 위해 비정상적인 접근은 notFound() 처리하되, 내부 링크는 커서 히스토리를 유지하여 사용자 흐름 보존
문제 6개 언어를 수동으로 관리하면 휴먼 에러와 번역 누락 시 UX 단절이 불가피함
해결
자동화 파이프라인: n8n 워크플로우로 언어별 번역본 · URL slug · 관련 태그 자동 추출·동기화. LLM 연속 루프 호출 시 Rate Limit · 스키마 파싱 오류 급증을 확인, 배치 간격 지연 로직 설계로 안정성 확보
계층적 폴백: 아티클 · 프로젝트 · 태그 모두 대표 레코드에 translation이 pk로 연동되도록 설계. ko → en → ja → fr 우선순위 폴백으로 번역본 누락 시에도 UX 단절 방지
접근성 인프라: 모든 페이지의 제목 · 설명 · 라벨 · 안내 문구 등을 JSON으로 통합 관리, sr-only 처리 포함. JSON-LD 구조화 데이터, hreflang/Canonical 자동화, sitemap + robots.txt 동적 생성으로 Google Search Console 등록
기술 선택 MDX(빌드 복잡도 · hydration 비용 과다), highlight.js(DOM 후처리 필요), Prism(runtime highlight로 SSR 불리) 검토 후 react-markdown + rehype-pretty-code 조합 채택. 라이브러리는 파서 역할만 담당하고 UI·인터랙션은 전부 직접 구현
Selection 복원: textarea 기반 마크다운 에디터 직접 설계. 툴바 버튼 클릭 시 브라우저 selection 소실을 mousedown 차단 + queueMicrotask 후 cursor 복원 흐름으로 해결
렌더링 일관성: custom syntax(toggle, align, YouTube, spoiler)를 반영하기 위해 사전 처리 + 분절 렌더링 방식 설계
Draft 자동저장: 몇 초 간격 서버 자동 임시저장으로 작성 중 데이터 손실 방지. SEO를 위한 semantic slug 중복 확인 후 등록
React 19
TypeScript
R3F
Framer Motion
Zustand
TanStack Query
Socket.io
Storybook
Emotion
monorepo
NestJS
TypeORM
MySQL
역할 재분리: 정적 애니메이션 데이터는 Blender에서 사전 베이킹, 실시간 인터랙션(시선 추적 · 클릭 반응 · 조명 · 쉐도우)만 Three.js에서 하도록 설계를 변경하여 성능과 퀄리티를 동시에 확보
사용자가 컨트롤러로 캐릭터 애니메이션과 표정(Shape Key)을 직접 실시간 제어하는 체험 페이지 구현
여러 페이지(안내 · 축하 · 결과 등)에서 캐릭터를 재사용하면서 인스턴싱으로 중복 렌더링 없이 GPU 부하 분산
결과 캐릭터가 브랜딩 요소이자 학습 체험 인터페이스로서 이중 역할 수행
해결
실시간 시각화: 양쪽 선택지 클릭 시 SVG Path를 동적 생성해 연결 상태를 즉시 시각화
파이프라인 설계: self-hosted n8n(Docker) + Google Sheets(단일 진실 원본) + Gemini 기반 자동화. JSON/JSONL/CSV 병렬 출력 및 Docker 병렬 실행 구조로 처리 속도 극대화
결과 6,000개 퀴즈 데이터 30분 내 생성 완료 → 수일의 수동 작업 자동화, 팀 리소스를 핵심 기능 개발에 집중
React 18
TypeScript
Vite
SVG Filter
Firebase
Tailwind CSS
Yarn Berry
물리 기반 인터랙션: 포인터 이동 속도(calculateSpeed)와 가속도(calculateAcceleration)를 매 프레임 계산. 레이어별 parallax · inertia · rotationDir 상수를 적용해 각기 다른 관성으로 반응하는 멀티레이어 물리 엔진을 직접 구현. 빠른 손동작일수록 skew와 displacement가 증폭되도록 설계
SVG Filter:feTurbulence + feDisplacementMap의 scale 값을 포인터 거리 · 속도 · 가속도 기반으로 매 rAF 프레임마다 동적 갱신. 레이어별 위상차(phaseOffset)와 flowSpeed로 포인터가 없어도 각 레이어가 서로 다른 리듬으로 울렁이는 유기적 움직임 구현
CSS 변수 분리: 포인터 반응 transform은 JS가 ref로 직접 갱신하고, 드리프트 애니메이션은 CSS keyframe이 독립적으로 구동. 두 레이어를 합성해 인터랙션과 배경 흐름이 간섭 없이 동작하도록 설계
접근성:prefers-reduced-motion 미디어 쿼리로 감속 모드 사용자에게 모션 비활성화. 터치 디바이스는 물리 루프를 실행하지 않도록 분기