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>
185 lines
13 KiB
HTML
185 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>System 구성 H/W + S/W (Frame 1171281178)</title>
|
||
<!--
|
||
Frame: 145:8394, 2446×1943 px
|
||
Scale: 1280 / 2446 = 0.52331
|
||
패턴: system-config-hw-sw
|
||
구조: 2D 복합 레이아웃 → absolute + R19 zoom
|
||
좌: H/W 7항목, 우: S/W 6항목, 중앙: BIG Room
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;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; word-break: keep-all;
|
||
}
|
||
.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: 2446px; height: 1943px;
|
||
zoom: 0.52331; /* R19 */
|
||
position: relative;
|
||
}
|
||
.abs { position: absolute; }
|
||
.abs img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||
|
||
/* 라벨 바 (CSS gradient) */
|
||
.hw-bar {
|
||
position: absolute; height: 52.44px;
|
||
background: linear-gradient(to right, rgba(255,255,255,0.5), #adb0af);
|
||
border-radius: 0 40px 40px 0;
|
||
}
|
||
.sw-bar {
|
||
position: absolute; height: 48.41px;
|
||
background: linear-gradient(to right, #fbefe8, #f8ae7c);
|
||
border-radius: 0 40px 40px 0;
|
||
}
|
||
.bar-label {
|
||
position: absolute; transform: translateY(-50%);
|
||
font-weight: 700; font-size: 40px; line-height: normal;
|
||
color: #000; display: flex; align-items: center; gap: 10px;
|
||
}
|
||
.bar-label img { width: 28px; height: 29px; flex: none; }
|
||
.body-text {
|
||
position: absolute;
|
||
font-weight: 500; font-size: 38px; line-height: 60px;
|
||
color: #000;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 배경 -->
|
||
<div class="abs" style="left:0; top:1577px; width:2446px; height:366px;"><img src="assets/b2accb7d555f4db0c2d35d1569011429edde1ade.png"></div>
|
||
<div class="abs" style="left:52.73px; top:77.65px; width:1144.49px; height:1819.35px;"><img src="assets/26130bd845450735906360cb922f58e3793148b7.png"></div>
|
||
<div class="abs" style="left:54.7px; top:87.74px; width:1142.52px; height:395.33px;"><img src="assets/d13b0ac6c9a0ff5028859102f433367cab26a98b.png"></div>
|
||
<div class="abs" style="left:1264.25px; top:92.78px; width:1118.86px; height:1803.21px;"><img src="assets/48d066e78784843a146e436d0edea28d91c9d007.png"></div>
|
||
<div class="abs" style="left:1264.25px; top:1509.85px; width:1118.86px; height:387.27px;"><img src="assets/151f041f6b2a897a0c3a57343474ded6aa2c720c.png"></div>
|
||
<div style="position:absolute; left:1260.31px; top:87.74px; width:1130.69px; height:391.3px; display:flex; align-items:center; justify-content:center;">
|
||
<div style="flex:none; transform:scaleY(-1);"><img src="assets/151f041f6b2a897a0c3a57343474ded6aa2c720c.png" style="width:1130.69px; height:391.3px;"></div>
|
||
</div>
|
||
<div class="abs" style="left:44.84px; top:1497.75px; width:1152.38px; height:399.37px;"><img src="assets/5c11126f4fafa3898129693842b176646a6cdec8.png"></div>
|
||
|
||
<!-- H/W 헤더 -->
|
||
<div class="abs" style="left:54.7px; top:1.01px; width:335.17px; height:87.74px;"><img src="assets/8b24ef76bacdfbd53e7ec3c4f029190aacbd722e.svg"></div>
|
||
<div style="position:absolute; left:196.65px; top:45.89px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">H/W</div>
|
||
|
||
<!-- S/W 헤더 -->
|
||
<div style="position:absolute; left:2055.83px; top:0; width:335.17px; height:87.74px; display:flex; align-items:center; justify-content:center;">
|
||
<div style="flex:none; transform:scaleY(-1) rotate(180deg);"><img src="assets/06d5951cfd9fc1902012bae433505eb88e04151b.svg" style="width:335.17px; height:87.74px;"></div>
|
||
</div>
|
||
<div style="position:absolute; left:2240.17px; top:43.87px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">S/W</div>
|
||
|
||
<!-- 중앙 원 -->
|
||
<div class="abs" style="left:883.74px; top:632.33px; width:671.18px; height:684.78px;"><img src="assets/922ee6f4bea1434652ffc08f962086052286b6c5.png"></div>
|
||
<div style="position:absolute; left:1217.79px; top:921.76px; transform:translate(-50%,-50%); text-align:center; font-weight:700; font-size:0; color:#fff;">
|
||
<p style="font-size:70px; line-height:normal; color:yellow;">System</p>
|
||
<p style="font-size:60px; line-height:normal;">구성</p>
|
||
</div>
|
||
<div style="position:absolute; left:1226.23px; top:1107.92px; transform:translate(-50%,-50%); font-weight:700; font-size:50px; color:#fff; text-align:center;">BIG Room</div>
|
||
|
||
<!-- ═══ H/W 항목 ═══ -->
|
||
|
||
<!-- Display -->
|
||
<div class="hw-bar" style="left:83.29px; top:129.09px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:151.78px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Display</div>
|
||
<div class="body-text" style="left:123.73px; top:189.6px; width:1098.3px;">범위가 넓고 긴 형태의 인프라 시설 규모에 적합한 대형 사이니지를 적용하여 벡터기반 도면, 3D정보 모델을 높은 정밀도로 표출</div>
|
||
|
||
<!-- Server & Storage -->
|
||
<div class="hw-bar" style="left:83.29px; top:361.05px; width:425.95px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:383.74px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Server & Strorage</div>
|
||
<div class="body-text" style="left:123.73px; top:414.5px; width:1042.45px;">방대한 건설현장 데이터를 안전하게 저장하고 관리, 시공 및 공정, 기성 등 데이터베이스화 하여 실시간 접근 및 효율적인 정보공유와 관리 지원</div>
|
||
|
||
<!-- Network -->
|
||
<div class="hw-bar" style="left:74.42px; top:642.42px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:667.13px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Network</div>
|
||
<div class="body-text" style="left:123.73px; top:682.76px; width:1170.22px;">네트워크 서비스를 통한 실시간 데이터 수집 및 연계, 위치기반 안전관리, SaaS 기반 실시간 데이터 공유와 관리 가능</div>
|
||
|
||
<!-- 회의시스템 -->
|
||
<div class="hw-bar" style="left:74.42px; top:916.73px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:943.46px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">회의시스템</div>
|
||
<div class="body-text" style="left:123.73px; top:982.29px; width:884.49px;">공사 현장, 개별 공구별 사무실, 사업단 회의시스템을 구축하여 신속한 의사결정을 바탕으로 업무효율성 증대</div>
|
||
|
||
<!-- CCTV -->
|
||
<div class="hw-bar" style="left:74.42px; top:1177.94px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:1201.64px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">CCTV</div>
|
||
<div class="body-text" style="left:123.73px; top:1237.44px; width:967.95px;">각 현장에 설치된 실시간 CCTV와 연계하여 공사 진행과정과 위험 요소를 지속적으로 모니터링하여 사고를 사전에 예방</div>
|
||
|
||
<!-- Dron Broadcasting -->
|
||
<div class="hw-bar" style="left:74.42px; top:1425.02px; width:502.57px;"></div>
|
||
<div class="bar-label" style="left:84px; top:1446.7px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Dron Broadcasting</div>
|
||
<div class="body-text" style="left:123.73px; top:1485.53px; width:1098.3px;">드론을 활용하여 건설 현장을 촬영하고 구조물의 상태를 실시간으로 확인 함으로써 공사의 품질을 높이며 안전한 작업 환경 조성</div>
|
||
|
||
<!-- Sensor -->
|
||
<div class="hw-bar" style="left:74.42px; top:1670.09px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:83.29px; top:1694.79px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Sensor</div>
|
||
<!-- Sensor body: hw-bar bottom=1722.53 + 8px = 1731 (translateY(-50%) 제거) -->
|
||
<div class="body-text" style="left:123.73px; top:1731px; width:1067.52px;">현장에 IoT 위치기반 센서를 설치하여 사전에 균열, 진동, 기울기의 변화 등 위험요소를 실시간으로 확인하고 문제 발생 시 화면 표출</div>
|
||
|
||
<!-- ═══ S/W 항목 ═══ -->
|
||
|
||
<!-- C.C.P -->
|
||
<div class="sw-bar" style="left:1283.03px; top:129.09px; width:325.31px;"></div>
|
||
<div class="bar-label" style="left:1287.91px; top:151.78px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">C.C.P</div>
|
||
<!-- C.C.P body: sw-bar bottom=177.5 + 8px = 186 (translateY(-50%) 제거) -->
|
||
<div class="body-text" style="left:1341.14px; top:186px; width:1021.58px;">사업의 기본정보 및 공사진행과 관련된 모든 자료를 취합, 검증, 확인, 협업하는 효율적인 공사단계 프로세스 협업 및 관리 솔루션</div>
|
||
|
||
<!-- WatchBIM -->
|
||
<div class="sw-bar" style="left:1283.97px; top:374.16px; width:366.7px;"></div>
|
||
<div class="bar-label" style="left:1294.81px; top:398.86px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">WatchBIM</div>
|
||
<div class="body-text" style="left:1351.02px; top:436.68px; width:1011.65px;">공사중 단계별 건설과정을 설계모델의 시각화와 공정시뮬레이션을 통해 현장 공사진행사항을 직관적으로 확인 및 검증</div>
|
||
|
||
<!-- Domainer -->
|
||
<div class="sw-bar" style="left:1447.61px; top:650.49px; width:365.72px;"></div>
|
||
<div class="bar-label" style="left:1446.62px; top:672.17px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Domainer</div>
|
||
<div class="body-text" style="left:1503.82px; top:715.03px; width:834.14px;">시공단계에서 민원 및 용지보상과 관련한 업무를 수행하는 솔루션으로 지번검색, 계약사항, 일정관리, 성과품, 협의자료 생성 등의 업무를 수행</div>
|
||
|
||
<!-- BCMF -->
|
||
<div class="sw-bar" style="left:1536.33px; top:1003.46px; width:263.74px;"></div>
|
||
<div class="bar-label" style="left:1536.33px; top:1025.15px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png"><span style="font-size:0;"><span style="font-size:30px;">B</span><span style="font-size:40px;">CM</span><span style="font-size:30px;">F</span></span></div>
|
||
<!-- BCMF body: sw-bar bottom=1051.87 + 8px = 1060 (translateY(-50%) 제거) -->
|
||
<div class="body-text" style="left:1579.7px; top:1060px; width:786.66px;">건설 현장의 공사, 품질, 안전, 사업관리 등의 업무를 효율적으로 수행할 수 있는 BIM기반 현장 맞춤형 건설사업관리 솔루션</div>
|
||
|
||
<!-- Twin Highway -->
|
||
<div class="sw-bar" style="left:1297.77px; top:1350.39px; width:471.2px;"></div>
|
||
<div class="bar-label" style="left:1283.97px; top:1371.06px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png">Twin Highway</div>
|
||
<!-- Twin Highway body: sw-bar bottom=1398.8 + 8px = 1407 (translateY(-50%) 제거) -->
|
||
<div class="body-text" style="left:1342.13px; top:1407px; width:1030.45px;">준공 후 가상세계의 정보모델을 실시간 데이터와 연결하여 다양한 시뮬레이션을 통해 효율적인 시설물 관리 및 운영전략 수립 지원</div>
|
||
|
||
<!-- B.E.Ps <참고> -->
|
||
<div class="sw-bar" style="left:1297.77px; top:1647.9px; width:352.91px;"></div>
|
||
<div class="bar-label" style="left:1283.97px; top:1668.57px;"><img src="assets/7e260569216fd75f7df60441a94a25763e7f24c8.png"><span style="font-size:0;"><span style="font-size:40px;">B.E.P</span><span style="font-size:30px;">s <참고></span></span></div>
|
||
<!-- B.E.Ps body: sw-bar bottom=1696.31 + 8px = 1705 (translateY(-50%) 제거) -->
|
||
<div class="body-text" style="left:1343.14px; top:1705px; width:1039.89px;">건설산업의 디지털전환을 위한 개념 및 BIM 수행을 위한 방법, 예시, 사례들을 모아놓은 사내용 시공 BIM 수행 메뉴얼 및 학습 시스템</div>
|
||
|
||
<!-- 장식 이미지들 -->
|
||
<div class="abs" style="left:338.61px; top:802.77px; width:118.29px; height:121.02px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||
<div class="abs" style="left:34px; top:513.33px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||
<div class="abs" style="left:577.16px; top:345.92px; width:47.32px; height:48.41px;"><img src="assets/501526da860c6430caa4bb133a8d6bd3ba1580f2.png"></div>
|
||
<div class="abs" style="left:973.45px; top:1461.33px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||
<div class="abs" style="left:1560.97px; top:732.18px; width:124.21px; height:127.07px;"><img src="assets/6a5c82585b829bba6812fb47fc12a2e3f419e62d.png"></div>
|
||
<div class="abs" style="left:1936.55px; top:1225.34px; width:54.22px; height:55.47px;"><img src="assets/1e43a4acb2f3f368932da59f33a8793ba8b95fc7.png"></div>
|
||
<div class="abs" style="left:776.29px; top:1323.16px; width:83.79px; height:85.72px;"><img src="assets/5f14763f6097e3a734ac3375813a675d341ae1f3.png"></div>
|
||
<div class="abs" style="left:348.46px; top:1619.66px; width:98.58px; height:100.85px;"><img src="assets/f6d6c38d03350b0b72b994f44c10d41ac1ae67e0.png"></div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|