Files
C.E.L_Slide_test2/templates/blocks/BEPs/process-product-2col_test.html
kyeongmin 05703c8e72 WIP: hero-icon-cards_1 블록 + 오답노트 + figma 관련 파일
- hero-icon-cards_1.html: hero-icon-cards 변형 (icon → 소제목+불릿 계층)
- compare-detail-gradient.html: 하단 2열 비교 블록 (Figma Frame 4 기반)
- 오답노트.md: 절대 하지 말아야 하는 실수 목록
- figma_to_html.py: Figma→HTML 변환 스크립트
- static/figma-assets/: Figma export 이미지 (배지, 화살표)
- 주의: compare-detail-gradient CSS 폰트 크기가 임의 수정됨 — 원본 복원 필요

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 17:14:09 +09:00

142 lines
5.4 KiB
HTML

<!DOCTYPE html><html><head><meta charset="UTF-8">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#e5e5e5;padding:10px;font-family:'Pretendard Variable','Noto Sans KR',sans-serif;word-break:keep-all;}
.block-pp2 {
display: flex;
gap: 0;
width: 1280px;
height: 495px;
}
.pp2-col {
flex: 1;
display: flex;
flex-direction: column;
}
.pp2-left {
background: linear-gradient(180deg, #ffffff 46%, #39311e 100%);
}
.pp2-right {
background: linear-gradient(0deg, #296b55 0%, #ffffff 56%);
}
.pp2-header-bar {
height: 47px;
margin-top: 21px;
display: flex;
align-items: center;
}
.pp2-header-bar--left {
background: linear-gradient(270deg, #a4a096 0%, #39311e 100%);
border-radius: 0 24px 24px 0;
justify-content: center;
}
.pp2-header-bar--right {
background: linear-gradient(90deg, #296b55 0%, #022017 100%);
border-radius: 24px 0 0 24px;
padding-left: 71px;
}
.pp2-header-text {
font-size: 23.3px;
font-weight: 900;
letter-spacing: 1.2px;
line-height: 33.7px;
}
.pp2-header-text--left {
color: #3e3523;
}
.pp2-header-text--right {
color: #225e4a;
}
.pp2-body {
padding: 10px 27px;
flex: 1;
}
.pp2-mid-title {
font-size: 16.6px;
font-weight: 900;
line-height: 31.6px;
margin-top: 8px;
}
.pp2-mid-title:first-child {
margin-top: 0;
}
.pp2-mid-title--left {
color: #5c3614;
}
.pp2-mid-title--right {
color: #084c56;
}
.pp2-body-text {
font-size: 13.3px;
font-weight: 700;
color: #000000;
line-height: 23.3px;
}
.pp2-compare {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 10px;
}
.pp2-compare-col {
flex: 1;
}
.pp2-compare-arrow {
flex-shrink: 0;
width: 84px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #5c3614;
}
</style></head><body>
<div class="block-pp2">
<div class="pp2-col pp2-left">
<div class="pp2-header-bar pp2-header-bar--left">
<span class="pp2-header-text pp2-header-text--left">과정 (Process)의 혁신</span>
</div>
<div class="pp2-body">
<div class="pp2-mid-title pp2-mid-title--left">Analogue 개념 기반 업무의 Digital Transformation</div>
<div class="pp2-compare">
<div class="pp2-compare-col">
<div class="pp2-body-text">• 개념, 도서, 행정 절차 중심</div>
<div class="pp2-body-text">• 2D 도면, 전문가, 규정</div>
<div class="pp2-body-text">• 업무 구분(단절), 책임</div>
</div>
<div class="pp2-compare-arrow"></div>
<div class="pp2-compare-col">
<div class="pp2-body-text">• 시각화된 목적물, 소통, 투명성 중심</div>
<div class="pp2-body-text">• 3D 모델, 참여자, 실체</div>
<div class="pp2-body-text">• 협업(융·복합), 창의성</div>
</div>
</div>
<div class="pp2-mid-title pp2-mid-title--left">위치기반의 3D 모델을 사용하는 Process 혁신</div>
<div class="pp2-body-text">• 위치기반(지리적, 지형, 지반상태 포함)의 GIS와 3D 모델(형상, 내용속성) 기반의 건설 정보를 포함하는 BIM의 연계를 통한 업무 프로세스의 혁신</div>
<div class="pp2-mid-title pp2-mid-title--left">사용자 중심의 Solution(S/W) 제공</div>
<div class="pp2-body-text">• 인프라 건설산업의 1차적인 Process 혁신은 등고선 중심의 지형도가 아닌 속성이 포함된 수치지형도와 본태 측량에서 획득한 3D 지반모델 구축 필수</div>
<div class="pp2-body-text">• 설계와 시공에 관련된 기술을 정리하고 디지털화하여 S/W로 기술 축적</div>
<div class="pp2-body-text">• 서로 다른 S/W로 작성되어 분절화된 Analogue 방식의 성과물과 정보물을 연계가 가능하도록 설계, 시공 Solution 제공</div>
</div>
</div>
<div class="pp2-col pp2-right">
<div class="pp2-header-bar pp2-header-bar--right">
<span class="pp2-header-text pp2-header-text--right">결과 (Products)의 혁신</span>
</div>
<div class="pp2-body">
<div class="pp2-mid-title pp2-mid-title--right">Copy & Paste로 인한 하향 평준화된 기존 성과품의 품질 향상</div>
<div class="pp2-body-text">• 과거 수작업으로 시행하면서 발생하던 오류 등의 최소화</div>
<div class="pp2-body-text">• 정확한 Data에 기반한 계획과 개선된 높은 품질의 성과물</div>
<div class="pp2-mid-title pp2-mid-title--right">Analogue 기반 도서 외 Digital 기반 정보물 추가</div>
<div class="pp2-body-text">• 규정에만 의존한 도면, 수량, 계산서, 시방서 등의 성과물에 3D 모델, 시뮬레이션 등의 Digital 기반 정보물(Information Data and Products)이 추가</div>
<div class="pp2-mid-title pp2-mid-title--right">Solution을 이용한 업무효율화(사용자 편의, 협업 및 의사소통 강화 등)</div>
<div class="pp2-body-text">• 디지털 기반 성과물인 Graphic 중심의 3D 모델, 시뮬레이션을 제대로 활용하기 위해서는 기존의 낮은 수준이 아니라 공학용 사이니지(H/W) 시스템이 필수로 갖춰야만 함</div>
<div class="pp2-body-text">• Engn. Solution을 통해 프로젝트에 관한 이슈를 함께 검토하고 논의하고 다양한 건설단계별 정보를 디지털 데이터로 저장하여 건설의 전 과정을 통합관리</div>
</div>
</div>
</div>
</body></html>