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>
247 lines
10 KiB
HTML
247 lines
10 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=1280">
|
||
<title>현황 및 문제점 (Frame 1171281194)</title>
|
||
<!--
|
||
Frame: 112:7, 1857×1326 px
|
||
Scale: 1280 / 1857 = 0.68927
|
||
패턴: issues-paired-rows
|
||
구조: 2단계 — row 간 배치도 flex column, row 내부도 flex/flow
|
||
콘텐츠 주도형: 텍스트 늘어나면 행이 늘고, 아래 행이 밀림
|
||
R16: pill 이미지 프레임 (overflow:hidden)
|
||
R9: 분할선 CSS dashed
|
||
-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&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: 1857px;
|
||
zoom: 0.68927;
|
||
/* zoom은 transform:scale과 달리 레이아웃 크기까지 실제로 줄임
|
||
→ 부모(.block)가 실제 scaled 높이를 인식
|
||
→ 하단 여백 없음
|
||
→ 내부 좌표는 Figma 원본 그대로 사용 가능 */
|
||
}
|
||
|
||
/* ── 타이틀 ── */
|
||
.title-row {
|
||
display: flex; align-items: center; gap: 15px;
|
||
padding: 0 0 20px 0;
|
||
}
|
||
.title-icon { width: 50px; height: 61px; display: flex; align-items: center; justify-content: center; flex: none; }
|
||
.title-icon img { width: 50px; height: 50px; object-fit: cover; }
|
||
.title-text {
|
||
font-weight: 700; font-size: 70px; line-height: normal; white-space: nowrap;
|
||
background: linear-gradient(rgb(204,82,0), rgb(136,55,0));
|
||
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
|
||
text-shadow: 0 0 4px #322c1e;
|
||
}
|
||
|
||
/* ── rows 컨테이너 (flex column, 행 간 flow) ── */
|
||
.rows {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0; /* 행 간 간격: row 1-2 연속, 2-3 사이 gap */
|
||
padding: 0 60px;
|
||
}
|
||
.row-gap { height: 65px; } /* 행2-3 사이 간격 (Figma: 706-622=84, pill overlap 감안) */
|
||
|
||
/* ── section.row — 개별 행 (flex column, 내부 flow) ── */
|
||
.row {
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: rgba(250,237,203,0.15);
|
||
border: 3px solid #60A451;
|
||
border-radius: 30px;
|
||
overflow: visible;
|
||
position: relative;
|
||
width: 1797px;
|
||
}
|
||
|
||
/* ── pill 영역 ── */
|
||
.pill-area {
|
||
flex: none;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
/* border 외곽까지 확장 (pill이 border 위에 올라탐) */
|
||
margin-left: -3px;
|
||
margin-right: -3px;
|
||
}
|
||
.pill-area--top { margin-top: -19px; }
|
||
.pill-area--bottom { margin-bottom: -19px; }
|
||
|
||
/* pill 아이템 — crop variant와 label position 분리 */
|
||
.pill-item { position: relative; }
|
||
|
||
/* 축1: 이미지 crop variant (어떤 곡면을 보여줄지) */
|
||
.crop-left { width: 457.96px; height: 95.62px; } /* 우측 곡선 보임 */
|
||
.crop-right { width: 457.96px; height: 99.54px; } /* 좌측 곡선 보임 */
|
||
|
||
/* R16: 이미지만 overflow:hidden */
|
||
.pill-img {
|
||
position: absolute; inset: 0;
|
||
overflow: hidden;
|
||
}
|
||
.pill-img img { position: absolute; top: 0; height: 100%; }
|
||
.crop-left .pill-img img { left: -45.3%; width: 145.3%; }
|
||
.crop-right .pill-img img { left: 0; width: 151.25%; }
|
||
|
||
/* 축2: 라벨 위치 (행에서 좌/우 어디에 있는지) */
|
||
.pill-item .label {
|
||
position: absolute; top: 50%; transform: translateY(-50%);
|
||
font-weight: 700; font-size: 40px; line-height: 70px;
|
||
color: #fff; white-space: nowrap; z-index: 1;
|
||
}
|
||
/* seam 기준 label anchor:
|
||
crop-left flat area: 0~411px → 라벨 시작 여백 ~50px (Figma 원본)
|
||
crop-right flat area: 46~458px → 라벨 끝 여백 = 458-46=412, right offset ~46+11=57px (Figma 원본)
|
||
Figma 원본값이 seam 기준과 일치하므로 유지 */
|
||
.pos-left .label { left: 50px; }
|
||
.pos-right .label { right: 57px; text-align: right; }
|
||
|
||
/* 하단 pill flip (이미지만 뒤집힘, 라벨은 영향 없음) */
|
||
.pill-flip { transform: rotate(180deg); width: 100%; height: 100%; }
|
||
|
||
/* ── body 영역 (flex:1, 자연 flow) ── */
|
||
.body-area {
|
||
flex: 1;
|
||
display: flex;
|
||
padding: 15px 35px;
|
||
min-height: 100px;
|
||
}
|
||
.body-left {
|
||
flex: 1;
|
||
font-weight: 500; font-size: 36px; line-height: 65px;
|
||
color: #0c271e;
|
||
padding-right: 20px;
|
||
}
|
||
.body-divider {
|
||
flex: none;
|
||
border-left: 2px dashed #60A451;
|
||
margin: 0 10px;
|
||
}
|
||
.body-right {
|
||
flex: 1;
|
||
font-weight: 500; font-size: 36px; line-height: 65px;
|
||
color: #0c271e;
|
||
text-align: right;
|
||
padding-left: 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="slide">
|
||
<div class="block">
|
||
<div class="inner">
|
||
|
||
<!-- 타이틀 -->
|
||
<div class="title-row">
|
||
<div class="title-icon"><img src="assets/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
|
||
<div class="title-text">현황 및 문제점</div>
|
||
</div>
|
||
|
||
<!-- rows 컨테이너 (flex column → 행이 커지면 아래 행이 밀림) -->
|
||
<div class="rows">
|
||
|
||
<!-- ═══ 행1: 개념 부재 / 잘못된 접근방식 (pills 상단) ═══ -->
|
||
<div class="row">
|
||
<div class="pill-area pill-area--top">
|
||
<div class="pill-item crop-left pos-left">
|
||
<div class="pill-img"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""></div>
|
||
<span class="label">개념 부재</span>
|
||
</div>
|
||
<div class="pill-item crop-right pos-right">
|
||
<div class="pill-img"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""></div>
|
||
<span class="label">잘못된 접근방식</span>
|
||
</div>
|
||
</div>
|
||
<div class="body-area">
|
||
<div class="body-left">BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식</div>
|
||
<div class="body-divider"></div>
|
||
<div class="body-right">단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 행2: 방향성 상실 / 전제조건 오류 (pills 하단) ═══ -->
|
||
<div class="row">
|
||
<div class="body-area">
|
||
<div class="body-left">대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실</div>
|
||
<div class="body-divider"></div>
|
||
<div class="body-right">건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용</div>
|
||
</div>
|
||
<div class="pill-area pill-area--bottom">
|
||
<div class="pill-item crop-right pos-left"><!-- 좌측 위치, 반전 crop -->
|
||
<div class="pill-img"><div class="pill-flip"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt="" style="position:absolute; top:0; height:100%; left:0; width:151.25%;"></div></div>
|
||
<span class="label">방향성 상실</span>
|
||
</div>
|
||
<div class="pill-item crop-left pos-right"><!-- 우측 위치, 반전 crop -->
|
||
<div class="pill-img"><div class="pill-flip"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt="" style="position:absolute; top:0; height:100%; left:-45.3%; width:145.3%;"></div></div>
|
||
<span class="label">전제조건 오류</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 행2-3 사이 간격 -->
|
||
<div class="row-gap"></div>
|
||
|
||
<!-- ═══ 행3: 수행주체 혼란 / 수행방식 무지 (pills 상단) ═══ -->
|
||
<div class="row">
|
||
<div class="pill-area pill-area--top">
|
||
<div class="pill-item crop-left pos-left">
|
||
<div class="pill-img"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""></div>
|
||
<span class="label">수행주체 혼란</span>
|
||
</div>
|
||
<div class="pill-item crop-right pos-right">
|
||
<div class="pill-img"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""></div>
|
||
<span class="label">수행방식 무지</span>
|
||
</div>
|
||
</div>
|
||
<div class="body-area">
|
||
<div class="body-left">학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정</div>
|
||
<div class="body-divider"></div>
|
||
<div class="body-right">기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 행4: 외산S/W 기술예속 / H/W 미비 (pills 하단) ═══ -->
|
||
<div class="row">
|
||
<div class="body-area">
|
||
<div class="body-left">단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속</div>
|
||
<div class="body-divider"></div>
|
||
<div class="body-right" style="font-size:35px;">도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계</div>
|
||
</div>
|
||
<div class="pill-area pill-area--bottom">
|
||
<div class="pill-item crop-right pos-left"><!-- 좌측 위치, 반전 crop -->
|
||
<div class="pill-img"><div class="pill-flip"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt="" style="position:absolute; top:0; height:100%; left:0; width:151.25%;"></div></div>
|
||
<span class="label">외산S/W 기술예속</span>
|
||
</div>
|
||
<div class="pill-item crop-left pos-right"><!-- 우측 위치, 반전 crop -->
|
||
<div class="pill-img"><div class="pill-flip"><img src="assets/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt="" style="position:absolute; top:0; height:100%; left:-45.3%; width:145.3%;"></div></div>
|
||
<span class="label">H/W 미비</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- .rows -->
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|