너 취향은 뭐냉

Plers · 2026.07 – 2026.09

Frontend · FE 1 / BE 1 / 기획 / 디자인

평양냉면 취향 테스트 웹앱

Next.jsTypeScriptTailwind CSSJestFigma MCP

구현 기능

문제: 결과 페이지 LCP가 느려 캐릭터 이미지가 보이기까지 11.9초나 걸렸습니다.
원인: 캐릭터 이미지가 브라우저 기본 lazy loading으로 로드되어 화면에 보인다고 판단될 때까지 다운로드 자체가 미뤄졌습니다.
우선순위가 없어 JS 번들 · 폰트 등과 네트워크 우선순위를 다투고 있었습니다.
SSR 데이터 fetch에도 캐시가 없어 트래픽이 몰리면 TTFB가 함께 늘어나는 구조였습니다.
해결: curl · 서버 함수 트레이스 · PageSpeed Insights로 캐시 유무에 따른 결과를 비교해 원인을 파악했습니다.
캐시를 껐다 켜도 LCP 차이가 크지 않음을 확인해, 병목이 캐싱이 아니라 '이미지 요청이 언제 시작되는지'에 있음을 특정했습니다.
캐릭터 이미지에 loading=eager · fetchPriority=high를 명시해 HTML 도착 즉시 최우선으로 받아오도록 했습니다.
SSR 데이터에도 Next.js 캐시를 추가로 적용해 트래픽 급증 · 백엔드 지연 상황에 대한 안정성을 보완했습니다.

src/lib/api/recommendation.ts

const res = await fetch(url, {
  next: { revalidate: 3600 },
});

src/app/result/components/CharacterAvatar.tsx

<Image
  src={src}
  alt={alt}
  loading={priority ? "eager" : undefined}
  fetchPriority={priority ? "high" : undefined}
/>

결과: Lighthouse Performance 74 → 99, LCP 11.9s → 1.2s

문제: 색상 · 타이포 등 디자인 토큰을 Figma에서 손으로 옮기다 보니 값이 쉽게 어긋났습니다.
원인: 토큰의 소스(Figma)와 실제 사용처(Tailwind 설정)가 분리되어 있어 수동 동기화에 의존했습니다.
해결: Figma export JSON을 파싱해 색상 · 시맨틱 · 타이포 91개 토큰을 Tailwind @theme 블록으로 생성하는 스크립트를 작성했습니다.
생성 파일 상단에 '직접 수정 금지' 가드 주석을 남기고, npm run sync-tokens로만 갱신하도록 워크플로를 통일했습니다.

src/styles/tokens.css

/* AUTO-GENERATED by scripts/sync-tokens.mjs — DO NOT EDIT BY HAND.
 * Source: tokens/figma-tokens.json
 * Regenerate with: npm run sync-tokens
 */

결과: 91개 토큰 자동 생성 (색상 52 + 시맨틱 28 + 타이포 11), 커밋마다 소스·생성 파일 동시 갱신