데이터 표시

데이터 표시 컴포넌트는 같은 정보를 장식하는 도구가 아니라 사용자가 비교하고 탐색하고 판단하는 방식을 결정합니다. 데이터의 관계, 양, 주요 작업과 빈·로딩·오류 상태를 함께 고려합니다.

컴포넌트 목록

컴포넌트	사용 목적	사용 시점과 주의사항
Avatar	사용자, 조직 또는 개체 식별	사진이나 이니셜로 빠른 식별을 도울 때 사용합니다. 이미지가 없거나 로드에 실패하는 대체 상태를 제공합니다.
Badge	수량 또는 짧은 상태 강조	읽지 않은 항목 수나 처리 상태처럼 짧은 정보를 보조적으로 표시합니다. 색상만으로 의미를 전달하지 않습니다.
Tag	분류, 속성, 필터 값 표현	여러 항목에 반복되는 메타데이터를 짧게 표시합니다. 제거 가능한 Tag는 버튼의 의미와 포커스 상태를 제공합니다.
Card	연관된 정보와 액션을 하나의 단위로 그룹화	서로 독립적인 항목을 탐색할 때 사용합니다. 카드 전체와 내부 링크의 클릭 영역이 충돌하지 않도록 합니다.
List	반복 항목을 한 방향으로 탐색	항목별 정보 구조가 단순하고 열 비교가 필요 없을 때 사용합니다. 긴 목록에는 페이지 이동이나 점진적 로딩을 고려합니다.
Table	여러 항목의 동일한 속성을 열 단위로 비교	정확한 값 비교와 정렬이 중요할 때 사용합니다. 열 제목, 행 관계와 좁은 화면 대응을 제공합니다.
Stat	핵심 수치, 단위와 변화량 강조	대시보드에서 중요한 지표를 빠르게 확인할 때 사용합니다. 비교 기준과 측정 기간을 함께 표시합니다.
Timeline	사건과 상태 변화를 시간 순서로 표현	이력이나 진행 기록의 순서가 중요할 때 사용합니다. 날짜뿐 아니라 사건 설명과 현재 상태를 제공합니다.
Tree	상하위 관계가 있는 계층 데이터 탐색	파일이나 조직 구조처럼 부모·자식 관계를 유지해야 할 때 사용합니다. 펼침 상태와 키보드 탐색을 지원합니다.
Calendar	날짜를 기준으로 일정과 정보를 표현	날짜 간 관계와 일정 분포를 확인할 때 사용합니다. 목록 보기와 오늘·선택 날짜의 명확한 상태를 제공합니다.
Chart	외부 차트 라이브러리 없이 SVG로 수치와 추세 표현	막대·선·영역·도넛·아크 차트에 사용합니다. 패턴과 흑백 모드로 색상 외의 구분 수단을 제공합니다.
ChartJs	Chart.js 기반으로 수치와 비율 시각화	Canvas 렌더링과 chartOptions 확장이 필요할 때 사용합니다. 차트와 함께 데이터 표를 제공합니다.
ChartEcharts	ECharts 기반으로 수치와 추세 시각화	ECharts 옵션을 chartOptions로 확장할 때 사용합니다. 제목, 단위와 데이터 표를 함께 확인합니다.
ChartHighcharts	Highcharts 기반으로 수치와 추세 시각화	Highcharts 옵션을 chartOptions로 확장할 때 사용합니다. 도입 조건은 Storybook 문서의 라이선스 안내를 확인합니다.
ChartD3	D3.js 기반 SVG로 데이터 시각화	D3 스케일과 경로를 활용한 시각화에 사용합니다. 시각적 표현과 함께 읽을 수 있는 데이터 표를 제공합니다.

선택 기준

행 단위로 읽으면 List, 열 간 정확한 비교가 필요하면 Table, 각 항목이 독립된 요약과 액션을 가지면 Card를 사용합니다. 시간의 순서는 Timeline, 계층 관계는 Tree, 날짜 위치 자체가 정보라면 Calendar를 선택합니다.

수치의 크기·추세·비율을 비교하면 차트 계열을 선택합니다. 외부 차트 라이브러리 없이 패턴·흑백 표현이 필요하면 Chart, 기존 프로젝트의 차트 엔진과 옵션을 활용하면 ChartJs·ChartEcharts·ChartHighcharts, D3 기반 SVG 표현이 필요하면 ChartD3를 사용합니다. 라이브러리 기반 4종은 막대·선·영역·도넛·파이를 지원하며, Chart의 아크·패턴 옵션과는 구분합니다.

차트 예제는 HTML·Gulp·Vue·React와 Next.js·Nuxt의 재사용 흐름을 기준으로 확인합니다. 차트 계열에는 WebSquare 탭이 제공되지 않습니다. 각 컴포넌트 링크에서 구현 코드, 데이터 형식과 지원 옵션을 확인합니다.

데이터 상태

• 로딩, 일부 로딩, 빈 결과, 권한 없음, 오류 상태를 정상 데이터와 같은 수준으로 설계합니다.
• 정렬과 필터 적용 여부, 전체 건수, 현재 표시 범위를 사용자가 확인할 수 있게 합니다.
• 숫자는 단위와 기준 기간을 포함하고 날짜·통화 형식은 서비스 로케일에 맞춥니다.
• 차트는 제목·설명·단위를 제공하고 색상만으로 항목을 구분하지 않습니다. 데이터 표로 정확한 값을 확인할 수 있게 하며 빈 데이터와 좁은 화면도 검증합니다.
• 데이터가 갱신되어도 현재 포커스, 스크롤, 선택 상태가 불필요하게 초기화되지 않도록 합니다.