M

MLOG

한국어

전 세계의 다양한 기기와 네트워크 환경에서 웹 성능을 향상시키는 강력한 기술인 CSS Containment를 알아보고, 렌더링 효율성과 사용자 경험을 최적화하는 방법을 살펴보세요.

CSS Containment: 글로벌 웹 경험을 위한 성능 최적화 잠재력 발휘하기

수많은 기기, 다양한 네트워크 조건, 그리고 전 세계 모든 곳에서 사용자들이 콘텐츠에 접근하는 광대하고 상호 연결된 인터넷 세상에서, 최적의 웹 성능 추구는 단순히 기술적인 목표가 아닙니다. 이는 포용적이고 효과적인 디지털 커뮤니케이션을 위한 근본적인 요구사항입니다. 느리게 로딩되는 웹사이트, 버벅거리는 애니메이션, 반응 없는 인터페이스는 사용자의 위치나 기기 사양에 관계없이 사용자를 멀어지게 할 수 있습니다. 웹페이지를 렌더링하는 기본 프로세스는 믿을 수 없을 정도로 복잡할 수 있으며, 웹 애플리케이션의 기능이 풍부해지고 시각적 복잡성이 증가함에 따라 사용자 브라우저에 가해지는 계산 요구량은 상당히 증가합니다. 이러한 증가하는 요구는 종종 성능 병목 현상으로 이어져 초기 페이지 로드 시간부터 사용자 상호작용의 유연성에 이르기까지 모든 것에 영향을 미칩니다.

현대 웹 개발은 동적이고 상호작용적인 경험을 만드는 데 중점을 둡니다. 그러나 웹페이지의 모든 변경 사항(요소 크기 조정, 콘텐츠 추가, 심지어 스타일 속성 변경 등)은 브라우저의 렌더링 엔진 내에서 일련의 비용이 많이 드는 계산을 유발할 수 있습니다. '리플로우'(레이아웃 계산) 및 '리페인트'(픽셀 렌더링)로 알려진 이러한 계산은 특히 저사양 기기나 많은 개발 도상국에서 흔히 볼 수 있는 느린 네트워크 연결 환경에서 CPU 사이클을 빠르게 소모할 수 있습니다. 이 글에서는 이러한 성능 문제를 완화하기 위해 설계된 강력하지만 종종 제대로 활용되지 않는 CSS 속성인 CSS Containment에 대해 자세히 알아봅니다. 개발자는 contain 속성을 이해하고 전략적으로 적용함으로써 웹 애플리케이션의 렌더링 성능을 크게 최적화하여 전 세계 사용자에게 더 부드럽고 반응이 빠르며 공평한 경험을 보장할 수 있습니다.

핵심 과제: 웹 성능이 전 세계적으로 중요한 이유

CSS Containment의 힘을 진정으로 이해하려면 브라우저의 렌더링 파이프라인을 이해하는 것이 중요합니다. 브라우저가 HTML, CSS, JavaScript를 받으면 페이지를 표시하기 위해 몇 가지 중요한 단계를 거칩니다.

성능 문제는 주로 레이아웃 및 페인트 단계에서 발생합니다. 요소의 크기, 위치 또는 콘텐츠가 변경될 때마다 브라우저는 다른 요소의 레이아웃을 다시 계산(리플로우)하거나 특정 영역을 다시 페인트(리페인트)해야 할 수 있습니다. 동적 요소가 많거나 DOM 조작이 잦은 복잡한 UI는 이러한 비용이 많이 드는 작업을 연쇄적으로 유발하여 눈에 띄는 버벅거림(jank), 끊기는 애니메이션 및 좋지 않은 사용자 경험으로 이어질 수 있습니다. 저사양 스마트폰과 제한된 대역폭을 가진 외딴 지역의 사용자가 광고를 자주 새로고침하거나 콘텐츠를 업데이트하는 뉴스 웹사이트와 상호작용하려 한다고 상상해 보십시오. 적절한 최적화가 없다면 그들의 경험은 금세 좌절스러워질 수 있습니다.

성능 최적화의 전 세계적 중요성은 아무리 강조해도 지나치지 않습니다.

CSS Containment 소개: 브라우저의 슈퍼파워

