화면 구성

반응형 웹 디자인은 여러 가지 면에서 휴대전화에 대한 반응이었습니다. 스마트폰이 출시되기 전에는 휴대용 기기에서 웹사이트의 디자인과 분위기를 심각하게 고려해야 하는 사람이 거의 없었습니다. 하지만 웹 브라우저가 내장된 휴대전화의 수가 급격히 상승하면서 이러한 상황은 달라졌습니다.

반응형 웹 디자인은 가정에 의문을 제기하는 사고방식을 장려했습니다. 이전에는 웹사이트가 데스크톱 컴퓨터에서만 표시된다고 가정하는 것이 일반적이었으나 이제는 전화 및 태블릿용으로도 동일한 웹사이트를 디자인하는 것이 일반적입니다. 실제로 웹상의 모바일 사용이 데스크톱 사용의 양보다 많아졌습니다.

이러한 사후 대응적 사고방식은 미래에 도움이 될 것입니다. 광고주의 웹사이트가 오늘날 우리는 상상조차 할 수 없는 기기와 화면을 통해 조회될 가능성이 매우 높습니다. 그리고 이러한 사고방식은 기기뿐만이 아닙니다. 지금도 사람들은 콘텐츠가 없는 기기를 사용하여 콘텐츠에 액세스하고 있습니다. 강력한 시맨틱 HTML 기반을 사용하는 경우 음성 어시스턴트가 웹사이트를 사용할 수 있습니다.

화면의 세계에서도 다양한 실험이 시도됩니다. 오늘날 시중에는 폴더블 화면이 장착된 기기가 있습니다. 이로 인해 디자인에 몇 가지 문제가 발생합니다.

Dual Screen

폴더블 기기 사용자는 웹브라우저가 화면 중 하나만 차지하도록 할지 또는 두 화면에 걸쳐 표시되도록 할지 선택할 수 있습니다. 브라우저가 두 화면에 모두 걸쳐 있는 경우 화면에 표시되는 웹사이트는 두 화면 사이의 힌지로 분리됩니다. 그것은 훌륭해 보이지 않습니다.

표시 영역 세그먼트

웹사이트가 듀얼 화면 기기에 표시되는지 감지하도록 설계된 실험적 미디어 기능이 있습니다. 제안된 미디어 기능 이름은 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.
}

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

환경 변수

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가지 새로운 환경 변수가 제안됩니다.

다음은 열이 두 개 있으며 각각 다른 열보다 너비가 더 넓은 레이아웃의 예입니다.

@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;
  }
}

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

앞으로

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

무엇보다도 앞으로 다가올 미래의 모든 상황에 웹사이트가 대응할 수 있도록 하는 것이 좋습니다. 이것이 바로 반응형 디자인이 얻을 수 있는 이점입니다. 일련의 실용적인 기법뿐 아니라 미래의 웹을 구축하는 데 필요한 사고방식을 갖추는 것입니다.

학습 내용 확인하기

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