작은 화면에서 보는 디자인은 대형 화면 레이아웃의 축소 버전처럼 보이지 않아야 합니다. 마찬가지로 대형 화면에서 보는 디자인은 작은 화면 레이아웃의 확대 버전처럼 보이지 않아야 합니다. 대신 디자인은 모든 화면 크기에 맞게 조정할 수 있을 만큼 유연해야 합니다. 반응형 디자인이 성공하려면 모든 폼 팩터를 최대한 활용해야 합니다.
즉, 일부 인터페이스 요소는 표시되는 컨텍스트에 따라 매우 다르게 보일 수 있습니다. 다양한 화면 크기를 최대한 활용하려면 동일한 HTML 코드베이스에 매우 다른 CSS를 적용해야 할 수 있습니다. 이는 상당한 디자인 문제가 될 수 있습니다.
다음은 발생할 수 있는 몇 가지 일반적인 문제입니다.
탐색
탐색 링크 목록을 표시하는 것은 대형 화면에서 매우 간단합니다. 이러한 링크를 수용할 수 있는 공간이 충분합니다.
작은 화면에서는 공간이 매우 중요합니다. 이러한 상황을 디자인할 때는 버튼 뒤에 탐색을 숨기는 것이 좋습니다. 이 솔루션의 문제는 사용자가 어디든 이동하려면 메뉴를 열고 옵션을 선택하는 두 단계를 거쳐야 한다는 것입니다. 메뉴가 열릴 때까지 사용자는 '어디로 갈 수 있나요?'라고 궁금해합니다.
탐색을 숨기지 않는 전략을 찾아보세요. 항목 수가 비교적 적은 경우 작은 화면에서 보기 좋게 탐색을 스타일 지정할 수 있습니다.
탐색에 링크가 많은 경우 이 패턴은 확장되지 않습니다. 작은 화면에서 링크가 두 줄 또는 세 줄로 줄바꿈되면 탐색이 어수선해 보입니다.
한 가지 가능한 해결책은 링크를 한 줄로 유지하되 화면 가장자리에서 목록을 자르는 것입니다. 사용자는 가로로 스와이프하여 바로 표시되지 않는 링크를 표시할 수 있습니다. 이것이 오버플로 패턴입니다.
이 기법의 장점은 모든 기기 너비와 모든 링크 수에 맞게 확장된다는 것입니다. 단점은 사용자가 처음에는 표시되지 않는 링크를 놓칠 수 있다는 것입니다. 기본 탐색에 이 기법을 사용하는 경우 처음 몇 개의 링크가 가장 중요한 링크인지 확인하고 목록에 항목이 더 있음을 시각적으로 나타내세요. 이전 예에서는 이 표시기에 그라데이션을 사용합니다.
최후의 수단으로 탐색을 기본적으로 숨기고 사용자가 콘텐츠를 표시하고 숨길 수 있는 전환 메커니즘을 제공할 수 있습니다. 이를 점진적 공개라고 합니다.
탐색 표시를 전환하는 버튼에 라벨을 지정해야 합니다. 아이콘만으로는 이해할 수 없습니다.
라벨이 지정되지 않은 아이콘은 '미스터리 미트' 탐색입니다. 사용자는 아이콘을 클릭하기 전까지 아이콘에 무엇이 있는지 알 수 없습니다. 사용자가 버튼을 클릭하면 무엇이 표시되는지 알 수 있도록 텍스트 라벨을 제공하세요.
캐러셀
탐색에 해당하는 내용은 다른 콘텐츠에도 적용됩니다. 어쨌든 아무것도 숨기지 마세요. 캐러셀은 콘텐츠를 숨기는 일반적인 방법입니다. 매우 깔끔해 보일 수 있지만 사용자가 숨겨진 콘텐츠를 발견하지 못할 가능성이 높습니다. 캐러셀은 사용자를 지원하는 것보다 홈페이지에 어떤 콘텐츠를 표시해야 하는지와 같은 조직 문제를 해결하는 데 더 적합합니다.
공간이 매우 중요한 경우 캐러셀을 사용하면 페이지가 너무 길어지고 어수선해지는 것을 방지할 수 있습니다. 하이브리드 접근 방식을 사용할 수 있습니다. 작은 화면에서는 캐러셀에 콘텐츠를 표시하지만 더 큰 화면에서는 동일한 콘텐츠를 그리드에 표시합니다.
좁은 화면의 경우 Flexbox를 사용하여 항목을 한 줄로 표시합니다. 항목 행이 화면 가장자리를 넘어 확장됩니다. overflow-x: auto를 사용하여 가로 스와이프를 허용합니다.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
scroll-snap 속성을 사용하면 항목을 부드럽게 스와이프할 수 있습니다. scroll-snap-type: inline mandatory 덕분에 항목이 제자리에 스냅됩니다.
화면이 충분히 큰 경우(이 경우 50em보다 넓음) 그리드로 전환하고 아무것도 숨기지 않고 항목을 행과 열로 표시합니다.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
중요한 점은 캐러셀 뷰의 항목이 전체 너비를 차지하지 않는다는 것입니다. 전체 너비를 차지하면 뷰포트 가장자리를 넘어 더 많은 콘텐츠를 사용할 수 있다는 표시가 없습니다.
캐러셀은 오버플로 패턴이 적용된 또 다른 예입니다. 사용자가 탐색할 수 있는 항목이 많은 경우 TV를 비롯한 대형 화면에서도 오버플로 패턴을 계속 사용할 수 있습니다. 이 미디어 스크롤러는 여러 캐러셀을 사용하여 상당한 양의 옵션을 관리합니다.
다시 말하지만 scroll-snap 속성을 사용하면 상호작용이 부드럽게 느껴집니다. 또한 캐러셀의 이미지에 loading="lazy"가 적용되어 있습니다. 이 경우 이미지는 폴드 아래에 있지 않고 가장자리를 넘어 있지만 동일한 원칙이 적용됩니다. 사용자가 해당 항목까지 스와이프하지 않으면 이미지가 다운로드되지 않아 대역폭이 절약됩니다.
JavaScript를 추가하면 캐러셀에 양방향 컨트롤을 추가할 수 있습니다. 항목을 자동으로 순환하도록 만들 수도 있습니다. 하지만 이렇게 하기 전에 신중하게 생각하세요. 캐러셀이 페이지의 유일한 콘텐츠인 경우 자동 재생이 작동할 수 있지만 다른 콘텐츠 (예: 텍스트 읽기)와 상호작용하려는 경우 자동 재생 캐러셀은 매우 짜증납니다. 캐러셀 권장사항을 자세히 알아보세요.
데이터 테이블
table 요소는 관련 정보의 행과 열인 표 형식 데이터를 구조화하는 데 적합합니다. 하지만 테이블이 너무 커지면 작은 화면 레이아웃이 손상될 수 있습니다.
테이블에 오버플로 패턴을 적용할 수 있습니다. 이 예에서 테이블은 table-container 클래스가 있는 div로 래핑됩니다.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
가이드라인
오버플로 패턴은 작은 화면에 적합한 절충안이지만 화면 밖 콘텐츠에 도달할 수 있음을 명확히 해야 합니다. 콘텐츠가 잘리는 가장자리에 그림자 또는 그라데이션을 배치하는 것이 좋습니다.
점진적 공개는 공간을 절약하는 데 유용한 방법이지만 매우 중요한 콘텐츠에 사용하는 데는 주의해야 합니다. 보조 작업에 더 적합합니다. 공개를 트리거하는 인터페이스 요소에 명확하게 라벨을 지정해야 합니다. 아이콘만으로는 충분하지 않습니다.
먼저 작은 화면에 맞게 디자인하세요. 작은 화면 디자인을 더 큰 화면에 맞게 조정하는 것이 그 반대보다 쉽습니다. 먼저 대형 화면에 맞게 디자인하면 작은 화면 디자인이 나중에 생각한 것처럼 느껴질 위험이 있습니다.
더 많은 레이아웃 및 UI 요소 패턴은 web.dev 패턴 섹션을 살펴보세요.
인터페이스 요소를 다양한 화면 크기에 맞게 조정할 때는 미디어 쿼리가 기기의 크기를 파악하는 데 매우 유용합니다. 하지만 min-width 및 min-height와 같은 미디어 기능은 시작에 불과합니다. 다음으로 다양한 미디어 기능을 살펴보겠습니다.