contain 속성으로 지정되는 CSS Containment는 개발자가 특정 요소와 그 콘텐츠가 문서의 나머지 부분과 독립적이라는 것을 브라우저에 알릴 수 있게 해주는 강력한 메커니즘입니다. 이를 통해 브라우저는 다른 방법으로는 할 수 없었던 성능 최적화를 수행할 수 있습니다. 본질적으로 렌더링 엔진에 "이봐, 페이지의 이 부분은 자체적으로 완결되어 있어. 만약 이 안에서 무언가 변경되더라도 전체 문서의 레이아웃이나 페인트를 다시 평가할 필요가 없어."라고 말하는 것과 같습니다.

복잡한 컴포넌트 주위에 경계를 설정하는 것과 같다고 생각할 수 있습니다. 해당 컴포넌트 내부에서 무언가 변경될 때마다 브라우저가 전체 페이지를 스캔해야 하는 대신, 모든 레이아웃이나 페인트 작업이 해당 컴포넌트에만 국한될 수 있다는 것을 알게 됩니다. 이는 비용이 많이 드는 재계산의 범위를 크게 줄여 더 빠른 렌더링 시간과 더 부드러운 사용자 인터페이스로 이어집니다.

contain 속성은 여러 값을 받으며, 각 값은 다른 수준의 격리를 제공하여 개발자가 특정 사용 사례에 가장 적합한 최적화를 선택할 수 있도록 합니다.

.my-contained-element {
  contain: layout;
}

.another-element {
  contain: paint;
}

.yet-another {
  contain: size;
}

.combined-containment {
  contain: content;
  /* layout paint size의 단축 속성 */
}

.maximum-containment {
  contain: strict;
  /* layout paint size style의 단축 속성 */
}

contain 값 해독하기

contain 속성의 각 값은 격리의 유형을 지정합니다. 각각의 효과를 이해하는 것은 효과적인 최적화에 매우 중요합니다.

contain: layout;

요소에 contain: layout;이 적용되면, 브라우저는 해당 요소의 자식 요소들의 레이아웃(위치와 크기)이 요소 외부의 어떤 것에도 영향을 미칠 수 없다는 것을 알게 됩니다. 반대로, 요소 외부의 레이아웃도 자식 요소들의 레이아웃에 영향을 줄 수 없습니다.

예시: 동적 뉴스 피드 아이템

<style>
  .news-feed-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 10px;
    contain: layout;
    /* 이 아이템 내부의 변경 사항이 전역 리플로우를 유발하지 않도록 보장합니다 */
  }
  .news-feed-item h3 { margin-top: 0; }
  .news-feed-item .actions { text-align: right; }
</style>

<div class="news-feed-container">
  <div class="news-feed-item">
    <h3>Headline 1</h3>
    <p>Brief description of the news item. This might expand or collapse.</p>
    <div class="actions">
      <button>Read More</button>
    </div>
  </div>
  <div class="news-feed-item">
    <h3>Headline 2</h3>
    <p>Another news piece. Imagine this updating frequently.</p>
    <div class="actions">
      <button>Read More</button>
    </div>
  </div>
</div>

contain: paint;

이 값은 요소의 자손들이 요소의 경계 밖으로 표시되지 않을 것임을 선언합니다. 자손의 콘텐츠가 요소의 상자를 벗어나면 잘리게 됩니다(마치 overflow: hidden;이 적용된 것처럼).

예시: 스크롤 가능한 댓글 섹션

