프론트엔드 디자인
작업 프로세스
0. 먼저 확인할 입력
- •목적/유저: 누가, 어떤 상황에서 사용하는가?
- •스택/제약: React/Next? Tailwind? 디자인 시스템 유무?
- •산출물 형태: 레이아웃 제안 vs 코드 구현 vs 토큰 포함
1. 코드 작성 전: 컨셉 방향 설정
톤: 미니멀 / 에디토리얼 / 브루탈리스트 / 파스텔 / 산업적 중 하나 선택 차별화 포인트: 사람들이 기억할 하나를 명시
2. 구현 기준
- •타이포: 헤딩/본문 페어링 + fallback
- •색상: primary/surface/text 팔레트 + hover/active 상태
- •레이아웃: 그리드, 8pt 간격, 반응형 breakpoint
- •컴포넌트: loading/empty/error 상태 포함
3. 절대 피하기
- •맥락 없는 보라색 그라디언트
- •쿠키커터 UI
- •결정 이유 없는 장식
출력 포맷
- •컨셉 요약
- •레이아웃 스펙
- •컴포넌트 스펙
- •코드 (React + Tailwind)
- •접근성 체크