모바일 테이블 디자인을 위한 조언 12가지

웹 1.0 시대에 오남용 되던 표 디자인

인터넷 초기 단계에서의 웹사이트는 레이아웃 구성을 위해 너무 많은 <table>이 사용되었습니다. 웹 3.0(2000년대 중후반)부터 '의미 있는 마크업'이 중요해지고, 단순히 레이아웃을 위해 표를 사용하는 일을 지양하게 되었습니다. 오랜 기간 오남용 되었던 덕에 테이블은 부정적인 평판을 가지고 있지만, 데이터 표현에 있어서는 필수적입니다. 테이블은 정보를 구조화하여 사용자가 쉽게 비교하고 분석할 수 있도록 돕기 때문입니다. 

하지만 모바일 장치는 화면이 작아 테이블을 표시하기에 충분한 공간이 부족합니다. 이로 인해 테이블의 가독성과 사용성이 저하될 수 있습니다. 이런 문제점을 해결하기 위한 기본적인 방법 두 가지를 소개하겠습니다. 

 

모바일 테이블(표) 디자인

수평 스크롤 허용

화면 사이즈에 상관 없이 동일한 표 디자인을 제공하고 상하좌우로 스크롤을 제공하는 방법이 있습니다. 이 방식은 테이블을 표시해야 한다는 요구 사항을 충족하며, 별다른 디자인 작업 없이도 구현할 수 있다는 점에서 장점이 있습니다.

그러나 동시에, 디자인적 고려 없이 큰 요소를 모바일 화면에 억지로 배치하는 방식이라는 점에서 단점이 있습니다. 이중 축 스크롤이 사용자에게 혼란을 줍니다. 열 헤더와 행 헤더를 고정해 어느 정도 위치를 파악할 수 있도록 하더라도 불편함이 크게 개선되지는 않는다는 점 또한 분명합니다.

 

반응형 테이블 디자인

오늘날의 디자인 시스템에서도 흔히 볼 수 있는 해결책은 반응형 테이블입니다. 이 방식은 테이블을 본래의 테이블 형태가 아닌 다른 형태로 보여줍니다. 각 행(row)은 일종의 작은 2열 테이블처럼 동작하게 되며, 테이블 헤더는 각 행의 왼쪽 열(column)이 되고, 데이터는 오른쪽 열에 배치됩니다. 아래 그림 1에서는 이러한 예시를 보여줍니다.

그림1. 큰 테이블을 2열의 작은 테이블로 변경

기술적으로는 완벽한 해결방법입니다. 하지만 이 디자인에도 단점이 있습니다. 위 그림 좌측처럼 2열의 작은 테이블로 변경할 경우, 행이 너무 길어져서 전체 뷰포트를 차지하기 때문에 사용자는 페이지에서 길을 잃을 수 있습니다. 아코디언 목록과 거의 비슷한 디자인이지만, 아코디언 디자인보다 훨씬 나쁜 디자인입니다. 사용자가 열을 따라 데이터를 비교해야 하는 경우에는 있으나 마나 한 디자인이라 해도 과언이 아닙니다.

표가 표로서의 역할을 해낼 수 있도록 몇 가지 디자인 전략에 대해 설명하겠습니다.

 

모바일 테이블 디자인 전략 1 : 축약 또는 삭제

모바일을 위해 디자인할 때는 더 적은 열, 행당 더 적은 데이터, 더 읽기 쉬운 레이블, 아이콘을 통해 컴팩트하게 하는 것이 중요합니다. 이 문제를 해결하기 위한 세 가지 방법을 살펴보겠습니다.

1. 불필요한 데이터 제외시키기

표의 각 열의 목적과 사용자에게 어떤 가치를 제공하는지 파악한 후, 데이터를 제거합니다. 데이터에 가치가 있는지 여부는 개발팀, UX 리서치팀, UX 디자인팀 등 협업하고 있는 동료들과 상의해 정할 수 있습니다. 데이터를 줄이다보면 표가 전체로 삭제될 수도 있습니다. 표 대신 간단한 목록을 추가하는 것이 더 좋은 디자인일 수 있습니다. 

 

