_Geulbeot/04. design_agent/docs/figma-analysis/DESIGN-ANALYSIS.md

Figma 디자인 분석 보고서

파일 정보

• 파일명: 바론컨설턴트 홈페이지_기획팀공유
• 페이지: 바론 공유 2025.05.13 (node: 1574-6254)
• 분석일: 2026-03-25

---

1. 전체 구조

메인 페이지 (3장)

섹션	프레임	크기	스크린샷
1장 바론컨설턴트	1-1 미래	1920x5990	1장_1-1_미래.png
	기술	1920x5677	1장_기술.png
	가치	1920x4157	1장_가치.png

자세히보기 페이지 (13개 서브 프레임)

섹션	프레임	크기	스크린샷
2-1장 건설산업 DX	2-1_01 건설산업	920x1231	2-1_01_건설산업.png
	2-1_02 BIM	920x2179	2-1_02_BIM.png
	2-1_03 GIS	920x2208	2-1_03_GIS.png
	2-1_04 디지털트윈	920x1651	2-1_04_디지털트윈.png
2-2장 DX와 SW	2-2_01	920x3013	2-2_01.png
	2-2_02	920x1742	2-2_02.png
	2-2_03	920x2129	2-2_03.png
	2-2_04	920x1814	2-2_04.png
2-3장 DX 활용	2-3_01 ~ 2-3_05	920x2300~3016	2-3_01~05.png

---

2. 추출된 디자인 토큰

색상 팔레트

용도	Figma 값	현재 tokens.css	비고
메인 텍스트	#000000	--color-primary: #1e293b	Figma가 더 진함
포인트 (파란)	#004cbe	--color-accent: #2563eb	Figma가 더 진한 남색
포인트 밝은	#006aff	없음	추가 필요: --color-accent-bright
포인트 하늘	#6bcdff	없음	추가 필요: --color-accent-light
포인트 하늘2	#00aaff	없음	참고
포인트 파랑	#008fff, #007cff	없음	원형 마커 색상
배경 밝은	#f6f7f9	--color-bg-subtle: #f8fafc	거의 동일
배경 흰	#ffffff	--color-bg: #ffffff	동일
섹션 타이틀	#ffffff (배경 위)	-	다크 배경 위 흰 텍스트

폰트 체계

용도	Figma	현재 tokens.css	비고
페이지 타이틀	Noto Sans CJK KR, 35px, w700	--font-title: 2rem (32px)	Figma가 약간 큼
영문 서브타이틀	15px, w400	없음	section_title 영문
꼭지 제목	24px, w700	--font-subtitle: 1.25rem (20px)	Figma가 큼
본문	16px, w400	--font-body: 0.95rem (15.2px)	거의 동일
카드 내 제목	14px, w700	--font-caption: 0.8rem (12.8px)	Figma가 큼
카드 내 본문	14px, w400	--font-caption	동일
태그/라벨	20px, w700	없음	DX/BIM/VS 라벨
소제목	13px, w400	--font-small: 0.7rem (11.2px)	Figma가 약간 큼

간격/크기

요소	Figma 값	비고
프레임 폭	920px	자세히보기 프레임
섹션 타이틀 영역	249x73px	영문+한글 2줄
꼭지 제목+설명 영역	742x68~78px	좌: 제목 240px, 우: 설명 422px
카드 (3열)	240x365px 각각	이미지+제목+설명
이미지 그리드	460x354px (2열)	그라데이션 오버레이 포함
비교 박스	327x116px, 325x116px	나란히 2개
원형 마커	10x10px, 151x151px	작은 점, 큰 원
배경 헤더 영역	963x515px	그라데이션+웨이브

---

3. 발견된 재사용 컴포넌트

공통 컴포넌트 (모든 자세히보기에 반복)

A. section_title (섹션 타이틀)

구조: FRAME 249x73
  ├── TEXT 15px/w400 #ffffff — 영문 (예: "Building Information Modeling")
  └── TEXT 35px/w700 #ffffff — 한글 (예: "건설정보모델링(BIM)")
배경: 파란 그라데이션 헤더 위에 위치

• 모든 자세히보기 프레임의 상단에 동일 구조로 반복
• 영문 서브타이틀 + 한글 메인 타이틀
• 흰색 텍스트 + 다크 배경

B. bg (배경 헤더)

구조: GROUP 1319x671
  ├── Mask group (그라데이션 + 웨이브 이미지)
  ├── RECTANGLE 그라데이션 (파란→투명)
  ├── RECTANGLE 흰색 배경
  └── shape (벡터 웨이브 라인 7줄)

• 상단 파란 그라데이션 + 웨이브 패턴
• 이미지로 export해서 사용해야 하는 영역 (CSS 재현 불가)

C. sub_제목,내용 (꼭지 제목+설명)

구조: FRAME 742x68~78
  ├── TEXT 24px/w700 #004cbe — 질문/소제목 (좌측 240px)
  └── TEXT 16px/w400 #000000 — 설명 (우측 422px)

• 좌: 파란 굵은 제목 (질문형)
• 우: 검정 본문 설명
• 2단 가로 배치 (240:422 비율)

D. close 버튼

구조: FRAME 40x40
  └── VECTOR 23x23 #ffffff — X 아이콘

콘텐츠 컴포넌트

E. 카드 3열 (2-1_02 BIM 페이지)

구조: GROUP 751x377
  ├── FRAME 744x365 (카드 3장 컨테이너)
  │   ├── RECTANGLE 240x365 #ffffff (카드1)
  │   ├── RECTANGLE 240x365 #ffffff (카드2)
  │   └── RECTANGLE 240x365 #ffffff (카드3)
  ├── 이미지 3장 (각 카드 상단)
  └── FRAME 240x180~188 (각 카드 텍스트)
      ├── TEXT 14px/w700 — 단계명 (영문 포함)
      ├── RECTANGLE 구분선
      └── TEXT 14px/w400 — 설명 불릿