<style>
  .comment-section {
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: scroll;
    contain: paint;
    /* 댓글이 업데이트되더라도 이 박스 내의 콘텐츠만 다시 페인트합니다 */
  }
  .comment-item { padding: 5px; border-bottom: 1px dotted #eee; }
</style>

<div class="comment-section">
  <div class="comment-item">Comment 1: Lorem ipsum dolor sit amet.</div>
  <div class="comment-item">Comment 2: Consectetur adipiscing elit.</div>
  <!-- ... 많은 댓글들 ... -->
  <div class="comment-item">Comment N: Sed do eiusmod tempor incididunt ut labore.</div>
</div>

contain: size;

contain: size;가 적용되면, 브라우저는 실제 콘텐츠가 다른 크기를 제안하더라도 해당 요소가 고정된, 변경 불가능한 크기를 가진 것처럼 취급합니다. 브라우저는 격리된 요소의 크기가 그 콘텐츠나 자식 요소에 의해 영향을 받지 않을 것이라고 가정합니다. 이를 통해 브라우저는 격리된 요소 주변의 요소들을 그 내용물의 크기를 알 필요 없이 배치할 수 있습니다. 이를 위해서는 요소에 명시적인 크기(width, height)가 있거나 다른 방법(예: 부모의 flexbox/grid 속성 사용)으로 크기가 지정되어야 합니다.

예시: 플레이스홀더 콘텐츠를 포함한 가상 목록 아이템

<style>
  .virtual-list-item {
    height: 50px; /* 'size' 격리를 위해 명시적인 높이가 중요합니다 */
    border-bottom: 1px solid #eee;
    padding: 10px;
    contain: size;
    /* 브라우저는 내부를 보지 않고도 이 아이템의 높이를 압니다 */
  }
</style>

<div class="virtual-list-container">
  <div class="virtual-list-item">Item 1 Content</div>
  <div class="virtual-list-item">Item 2 Content</div>
  <!-- ... 동적으로 로드되는 더 많은 아이템들 ... -->
</div>

contain: style;

이것은 아마도 가장 특수한 격리 유형일 것입니다. 이는 요소의 자손에 적용된 스타일이 요소 외부의 어떤 것에도 영향을 미치지 않음을 나타냅니다. 주로 CSS 카운터(counter-increment, counter-reset)와 같이 요소의 하위 트리를 넘어 효과를 가질 수 있는 속성에 적용됩니다.

예시: 독립적인 카운터 섹션

<style>
  .independent-section {
    border: 1px solid blue;
    padding: 10px;
    contain: style;
    /* 여기의 카운터가 전역 카운터에 영향을 미치지 않도록 보장합니다 */
    counter-reset: local-item-counter;
  }
  .independent-section p::before {
    counter-increment: local-item-counter;
    content: "Item " counter(local-item-counter) ": ";
  }
</style>

<div class="independent-section">
  <p>First point.</p>
  <p>Second point.</p>
</div>

<div class="global-section">
  <p>This should not be affected by the counter above.</p>
</div>

contain: content;

이것은 contain: layout paint size;의 단축 속성입니다. `style` 격리 없이 강력한 수준의 격리를 원할 때 흔히 사용되는 값입니다. 대부분 독립적인 컴포넌트에 대한 좋은 범용 격리 속성입니다.

예시: 재사용 가능한 상품 카드

<style>
  .product-card {
    border: 1px solid #eee;
    padding: 15px;
    margin: 10px;
    width: 250px; /* 'size' 격리를 위한 명시적 너비 */
    display: inline-block;
    vertical-align: top;
    contain: content;
    /* 레이아웃, 페인트, 크기 격리 */
  }
  .product-card img { max-width: 100%; height: auto; }
  .product-card h3 { font-size: 1.2em; }
  .product-card .price { font-weight: bold; color: green; }
</style>

<div class="product-card">
  <img src="product-image-1.jpg" alt="Product 1">
  <h3>Amazing Gadget Pro</h3>
  <p class="price">$199.99</p>
  <button>Add to Cart</button>
</div>

<div class="product-card">
  <img src="product-image-2.jpg" alt="Product 2">
  <h3>Super Widget Elite</h3&n>
  <p class="price">$49.95</p>
  <button>Add to Cart</button>
</div>

contain: strict;

이것은 가장 포괄적인 격리로, contain: layout paint size style;의 단축 속성 역할을 합니다. 가장 강력한 격리를 생성하여 격리된 요소를 효과적으로 완전히 독립적인 렌더링 컨텍스트로 만듭니다.

예시: 복잡한 상호작용형 지도 위젯

<style>
  .map-widget {
    width: 600px;
    height: 400px;
    border: 1px solid blue;
    overflow: hidden;
    contain: strict;
    /* 복잡하고 상호작용적인 컴포넌트를 위한 완전한 격리 */
  }
</style>

<div class="map-widget">
  <!-- 복잡한 지도 렌더링 로직 (예: Leaflet.js, Google Maps API) -->
  <div class="map-canvas"></div>
  <div class="map-controls"><button>Zoom In</button></div>
</div>

contain: none;

이것은 기본값으로, 격리가 없음을 나타냅니다. 요소는 정상적으로 동작하며, 그 안의 변경 사항은 전체 문서의 렌더링에 영향을 줄 수 있습니다.

실용적인 적용 및 글로벌 사용 사례

이론을 이해하는 것과 실제 전 세계적으로 접근 가능한 웹 애플리케이션에 효과적으로 적용하는 것은 별개의 문제입니다. 다음은 CSS Containment가 상당한 성능 이점을 가져올 수 있는 몇 가지 주요 시나리오입니다.

가상 목록/무한 스크롤

소셜 미디어 피드에서 전자상거래 상품 목록에 이르기까지 많은 현대 웹 애플리케이션은 방대한 양의 데이터를 표시하기 위해 가상 목록이나 무한 스크롤을 사용합니다. DOM에 수천 개의 항목을 모두 렌더링하는 대신(이는 엄청난 성능 병목 현상을 유발할 것입니다), 뷰포트에 보이는 항목과 그 위아래의 몇몇 버퍼 항목만 렌더링합니다. 사용자가 스크롤하면 새 항목이 들어오고 이전 항목은 제거됩니다.

<style>
  .virtualized-list-item {
    height: 100px; /* 'size' 격리를 위해 고정 높이가 중요합니다 */
    border-bottom: 1px solid #f0f0f0;
    padding: 10px;
    contain: layout size; /* 레이아웃 및 크기 계산 최적화 */
    overflow: hidden;
  }
</style>

<div class="virtualized-list-container">
  <!-- 스크롤 위치에 따라 아이템이 동적으로 로드/언로드됩니다 -->
  <div class="virtualized-list-item">Product A: Description and Price</div>
  <div class="virtualized-list-item">Product B: Details and Reviews</div>
  <!-- ... 수백 또는 수천 개의 더 많은 아이템 ... -->
</div>

화면 밖/숨겨진 컴포넌트 (모달, 사이드바, 툴팁)

많은 웹 애플리케이션에는 내비게이션 드로어, 모달 대화 상자, 툴팁 또는 동적 광고와 같이 항상 보이지는 않지만 DOM의 일부인 요소들이 있습니다. 숨겨져 있을 때(예: display: none; 또는 visibility: hidden;)도, 특히 DOM 구조에서의 존재가 시야에 들어올 때 레이아웃이나 페인트 계산을 필요로 하는 경우 브라우저의 렌더링 엔진에 영향을 미칠 수 있습니다.

<style>
  .modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 500px;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: 20px;
    z-index: 1000;
    display: none; /* 또는 초기에 화면 밖 */
    contain: layout paint; /* 보일 때, 내부 변경 사항은 격리됩니다 */
  }
  .modal-dialog.is-open { display: block; }
