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>
197 lines
12 KiB
Markdown
197 lines
12 KiB
Markdown
# Frame 1171281190 — 전체 Leaf 노드 플래튼
|
||
|
||
> 원본: 2123.13 × 724 px
|
||
> Scale: × 0.60290 → 1280 × 436.5 px
|
||
> 모든 좌표는 **프레임 원점(0,0) 기준 절대 좌표**
|
||
|
||
## 계층 경로 → 절대 좌표 누적
|
||
|
||
```
|
||
Frame 45:15 (0,0)
|
||
└─ Group 33:52 (0,0) → 누적 (0,0)
|
||
├─ Group "오른쪽 하단" (0,129) → 누적 (0,129)
|
||
│ ├─ Group "기술" (0,0) → 누적 (0,129)
|
||
│ ├─ Group "사람" (715.04,0) → 누적 (715.04,129)
|
||
│ └─ Group "자연" (1429,0) → 누적 (1429,129)
|
||
├─ Group "기술(디지털)" label (0,250) → 누적 (0,250)
|
||
├─ Group "사람(역량)" label (715,294) → 누적 (715,294)
|
||
├─ Group "자연(여건)" label (1429,294) → 누적 (1429,294)
|
||
├─ TEXT "필수조건" (75,0) → 누적 (75,0)
|
||
└─ FRAME icon (0,13) → 누적 (0,13)
|
||
```
|
||
|
||
---
|
||
|
||
## STEP 1: 전체 Leaf 노드 목록 (절대 좌표)
|
||
|
||
### 1-A. 타이틀 영역
|
||
|
||
| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 폰트 | 색상/fills |
|
||
|---|-----|------|-----------|-------|-------|---|---|------|-----------|
|
||
| 1 | 17:1395 | TEXT | **필수조건** | 75 | 0 | 984 | 98 | 700 70px lh1.448 | gradient(#000→#883700) + shadow(0 0 4px #322C1E) |
|
||
| 2 | 17:1399 | RECT(IMG) | 1자산 4@2x (아이콘) | 0 | 13 | 50 | 50 | — | imageRef: b0e9fad5... |
|
||
|
||
### 1-B. 열1 "기술" (부모 abs: 0, 129)
|
||
|
||
| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-----------|-------|-------|---|---|------|
|
||
| 3 | 17:1266 | RECT | 색상바 | 0 | 129 | 152.5 | 595 | gradient(#0D78D0→#023056) |
|
||
| 4 | 17:1267 | TEXT | 깊은 기반\n(건설산업, 토목) 지식 | 171.89 | 159.01 | 488 | 93.13 | 700 45px lh1 / gradient(#0D78D0→#134D7F) / stroke #FFF 1.5px |
|
||
| 5 | 17:1269 | TEXT | [4번과 동일 — 중복 노드] | 171.89 | 159.01 | 488 | 93.13 | 동일 위치, 동일 내용 → 렌더링 시 1개만 |
|
||
| 6 | 17:1270 | TEXT | [4번과 동일 — 중복 노드] | 171.89 | 159.01 | 488 | 93.13 | 동일 위치, 동일 내용 → 렌더링 시 1개만 |
|
||
| 7 | 17:1272 | TEXT | 건설단계별 근본적인 이해와\n경험이 기반된 높은 전문지식 보유 | 171.9 | 286.29 | 518.25 | 140 | 500 35px lh1.286 / #3E3523 / 부모 FRAME(171.9,286.29) 518.49×144.87 |
|
||
| 8 | 17:1268 | TEXT | 높은 S/W 기술\n(Digital Technology) | 171.89 | 451.34 | 488.38 | 93.13 | 700 45px lh1 / gradient(#0D78D0→#023056) / stroke #FFF 2px |
|
||
| 9 | 17:1274 | TEXT | 다양한 기술적도구(S/W,H/W)와\nProcess의 효과적인 통합 | 171.9 | 569.82 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 / 부모 FRAME(171.9,569.82) 518.49×144.87 |
|
||
| 10 | 17:1281 | TEXT | **技** | 90.65 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 11 | 17:1280 | TEXT | **術** | 90.65 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 12 | 17:1275 | SVG | Vector 927 (상단 가로선) | 0 | 129 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 13 | 17:1276 | SVG | Vector 928 (하단 가로선) | 0 | 722.97 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 14 | 17:1277 | SVG | Vector 929 (중간 가로 점선) | 152.5 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 |
|
||
| 15 | 17:1278 | SVG | Vector 931 (중간 짧은 점선) | 76.25 | 427.02 | 76.25 | 0 | stroke #84D1F4 2px dashed 4,4 |
|
||
| 16 | 17:1279 | SVG | Vector 930 (세로 점선) | 76.25 | 130.03 | 0 | 593.97 | stroke #84D1F4 2px dashed 4,4 |
|
||
|
||
### 1-C. 열2 "사람" (부모 abs: 715.04, 129)
|
||
|
||
| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-----------|-------|-------|---|---|------|
|
||
| 17 | 17:1298 | RECT | 색상바 | 715.04 | 129 | 152.5 | 595 | gradient(#FF9A23→#CC5200) |
|
||
| 18 | 17:1299 | TEXT | 분야별 전문지식\n역량을 갖춘 기술자 | 886.92 | 159.01 | 448.67 | 109.48 | 700 45px lh1 / gradient(#FE900C→#D18B37) / stroke #FFF 2px |
|
||
| 19 | 17:1302 | TEXT | 엔지니어의 Know-how와\n디지털지식이 융합된 지식의 축적 | 886.94 | 286.29 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 |
|
||
| 20 | 17:1300 | TEXT | 디지털화 역량 및\n개발경험 많은 개발자 | 886.92 | 451.34 | 501.52 | 139.7 | 700 45px lh1 / gradient(#F58806→#CE7914) / stroke #FFF 2px |
|
||
| 21 | 17:1304 | TEXT | 다양한 형태의 Solution S/W\n개발 역량 Programmer | 886.94 | 569.76 | 530.02 | 140 | 500 35px lh1.286 / #3E3523 |
|
||
| 22 | 17:1311 | TEXT | **人** | 805.69 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 23 | 17:1310 | TEXT | **材** | 805.69 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 24 | 17:1305 | SVG | Vector 927 (상단 가로선) | 715.04 | 129 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 25 | 17:1306 | SVG | Vector 928 (하단 가로선) | 715.04 | 722.97 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 26 | 17:1307 | SVG | Vector 929 (중간 가로 점선) | 867.54 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 |
|
||
| 27 | 17:1308 | SVG | Vector 931 (중간 짧은 점선) | 791.29 | 427.02 | 76.25 | 0 | stroke #FFF 2px dashed 4,4 |
|
||
| 28 | 17:1309 | SVG | Vector 930 (세로 점선) | 791.29 | 130.03 | 0 | 593.97 | stroke #FFF 2px dashed 4,4 |
|
||
|
||
### 1-D. 열3 "자연" (부모 abs: 1429, 129)
|
||
|
||
| # | ID | 타입 | 이름/텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-----------|-------|-------|---|---|------|
|
||
| 29 | 17:1283 | RECT | 색상바 | 1429 | 129 | 152.5 | 595 | gradient(#39BE49 21%→#23742C) |
|
||
| 30 | 17:1284 | TEXT | 받아들일 수 있는\n사회·기업·제도 등의 여건 | 1600.89 | 159.01 | 522.24 | 93.13 | 700 45px lh1 / gradient(#3CA649 21%→#23742C) / stroke #FFF 2px |
|
||
| 31 | 17:1287 | TEXT | 목표설정형 지침에서 탈피하여\n수행사례, 효과검증을 통해 시행 | 1600.9 | 286.29 | 479.83 | 140 | 500 35px lh1.286 / #3E3523 |
|
||
| 32 | 17:1285 | TEXT | 지속적·장기적 투자를\n수행할 능력과 의지 | 1600.89 | 451.34 | 521.84 | 93.13 | 700 45px lh1 / gradient(#3CA649→#23742C) / stroke #FFF 2px |
|
||
| 33 | 17:1289 | TEXT | 기술 개발을 위한 대규모 투자 및 Process 혁신을 위한 지속적인 투자 | 1600.9 | 569.82 | 517.77 | 140 | 500 35px lh1.286 / #3E3523 |
|
||
| 34 | 17:1296 | TEXT | **天** | 1519.65 | 165.71 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 35 | 17:1295 | TEXT | **地** | 1519.65 | 469.44 | 42.36 | 217.3 | 700 50px lh4.2 center / #FFF |
|
||
| 36 | 17:1290 | SVG | Vector 927 (상단 가로선) | 1429 | 129 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 37 | 17:1291 | SVG | Vector 928 (하단 가로선) | 1429 | 722.97 | 688.77 | 0 | stroke #000 2px solid |
|
||
| 38 | 17:1292 | SVG | Vector 929 (중간 가로 점선) | 1581.5 | 427.02 | 536.28 | 0 | stroke #000 2px dashed 4,4 |
|
||
| 39 | 17:1293 | SVG | Vector 931 (중간 짧은 점선) | 1505.25 | 427.02 | 76.25 | 0 | stroke #FFF 2px dashed 4,4 |
|
||
| 40 | 17:1294 | SVG | Vector 930 (세로 점선) | 1505.25 | 130.03 | 0 | 593.97 | stroke #FFF 2px dashed 4,4 |
|
||
|
||
### 1-E. 세로 라벨 (열 위에 오버레이)
|
||
|
||
#### "기술(디지털)" 라벨 그룹 (abs: 0, 250)
|
||
|
||
| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-------|-------|-------|---|---|------|
|
||
| 41 | 17:1375 | TEXT | 기\n술 | 17.79 | 250 | 37.03 | 120 | 700 50px lh1.2 center / #FFF |
|
||
| 42 | 17:1376 | TEXT | 디지털 | 17.79 | 398.05 | 37.03 | 180 | 700 50px lh1.2 center / #FFF |
|
||
| 43 | 17:1377 | TEXT | ( | 12 | 379 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
| 44 | 17:1378 | TEXT | ( | 0 | 584 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
|
||
#### "사람(역량)" 라벨 그룹 (abs: 715, 294)
|
||
|
||
| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-------|-------|-------|---|---|------|
|
||
| 45 | 17:1380 | TEXT | 사\n람 | 732.83 | 294 | 37.03 | 120 | 700 50px lh1.2 center / #FFF |
|
||
| 46 | 17:1381 | TEXT | 역량 | 732.83 | 442 | 37.03 | 120 | 700 50px lh1.2 center / #FFF |
|
||
| 47 | 17:1382 | TEXT | ( | 727 | 423 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
| 48 | 17:1383 | TEXT | ( | 715 | 568 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
|
||
#### "자연(여건)" 라벨 그룹 (abs: 1429, 294)
|
||
|
||
| # | ID | 타입 | 텍스트 | abs X | abs Y | W | H | 비고 |
|
||
|---|-----|------|-------|-------|-------|---|---|------|
|
||
| 49 | 17:1385 | TEXT | 자연 | 1446.79 | 294 | 37.03 | 120 | 700 50px lh1.2 center / #FFF |
|
||
| 50 | 17:1386 | TEXT | 여건 | 1446.79 | 442 | 37.03 | 120 | 700 50px lh1.2 center / #FFF |
|
||
| 51 | 17:1387 | TEXT | ( | 1441 | 423 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
| 52 | 17:1388 | TEXT | ( | 1429 | 568 | 60 | 19 | 700 50px lh1.2 center / #FFF |
|
||
|
||
---
|
||
|
||
## STEP 2: 패턴 분석 (bottom-up 그룹핑)
|
||
|
||
### Level 0: 중복 제거
|
||
- #5, #6 (17:1269, 17:1270)은 #4 (17:1267)와 동일 위치/내용 → **제거** (Figma 복사 흔적)
|
||
- 유효 leaf 노드: **50개** (52 - 2중복)
|
||
|
||
### Level 1: 최소 단위 묶음 (2개씩)
|
||
|
||
```
|
||
[묶음 A] 항목 = 제목 + 설명
|
||
A1: #4 "깊은 기반..." + #7 "건설단계별..." ← 기술/상단항목
|
||
A2: #8 "높은 S/W..." + #9 "다양한 기술적도구..." ← 기술/하단항목
|
||
A3: #18 "분야별..." + #19 "엔지니어의..." ← 사람/상단항목
|
||
A4: #20 "디지털화..." + #21 "다양한 형태의..." ← 사람/하단항목
|
||
A5: #30 "받아들일..." + #31 "목표설정형..." ← 자연/상단항목
|
||
A6: #32 "지속적..." + #33 "기술 개발을..." ← 자연/하단항목
|
||
|
||
[묶음 B] 한자 쌍
|
||
B1: #10 "技" + #11 "術" ← 기술 바 안 한자
|
||
B2: #22 "人" + #23 "材" ← 사람 바 안 한자
|
||
B3: #34 "天" + #35 "地" ← 자연 바 안 한자
|
||
|
||
[묶음 C] 테두리선 세트 (열당 5개)
|
||
C1: #12,#13,#14,#15,#16 ← 기술 열 선
|
||
C2: #24,#25,#26,#27,#28 ← 사람 열 선
|
||
C3: #36,#37,#38,#39,#40 ← 자연 열 선
|
||
|
||
[묶음 D] 세로 라벨
|
||
D1: #41 "기\n술" + #42 "디지털" + #43,#44 괄호 ← 기술 라벨
|
||
D2: #45 "사\n람" + #46 "역량" + #47,#48 괄호 ← 사람 라벨
|
||
D3: #49 "자연" + #50 "여건" + #51,#52 괄호 ← 자연 라벨
|
||
```
|
||
|
||
### Level 2: 중간 단위 (열 구성)
|
||
|
||
```
|
||
[열1 기술] = 색상바(#3) + 한자(B1) + 상단항목(A1) + 하단항목(A2) + 선(C1) + 라벨(D1)
|
||
[열2 사람] = 색상바(#17) + 한자(B2) + 상단항목(A3) + 하단항목(A4) + 선(C2) + 라벨(D2)
|
||
[열3 자연] = 색상바(#29) + 한자(B3) + 상단항목(A5) + 하단항목(A6) + 선(C3) + 라벨(D3)
|
||
```
|
||
|
||
### Level 3: 전체 블록
|
||
|
||
```
|
||
[블록] = 타이틀(#1 "필수조건" + #2 아이콘) + 열1 + 열2 + 열3
|
||
```
|
||
|
||
---
|
||
|
||
## STEP 3: 공통 타이포그래피 정리
|
||
|
||
| 용도 | 폰트 | 굵기 | 크기 | 행간 | 정렬 |
|
||
|------|------|------|------|------|------|
|
||
| 메인 타이틀 "필수조건" | Noto Sans KR | 700 | 70px | 1.448em | LEFT/TOP |
|
||
| 항목 제목 (그라데이션) | Noto Sans KR | 700 | 45px | 1em | LEFT/TOP |
|
||
| 항목 설명 (본문) | Noto Sans KR | 500 | 35px | 1.286em | LEFT/TOP |
|
||
| 한자 (바 안) | Noto Sans KR | 700 | 50px | 4.2em | CENTER |
|
||
| 세로 라벨 | Noto Sans KR | 700 | 50px | 1.2em | CENTER |
|
||
|
||
## STEP 4: 공통 색상 정리
|
||
|
||
| 용도 | 색상 |
|
||
|------|------|
|
||
| 기술 바 | gradient(#0D78D0 → #023056) |
|
||
| 기술 제목 상단 | gradient(#0D78D0 → #134D7F) |
|
||
| 기술 제목 하단 | gradient(#0D78D0 → #023056) |
|
||
| 사람 바 | gradient(#FF9A23 → #CC5200) |
|
||
| 사람 제목 상단 | gradient(#FE900C → #D18B37) |
|
||
| 사람 제목 하단 | gradient(#F58806 → #CE7914) |
|
||
| 자연 바 | gradient(#39BE49 21% → #23742C) |
|
||
| 자연 제목 상단 | gradient(#3CA649 21% → #23742C) |
|
||
| 자연 제목 하단 | gradient(#3CA649 → #23742C) |
|
||
| 설명 텍스트 | #3E3523 |
|
||
| 흰색 (한자, 라벨, 스트로크) | #FFFFFF |
|
||
| 테두리 실선 | #000000 |
|
||
| 기술 열 세로/짧은점선 | #84D1F4 |
|
||
| 사람/자연 열 세로/짧은점선 | #FFFFFF |
|
||
| 타이틀 그라데이션 | gradient(#000 → #883700) |
|
||
| 타이틀 쉐도우 | 0 0 4px #322C1E |
|