작은 화면에서 볼 때 디자인이 대형 화면 레이아웃의 축소 버전처럼 보이면 안 됩니다. 마찬가지로 대형 화면에서 본 디자인이 작은 화면 레이아웃의 확대된 버전처럼 보여서는 안 됩니다. 대신 디자인은 모든 화면 크기에 맞도록 충분히 유연해야 합니다. 성공적인 반응형 디자인은 모든 폼 팩터를 최대한 활용합니다.
즉, 일부 인터페이스 요소는 표시되는 컨텍스트에 따라 다르게 보일 수 있습니다. 다양한 화면 크기를 최대한 활용하려면 동일한 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));
}
}
결정적으로 캐러셀 보기의 항목은 전체 너비를 차지하지 않습니다. 표시 영역 가장자리에서 벗어나면 더 많은 콘텐츠를 사용할 수 있다는 표시가 없습니다.
캐러셀은 실제 오버플로 패턴의 또 다른 예입니다. 사람들이 탐색할 수 있는 항목이 많으면 텔레비전과 같은 대형 화면에서도 오버플로 패턴을 계속 사용할 수 있습니다. 이 미디어 스크롤러는 여러 캐러셀을 사용하여 상당한 양의 옵션을 관리합니다.
다시 말하지만 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 등의 미디어 기능은 시작에 불과합니다. 다음으로 다양한 미디어 기능을 살펴볼 수 있습니다.