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

12 KiB
Raw Permalink Blame History

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
Reference in New Issue View Git Blame Copy Permalink