Kyeongmin/C.E.L_Slide_test2

Files

kyeongmin 9bd9dad9ac IMPROVEMENT Phase A~D + Phase 2 전체 반영

## IMPROVEMENT (Phase A~D)
- A-1: 4단계 Sonnet 디자인 조정 (_adjust_design) — CSS 변수 cascade
- A-2: 5단계 HTML 전문 프롬프트 전달
- A-3: shrink/expand 하드코딩 제거 → Sonnet target_ratio 기반
- A-4: rewrite action 구현
- A-5: overflow: visible (area 레벨 텍스트 잘림 방지)
- A-6: object-fit cover → contain (이미지 crop 방지)
- A-7: table-layout: fixed
- A-8: container query 폰트 스케일링
- B-1: details-block 템플릿 신규 (CSS 변수만 사용)
- B-2: 인쇄 시 details 자동 펼침 JS
- B-3: catalog에 details-block 등록
- B-4/B-5: images[]/tables[] 상세 판단 + fallback 3곳 동기화
- B-8: fallback card-grid → topic-header + char_guide 제거
- C-1: CLAUDE.md gradient 원칙 완화
- C-3: border-radius 9개 파일 var(--radius) 통일
- C-4: box-shadow 2레벨 → 1레벨
- D-0: 이미지 경로 입력 UI + API base_path
- D-1: Pillow 의존성 + image_utils.py
- D-2~D-4: 이미지 비율/축소방지 프롬프트 전달
- D-5: HTML에 이미지 base64 삽입

## Phase 2 (다른 Claude 작업)
- P2-A: FAISS 블록 검색 (bge-m3, 46개 블록)
- P2-B: SVG N개 자동 배치 (svg_calculator.py)
- P2-C: Opus 블록 추천 (Kei API 경유)
- P2-D: 5단계 재검토 루프 강화 (MAX_REVIEW_ROUNDS=2)
- P2-E: details-block fallback 연동

## 버그 수정 (BF-8~10)
- BF-8: 컨테이너 예산 기반 블록 배치
- BF-9: grid와 Sonnet 역할 분리
- BF-10: catalog mtime 캐시 자동 갱신

## 블록 라이브러리
- 46개 블록 (6 카테고리), catalog/BLOCK_SLOTS/INDEX 동기화
- 구 블록 제거 (quote-block, card-grid, comparison)
- 13개 _legacy 블록 보존

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-03-25 18:40:20 +09:00

9.8 KiB

Raw Blame History

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로 구현)

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

Figma에서 이미지 export 필요

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

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

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

9.8 KiB Raw Blame History

Figma 디자인 분석 보고서

파일 정보

1. 전체 구조

메인 페이지 (3장)

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

2. 추출된 디자인 토큰

색상 팔레트

폰트 체계

간격/크기

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

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

A. section_title (섹션 타이틀)

B. bg (배경 헤더)

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

D. close 버튼

콘텐츠 컴포넌트

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

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

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

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

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

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

이미지로 export해야 하는 요소

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

6. 다음 단계

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

Figma에서 이미지 export 필요

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

9.8 KiB

Raw Blame History