화면 구성

반응형 웹 디자인은 많은 면에서 휴대전화에 대한 반응이었습니다. 스마트폰이 등장하기 전에는 웹사이트가 휴대기기에서 어떻게 보이고 느껴져야 하는지 심각하게 생각한 사람은 거의 없었습니다. 그러나 웹브라우저가 내장된 휴대전화가 급격히 증가하면서 이러한 상황은 달라졌습니다.

반응형 웹 디자인은 가정에 의문을 던지는 사고방식을 자극했습니다. 이전에는 웹사이트를 데스크톱 컴퓨터에서만 볼 수 있다고 가정했지만 이제는 휴대전화와 태블릿에도 동일한 웹사이트를 디자인하는 것이 표준입니다. 실제로 모바일 사용량이 이제 웹에서의 데스크톱 사용량을 앞질렀습니다.

이렇게 대처하는 마음가짐은 미래에 큰 도움이 될 것입니다. 오늘날에는 상상할 수 없는 기기 및 화면을 통해 웹사이트를 볼 수 있습니다. 이러한 사고방식은 화면을 넘어선 것이기도 합니다. 지금도 사람들은 화면이 없는 기기를 사용하여 콘텐츠에 액세스합니다. 의미론적 HTML의 강력한 기반을 사용하고 있다면 음성 어시스턴트가 웹사이트를 사용할 수 있습니다.

화면의 세계에서도 실험이 진행되고 있습니다. 오늘날 시중에는 폴더블 화면을 갖춘 기기가 있습니다. 이로 인해 디자인에 몇 가지 어려움이 발생합니다.

듀얼 화면

폴더블 기기 사용자는 웹브라우저가 화면 중 하나만 차지하도록 할지, 아니면 두 화면에 걸쳐 표시할 것인지 선택할 수 있습니다. 브라우저가 두 화면을 모두 포괄하는 경우 표시되는 웹사이트는 두 화면 간의 힌지에 의해 분할됩니다. 디자인이 좋아 보이지 않습니다.

표시 영역 세그먼트

웹사이트가 듀얼 화면 기기에 표시되는지 감지하도록 설계된 실험용 미디어 기능이 있습니다. 제안된 미디어 기능 이름은 viewport-segments입니다. horizontal-viewport-segments와 vertical-viewport-segments의 두 가지 종류가 있습니다.

horizontal-viewport-segments 미디어 기능이 2 값을 보고하고 vertical-viewport-segments가 1 값을 보고하면 기기의 힌지가 위에서 아래로 연결되어 콘텐츠가 두 개의 나란히 패널로 분할된다는 의미입니다.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  // Styles for side-by-side screens.
}

vertical-viewport-segments 미디어 기능이 2 값을 보고하고 horizontal-viewport-segments가 1 값을 보고하면 힌지가 좌우로 실행되어 콘텐츠를 두 개의 패널로 나눕니다.

@media (vertical-viewport-segments: 2) and (horizontal-viewport-segments: 1) {
  // Styles for stacked screens.
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">

vertical-viewport-segments 및 horizontal-viewport-segments가 모두 1 값을 보고하면 기기에 화면이 두 개 이상 있더라도 웹사이트가 한 화면에만 표시된다는 의미입니다. 이는 미디어 쿼리를 사용하지 않는 것과 같습니다.

환경 변수

viewport-segments 미디어 기능 자체는 이 귀찮은 힌지를 중심으로 디자인하는 데 도움이 되지 않습니다. 힌지의 크기를 알 방법이 필요합니다. 이때 환경 변수가 도움이 될 수 있습니다.

CSS의 환경 변수를 사용하면 어색한 기기 침입을 스타일에 고려할 수 있습니다. 예를 들어, '노치'를 중심으로 환경 값 safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left를 사용하여 iPhone X에서 실행합니다. 이러한 키워드는 env() 함수로 래핑됩니다.

body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

환경 변수는 커스텀 속성처럼 작동합니다. 즉, 환경 변수가 존재하지 않는 경우 대체 옵션을 전달할 수 있습니다.

body {
  padding-top: env(safe-area-inset-top, 1em);
  padding-right: env(safe-area-inset-right, 1em);
  padding-bottom: env(safe-area-inset-bottom, 1em);
  padding-left: env(safe-area-inset-left, 1em);
}

이러한 환경 변수가 iPhone X에서 작동하도록 하려면 viewport 정보를 지정하는 meta 요소를 업데이트합니다.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

이제 페이지 레이아웃이 전체 표시 영역을 차지하고 기기에서 제공한 인셋 값으로 문서를 안전하게 채웁니다.

폴더블 화면의 경우 viewport-segment-width, viewport-segment-height, viewport-segment-top, viewport-segment-left, viewport-segment-bottom, viewport-segment-right 등 6개의 새로운 환경 변수가 제안됩니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다.

다음은 두 개의 열이 있는 레이아웃의 예입니다. 열이 다른 열보다 넓습니다.

@media (min-width: 45em) {
  main {
    display: flex;
    flex-direction: row;
  }
  main article {
    flex: 2;
  }
  main aside {
    flex: 1;
  }
}

세로 힌지가 있는 듀얼 화면의 경우 첫 번째 열을 첫 번째 화면의 너비로 설정하고 두 번째 열을 두 번째 화면의 너비로 설정합니다.

@media (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  main article {
    flex: 1 1 env(viewport-segment-width 0 0);
  }
  main aside {
    flex: 1;
  }
}

듀얼 화면을 기회로 삼으세요. 한 화면은 스크롤 가능한 텍스트 콘텐츠를 표시하는 데 사용하고, 다른 화면은 이미지나 지도와 같은 고정 요소를 표시하는 데 사용할 수 있습니다.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

앞으로

폴더블 디스플레이는 앞으로 대세가 될 것인가? 알 수 없는 일입니다. 어느 누구도 휴대기기의 인기를 예측할 수 없었으므로 미래의 폼 팩터에 대해 열린 마음을 갖는 것이 좋습니다.

무엇보다도 미래가 닥칠 수 있는 모든 상황에 웹사이트가 대응할 수 있도록 하는 것이 중요합니다. 이것이 바로 반응형 디자인이 제공하는 것입니다. 일련의 실용적인 기술뿐만 아니라 미래의 웹을 구축하는 데 도움이 되는 사고방식을 제공합니다.

이해도 확인

화면 구성에 관한 지식 테스트