- 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>
142 lines
5.4 KiB
HTML
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>
|