WIZ Design System

쓰는 곳#

컴포넌트 카탈로그, 사용자 목록, 문서 검색, 정책 검색처럼 “조건 입력 → 결과 확인 → 정렬·보기 전환 → 다음 페이지”가 반복되는 화면에 씁니다. 검색 조건과 결과 도구를 섞지 않는 것이 핵심입니다.

적용 현황#

기준서: 완료
포털 적용: /docs/components 검색·필터·결과 도구, 이 문서의 조합 데모
재사용 구현: 포털 전용 조합 데모 있음 — 패키지 API는 아직 없음
배포 패키지: 미포함 — @wds/ui-web 런타임 패키지에는 내려가지 않음
다음 조치: 반복 적용처가 늘어나면 훅·registry·패키지 후보로 분리

조합 데모#

검색 조건, 결과 도구, 결과 목록을 의도적으로 분리한 실제 WDS 컴포넌트 조합입니다. 상단은 검색어와 필터만 다루고, 결과 영역에서 목록표시·정렬기준·보기 방식을 제어합니다.

검색 결과 12건

목록표시

정렬기준

Buttonbutton

액션

주요 행동, 보조 행동, 대기 상태를 같은 높이 체계로 표현합니다.

Web · Flutter2026-06-27

DropdownMenudropdown-menu

액션

행 단위 보조 명령을 좁은 공간에 정리합니다.

Web2026-06-21

IconButtonicon-button

액션

반복 도구와 밀도 높은 명령을 아이콘 중심으로 배치합니다.

Web · Flutter2026-06-26

Inputinput

입력·선택

텍스트 입력, clearable, leading icon을 포함한 기본 입력 필드입니다.

Web · Flutter2026-06-28

SegmentedButtonsegmented-button

입력·선택

같은 축의 보기 방식이나 상태를 빠르게 전환합니다.

Web · Flutter2026-06-28

Adaptive Search Results — 검색 조건과 결과 도구를 분리한 WDS 조합

구조#

검색 조건: 검색어, 필터 열기, 선택된 조건 요약
결과 헤더: 검색 결과 N건 또는 선택된 범위명과 카운트, 카드/목록 아이콘 스위치
결과 도구: 목록표시, 정렬기준, 선택 액션
결과 목록: 카드, 표, 매트릭스, 리스트 중 하나
페이지 이동: 긴 결과를 무한 렌더링하지 않고 페이지 단위로 이동

웹 규칙#

검색: 입력은 첫 줄의 가장 큰 컨트롤. 고급 필터는 버튼·Popover·SideSheet로 분리
필터: 주요 1~2개는 노출, 나머지는 “필터” 표면에 묶음
보기 전환: 카드/목록 전환은 텍스트 버튼이 아니라 결과 헤더 오른쪽의 아이콘 스위치로 배치하고, hover/focus 툴팁으로 이름을 제공합니다
결과 도구: 목록표시 Select, 정렬기준 Select를 결과 헤더 아래에 배치
결과: 표·매트릭스는 표면 안에서만 가로 스크롤. 페이지 전체 가로 스크롤 금지
대량 데이터: 기본 10/20/50개 페이지네이션. 몇천 개 결과를 한 번에 렌더링하지 않음

모바일 규칙#

검색: 검색 입력 + 필터 버튼을 첫 행에 둠. 필터 칩을 상시 두 줄로 펼치지 않음
필터: BottomSheet 또는 접힌 내부 레일. 선택 수는 필터 버튼 배지로 표시
보기 전환: 검색 결과 제목 오른쪽에 카드/목록 아이콘 스위치로 배치. 좁은 폭에서도 텍스트 라벨을 노출하지 않고 툴팁·접근성 이름으로 보완
결과 도구: 목록표시·정렬기준은 compact Select로 줄임. 320px에서 잘리면 내부 가로 스크롤이 아니라 2열 그리드·적층으로 재배치
결과: 카드 또는 핵심 열 중심 리스트를 기본. 복잡한 표는 상세 화면에서 확장
페이지 이동: 모바일에서도 페이지네이션 또는 “더 보기”를 사용. 무한 스크롤은 실시간 피드에만 제한

모바일 테이블 전환 규칙#

모바일에서 모든 표를 같은 카드 스택으로 바꾸지 않습니다. 정보의 성격에 따라 표현을 먼저 고릅니다.

데이터 비교·숫자 행렬: 웹은 Table/DataGrid를 유지하고, 모바일은 열 의미가 필요할 때만 표면 내부 스크롤 또는 상세 화면으로 보냅니다
검색 결과 엔티티: 웹은 Table 또는 카드 그리드, 모바일은 카드/리스트를 기본값으로 전환하고 핵심 2~3개 필드만 노출합니다
상태·적용 현황·메타: 표를 쓰지 않고 StatusDefinitionList처럼 반복 라벨 없는 정의 목록으로 표현합니다
4열 이상 업무 데이터: 웹은 Table/DataGrid, 모바일은 요약 카드 + 상세 Drawer/BottomSheet로 분리합니다

스크롤바 규칙#

웹: 결과 도구·필터가 실제로 넘치는 경우에도 먼저 컨트롤 폭을 줄이고, 그래도 필요한 내부 스크롤 표면에는 얇은 scrollbar thumb만 표시
모바일: 스크롤바를 노출하지 않음. 컨트롤이 잘리면 축약, 2열, 적층 순서로 해결
위치: 스크롤 gutter는 표면 바깥 여백을 먹지 않게 가장 안쪽에 둠
금지: 화면 잘림을 overflow-x: auto와 숨긴 스크롤바로 통과 처리하지 않음

상태#

기본: 결과 헤더, 결과 도구, 목록
검색 중: 입력은 유지, 결과 영역에 Skeleton 또는 로딩 행
결과 없음: EmptyState + 조건 초기화
오류: FormMessage(error) + 다시 시도
조건 적용: 필터 버튼 배지, 결과 헤더 카운트 갱신, URL 동기

접근성#

검색 결과 수는 role="status" 또는 aria-live="polite"로 변경을 알립니다.
필터 열기 버튼은 aria-expanded, aria-controls, 선택 수를 이름에 포함합니다.
결과 도구의 Select는 aria-label을 명확히 둡니다.
표·매트릭스의 가로 스크롤은 표면 안 region으로 제한하고 키보드 도달을 보장합니다.
보기 방식 전환은 URL에 반영해 뒤로가기와 공유 링크가 같은 상태를 복원합니다.

사용 컴포넌트#

Input · Button · Select · SegmentedButton · Pagination · ScrollRail · EmptyState · FormMessage

검수 기준#

320px: 페이지 전체 가로 스크롤 없음
결과 도구: Select·아이콘 스위치가 화면 밖으로 잘리지 않고, 모바일에서는 내부 가로 스크롤 없이 재배치
조건/결과 분리: 검색 조건 영역에 결과 카운트·보기 전환이 섞이지 않음
대량 결과: page size가 적용되고 렌더링 결과 수가 제한됨
URL 복원: q, cat, sort, size, view, page가 뒤로가기와 새로고침에서 유지
드롭다운: Select 팝오버가 컨테이너에 잘리지 않음