2. 아이콘으로 축약하기

대부분의 표는 너무 자세한 내용을 담고 있습니다. 특정 동작이나 상태  등을 아이콘으로 축약하면 차지하는 공간을 줄이고, 가독성을 높일 수 있습니다. 예를 들어 사용 가능한 상태를 녹색의 체크 아이콘으로 표시하거나, 삭제 버튼을 휴지통 아이콘을 사용할 수 있습니다. 아이콘으로 축약할 때 중요한 것은 누구나 아이콘을 보고 내용을 유추할 수 있어야 합니다. 이미 사용자들에게 익숙한 아이콘을 활용하는 것이 좋습니다.

 

3. 반복 항목을 제거하기

그림 2를 보면 상호, 평점, 웹사이트 주소, 전화번호, 주소가 적힌 열이 여러 번 반복되는 것을 볼 수 있습니다. 지나치게 반복되는 내용은 사용자가 정보를 파악하기 어렵게 합니다. 

그림 2. 지나치게 반복이 사용된 예

 

모바일 테이블 디자인 전략 2 : 컴팩트한 디자인을 위한 팁 5가지

1. 작은 글자를 활용하기

스타일 가이드나 디자인 시스템에서는 지정된 몇 가지의 텍스트를 사용해야 합니다. 하지만 표는 자세한 정보가 있기 때문에 존재합니다. 자세한 내용을 제한된 공간 안에 넣기 위해서는 텍스트의 크기를 줄이는 것이 오히려 가독성을 높입니다. 

 

2. 중요한 것을 강조하기

핵심정보로만 구성해야 합니다. 가장 중요한 정보가 무엇인지 알아내고, 강조합니다. 예를 들어 단위가 값 뒤에 나와야 하는 경우 값에만 볼드체 처리를 할 수 있습니다. 또 부가적인 정보는 보통의 텍스트보다 연한 색으로 표시함으로써 강조할 수도 있습니다.

 

3. 영역을 구분하는 항목을 적게 사용하기 

큰 화면에서의 테이블 디자인에 흔히 사용하는 border나 격행으로 배경색을 넣는 요소를 최소화 시킵니다. 너무 많은 구분은 콘텐츠 영역을 점점 더 줄어들게 합니다. 그리고 그 디자인 요소 또한 불필요한 정보로 인식됩니다. 

그림 3. 구분선 또는 구분 배경색을 생략한 디자인 예시

4. 적절하게 가로 정렬하기

표 내의 콘텐츠가 일목요연하게 보이려면 정렬을 잘 해야 합니다. 무분별한 가운데 정렬은 가독성을 해칩니다. 좋은 정렬을 위한 몇 가지 규칙을 제안하자면 다음과 같습니다.

• 줄바꿈이 가능한 텍스트는 좌측 정렬
• 아이콘으로 축약한 경우 가운데 정렬
• 금액은 우측 정렬
• 전체 행에 적용되는 동작 버튼(더보기 버튼, 삭제 버튼 등) 가장 오른쪽 열에 오른쪽 정렬
• 아이콘과 아이콘 레이블을 동시 제공할 경우, 아이콘과 레이블은 가운데 정렬
• 가장 왼쪽 열의 콘텐츠는 좌측 정렬

5. 수직 가운데 정렬은 조심스럽게

표 안에서 수직 가운데 정렬(vertical-align: center)은 대부분 가독성을 해칩니다. 하나의 행에 콘텐츠의 양이 많은 칸과 적은 칸이 있는 경우, 콘텐츠의 양이 적은 칸은 스크롤을 내려야 콘텐츠를 읽을 수 있는 문제가 발생합니다. 위쪽 정렬을 통해 사용자가 스크롤을 내렸다 올렸다 하며 콘텐츠를 조회할 일은 없앨 수 있습니다. 

 

