반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표

같은 HTML, 다른 모습

좋은 반응형 디자인은 화면마다 그 형태를 가장 잘 쓰는 디자인이다. 큰 화면을 축소해 휴대폰에 넣거나 휴대폰 화면을 늘려 모니터에 띄우는 것이 아니다. 그래서 같은 요소가 화면에 따라 꽤 다르게 생길 수 있고, 같은 HTML에 아주 다른 CSS가 붙기도 한다.

공간이 모자랄 때 쓰는 전략은 세 단계다. 위에서부터 시도한다.

순서	전략	장점	대가
1	그대로 보이게 다듬기: 줄이고 감싸고 다시 배치	숨는 것이 없다	항목이 많으면 여러 줄로 어수선해진다
2	오버플로 패턴: 한 줄로 두고 화면 끝에서 잘라 가로로 넘겨 보게	항목 수·화면 폭과 상관없이 확장된다	잘린 뒤쪽 항목을 못 보고 지나칠 수 있다
3	점진적 공개: 기본으로 숨기고 버튼으로 여닫기	공간을 가장 아낀다	한 단계가 더 생기고, 열기 전에는 무엇이 있는지 모른다

링크가 몇 개 안 되면 숨기지 말고 좁은 화면에 맞게 다듬는다.
링크가 많으면 오버플로 패턴을 쓴다. 중요한 링크를 앞에 두고, 끝에 그림자나 그라데이션을 깔아 더 있다는 것을 보여 준다.
숨겨야 한다면 토글 버튼에 글자 라벨을 단다. 라벨 없는 아이콘 버튼은 「미스터리 미트(mystery meat) 내비게이션」이다. 열어 보기 전에는 안에 무엇이 있는지 모른다.

아이콘 메뉴의 종류(햄버거·케밥·미트볼)는 UI 요소 용어집, 펼침 버튼의 마크업(aria-expanded)은 접근 가능한 위젯에 있다.

캐러셀

캐러셀은 내용을 숨기는 대표적인 방법이다. 깔끔해 보이지만 사용자는 넘겨 보지 않은 슬라이드를 거의 보지 못한다. 캐러셀은 사용자 문제보다 「홈에 무엇을 걸지」 같은 조직 내부의 문제를 푸는 데 더 쓰인다.

그래도 좁은 화면에서 페이지가 너무 길어지는 것은 막을 수 있다. 그래서 좁은 화면에서만 캐러셀, 넓은 화면에서는 그리드로 같은 내용을 보여 주는 혼합형이 좋다.

@media (max-width: 50em) {
  .cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
    scroll-behavior: smooth;
  }
  .cards .card {
    flex: 0 0 15em;              /* 화면 폭보다 좁게: 다음 카드가 살짝 보여야 넘길 수 있다는 걸 안다 */
    scroll-snap-align: start;
  }
}
@media (min-width: 50em) {
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
  }
}

카드 하나가 화면 전체 폭을 차지하면 안 된다. 다음 카드 끝이 보여야 더 있다는 신호가 된다.
화면 밖의 이미지에도 loading="lazy"를 준다. 아래로 숨은 것이든 옆으로 숨은 것이든, 사용자가 거기까지 가지 않으면 내려받지 않는다(지연 로딩).
항목이 아주 많으면(영상 목록 등) 큰 화면과 TV에서도 오버플로 줄을 여러 개 쌓는 방식이 맞다.
자동 재생은 피한다. 캐러셀이 페이지의 유일한 내용이 아니라면, 다른 글을 읽는 동안 움직이는 캐러셀은 방해만 된다. 꼭 넣는다면 정지 버튼 등 갖출 것이 접근 가능한 위젯에 있다.

overflow-x의 논리 속성은 overflow-inline이다. 스냅·스크롤 속성의 세부는 CSS 오버플로와 스크롤에 있다.

데이터 표

표는 행·열 데이터에 맞는 요소지만, 열이 많으면 좁은 화면의 레이아웃을 깬다. 표를 감싸는 요소에 오버플로 패턴을 쓴다.

.table-container {
  max-inline-size: 100%;
  overflow-x: auto;
}

스크롤되는 영역은 키보드로도 스크롤할 수 있어야 한다. 감싸는 요소에 tabindex="0"과 이름(role="region" + aria-labelledby)을 주는 방법은 CSS 오버플로와 스크롤에 있다.

가로 스크롤 말고도 좁은 화면용 표 패턴이 여럿 있다. 사용자가 표로 무엇을 하는지(행끼리 비교하나, 한 행을 자세히 보나)에 맞춰 고른다.

