kyeongmin
05703c8e72
- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층) - compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반) - 오답노트.md: 절대 하지 말아야 하는 실수 목록 - figma_to_html.py: Figma→HTML 변환 스크립트 - static/figma-assets/: Figma export 이미지 (배지, 화살표) - 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
4.5 KiB
4.5 KiB
Figma Design Language Analysis
Phase 1 결과 문서 (2026-04-07) Figma Source:
9S6LsQyO6zlRxtiqZccOUM/ Page 1
1. 스코프
| 프레임 | 역할 | 판정 |
|---|---|---|
| Frame 1 (1:3) | 3D 수렴 화살표 | 서브 컴포넌트 (장식 이미지) |
| Frame 2 (1:5) | Solution 제작 목표 | 블록화 → hero-icon-cards |
| Frame 3 (1:35) | 정책 달성 (Engn.Solution vs DfMA) | 블록화 → compare-2col-badge |
| Frame 4 (1:49) | 과정 vs 결과의 혁신 | 블록화 → compare-detail-gradient |
| Frame 5 (1:74) | 상세보기 버튼 | 서브 컴포넌트 (CTA) |
| Frame 6 (1:80) | 정책방향 (세로 문서) | 제외 (1280×720 부적합) |
2. 스케일 변환
Figma 캔버스 → 슬라이드(1280px) 변환 비율:
- Frame 2, 3: ×0.71 (1808px → 1280px)
- Frame 4: ×0.33 (3848px, 양쪽 합쳐서 2패널)
| Figma | 슬라이드 환산 | 역할 |
|---|---|---|
| 70px | 28-35px | 대섹션 헤더 |
| 60px | 24-28px | Hero 메시지 |
| 50px | 22-26px | 섹션 제목, 배지 |
| 45px | 20-22px | 카드 타이틀 (EN) |
| 40px | 16-20px | 본문 |
| 35px | 14-18px | 부제, 한국어 서브 |
| 32px | 12-14px | 버튼 |
3. 색상 팔레트 (Warm Theme)
기존 블루/슬레이트 테마와 병존하는 새 팔레트:
| 토큰 | Hex | Figma 원본 | 용도 |
|---|---|---|---|
--color-warm-brown |
#5C3714 |
rgba(92,55,20) | 과정/프로세스 섹션 제목 |
--color-dark-teal |
#084C56 |
rgba(8,76,86) | 결과/디지털 섹션 제목 |
--color-teal |
#227582 |
rgba(34,117,130) | 설명 텍스트 |
--color-forest |
#548235 |
rgba(84,130,53) | 배경 그라디언트 |
--color-beige |
#E4D9C0 |
rgba(228,217,192) | 서브틀 배경/버튼 |
--color-warm-yellow |
#FAEDCB |
rgba(250,237,203) | 하이라이트 바 |
그라디언트 패턴
- 왼쪽(과정):
rgba(165,161,150,0.10) → rgba(57,50,30,1.00)(베이지→브라운) - 오른쪽(결과):
rgba(41,107,85,0.10) → rgba(3,33,24,1.00)(틸→다크) - 버튼:
rgba(255,255,255,0.00) → rgba(228,217,192,1.00)(투명→베이지) - 배경:
rgba(84,130,53,1.00) → rgba(37,62,31,0.00)(그린→투명)
4. 타이포그래피
- 폰트: Pretendard Variable 유지 (Noto Sans KR은 이미 fallback)
- 핵심은 크기/굵기 위계
| 레벨 | 크기 (슬라이드) | Weight | 스트로크 | 정렬 |
|---|---|---|---|---|
| Hero Statement | 24-28px | 700 | white 1.5px | center |
| Section Header | 28-35px | 900 | white 5px | center/left |
| Badge Title | 22-26px | 700 | 없음 | center |
| Card Title (EN) | 20-22px | 900 | white 5px | center |
| Card Subtitle (KR) | 14-18px | 500 | white 1.5px | center |
| Body Text | 16-20px | 700 | white 1px | left |
| Section Sub-title | 22-26px | 900 | 없음 | left |
텍스트 스트로크 기법
Figma 디자인의 특징: 다양한 배경 위에서 가독성 확보를 위해 흰색 스트로크 사용
-webkit-text-stroke: 1.5px white; /* 일반 텍스트 */
-webkit-text-stroke: 5px white; /* 강조 텍스트 */
paint-order: stroke fill; /* 스트로크가 텍스트 뒤로 */
5. 레이아웃 패턴
A. Badge Header
- 이미지/그라디언트 배경 위
border-radius: 20px바 - 중앙 흰색 텍스트 (50px/700 → 22-26px/700)
- 높이: ~88px (Figma) → ~44-50px (슬라이드)
B. Hero Statement
- 전체 폭 중앙 정렬
- 큰 텍스트 (60px/700) + 흰색 스트로크
- 키워드 굵은 강조 가능
C. Icon Card Row
- N개 카드 수평 배치, 세로 구분선
- 각 카드: 아이콘 이미지 + 영문 제목(900) + 한국어 부제(500)
- 흰색 둥근 컨테이너 (borderRadius: 20)
D. Two-Col Comparison
- 좌/우 그라디언트 배경
- 각 열: 헤더 바 + (섹션 제목 + 본문) × N개
- 색상으로 좌/우 구분 (브라운 vs 틸)
E. CTA Button
- 그라디언트 바 (투명→베이지) + 둥근 버튼 (r:7)
- 흰색 텍스트
6. 디자인 시스템 vs 콘텐츠 전용 경계
디자인 시스템 (블록에 포함)
- 색상 팔레트, 그라디언트 패턴
- 타이포그래피 위계, 텍스트 스트로크
- 둥근 모서리 컨테이너 (r:20)
- Badge Header, 2열 비교, N열 카드 레이아웃 구조
콘텐츠 전용 (블록에 포함하지 않음)
- 3D 화살표 이미지 (Frame 1) → 콘텐츠가 제공
- 특정 아이콘 이미지들 (brain, thunder 등) → 콘텐츠가 제공
- 도메인 텍스트 → 슬롯으로 처리