🌟 디테일의 간격 시리즈! [✏️ 테이블 디자인 시 10가지 참고사항] (👀간단 요약) 좋은 테이블 디자인은 사용자가 데이터를 쉽게 확인하고, 비교할 수 있으며 원하는 조건에 따라 빠르게 정렬할 수 있습니다. 대시보드, 가격비교 화면, 구매 페이지, 배송일정 등을 확인할 때 텍스트 위주로 표기해주는 것보다 직관적으로 안내할 수 있는 테이블 디자인이 자주 쓰이는데요. 조금 더 구체적으로 살펴보면 아래와 같은 특징을 갖고 있어요. - 웹, 모바일에 최적화된 상태로 데이터 전달 및 확인 가능 - 사용자가 확인해야 할 데이터를 하나에 담을 수 있음 - 수정 및 추가가 쉬움 - 화면 내 인터페이스 로딩 속도 증가 - 상대적으로 깔끔한 레이아웃 유지 가능 📌 인터페이스에 가장 적절한 행 스타일 찾기 ✓ 행 스타일은 사용자가 데이터를 빠르게 찾고자 할 때 얼마나 도움이 되는지 결정하는 요소 ✓ 격자의 활용 : 엑셀, 스프레드시트 등에서 일반적으로 사용하는 스타일로 세로와 가로선을 모두 활용해 데이터 구분 가능. 다만 너무 많은 그리드가 포함될 경우 집중이 흐트러진다는 단점이 있어 상세한 데이터를 제공해야 할 때 활용하는 것이 좋음 ✓ 가로선의 활용 : 격자가 주는 피로함을 줄이는데 도움. 대부분의 인터페이스에 활용 가능하다는 장점이 있음 ✓ 얼룩말 줄무니 활용 : 각 행에 서로 다른 색상을 활용하는 등 단일 행에 집중하게 만드는 효과가 있음. 행 별 데이터 비교가 필요한 경우 유용하게 활용 가능 📌 테이블 헤더 활용 ✓ 행 헤더는 사용자가 열에 입력된 데이터를 어떻게 구분하고 확인해야 하는지에 대한 기준이 됨 ✓ 제목(타이틀)은 물론, 데이터와 별도 컬러를 지정해 언제든 구분하고 확인할 수 있도록 하는 것이 좋음 📌 데이터 및 텍스트 정렬 ✓ 텍스트를 포함한 대부분의 ‘열’ 데이터는 사용자가 자연스럽게 확인 할 수 있도록 왼쪽 정렬을 하는 것이 좋음 ✓ 숫자 데이터 등 ‘크기’와 관련된 경우 오른쪽 정렬이 좋음 ✓ 데이터 종류에 따라 정렬 조건을 반드시 확인하고 적용해야 함 📌 가로 또는 세로 스크롤 적용 ✓ 테이블 헤더는 스크롤과 관련 없이 항상 고정되어 있어야 비교가 편함 ✓ 한 화면에 모든 데이터가 적용되면 좋지만, 데이터 종류가 많아지면 그에 따라 가로 또는 세로로 스크롤해 확인할 수 있는 편의를 제공해야 함 📌 데이터 검색 및 필터링 ✓ 전체 데이터 중 원하는 대상만 확인하기 위해 스크롤을 끝까지 내리거나 하는 과정은 사용자에게 불편을 초래 ✓ 키워드로 원하는 대상을 쉽게 검색할 수 있거나, 필터를 통해 원하는 조건이 적용된 데이터를 빠르게 찾을 수 있도록 도와줘야 함 📌 너무 많은 글꼴과 색상, 스타일은 피하기 ✓ 테이블의 기본은 하나의 데이터가 아니라 전체 데이터를 쉽게 확인하기 위함 ✓ 너무 많은 글꼴과 색상이 적용될 경우 전체 데이터를 흐름에 따라 확인하는 과정에 집중하기 어려움 💬 덧붙임 알게 모르게 우리는 서비스를 이용하며 다양한 '테이블 UI'를 접하고 있어요. 꼭 대시보드와 같이 데이터를 여럿 확인하는 공간이 아니더라도 말이죠. 구독 서비스 가격(이용권) 비교 화면에도 테이블이 적용되고, 이벤트 당첨자 공지등의 게시글을 통해서도 만나볼 수 있습니다. 문제는 서비스 입장이, 우리의 익숙한 입장을 대변하는 경우가 많다는 점이에요. 사용자가 어떤 목적을 갖고 이 테이블을 확인하는지에 대한 고민이 부족한 경우에 해당합니다. 같은 맥락에서, 우리가 테이블을 사용자에게 공유할 목적, 사용하기 위한 목적으로 제작한다고 했을 때 어떤 부분에 초점을 맞추면 좋은지 10가지 내용이 잘 정리되어 있어 코멘트로 작성합니다. 💌 함께 보세요! ✓ 대시보드를 기획할 때 깊이 고민해야 할 것들 : https://careerly.co.kr/comments/11046