Kyeongmin/Figma-to-HTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
Figma-to-HTML/block-tests/frame_1171281211_flat.md
kyeongmin beb5fd0c61 Figma-to-HTML 에이전트 초기 커밋 
- 10단계 변환 프로세스 (PROCESS.md)
- 수학 공식 레퍼런스 (MATH.md, gradient_math.py)
- CSS 보정 규칙 R1~R16 (RULES.md)
- 작업 규율 7개 규칙 (PROCESS-CONTROL.md)
- 8개 Figma 프레임 1:1 HTML 변환물 (block-tests/)
- 8개 Jinja2 템플릿 staging (templates_staging/)
- 변환 완료 도서관 + 디자인 인사이트 (blocks_index.md)
- 사용법 가이드 (README.md)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-13 11:16:33 +09:00

6.4 KiB
Raw Permalink Blame History

Frame 1171281211 — BIM 3-Circles (건설산업의 목표)

원본: 2062.205 × 956.998 px Scale: × 0.620694 → 1280 × 593.96 px (슬라이드 16:9 안에 배치) Node ID: 66:310 (Figma) 전략: CSS transform: scale() 균일 축소 → 내부는 Figma 원본 좌표계 유지

계층 경로

Frame 66:310 "Frame 1171281211" (2062.21 × 956.998)
├─ 배경 이미지 64:244 "1자산 8@4x 1" (139, 683) 1768×274 mix-blend-multiply
├─ 데코 그룹 66:306 "Frame 1171281208" (71, 38) 685.48×836.28 rotate(-120°)
│   └─ 66:309 "Frame 1171281211" (inner) 763×351 scaleY(-1)
│       └─ 64:245 Rectangle 42333 763×351 rounded-bl/tl 175.5 linear-gradient
│
├─ [메인 3원] 안전과 품질 (top)
│   ├─ 64:251 Ellipse 589 outer (853, 206) 350×350  linear #FDC69E→#E0782C plus-darker
│   ├─ 64:252 Ellipse 590 ring (887.06, 240.06) 280×280 (viewBox 310 inset -5.36%)
│   │        3×linear orange + white 5px stroke + drop-shadow blur 5
│   └─ 64:253 text "안전과 품질" center (1027.92, 387.53) w262.92 h114.08
│           font 50 bold white lh 50 tracking -2.5 text-shadow 0 0 5 #cc5200
│
├─ [메인 3원] 생산성 향상 (bottom-left)
│   ├─ 64:247 Ellipse 591 outer (694, 480) 350×350 linear #D5AA89→#737373 plus-darker
│   ├─ 64:248 Ellipse 592 ring (728.06, 514.06) 280×280 (inset -3.57%)
│   │        linear #897445→#3E3523 + white 5px stroke
│   └─ 64:249 text "생산성 향상" center (868.92, 661.53) w262.92 h114.08
│
├─ [메인 3원] 소통과 신뢰 (bottom-right)
│   ├─ 64:255 Ellipse 585 outer (1009, 480) 350×350 linear white→#253E1F plus-darker
│   ├─ 64:256 Ellipse 586 ring (1043.06, 514.06) 280×280 (inset -3.57%)
│   │        linear #296B55→#123328 + white 5px stroke
│   └─ 64:257 text "소통과 신뢰" center (1185.09, 654.49) w262.92 h114.08
│
├─ [액센트 6개, 130.9 outer + 78.96 inner (viewBox 102.97 inset -15.2%) + 한자]
│   ├─ 64:288~290 安 outer (859, 22)  / inner (884.47, 47.47) / text (875.25, 63.60)
│   ├─ 64:292~294 質 outer (1071, 22) / inner (1096.47, 47.47)/ text (1087.25, 63.60)
│   ├─ 64:279~281 速 outer (555, 483) / inner (580.47, 508.47)/ text (571.25, 524.60)
│   ├─ 64:283~285 利 outer (555, 689) / inner (580.47, 714.47)/ text (571.25, 730.60)
│   ├─ 64:296~298 通 outer (1372, 483)/ inner (1397.47, 508.47)/ text (1388.25, 524.60)
│   └─ 64:300~302 信 outer (1372, 689)/ inner (1397.47, 714.47)/ text (1388.25, 730.60)
│     outer: yellow-orange 탑(安質) / khaki 좌(速利) / green 우(通信), plus-darker 0.3
│     inner: 3×orange(安質) / dark khaki(速利) / dark green(通信) + white 2px stroke + drop-shadow
│     한자: font 45 bold white lh 50 tracking -2.25 text-shadow 0 0 5 #cc5200
│
├─ [연결 아크 3개, PNG]
│   ├─ 64:276 Ellipse 599 wrapper (926, 134) 209×99  rotate(180)   [안-질 사이]
│   ├─ 64:277 Ellipse 597 wrapper (627, 549) 99×209 ← 209×99 rot90  [速利 쪽 아크]
│   └─ 64:286 Ellipse 600 wrapper (1329, 549) 99×209 ← 209×99 rot-90 [通信 쪽 아크]
│
└─ [텍스트 라벨 12개]
    # 상단 (top=0, font 40 bold #cc5200 lh95 + desc font 30 medium #525151 lh35)
    ├─ 64:275 "안전성 제고"    (645, 0)  w194 h95    text-right
    ├─ 64:274 "시설물의..."    (331, 78) w508.48 h91 text-right (2줄)
    ├─ 64:272 "품질 향상"      (1233, 0) w157 h95    text-right
    ├─ 64:271 "Copy&Paste..."  (1233, 78) w508.48 h91  text-left (2줄)
    # 좌측 (font 40 bold #604f32 + desc #525151)
    ├─ 64:266 "신속ㆍ정확성 증진"    (0, 456) w531.39 h95.35 text-right
    ├─ 64:265 "Analogue..."          (52.01, 546) w478.73 h70.56 text-right (2줄)
    ├─ 64:269 "비용저감ㆍ부가가치 창출" (84.67, 661.79) w446.05 h96.42 text-right (flex-center)
    ├─ 64:268 "건설비용..."          (102.02, 734) w428.31 h91.34 text-right (2줄, flex-center)
    # 우측 (font 40 bold #124133 + desc #525151)
    ├─ 64:263 "소통ㆍ이해 원할"      (1518, 456) w267.02 h95  text-left
    ├─ 64:262 "성과품..."            (1518, 541) w429.01 text-left (2줄)
    ├─ 64:260 "신뢰ㆍ투명성 강화"    (1518, 664) w304.02 h95  text-left
    └─ 64:259 "3D 모델..."           (1518, 754.21) w544.2 h70.56 text-left (2줄, flex-center)