위의 규칙을 적용한 디자인 사례를 소개하겠습니다. 

- 수직 정렬(위): 썸네일이 글줄 위로 붙어있는 것을 확인할 수 있습니다. - 즐겨찾기 버튼 : 익숙한 별표 버튼을 통해 축약해서 보여줍니다. - 목록간에 구분 선이 전혀 없습니다.	- 콘텐츠는 좌측정렬, 가격은 우측정렬로 구분선 없이도 서로 구분되어 보입니다. - 선 대신 카드 형식의 리스트로 표시합니다.  - 2개 이상의 행으로 더 많은 콘텐츠를 표시합니다.	- 테이블의 헤더 없이도 데이터만으로도 어떤 항목인지 유추가 가능합니다. - 비/구름과 같은 날씨 상태는 아이콘으로 축약합니다. - 풍향은 화살표로 축약합니다. - 더하기 버튼을 통해 상세 정보로 이동할 수 있다는 암시를 줍니다.

 

더 좋은 디자인을 위한 방법 4가지

1. 무한 스크롤 기술을 사용하기

페이지를 나누는 것은 때때로 유용합니다. 하지만 모바일에서 페이지를 이동하는 버튼을 배치할 경우, 스크롤을 위-아래로 계속해 움직여야 하는 문제가 생깁니다. 한 방향으로 스크롤만 해도 콘텐츠를 탐색할 수 있도록 기능을 구현하는 것이 좋습니다.

 

2. 2개의 열을 그룹핑해서 보여주기

하나의 열에 담기에는 중요한 정보가 많다면, 2개의 열에 배치할 수 있습니다. 2개의 열을 하나의 열처럼 디자인하고, 공간이 구분되는 지점을 최소화하세요. 

 

3. 검색과 정렬방법 선택 기능 제공하기

작은 화면에서 많은 정보를 표시하다보면 사용자들은 무한 스크롤을 하며 손가락에 고통을 줄 수 있습니다. 이름순, 거리순, 평점순 등 정렬방법을 선택할 수 있다면 정보를 탐색하는 시간을 줄여줍니다.

 

4. 점진적으로 콘텐츠를 표시하기

다양한 뷰포트 크기에 맞게 데이터를 표시할 수 있습니다. 모바일에서 콘텐츠의 양을 줄여서 디자인을 했다고 태블릿 또는 PC 버전에서는 더 많은 콘텐츠를 보여줄 수 있습니다.

그림 4. 점진적으로 콘텐츠를 표시

 

그림 4처럼 넓은 화면에서는 더 친절한 문구와 자세한 내용을, 좁은 화면에서는 축약해서 보여줄 수 있습니다. 

결론: 모바일 테이블 디자인의 핵심

모바일 환경에서 테이블 디자인은 화면 크기의 한계를 극복하고, 사용자가 정보를 쉽게 탐색하고 이해할 수 있도록 최적화하는 것이 중요합니다. 초기 웹 1.0 시대의 오남용된 테이블 디자인은 오늘날 반응형 웹 디자인과 의미 있는 마크업의 중요성을 통해 개선되고 있습니다.

모바일 환경에서는 데이터를 축약하거나 삭제하고, 컴팩트한 디자인을 적용하는 것이 효과적인 해결책이 될 수 있습니다. 

결국, 모바일 테이블 디자인은 단순히 데이터를 보여주는 것을 넘어 사용자 중심의 접근법을 통해 정보를 전달하는 데 초점을 맞춰야 합니다. 이를 통해 사용자는 작은 화면에서도 효율적으로 데이터를 탐색하고 분석할 수 있으며, 디자이너는 제한된 공간에서도 높은 가독성과 사용성을 제공할 수 있습니다.