웹 디자인 #24
웹 디자인 #24웹사이트에서는 콘텐츠의 성격에 따라 보여주는 방식이 달라집니다. 상품이나 프로젝트처럼 하나씩 살펴봐야 하는 콘텐츠는 카드, 많은 항목을 빠르게 훑어야 한다면 리스트, 여러 값을 비교해야 한다면 테이블이 적합합니다.
긴 설명은 아코디언으로 정리할 수 있고, 여러 콘텐츠를 제한된 공간에서 넘겨 보여줄 때는 캐러셀, 이미지를 크게 감상하게 할 때는 라이트박스를 사용할 수 있습니다.
중요한 것은 컴포넌트의 모양이 아니라 사용자가 콘텐츠를 어떻게 탐색해야 하는지입니다.
콘텐츠에 맞는 컴포넌트를 선택해야 한다
웹 UI를 디자인하다 보면 카드가 편하다는 이유로 모든 콘텐츠를 카드 형태로 만드는 경우가 있습니다.
하지만 콘텐츠마다 사용자가 확인하는 방식이 다릅니다.
상품처럼 이미지와 가격을 하나씩 비교하는 화면과, 수십 명의 회원 정보를 빠르게 확인하는 관리자 화면은 같은 구조가 적합하지 않습니다.
먼저 사용자가 콘텐츠를 하나씩 살펴봐야 하는지, 빠르게 훑어야 하는지, 여러 값을 비교해야 하는지를 생각하는 것이 좋습니다.
카드 UI
카드는 이미지와 제목, 설명, 가격, 상태 같은 관련 정보를 하나의 독립된 단위로 묶어 보여주는 컴포넌트입니다.
블로그 글, 상품, 포트폴리오, 강의 목록처럼 각 콘텐츠 자체가 하나의 선택 대상일 때 많이 사용합니다.
카드에서 중요한 것은 정보를 많이 넣는 것이 아니라 우선순위를 만드는 것입니다. 상품 카드라면 이미지와 상품명, 가격이 먼저 보여야 하고 포트폴리오라면 프로젝트 이미지와 제목이 더 중요할 수 있습니다.
실제 서비스에서는 제목 길이와 이미지 비율이 항상 같지 않다는 점도 고려해야 합니다. 제목 최대 줄 수나 이미지 비율 같은 기본 규칙을 정해두면 콘텐츠가 바뀌어도 레이아웃을 안정적으로 유지할 수 있습니다.
리스트 UI
리스트는 여러 항목을 세로로 배치해 빠르게 훑어볼 수 있도록 만드는 방식입니다.
알림, 메시지, 검색 결과, 파일 목록, 설정 메뉴처럼 이미지보다 제목과 상태 정보가 중요한 화면에 잘 어울립니다.
카드보다 한 화면에 많은 정보를 보여줄 수 있다는 장점이 있기 때문에 정보 밀도가 높은 서비스에서 자주 사용합니다.
리스트 안에 편집, 삭제, 공유 같은 행동이 너무 많다면 모든 버튼을 노출하기보다 자주 사용하는 행동만 보여주고 나머지는 더보기 메뉴 안에 정리할 수 있습니다.
카드와 리스트, 어떻게 구분할까?
| 구분 | 카드 | 리스트 |
|---|---|---|
| 적합한 상황 | 콘텐츠를 하나씩 살펴볼 때 | 여러 항목을 빠르게 훑을 때 |
| 중심 정보 | 이미지와 핵심 콘텐츠 | 텍스트와 상태 정보 |
| 정보 밀도 | 비교적 낮음 | 비교적 높음 |
| 예시 | 상품, 포트폴리오, 블로그 | 알림, 메시지, 검색 결과 |
같은 콘텐츠라도 서비스의 목적에 따라 표현 방식은 달라질 수 있습니다.
이미지 탐색이 중요하다면 카드가 어울리고, 빠른 검색과 관리가 중요하다면 리스트가 더 효율적입니다.
테이블 UI
테이블은 데이터를 행과 열로 나눠 여러 항목의 값을 비교할 때 사용합니다.
회원 목록, 주문 내역, 통계, 재고, 가격 비교처럼 일정한 기준으로 반복되는 데이터에 적합합니다.
예를 들어 회원을 관리한다면 이름, 이메일, 가입일, 플랜, 상태를 하나의 행 안에서 확인할 수 있습니다.
테이블에서는 정렬도 중요합니다. 이름과 설명 같은 텍스트는 왼쪽에, 금액이나 수량처럼 자릿수를 비교해야 하는 숫자는 오른쪽에 정렬하면 데이터를 훨씬 빠르게 확인할 수 있습니다.
모바일에서는 모든 열을 억지로 줄이기보다 중요도가 낮은 정보를 숨기거나 가로 스크롤, 카드 형태 전환 등을 고려할 수 있습니다.
아코디언 UI
아코디언은 내용을 접어두고 사용자가 원하는 항목만 펼쳐볼 수 있도록 만드는 컴포넌트입니다.
가장 익숙한 예시는 FAQ입니다.
질문만 먼저 보여주고 선택했을 때 답변을 펼쳐주면 긴 내용을 한 화면에 모두 노출하지 않아도 됩니다.
다만 가격이나 중요한 제한 사항처럼 사용자가 반드시 확인해야 하는 내용까지 모두 아코디언 안에 숨기면 안 됩니다. 핵심 정보는 바로 보여주고, 추가 설명을 접어두는 방식이 좋습니다.
캐러셀 UI
캐러셀은 여러 콘텐츠를 좌우로 넘겨 보여주는 컴포넌트입니다.
메인 배너와 추천 상품, 고객 후기, 이미지 갤러리 등에서 자주 볼 수 있습니다.
제한된 공간에서 여러 콘텐츠를 보여줄 수 있다는 장점이 있지만, 사용자가 다음 슬라이드를 넘기지 않는다면 뒤에 있는 콘텐츠는 보지 못할 수도 있습니다.
따라서 가장 중요한 정보는 첫 번째에 배치하고, 현재 위치를 알 수 있는 인디케이터와 이전·다음 버튼을 함께 제공하는 것이 좋습니다.
자동 재생을 사용한다면 콘텐츠를 읽을 수 있을 만큼 충분한 시간을 주고, 사용자가 직접 멈추거나 이동할 수 있어야 합니다.
라이트박스 UI
라이트박스는 이미지나 영상을 선택했을 때 현재 페이지 위에서 크게 보여주는 방식입니다.
포트폴리오, 상품 상세 이미지, 사진 갤러리처럼 이미지를 더 자세히 보고 싶을 때 사용합니다.
배경은 어둡게 처리해 콘텐츠에 집중하도록 만들고, 여러 이미지가 있다면 이전·다음 버튼이나 스와이프로 계속 탐색할 수 있습니다.
모달과 형태는 비슷하지만 목적은 조금 다릅니다. 모달이 입력이나 확인 같은 작업에 집중시키는 UI라면, 라이트박스는 이미지와 영상 같은 시각 콘텐츠를 크게 감상하는 데 초점이 있습니다.
닫기 버튼이나 ESC 키 등 원래 화면으로 쉽게 돌아갈 수 있는 방법도 함께 제공해야 합니다.
어떤 컴포넌트를 사용하면 될까?
콘텐츠를 하나의 독립된 단위로 보여주고 싶다면 카드, 많은 정보를 빠르게 탐색한다면 리스트, 데이터를 행과 열로 비교한다면 테이블을 사용할 수 있습니다.
긴 부가 설명을 정리할 때는 아코디언, 제한된 영역에서 여러 콘텐츠를 전환할 때는 캐러셀, 이미지를 크게 확인하게 만들고 싶다면 라이트박스가 적합합니다.
컴포넌트를 고를 때는 유행하는 UI를 따라가기보다 다음 질문 하나를 먼저 생각해보세요.
“사용자는 이 콘텐츠를 어떤 방식으로 봐야 가장 편할까?”
그 답이 어떤 컴포넌트를 사용해야 할지 결정하는 가장 좋은 기준이 됩니다.
빠르게 확인하기
- 하나씩 살펴볼 콘텐츠라면 카드가 적합한가?
- 빠르게 훑어야 한다면 리스트가 더 낫지 않은가?
- 여러 값을 비교해야 한다면 테이블을 사용했는가?
- 중요한 정보를 아코디언 안에 숨기지 않았는가?
- 캐러셀의 중요한 콘텐츠가 뒤에만 숨어 있지 않은가?
- 라이트박스를 쉽게 닫고 이전 화면으로 돌아갈 수 있는가?
- 모바일에서도 동일한 방식이 편리한가?
