---
title: DX도입 배경(슬라이드6:4)
sidebar:
  order: 5
tableOfContents: false
---

<style>{`
  /* 1. 전체 폭 강제 사용 및 패딩 제거 */
  .content-panel, .sl-container, .sl-markdown-content {
    max-width: 100% !important; padding: 0 !important; margin: 0 !important;
  }
  .padding-vert--lg { padding-top: 0 !important; padding-bottom: 0 !important; }
  
  /* 2. 리스트 스타일 잡기 */
  .slide-content ul { padding-left: 20px; margin-top: 10px; }
  .slide-content li { margin-bottom: 8px; }
`}</style>

{/* 👇 슬라이드 컨테이너: 높이를 화면 크기에서 [제목+여백]만큼 뺀 값으로 자동 계산 */
/* calc(100vh - 140px) : 140px은 상단 시스템 제목과 헤더가 차지하는 대략적인 높이입니다. */
}
<div className="slide-container" style={{
  height: 'calc(100vh - 140px)', 
  width: '100%',
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  padding: '0 40px'
}}>

  {/* 본문 영역 (6:4 분할) */}
  <div style={{ 
    flex: '1 1 auto',       /* 남은 공간을 꽉 채움 */
    display: 'flex', 
    gap: '40px', 
    alignItems: 'stretch',  /* ⭐ 핵심: 자식 요소들을 높이 끝까지 강제로 늘림 */
    marginTop: '10px', 
    marginBottom: '20px'
  }}>

    {/* 🟢 [왼쪽 60%] */}
    <div className="slide-content" style={{ 
      flex: 6, 
      display: 'flex', 
      flexDirection: 'column', 
      justifyContent: 'flex-start', /* 내용은 중앙 정렬하되 */
      height: '100%',           /* ⭐ 박스 자체는 100% 높이 유지 */
      borderRight: '1px solid #e0e0e0', 
      paddingRight: '40px'
    }}>
      
      <h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
        1. 건설산업의 낮은 생산성
      </h2>
      
      <div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
        <p>
          * **건설산업** 생산성 성장률은 **1%**, 제조업(**3.6%**) 대비 **심각한 정체** 상태.


          * 국내 건설기업의 **노동 생산성**또한 **제조업의 53.2%** 수준에 불과함.
          
          
          * **건설산업**은 **효율성 혁신 지체**로, 여전히 전통적인 **노동 집약적 생산 방식**에 머물러 있음.  

          <br/>
          <br/>
        </p>
        


      </div>

<h2 style={{ fontSize: '1.6rem', fontWeight: 'bold', marginBottom: '0px', borderBottom: '1px solid #ddd', paddingBottom: '00px' }}>
        2. 디지털화와 건설산업의 현재
      </h2>
      
      <div style={{ fontSize: '1rem', lineHeight: '1.6', color: '#333' }}>
        <p>
          * 세계적으로 산업별 **디지털화 수준과 생산성은 정비례**함.

          * 건설산업의 디지털화 지수는 **농업보다도 낮은 최하위권**에 머물러 있음. 
          
          * 디지털 전환을 위한 **노력 부족**과 건설산업에 맞는 **디지털 기술 부족**이 그 원인.

          * 디지털 기술이 발전한 현재, 생산성 혁신을 위해 **건설산업 전반의 디지털 전환(DX)** 이 필요.
        </p>
        


      </div>

{/* ================= [핵심 요약] 박스 ================= */}
      <div style={{ 
        marginTop: '30px',          /* 위쪽 내용과 간격 */
        padding: '20px',            /* 박스 내부 여백 */
        backgroundColor: '#f6f8fa', /* 연한 회색 배경 (취향에 따라 #e6f7ff 등 변경 가능) */
        borderLeft: '5px solid #0056b3', /* 왼쪽 굵은 파란 선 */
        borderRadius: '4px',        /* 모서리 둥글게 */
        fontSize: '1rem'
      }}>
        {/* 제목 부분 */}
        <div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#0056b3' }}>
          핵심 요약
        </div>
        
        {/* 내용 부분 */}
        <ul style={{ margin: 0, paddingLeft: '20px' }}>
          <li>
            건설산업은 디지털전환을 통해 <strong>Process의 혁신</strong>과 
            <strong> Products의 변화</strong>를 일으켜야 한다.
          </li>
        </ul>
      </div>

    </div>

    {/* 🟠 [오른쪽 40%] */}
    <div style={{ 
      flex: 4, 
      display: 'flex', 
      flexDirection: 'column', 
      justifyContent: 'flex-start', 
      alignItems: 'left',
      paddingLeft: '10px',
      height: '100%'
    }}>

      
      {/* 👇 주석 없이 깔끔한 이미지 태그 */}
      <img 
        src="/assets/images/그림4.png" 
        alt="건설산업 생산성 추이" 
        className="zoomable"
        style={{ 
          maxWidth: '100%', 
          maxHeight: '40vh', 
          objectFit: 'contain', 
          borderRadius: '8px', 
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', 
          marginBottom: '0px'
        }} 
      />

      <p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
        *[그림 1] 국내외 건설산업 생산성 추이 (출처: McKinsey / 한국은행)*<br/>
      </p>

      <br/>
      <br/>
      
      

      {/* 👇 주석 없이 깔끔한 이미지 태그 */}
      <img 
        src="/assets/images/그림3.png" 
        alt="건설산업 생산성 추이" 
        className="zoomable"
        style={{ 
          maxWidth: '100%', 
          maxHeight: '40vh', 
          objectFit: 'contain', 
          borderRadius: '8px', 
          boxShadow: '0 4px 12px rgba(0,0,0,0.15)', 
          marginBottom: '0px'
        }} 
      />

      <p style={{ fontSize: '0.9rem', textAlign: 'center', color: '#666', marginTop: '0' }}>
        *[그림 2] 산업별 디지털화 지수 비교 (출처: McKinsey 보고서, 2018)*<br/>
      </p>

    </div>

  </div>

