← Projects
저를 가장 잘 표현하는 색이 회색이라 생각해 선택했습니다. “흑과 백이 아닌 회색의 명도차일 뿐이다.” React·TypeScript·Next.js 기반으로 프론트엔드 개발자로서의 저를 소개하고, Emotion·Framer Motion으로 몰입감 있는 인터페이스를 구성했습니다.
기술적 의사결정
- App Router로 중첩 레이아웃·서버/클라이언트 컴포넌트 경계 정리
- 블로그는 마크다운 + Giscus(Discussions), 메타/OG로 SEO 보강
- WebP·next/image·LCP priority로 성능 개선
- 보조 도메인 308 Permanent Redirect로 초기 재요청 비용 축소
담당 역할
- 스토리텔링 중심 UX 기획·슬라이드/섹션 레이아웃 구성
- Figma 시안·인터랙션 흐름 설계
- Next.js 정적/SSR 웹 전체 구현 및 배포 자동화
- 번들 최적화·lazy loading·debounce 등 성능 작업
Challenge & Solution
문제
Lighthouse Performance·SEO가 낮아 체감 속도와 검색 노출을 개선할 필요가 있었습니다.
해결
공통 metadata/OG 보완, 307→308 리다이렉트 일원화, PNG→WebP·next/image·LCP priority로 점진 최적화했습니다. FCP가 23.9s→0.9s 수준으로 개선된 경험이 있습니다.
배운 점
성능·SEO는 지표가 아니라 UX이며, 코드뿐 아니라 도메인·라우팅·배포 흐름까지 점검해야 합니다.
문제
파일 기반 라우팅만으로 시작하다 레이아웃 중복·라우팅 복잡성·상태 혼합이 커졌습니다.
해결
App Router로 전환해 중첩 layout·RSC 기본·상호작용만 'use client'로 분리하고 metadata/icon으로 문서 설정을 단순화했습니다.
배운 점
라우팅은 경로가 아니라 코드베이스 유지보수성에 직결되며, 서버/클라 경계를 이해하는 것이 핵심입니다.