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>
This commit is contained in:
166
block-tests/bim-issues-paired.html
Normal file
166
block-tests/bim-issues-paired.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=1280">
|
||||
<title>현황 및 문제점 (Frame 1171281194)</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@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; padding: 20px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
.slide {
|
||||
width: 1280px; height: 913.5px;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,.15);
|
||||
}
|
||||
.block { width: 1280px; height: 913.5px; position: relative; overflow: hidden; }
|
||||
.inner {
|
||||
position: absolute; left: 0; top: 0;
|
||||
width: 1857px; height: 1325.62px;
|
||||
transform: scale(0.689285);
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
/* 헤더 */
|
||||
.header {
|
||||
position: absolute; left: 0; top: 0;
|
||||
display: flex; align-items: center; gap: 15px; height: 101px;
|
||||
}
|
||||
.header-icon { width: 50px; height: 50px; }
|
||||
.header-icon img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.header-title {
|
||||
font-weight: 700; font-size: 70px; line-height: normal; white-space: nowrap;
|
||||
background-image: linear-gradient(180deg, #cc5200 0%, #883700 100%);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
text-shadow: 0 0 4px #322c1e;
|
||||
}
|
||||
|
||||
/* row-box */
|
||||
.row-box {
|
||||
position: absolute;
|
||||
left: 60px; width: 1797px;
|
||||
border: 3px solid #60a451;
|
||||
border-radius: 30px;
|
||||
background: rgba(250, 237, 203, 0.15);
|
||||
}
|
||||
|
||||
/* 점선 */
|
||||
.row-divider {
|
||||
position: absolute;
|
||||
left: 945px; width: 0; height: 195px;
|
||||
border-left: 1px dashed rgba(96, 164, 81, 0.4);
|
||||
}
|
||||
|
||||
/* 텍스트 */
|
||||
.pair-text {
|
||||
position: absolute;
|
||||
font-weight: 500; font-size: 36px; line-height: 65px;
|
||||
color: #0c271e;
|
||||
word-break: keep-all;
|
||||
z-index: 3;
|
||||
}
|
||||
.pair-text.left { left: 95.28px; width: 829.93px; }
|
||||
.pair-text.right { left: 958.01px; width: 867.9px; text-align: right; }
|
||||
|
||||
/* pill — absolute, Figma 좌표 그대로, row-box 밖으로 걸침
|
||||
두루마리 형태: 이미지(R16 프레임 배치) — crop/프레임이므로 이미지 유지 */
|
||||
.label-pill {
|
||||
position: absolute;
|
||||
width: 457.96px;
|
||||
height: 95.62px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
/* 상단 pill 이미지 배치 (R16) */
|
||||
.label-pill.left-pill img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -45.3%;
|
||||
width: 145.3%;
|
||||
height: 100%;
|
||||
}
|
||||
.label-pill.right-pill img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 151.25%;
|
||||
height: 100%;
|
||||
}
|
||||
/* 하단 pill: rotate(180) + 이미지 배치 반전 (R16) */
|
||||
.label-pill.bottom.left-pill img {
|
||||
left: 0;
|
||||
width: 151.25%;
|
||||
}
|
||||
.label-pill.bottom.right-pill img {
|
||||
left: -45.3%;
|
||||
width: 145.3%;
|
||||
}
|
||||
.label-pill .text {
|
||||
position: absolute; inset: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
font-weight: 700; font-size: 40px; color: #fff;
|
||||
line-height: 70px; white-space: nowrap; z-index: 2;
|
||||
}
|
||||
.label-pill.bottom { transform: rotate(180deg); }
|
||||
.label-pill.bottom .text { transform: rotate(180deg); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="slide">
|
||||
<div class="block">
|
||||
<div class="inner">
|
||||
|
||||
<!-- 헤더 -->
|
||||
<div class="header">
|
||||
<div class="header-icon"><img src="assets/shared/b0e9fad5b03f4d9e368524976c20c9886392e17b.png" alt=""></div>
|
||||
<div class="header-title">현황 및 문제점</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 1: 개념 부재 / 잘못된 접근방식 — pills top -->
|
||||
<div class="row-box" style="top:143px; height:229px;"></div>
|
||||
<div class="row-divider" style="top:160px;"></div>
|
||||
<div class="pair-text left" style="top:228px;">BIM을 Digital 전환의 개념이 아닌, CAD의 확장판으로 해석하여 3D를 그리는 수단 정도로만 인식</div>
|
||||
<div class="pair-text right" style="top:228px;">단순 업무효율 증진을 위한 도구로만 인식하여, 기술자들이 도구로서 사용만 할 수 있도록 교육시키면 된다고 판단</div>
|
||||
<div class="label-pill left-pill" style="left:60px; top:124px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">개념 부재</div></div>
|
||||
<div class="label-pill right-pill" style="left:1399.04px; top:124px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">잘못된 접근방식</div></div>
|
||||
|
||||
<!-- Row 2: 방향성 상실 / 전제조건 오류 — pills bottom -->
|
||||
<div class="row-box" style="top:372px; height:231px;"></div>
|
||||
<div class="row-divider" style="top:387px;"></div>
|
||||
<!-- TEMP: 1:1 fidelity — Chrome Noto Sans KR 너비 보정. 템플릿화 시 제거 -->
|
||||
<div class="pair-text left" style="top:389px; letter-spacing:-0.8px;">대형 S/W 개발 및 판매회사에서 제시된 내용과 방향대로 따라하므로써, 국내는 자체적 목표설정 기능을 상실</div>
|
||||
<div class="pair-text right" style="top:389px;">건축과 토목이 유사하다는 전제하에 Library를 활용하는 건축에서 수행하고 있는 방식을 토목에도 동일하게 적용</div>
|
||||
<div class="label-pill bottom left-pill" style="left:60px; top:522px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">방향성 상실</div></div>
|
||||
<div class="label-pill bottom right-pill" style="left:1399.04px; top:526.43px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">전제조건 오류</div></div>
|
||||
|
||||
<!-- Row 3: 수행주체 혼란 / 수행방식 무지 — pills top -->
|
||||
<div class="row-box" style="top:706px; height:310px;"></div>
|
||||
<div class="row-divider" style="top:791px;"></div>
|
||||
<div class="pair-text left" style="top:801px;">학자, 발주처 중심으로 S/W 판매회사에서 제시한 기술 수행 방식의 변화를 주도, 실행주체인 기업과 기술자들은 기존의 방식을 고수하면서 눈치만 보는 실정</div>
|
||||
<div class="pair-text right" style="top:801px;">기존 2D 설계의 결과가 옳다는 전제와 3D 설계를 수행/검토해본 경험이 없어, 전환설계의 개념으로 수행하므로써 비용과 시간이 추가로 소요, 높은 수준의 품질확보 불가</div>
|
||||
<div class="label-pill left-pill" style="left:60px; top:687px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">수행주체 혼란</div></div>
|
||||
<div class="label-pill right-pill" style="left:1399.04px; top:687px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">수행방식 무지</div></div>
|
||||
|
||||
<!-- Row 4: 외산S/W 기술예속 / H/W 미비 — pills bottom -->
|
||||
<div class="row-box" style="top:1016px; height:290px;"></div>
|
||||
<div class="row-divider" style="top:1036px;"></div>
|
||||
<div class="pair-text left" style="top:1031px;">단순 외산 범용S/W만 사용하면 BIM이 될 수 있을 것이라는 안일한 생각으로 접근하므로 외국 대형S/W 회사에 기술예속 가속</div>
|
||||
<!-- TEMP: 1:1 fidelity — Chrome Noto Sans KR 너비 보정. 템플릿화 시 제거 -->
|
||||
<div class="pair-text right" style="top:1031px; letter-spacing:-1.2px;">도면작성 중심의 기존 설계방식과 동일한 개념으로 생각하여, 탁상용 개인 PC, Monitor 사용기반 정도에 머물러 있어 실무적용에 필요한 높은 수준의 모델 등의 표출은 한계</div>
|
||||
<div class="label-pill bottom left-pill" style="left:60px; top:1226.08px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">외산S/W 기술예속</div></div>
|
||||
<div class="label-pill bottom right-pill" style="left:1399.04px; top:1226px;"><img src="assets/shared/b47d2977a36ab6a0c180d8f090afff798c44ed27.png" alt=""><div class="text">H/W 미비</div></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user