패턴	방법	맞는 때	주의
첫 열 고정 + 가로 스크롤	첫 열(행 이름)에 `position: sticky; inset-inline-start: 0`	행끼리 값을 비교할 때. 표 구조가 그대로다	고정 열에 배경색을 줘야 겹친 글이 비치지 않는다
행을 카드로 쌓기	좁을 때 `tr`·`td`를 `display: block`으로 바꾸고 `td::before { content: attr(data-label) }`로 열 이름을 붙인다	한 행(주문, 사람)을 하나씩 읽을 때	세로로 길어진다. `display`를 바꾸면 일부 브라우저가 표 의미를 잃으므로 `role="table"`·`row`·`cell`을 명시한다
덜 중요한 열 숨기기	우선순위 낮은 열을 좁은 화면에서 감추고 「열 선택」 토글로 다시 보이게	열이 많고 중요도가 갈릴 때	정보를 영영 감추지 않는다. 반드시 되돌릴 방법을 둔다
요약 + 전체 보기	좁은 화면엔 축약 표와 「전체 표 보기」 링크	표가 매우 클 때	한 단계가 더 생긴다
차트로 바꾸기	같은 데이터를 막대·원 그래프로	추세가 핵심일 때	정확한 값 조회는 표만 못하다. 큰 화면에도 함께 보여 주는 편이 낫다

@container (inline-size < 40rem) {
  .data-table thead { position: absolute; clip-path: inset(50%); }   /* 머리글은 스크린 리더용으로만 */
  .data-table tr, .data-table td { display: block; }
  .data-table td::before { content: attr(data-label) ": "; font-weight: 600; }
}

레이아웃 패턴

페이지 전체가 화면 폭에 따라 바뀌는 방식에도 이름 붙은 패턴이 있다.

패턴	동작
거의 유동(Mostly Fluid)	넓을 때는 최대 폭에 여백만 늘고, 좁아지면 열이 하나씩 아래로 쌓인다
열 떨어뜨리기(Column Drop)	다단 열이 좁아질 때마다 하나씩 아래로 떨어져 결국 한 열이 된다
레이아웃 전환(Layout Shifter)	브레이크포인트마다 배치 자체를 다시 짠다. 가장 유연하지만 손이 많이 간다
미세 조정(Tiny Tweaks)	한 열 그대로 두고 글자 크기·여백만 조금씩 바꾼다
화면 밖(Off Canvas)	덜 쓰는 영역(메뉴, 필터)을 화면 옆에 두고 버튼으로 밀어 넣는다

이 패턴 대부분은 지금 미디어 쿼리 없이 flex-wrap이나 grid-template-columns: repeat(auto-fit, minmax(…))만으로도 만든다(미디어 쿼리가 필요 없을 때).

입력 장치를 가정하지 않기

작은 화면이라고 터치, 큰 화면이라고 마우스인 것은 아니다. 패턴을 고를 때 다음을 지킨다.

원칙	이유
타깃은 넉넉하게. 마우스라고 줄이지 않는다	피츠의 법칙. 작은 타깃은 어떤 장치로도 맞히기 어렵다
중요한 정보를 호버 뒤에 숨기지 않는다	터치 기기와 키보드 사용자는 호버가 없다
제스처에는 버튼 대안을 둔다	제스처는 보이지 않고, 쓸 수 없는 사람이 있다(제스처 기반 인터페이스)
입력란은 맞는 가상 키보드가 뜨게	`type`·`inputmode`·`autocomplete`(더 나은 폼을 만드는 팁)

입력 장치를 CSS로 묻는 법(pointer, hover)은 미디어 쿼리 문법과 미디어 기능에 있다.

지침

작은 화면부터 디자인한다. 작은 화면 디자인을 큰 화면으로 넓히기가 반대보다 쉽다. 큰 화면부터 하면 작은 화면은 뒷전으로 밀린 티가 난다.
오버플로 패턴을 쓸 때는 화면 밖 내용이 있다는 것을 보이게 한다(잘린 끝, 그림자, 그라데이션).
점진적 공개는 보조 동작에 쓰고, 핵심 내용과 주요 탐색에는 되도록 쓰지 않는다. 여는 버튼에는 글자 라벨을 단다.

버그 제보

반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표

같은 HTML, 다른 모습

내비게이션

캐러셀

데이터 표

레이아웃 패턴

입력 장치를 가정하지 않기

지침

댓글