# 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 |