• 카드 크기: 240x365px
• 상단: 이미지 (시공/설계/유지관리)
• 중간: 14px 굵은 제목 (색상으로 구분: #00aaff, #006aff, #004cbe)
• 하단: 14px 일반 설명

F. 비교 박스 2열 (2-1_02 BIM 페이지)

구조: 2개 GROUP 나란히
  ├── GROUP 327x116
  │   ├── RECTANGLE #006aff (배경)
  │   └── FRAME (그라데이션 내부)
  └── GROUP 325x116
      ├── RECTANGLE #006aff (배경)
      └── FRAME (그라데이션 내부)
+ DX/BIM/VS 라벨 (20px/w700, #ffffff)

• 파란 배경 박스 2개 나란히
• 내부에 방사형 그라데이션
• 가운데 "VS" 라벨

G. 이미지 그리드 2열 (2-1_02 BIM 페이지)

구조: 2개 GROUP 나란히
  ├── GROUP 460x354
  │   ├── RECTANGLE 그라데이션 오버레이
  │   └── RECTANGLE IMG (실제 이미지)
  └── GROUP 460x354
      ├── RECTANGLE 그라데이션 오버레이
      └── RECTANGLE IMG (실제 이미지)

• 2열 이미지 나란히 (460x354 각)
• 이미지 위에 그라데이션 오버레이 (어두워지는 효과)

H. 산맥 시각화 (2-1_02 BIM 페이지)

구조: GROUP 920x183
  ├── RECTANGLE 그라데이션 배경
  ├── GROUP 벡터 산맥 라인 (20+ VECTOR)
  └── GROUP 수직 라인 마커

• 이미지로 export (벡터 라인이 너무 복잡)

I. 원형 라벨 (2-1_02 BIM 페이지)

구조: GROUP 190x190
  ├── GROUP (원형 테두리 그룹)
  ├── ELLIPSE 151x151 그라데이션
  ├── ELLIPSE 145x145 그라데이션
  └── TEXT 20px/w700 #ffffff — "단계별 BIM의 활용"

• 중앙 큰 원 + 텍스트
• 이중 원 테두리 (그라데이션)

---

4. 블록 매핑 (Figma 패턴 → design_agent 블록)

Figma 패턴	design_agent 블록	구현 방식	상태
section_title	section-title	HTML/CSS	신규 필요
sub_제목,내용	기존 없음 → topic-header	HTML/CSS (좌:제목 우:설명)	신규 필요
카드 3열 (이미지+제목+설명)	card-grid 변형	HTML/CSS (이미지 추가)	변형 필요
비교 박스 2열	comparison	HTML/CSS	✅ 기존
이미지 그리드 2열	image-gallery	HTML + 이미지	신규 필요
원형 라벨	circle-label	CSS 원 + 텍스트	신규 필요
배경 헤더 (bg)	-	이미지 export	Figma export
산맥 시각화	-	이미지 export	Figma export
벡터 웨이브	-	이미지 export	Figma export
DX/BIM/VS 비교 라벨	comparison 내부	HTML/CSS	✅ 기존 활용

이미지로 export해야 하는 요소

요소	이유	export 형식
bg (배경 헤더)	그라데이션+웨이브+마스크	PNG (배경용)
산맥 시각화	20+ 벡터 라인	PNG 또는 SVG
이미지 오버레이 그라데이션	CSS로 가능하지만 Figma 원본이 더 정확	CSS gradient (재현 가능)
3D 렌더링 이미지	Figma 내 이미지 에셋	PNG

---

5. 디자인 토큰 업데이트 제안

기존 tokens.css에 추가가 필요한 토큰:

/* Figma 기반 추가 토큰 */
--color-accent-deep: #004cbe;     /* Figma 진한 파란 (꼭지 제목) */
--color-accent-bright: #006aff;   /* Figma 밝은 파란 (카드 헤더, 박스) */
--color-accent-sky: #6bcdff;      /* Figma 하늘색 (BIM 라벨) */
--color-accent-cyan: #00aaff;     /* Figma 시안 (설계단계) */

--font-page-title: 35px;          /* Figma 페이지 타이틀 */
--font-topic-title: 24px;         /* Figma 꼭지 제목 */
--font-card-title: 14px;          /* Figma 카드 내 제목 */
--font-en-subtitle: 15px;         /* Figma 영문 서브타이틀 */
--font-tag: 20px;                 /* Figma 태그/라벨 (DX, BIM, VS) */

---

6. 다음 단계

즉시 가능 (HTML/CSS로 구현)

1. section-title 블록 — 영문+한글 2줄 타이틀
2. topic-header 블록 — 좌:질문 우:설명 (742px, 240:422 비율)
3. card-grid 이미지 변형 — 상단 이미지 + 하단 텍스트
4. image-gallery 블록 — 2열 이미지 + 오버레이
5. circle-label 블록 — CSS 원형 + 중앙 텍스트

Figma에서 이미지 export 필요

1. 배경 헤더 (bg) — 각 프레임의 상단 파란 영역
2. 산맥/웨이브 시각화
3. 3D 렌더링 이미지 (시공, 설계, 유지관리 등)
4. 아이콘 에셋

AI 이미지 생성 영역 (레이어 방식)

1. 순환도/관계도 배경
2. 3D 효과가 필요한 다이어그램
3. 복합 시각 효과 (글로우, 보케, 입체)