데이터 표시

카드는 목록에서 반복되는 게 전제입니다. 반복되지 않는 걸 카드로 만들면 그냥 박스일 뿐입니다. 카드 안에 클릭 가능한 요소가 여러 개면 "카드 전체를 눌렀을 때 어디로 가는지"를 정해야 합니다.

카드로 할지 리스트로 할지는 "이미지가 중요한가"로 갈립니다. 쇼핑몰 상품은 카드(그리드), 메일함·알림함은 리스트가 맞습니다. 모바일에서 카드 2열은 좁아서 리스트로 바꾸는 경우가 많습니다.

모바일에서 표를 어떻게 할지가 항상 문제입니다. 선택지는 ①가로 스크롤 ②열 몇 개만 남기기 ③카드 형태로 변환. 시안 단계에서 정해두지 않으면 개발이 임의로 처리합니다.

한국 실무에서는 "슬라이더", "슬라이드", "롤링 배너"라고 훨씬 많이 부릅니다. 폼의 슬라이더(값 조절)와 완전히 다른 물건인데 이름이 같아 사고가 납니다. 그리고 2번째 이후 슬라이드는 거의 안 봅니다 — 중요한 내용을 3번째에 넣지 마세요.

여러 개를 동시에 펼칠 수 있는지를 정해야 합니다(하나만 열림 vs 여러 개 열림). 그리고 검색으로 찾아야 하는 중요한 내용을 아코디언에 접어두면 사용자가 못 찾습니다.

"더보기"를 눌러 같은 자리에서 펼쳐지면 디스클로저, 목록이 아래에 추가되면 Load More입니다. 개발 구현이 다르므로 구분해서 요청해야 합니다.

칩·태그와의 차이는 배지는 누르는 것이 아니라 보는 것이라는 점입니다. 숫자가 커질 때(999+) 어떻게 표시할지, 0일 때 숨길지를 정해야 합니다.

사진이 없을 때 무엇을 보여줄지를 반드시 정해야 합니다 — 이름 첫 글자, 기본 아이콘, 랜덤 색상 등. 이걸 안 정해두면 깨진 이미지 아이콘이 나옵니다.

비율(4:3, 16:9, 1:1)을 프로젝트 안에서 통일해야 합니다. 안 그러면 목록에서 카드 높이가 제각각이 됩니다. 그리고 업로드된 이미지가 비율에 안 맞을 때 잘라낼지(crop) 여백을 둘지를 정해야 합니다.

툴바에 버튼을 계속 추가하면 금세 넘칩니다. 자주 쓰는 것만 밖에 두고 나머지는 "더보기(⋯)"로 접는 규칙을 미리 정해두세요.

스텝 인디케이터와 비슷해 보이지만, 스텝은 앞으로 할 일, 타임라인은 이미 일어난 일입니다. 시간 표기(절대 시각 vs "3분 전")도 정해야 합니다.

깊이가 3단계를 넘어가면 사용자가 길을 잃습니다. 관리자 화면이라도 마찬가지입니다. 뎁스 제한을 기획 단계에서 정하세요.

차트는 데이터가 없을 때·1개일 때·비정상적으로 클 때 세 경우를 반드시 함께 설계해야 합니다. 시안에 예쁜 데이터만 그려놓으면 실제 서비스에서 깨집니다.

"다 보여주세요"가 가장 위험한 요구입니다. 대시보드는 무엇을 뺄지를 정하는 작업입니다. 사용자가 이 화면을 보고 어떤 결정을 내려야 하는지부터 정의하세요.

둘 다 회색 네모라서 헷갈리지만 의미가 정반대입니다. 스켈레톤은 "곧 나옵니다", 플레이스홀더는 "없습니다". 스켈레톤이 영원히 도는 화면은 버그입니다.