이상 탐지 결과 (STEP 3)

검사 결과
회전 단일문자 (bbox반전) 없음 — 한자 6개는 98.33×42.67로 가로 > 세로 정상
좁은 박스 세로배치 없음
중복 노드 (동일 좌표+내용) 없음
특수 line-height desc 2줄 lh=35 on font 30 → Noto content_area(1.448) 초과 불가, descender 5px 클리핑 위험 → padding-bottom 5px 보정
Vector 좌표 이상 64:276/64:277/64:286 arc의 metadata bbox와 React wrapper bbox 불일치 → React wrapper 좌표 신뢰 (Figma 회전 변환이 반영된 렌더 좌표)

스케일 계산 (STEP 5)

Scale = 1280 / 2062.205 = 0.6206940...
블록 높이 = 956.998 × 0.6206940 = 593.96 px

구현 방식: CSS transform: scale(0.620694)로 내부 컨테이너 균일 축소. 모든 내부 요소는 Figma 원본 좌표계(px)를 그대로 사용. 폰트/여백/그림자 모두 비율대로 축소됨.

에셋 (assets/frame_1171281211/)

파일 용도 원본 크기
bg_texture.png 배경 텍스처 (mix-blend-multiply) 1768×274
arc_top.png 안-질 연결 아크 209×99
arc_side.png 좌/우 연결 아크 (양쪽 공용) 209×99
big_fill_safety.svg / big_ring_safety.svg 안전과 품질 베이스/링 350 / 310
big_fill_productivity.svg / big_ring_productivity.svg 생산성 향상 베이스/링 350 / 300
big_fill_trust.svg / big_ring_trust.svg 소통과 신뢰 베이스/링 350 / 300
acc_outer_safety.svg 안/질 액센트 outer (노랑→오렌지) 130.9
acc_outer_speed.svg 속/리 액센트 outer (탠→그레이) 130.9
acc_outer_comm.svg 통/신 액센트 outer (다크그린) 130.9
acc_inner_safety.svg 安 inner (오렌지) 102.97
acc_inner_quality.svg 質 inner (오렌지) 102.97
acc_inner_speed.svg 速 inner (다크 카키) 102.97
acc_inner_profit.svg 利 inner (다크 카키) 102.97
acc_inner_comm.svg 通/信 inner (다크 그린) 102.97
Reference in New Issue View Git Blame Copy Permalink