kyeongmin
9fbe3ac90c
전체 401 files (397 추가 + 4 수정), 14304 insertions.
추가:
- figma_to_html_agent/blocks/ — Figma 변환 결과 (32 frame, ~79MB).
각 frame folder = {analysis.md, flat.md, texts.md, index.html, assets/,
_renders/, _render.py, RELATIONSHIPS.md / STATUS.md / classification.md
(일부 frame)}.
Phase Z 의 *figma source layer* — runtime 에서 직접 사용 X, contract /
partial / builder adapter (미래 axis A) 의 source.
- figma_to_html_agent/DISCUSSION-SUMMARY-20260411.md — 변환 설계 회의 기록.
- figma_to_html_agent/HARNESS.md — 변환 검증 harness.
- figma_to_html_agent/scripts/fetch_figma_screenshots.py — Figma 스크린샷 자동 수집.
수정:
- figma_to_html_agent/PROCESS-CONTROL.md / PROCESS.md / RULES.md —
변환 프로세스 / 룰 갱신 (R8/R9 lock 강화 등).
- figma_to_html_agent/blocks_index.md — 32 frame 인덱스 갱신.
Phase Z 영향 0 (figma_to_html_agent/blocks/ 가 V4 catalog +
templates/phase_z2/families adapter 의 source — runtime 에서 직접 import X).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
131 lines
7.8 KiB
HTML
131 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>S/W 개발 방향 다이어그램 (Frame 1171281172)</title>
|
||
<!--
|
||
Frame: 145:8352, 1579×981 px
|
||
Scale: 1280 / 1579 = 0.81064
|
||
패턴: circular-nodes-6
|
||
구조: 2D 다이어그램 → absolute + R19 zoom
|
||
텍스트 라벨: design_context center 좌표 + translate(-50%,-50%)
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { margin:0; padding:0; box-sizing:border-box; }
|
||
body {
|
||
font-family: 'Noto Sans KR', sans-serif;
|
||
background: #e8ecf0;
|
||
display: flex; justify-content: center; align-items: center;
|
||
min-height: 100vh;
|
||
}
|
||
.slide {
|
||
width: 1280px;
|
||
background: #fff; position: relative;
|
||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||
}
|
||
.block { width: 1280px; position: relative; overflow: hidden; }
|
||
.inner {
|
||
width: 1579px; height: 981px;
|
||
zoom: 0.81064; /* R19 */
|
||
position: relative;
|
||
}
|
||
.abs { position: absolute; }
|
||
.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
.node-label {
|
||
position: absolute;
|
||
transform: translate(-50%, -50%);
|
||
font-weight: 700; font-size: 45px; line-height: 60px;
|
||
color: #fff; text-align: center;
|
||
text-shadow: 0 0 4px rgba(0,0,0,0.5);
|
||
word-break: keep-all;
|
||
}
|
||
/* 회전 래퍼 */
|
||
.rot-wrap {
|
||
position: absolute; display: flex; align-items: center; justify-content: center;
|
||
}
|
||
.rot-wrap img { display: block; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 배경 -->
|
||
<div class="rot-wrap" style="left:0; top:37.26px; width:1579.22px; height:910.34px;">
|
||
<div style="flex:none; transform:rotate(-8.84deg);"><img src="assets/0b6599f832b0f69b2038ead1ba6d95cdcc42c4cf.png" style="width:1490.97px; height:689.31px;"></div>
|
||
</div>
|
||
<div class="rot-wrap" style="left:158.1px; top:144px; width:1237.22px; height:713.19px;">
|
||
<div style="flex:none; transform:rotate(-8.84deg);"><img src="assets/93b81ffe48e6fca68e58cef7a84def27cf91469e.png" style="width:1168.08px; height:540.03px; opacity:0.5;"></div>
|
||
</div>
|
||
|
||
<!-- 중앙 이미지 -->
|
||
<div class="abs" style="left:490px; top:262px; width:622px; height:437px;"><img src="assets/a902e39ab83c931afd5c93afcab26780b7d330b9.png"></div>
|
||
<div class="abs" style="left:557px; top:323px; width:488px; height:287px;"><img src="assets/75bcffb34242270e352ef1b44dea1a9b6f3f4b7c.png"></div>
|
||
|
||
<!-- 장식 원 (동일 이미지 ×6) -->
|
||
<div class="abs" style="left:40.32px; top:294.18px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
<div class="abs" style="left:179.73px; top:698.58px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
<div class="abs" style="left:568px; top:5px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
<div class="abs" style="left:1150.97px; top:5px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
<div class="abs" style="left:1253.51px; top:432.44px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
<div class="abs" style="left:756.95px; top:670.93px; width:278.81px; height:278.81px;"><img src="assets/c6aa15ac498406ca8f65ac71b1585a13002cd194.png"></div>
|
||
|
||
<!-- 연결선 이미지들 -->
|
||
<div class="abs" style="left:331.81px; top:236.58px; width:261.53px; height:142.86px;"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png"></div>
|
||
<div class="rot-wrap" style="left:867.24px; top:46.26px; width:297.47px; height:240.63px;">
|
||
<div style="flex:none; transform:rotate(25.2deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||
</div>
|
||
<div class="rot-wrap" style="left:993.13px; top:587.98px; width:273.91px; height:167.03px;">
|
||
<div style="flex:none; transform:rotate(-174.56deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||
</div>
|
||
<div class="rot-wrap" style="left:462px; top:698.58px; width:294.72px; height:224.14px;">
|
||
<div style="flex:none; transform:rotate(-159.87deg);"><img src="assets/a33ed237bbe2afff43a5bc9100be50c2331b6005.png" style="width:261.53px; height:142.86px;"></div>
|
||
</div>
|
||
<div class="rot-wrap" style="left:85.26px; top:587.98px; width:112.78px; height:196.81px;">
|
||
<div style="flex:none; transform:rotate(-10.33deg);"><img src="assets/c21d9171275fc89f4db34d42d455fa41a006b348.png" style="width:80.85px; height:185.32px;"></div>
|
||
</div>
|
||
<div class="rot-wrap" style="left:1403.29px; top:246.32px; width:81.83px; height:185.74px;">
|
||
<div style="flex:none; transform:rotate(-179.69deg);"><img src="assets/c21d9171275fc89f4db34d42d455fa41a006b348.png" style="width:80.85px; height:185.32px;"></div>
|
||
</div>
|
||
|
||
<!-- 노드 배경 + 아이콘 + 라벨 ×6 -->
|
||
<!-- 1: 기술기반 중요성 -->
|
||
<div class="abs" style="left:35px; top:290px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:75px; top:332px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:180.03px; top:436.21px;">기술기반<br>중요성</div>
|
||
|
||
<!-- 2: 디지털전환 직관지 역할 -->
|
||
<div class="abs" style="left:174px; top:691px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:214px; top:733px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:319.03px; top:837.21px;">디지털전환<br>직관지 역할</div>
|
||
|
||
<!-- 3: 품질향상 & 호환성 -->
|
||
<div class="abs" style="left:751px; top:665px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:791px; top:707px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:896.03px; top:811.21px; line-height:45px;">품질향상<br>&<br>호환성</div>
|
||
|
||
<!-- 4: 기존 S/W 한계 인식 -->
|
||
<div class="abs" style="left:1249px; top:427px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:1289px; top:469px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:1394.03px; top:573.21px;">기존 S/W<br>한계 인식</div>
|
||
|
||
<!-- 5: S/W 개발목표 설정 -->
|
||
<div class="abs" style="left:1148px; top:0; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:1188px; top:42px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:1293.03px; top:146.21px;">S/W<br>개발목표<br>설정</div>
|
||
|
||
<!-- 6: 융합의 필요성 -->
|
||
<div class="abs" style="left:562px; top:1px; width:290px; height:290px;"><img src="assets/311e27c78b94633cbcdbdebf4f4382b3944947c0.png"></div>
|
||
<div class="abs" style="left:602px; top:43px; width:208px; height:208px;"><img src="assets/63887534bb17277ead4cfd833ab7ce939d9324d0.png"></div>
|
||
<div class="node-label" style="left:707.03px; top:147.21px;">융합의<br>필요성</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|