</div>

{/* ================================================================================== */}
{/* 👇 [팝업 기능 최종본] 가림 현상 해결 + 정중앙 정렬 (기존 코드 지우고 붙여넣기) */}
{/* ================================================================================== */}

<style>{`
  .zoomable { cursor: zoom-in; transition: transform 0.2s; }
  .zoomable:hover { transform: scale(1.02); }

  /* 팝업 배경 설정 */
  #image-modal {
    display: none; /* 평소엔 숨김 */
    
    /* ⭐ 핵심 1: 정중앙 정렬을 위한 Flexbox 도입 */
    justify-content: center;
    align-items: center;
    
    position: fixed; 
    left: 0; top: 0; width: 100%; height: 100%; 
    
    /* ⭐ 핵심 2: 사이트 메뉴바보다 무조건 위에 뜨게 Z-Index를 엄청 높게 설정 */
    z-index: 2147483647; 
    
    background-color: rgba(0,0,0,0.9); /* 배경을 더 어둡게 */
    backdrop-filter: blur(5px);
    padding: 20px; /* 가장자리 여백 확보 */
    box-sizing: border-box;
  }

  /* 팝업 이미지 설정 */
  #modal-content {
    max-width: 60%; 
    max-height: 95vh; 
    object-fit: contain; /* 비율 유지하며 화면에 딱 맞춤 */
    border-radius: 4px; 
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    animation: popUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  /* 닫기 버튼 설정 */
  #modal-close {
    position: absolute; 
    top: 20px; 
    right: 30px; 
    color: white; 
    font-size: 50px; 
    font-weight: bold; 
    cursor: pointer; 
    z-index: 2147483648; /* 이미지보다도 더 위에 */
    line-height: 1;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
  }
  #modal-close:hover { color: #ff6b6b; transform: scale(1.1); transition: 0.2s; }

  @keyframes popUp { from {transform:scale(0.8); opacity:0;} to {transform:scale(1); opacity:1;} }
`}</style>

{/* 팝업창 HTML 구조 */}
<div id="image-modal">
  <span id="modal-close">&times;</span>
  <img id="modal-content" />
</div>

{/* 스크립트 */}
<script>{`
  document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('image-modal');
    const modalImg = document.getElementById('modal-content');
    const closeBtn = document.getElementById('modal-close');
    const images = document.querySelectorAll('.zoomable');

    // 1. 이미지 클릭 시 열기
    images.forEach(img => {
      img.addEventListener('click', function(e) {
        e.preventDefault(); // 혹시 모를 기본 동작 차단
        modal.style.display = "flex"; // ⭐ block 대신 flex로 열어야 중앙 정렬됨
        modalImg.src = this.src;
        modalImg.alt = this.alt;
      });
    });

    // 2. 닫기 기능 함수
    function closeModal() {
      modal.style.display = "none";
    }

    // 3. 닫기 버튼 클릭
    if (closeBtn) closeBtn.onclick = closeModal;

    // 4. 배경 클릭 시 닫기
    if (modal) {
      modal.onclick = function(event) {
        // 이미지를 제외한 배경(div)을 눌렀을 때만 닫기
        if (event.target === modal) {
          closeModal();
        }
      }
    }
    
    // 5. ESC 키 누르면 닫기 (추가 편의기능)
    document.addEventListener('keydown', function(event) {
      if (event.key === "Escape" && modal.style.display === "flex") {
        closeModal();
      }
    });
  });
`}</script>