[8/100] table

8번째는 table(이하 테이블)입니다. 데이터 시트 형태의 인터페이스인데, 데이터 시트와는 조금 다르게 간단한 기능을 수행하는 부분도 있습니다. 단순하게 정보를 나열만 한다면 굉장히 간단한 형태의 인터페이스지만, 서비스의 성격에 따라 보여주는 정보 및 제공하는 기능이 다양하기 때문에 설계 및 구현 난이도가 높아지는 성격이 있습니다.

 

 

테이블에는 크게 헤더와 컨텐츠가 있는데, 헤더는 테이블 상단에 위치해서 보이는 콘텐츠의 제목을 표시하는 기능을 합니다. 경우에 따라서는 생략되는데, 이유로는 콘텐츠의 정보가 간단해서 파악하는데 굳이 추가적인 명시를 하지 않아도 되는 경우입니다. 콘텐츠의 형태는 다양하며, 위의 예제에는 체크박스, 아바타, 텍스트, 드롭다운, 칩(혹은 배지), 버튼 등이 있습니다. 물론 훨씬 다양하고 복잡한 형태도 많습니다.

 

테이블 상단에 있는 홀더에는 주로 테이블 검색을 위한 인풋, 선택된 테이블에 대한 기능, 테이블 필터 및 정렬을 위한 기능들이 포함됩니다.

 

개인적으로 디자인시스템을 구축하면서 일관성을 유지하는 게 다른 컴포넌트에 비해 어려웠던 거 같습니다. 아무래도 기능 정리가 굉장히 잘 되어 있지 않았다면, 수정이 잦고, 정보 구조가 바뀌는 경우가 많아 그로 인해서 일관성이 유지가 힘들었던 거 같습니다.