C.E.L_Slide_test2/figma_to_html_agent/FIGMA-DESIGN-LANGUAGE.md

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 등) → 콘텐츠가 제공
• 도메인 텍스트 → 슬롯으로 처리

---

7. 추가 블록 (Page 2, 3, 4)

2026-04-08 추가

Page 2 (15:2) — 프레젠테이션 슬라이드

블록	출처	설명
category-strip-table	001_개요 우측 하단	컬러 스트립 N열 테이블 (기술/사람/자연)

• 다크 배경, 좌측 색상 바(세로 라벨) + 제목/본문 M행 반복
• N열 동적 (2~5), 색상 바 색상은 열마다 지정
• scale = 1200/2123 = 0.5652

Page 3 (18:8204) — 컴포넌트

블록	출처	설명
checklist-dark	f5 (1770×553)	체크 아이콘 + 제목:설명 N행 리스트
system-2col-center	f8 (2446×1943)	좌/우 항목 + 중앙 원형 라벨

• checklist-dark: 다크 배경, 주황 체크(☑), 제목:설명 한 줄 구조
• system-2col-center: 3열 Grid (좌 항목 + 중앙 원 + 우 항목), 색상 탭

Page 4 (29:439) — 순환 다이어그램

블록	출처	설명
cycle-orbit	Frame 1 (1076×292)	3D 원 투영 순환 궤도 다이어그램

핵심 수학:

• 3D 원 → Z축 기울임(80°) → 2D 투영 (토성 고리 원리)
• project(α) = (cx + R×cos(α), cy + R×sin(α)×cos(80°))
• N개 노드: 360°/N 간격, 사이각 2/3로 축소 (앞쪽 가까워짐)
• 하단 중심(90°) 기준 좌/우 대칭 배치
• 설명 텍스트: 좌측 노드 → 이름 좌측에, 우측/상단 노드 → 이름 우측에
• 화살표: 호 위 1/3, 2/3 지점에 접선 방향 회전

8. 전체 블록 목록 (7개)

#	블록 ID	카테고리	출처	핵심 특징
1	hero-icon-cards	cards	Page 1	3D 리본 배지 + 빨간 테두리 박스 + N열 카드
2	compare-2col-badge	cards	Page 1	3D 리본 탭 + 틸 테두리 2열 비교
3	compare-detail-gradient	cards	Page 1	비대칭 라운드 헤더 + Grid 행 정렬 + As-Is/To-Be
4	category-strip-table	cards	Page 2	컬러 스트립 바 + 다크 배경 N열 테이블
5	checklist-dark	emphasis	Page 3	체크 아이콘 + 제목:설명 다크 리스트
6	system-2col-center	cards	Page 3	중앙 원형 라벨 + 좌/우 항목 Grid
7	cycle-orbit	visuals	Page 4	3D 원 투영 SVG 순환 궤도