Tabs, Card, 종이 메타포의 후예들

한 줄로

탭은 종이 파일 탭, 카드는 종이 카드입니다. 둘 다 물리적 종이의 비유에서 UI로 옮겨온 패턴입니다.

Tabs

종이 파일 폴더에서 위나 옆에 튀어나온 탭은 어느 폴더에 무엇이 있는지 보여주는 라벨이었습니다. 이게 컴퓨터 시대 초기 GUI로 옮겨왔습니다.

1970년대 Xerox PARC에서 처음 GUI에 등장했고, 1990년대 Microsoft Office (Excel의 시트 탭, Word의 메뉴 탭)으로 대중화됐습니다.

웹에서는 다음과 같이 쓰입니다.

수평 탭: 가장 흔합니다.
수직 탭: 사이드바에서 씁니다.
브라우저 탭: 별도 영역으로, 1997 InternetWorks 첫 등장, 2001 Mozilla 대중화.

Card

종이 카드의 비유입니다. 명함, 인덱스 카드, 우편 엽서를 떠올리면 됩니다. 정보 한 묶음을 사각 박스에 담습니다.

UI로 본격 등장한 시점은 다음과 같습니다.

2010 Windows Phone 7 Metro: 큰 타일 카드.
2011 Google Now: 음성 비서의 카드 UI.
2014 Material Design: 카드를 공식 컴포넌트로 정립.

Card의 특성

자체 완결: 카드 하나가 하나의 정보 단위.
시각적 분리: 그림자와 테두리로 다른 카드와 구분됩니다.
반응형: 화면에 따라 자동 재배치됩니다.

대표 사용처는 Pinterest, 인스타그램, 카카오 채널, 토스 홈 등입니다.

바이브 메이커가 챙길 한 가지

데이터의 단위가 명확하다면 카드 UI가 거의 항상 안전한 선택입니다. 한 카드는 한 항목의 규칙을 지키면 사용자가 즉시 구조를 인식합니다.

관련

Folder · Material Design · Common region