</style>

<div class="modal-dialog">
  <h3>Welcome Message</h3>
  <p>This is a modal dialog. Its content might be dynamic.</p>
  <button>Close</button>
</div>

복잡한 위젯 및 재사용 가능한 UI 컴포넌트

현대 웹 개발은 컴포넌트 기반 아키텍처에 크게 의존합니다. 웹페이지는 종종 많은 독립적인 컴포넌트(아코디언, 탭 인터페이스, 비디오 플레이어, 상호작용형 차트, 댓글 섹션 또는 광고 단위)로 구성됩니다. 이러한 컴포넌트는 종종 자체적인 내부 상태를 가지며 페이지의 다른 부분과 독립적으로 업데이트될 수 있습니다.

<style>
  .interactive-chart-widget {
    width: 100%;
    height: 300px;
    border: 1px solid #ddd;
    contain: content; /* 레이아웃, 페인트, 크기 격리 */
    overflow: hidden;
  }
</style>

<div class="interactive-chart-widget">
  <!-- JavaScript가 여기에 복잡한 차트를 렌더링합니다. 예: D3.js 또는 Chart.js 사용 -->
  <canvas id="myChart"></canvas>
  <div class="chart-controls">
    <button>View Data</button>
    <button>Zoom</button>
  </div>
</div>

Iframe 및 임베디드 콘텐츠 (주의하여 사용)

