참고할 사례
공유해 두었던 계정은 @witsdev다. 필터, Find 검색 같은 공개 사례를 Console UI/UX 카테고리에 모아 두고 공부하려 한다. 링크는 읽을 자료이며, 모든 기법을 검증하거나 적용했다는 뜻은 아니다.
함께 볼 기준은 Vercel의 Web Interface Guidelines다. 키보드 조작, URL에 남기는 상태, 로딩·빈 화면·오류 처리 같은 항목을 예제의 확인 기준으로 삼는다. Geist는 컴포넌트와 상태 표현을 살펴볼 참고 자료다.
화면을 볼 때 던질 질문
- 필터: 지금 선택한 조건이 잘 보이나? 새로고침이나 뒤로 가기 뒤에도 남아 있나?
- 검색: 결과 순서가 바뀌면 선택하던 항목은 어떻게 되나?
- 키보드: 마우스 없이 이동하고 선택하고 닫을 수 있나? 포커스는 어디로 돌아오나?
- 상태: 불러오는 중인지, 결과가 없는지, 실패했는지 구분되나?
- 모션: 움직임이 위치 변화를 이해하는 데 도움이 되나? 움직임을 줄여도 사용할 수 있나?
React의 key와 포인터 위치를 구분했던 검색 결과 학습 기록도 여기와 연결된다. UI의 동작과 React가 항목을 구분하는 방법을 함께 살펴볼 수 있다.
작은 예제로 옮기기
독립적인 샘플 목록 하나로 시작한다. 참고 화면에서 눈여겨본 동작을 적고, 구현 전후를 비교하고, 키보드와 오류 상황을 직접 확인한 뒤 기록한다.
첫 후보는 필터 조건을 URL에 남기는 퀘스트다. 이 블로그의 퀘스트 목록에도 같은 방식의 필터를 마련했다. 직접 조건을 바꾸고 새로고침·뒤로 가기를 해 보며 공부할 수 있다.