프로젝트 설명
AI로 만든 앱의 UI를 정리하고 디자인 시스템을 코드에 이식했습니다. App Store에 출시해 운영 중인 서비스입니다.
· 스택 : Next.js TypeScript Tailwind CSS shadcn/ui
· 작업 범위 : UI/UX 디자인 토큰 설계 공용 컴포넌트 신설 하드코딩 값 치환 규칙 파일
· 산출물 : 디자인 토큰(CSS 변수/Tailwind) 공용 Button·Card 컴포넌트 CLAUDE.md·.cursorrules Figma 원본 전후 캡처
색상·글자 크기·여백이 코드 전체에서 몇 종 쓰이는지 전수 집계하는 것부터 시작했습니다. 글자 크기 16종은 역할 기반 6토큰으로 압축하고 56개 파일에 흩어져 있던 카드 껍데기는 공용 Card 컴포넌트로 모았습니다. 다크 모드에서 흰 배경이 남던 화면은 semantic 토큰으로 교정했습니다. 이후 AI로 화면을 추가해도 같은 기준으로 나오도록 규칙을 파일로 못박아 코드에 넣었습니다.