Iframe은 이미 별도의 브라우징 컨텍스트를 생성하여 그 콘텐츠를 부모 문서로부터 상당 부분 격리하지만, CSS containment는 때때로 iframe *내부*의 요소나 iframe의 크기는 알려져 있지만 콘텐츠가 동적인 특정 경우에 고려될 수 있습니다.

프로그레시브 웹 애플리케이션 (PWA)

PWA는 웹에서 네이티브 앱과 유사한 경험을 제공하는 것을 목표로 하며 속도, 신뢰성, 참여를 강조합니다. CSS Containment는 이러한 목표에 직접적으로 기여합니다.

글로벌 배포를 위한 모범 사례 및 고려 사항

CSS Containment는 강력하지만, 만병통치약은 아닙니다. 전략적인 적용, 신중한 측정, 그리고 그 함의에 대한 이해는 특히 다양한 글로벌 사용자를 대상으로 할 때 필수적입니다.

전략적 적용: 모든 곳에 적용하지 마세요

CSS Containment는 성능 최적화이지 일반적인 스타일링 규칙이 아닙니다. 모든 요소에 contain을 적용하면 역설적으로 문제를 일으키거나 심지어 이점을 상쇄할 수도 있습니다. 브라우저는 종종 명시적인 힌트 없이도 렌더링을 최적화하는 훌륭한 작업을 수행합니다. 성능 병목 현상으로 알려진 요소에 집중하세요:

격리를 적용하기 전에 프로파일링 도구를 사용하여 렌더링 비용이 가장 높은 곳을 식별하세요.

측정은 핵심: 최적화 검증하기

CSS Containment가 도움이 되는지 확인하는 유일한 방법은 그 영향을 측정하는 것입니다. 브라우저 개발자 도구 및 전문 성능 테스트 서비스에 의존하세요:

개발자 도구나 WebPageTest에서 시뮬레이션된 조건(예: 빠른 3G, 느린 3G, 저사양 모바일 기기) 하에서 테스트하는 것은 최적화가 실제 글로벌 사용자 경험으로 어떻게 변환되는지 이해하는 데 중요합니다. 강력한 데스크톱에서 최소한의 이점을 주는 변경 사항이 연결성이 제한된 지역의 저사양 모바일 기기에서는 혁신적일 수 있습니다.

함의 및 잠재적 문제점 이해하기

점진적 향상

CSS Containment는 점진적 향상을 위한 훌륭한 후보입니다. 이를 지원하지 않는 브라우저는 단순히 속성을 무시할 것이고, 페이지는 격리 없이 렌더링될 것입니다(잠재적으로 더 느릴 수 있음). 이는 오래된 브라우저를 망가뜨릴 걱정 없이 기존 프로젝트에 적용할 수 있음을 의미합니다.

브라우저 호환성

현대 브라우저는 CSS Containment를 훌륭하게 지원합니다(Chrome, Firefox, Edge, Safari, Opera 모두 잘 지원함). 최신 호환성 정보는 Can I Use에서 확인할 수 있습니다. 이는 성능 힌트이므로 지원 부족은 레이아웃이 깨지는 것이 아니라 최적화 기회를 놓치는 것을 의미합니다.

팀 협업 및 문서화

글로벌 개발팀에게는 CSS Containment의 사용을 문서화하고 소통하는 것이 중요합니다. 컴포넌트 라이브러리나 디자인 시스템 내에서 언제 어떻게 적용할지에 대한 명확한 가이드라인을 설정하세요. 일관되고 효과적인 사용을 보장하기 위해 개발자들에게 그 이점과 잠재적 함의에 대해 교육하세요.

고급 시나리오 및 잠재적 함정

더 깊이 들어가면, CSS Containment를 구현할 때 더 미묘한 상호작용과 잠재적인 과제를 탐색해 볼 가치가 있습니다.

다른 CSS 속성과의 상호작용

격리 문제 디버깅

contain을 적용한 후 예기치 않은 동작이 발생하면 다음과 같이 디버깅에 접근할 수 있습니다:

과용과 diminishing returns

