kyeongmin
beb5fd0c61
- 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>
108 lines
6.4 KiB
Markdown
108 lines
6.4 KiB
Markdown
# 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 |
|