CSS Containment가 만병통치약이 아니라는 점을 다시 한번 강조하는 것이 중요합니다. 맹목적으로 또는 모든 요소에 적용하면 최소한의 이득만 얻거나, 완전히 이해하지 못한 경우 미묘한 렌더링 문제를 일으킬 수 있습니다. 예를 들어, 요소가 이미 강력한 자연적 격리(예: 문서 흐름에 영향을 미치지 않는 절대 위치 지정 요소)를 가지고 있다면, `contain`을 추가해도 미미한 이점만 제공할 수 있습니다. 목표는 식별된 병목 현상에 대한 표적 최적화이지, 전면적인 적용이 아닙니다. 레이아웃 및 페인트 비용이 명백히 높고 구조적 격리가 컴포넌트의 의미론적 의미와 맞는 영역에 집중하세요.

웹 성능과 CSS Containment의 미래

CSS Containment는 비교적 성숙한 웹 표준이지만, 특히 업계가 코어 웹 바이탈과 같은 사용자 경험 지표에 집중하면서 그 중요성은 계속해서 커지고 있습니다. 이러한 지표(최대 콘텐츠풀 페인트, 최초 입력 지연, 누적 레이아웃 이동)는 `contain`이 제공하는 렌더링 최적화 유형으로부터 직접적인 이점을 얻습니다.

웹 애플리케이션이 더욱 복잡해지고 기본적으로 반응형이 됨에 따라 CSS Containment와 같은 기술은 필수 불가결해집니다. 이는 개발자가 사용자의 기기, 네트워크 또는 위치에 관계없이 접근 가능하고 즐거운 고성능 경험을 구축할 수 있도록 렌더링 파이프라인에 대한 더 세분화된 제어를 향한 웹 개발의 광범위한 추세의 일부입니다.

브라우저 렌더링 엔진의 지속적인 발전은 또한 `contain`과 같은 웹 표준의 지능적인 적용이 계속해서 중요할 것임을 의미합니다. 이러한 엔진은 매우 정교하지만, 더 효율적인 결정을 내리는 데 도움이 되는 명시적인 힌트로부터 여전히 이점을 얻습니다. 이러한 강력하고 선언적인 CSS 속성을 활용함으로써, 우리는 전 세계적으로 더 균일하게 빠르고 효율적인 웹 경험에 기여하며, 디지털 콘텐츠와 서비스가 모든 사람, 모든 곳에서 접근 가능하고 즐겁도록 보장합니다.

결론

CSS Containment는 성능 최적화를 위한 웹 개발자의 무기고에 있는 강력하지만 종종 제대로 활용되지 않는 도구입니다. 특정 UI 컴포넌트의 격리된 특성에 대해 브라우저에 명시적으로 알림으로써, 개발자는 레이아웃 및 페인트 작업과 관련된 계산 부담을 크게 줄일 수 있습니다. 이는 직접적으로 더 빠른 로딩 시간, 더 부드러운 애니메이션, 그리고 더 반응이 빠른 사용자 인터페이스로 이어지며, 이는 다양한 기기와 네트워크 조건을 가진 글로벌 사용자에게 고품질 경험을 제공하는 데 가장 중요합니다.

개념이 처음에는 복잡해 보일 수 있지만, contain 속성을 layout, paint, size, style과 같은 개별 값으로 분해하면 표적 최적화를 위한 정밀한 도구 세트가 드러납니다. 가상 목록에서 화면 밖 모달, 복잡한 상호작용 위젯에 이르기까지 CSS Containment의 실용적인 적용은 광범위하고 영향력이 큽니다. 그러나 모든 강력한 기술과 마찬가지로, 전략적인 적용, 철저한 테스트, 그리고 그 함의에 대한 명확한 이해가 필요합니다. 맹목적으로 적용하지 마십시오. 병목 현상을 식별하고, 영향을 측정하며, 접근 방식을 미세 조정하세요.

CSS Containment를 수용하는 것은 전 세계 사용자의 요구에 부응하는 더 견고하고, 성능이 뛰어나며, 포용적인 웹 애플리케이션을 구축하기 위한 선제적인 조치이며, 속도와 반응성이 사치가 아닌 우리가 만드는 디지털 경험의 기본 기능이 되도록 보장합니다. 오늘 프로젝트에서 contain을 실험하기 시작하고, 웹 애플리케이션의 새로운 수준의 성능을 잠금 해제하여 웹을 모두에게 더 빠르고 접근하기 쉬운 곳으로 만드세요.