그래픽 디자인에서 UI·UX로, 검색 결과가 없는 화면부터 설계해보세요

완성 화면 옆에 비어 있는 순간을 놓아보세요

그래픽 디자인에서 UI·UX로 전환을 준비한다면 색상과 배치가 완성된 화면 하나를 여러 사용 상황으로 확장해보세요. 같은 검색 화면도 아직 검색하지 않았는지, 결과가 없는지, 서버 응답에 실패했는지에 따라 안내와 행동이 달라집니다.

Carbon Design System은 최초 사용, 사용자 행동으로 인한 빈 결과, 오류 상황을 구분하고 맥락에 맞는 다음 행동을 안내하도록 설명합니다. 아래는 이를 참고한 가상의 책 검색 서비스 설계 과제입니다. 실제 서비스 개선이나 사용자 조사 사례가 아닙니다.

검색 화면을 다섯 상태로 나누세요

이번 과제에서는 검색어를 입력한 뒤 검색 버튼이나 Enter로 요청한다고 정합니다. 아무 글자도 없는 입력은 요청하지 않고 검색어를 입력하도록 안내합니다. 먼저 이 작동 규칙을 화면 옆에 적어두세요.

• 처음 진입: ‘찾는 책의 제목을 입력하세요.’ 검색 전에는 결과 0건이라는 메시지를 표시하지 않습니다.
• 검색 중: ‘책을 찾고 있어요.’ 요청이 끝나기 전에는 결과 없음으로 단정하지 않습니다.
• 결과 있음: 결과 수와 책 목록을 보여줍니다. 어떤 검색어에 대한 결과인지도 함께 표시합니다.
• 결과 없음: 요청은 정상 완료됐지만 일치하는 책이 없습니다. ‘일치하는 책이 없어요. 제목의 일부로 다시 검색해보세요.’라고 안내하고 입력을 수정할 수 있게 합니다.
• 불러오기 실패: ‘검색 결과를 불러오지 못했어요.’라고 표시하고 다시 시도할 행동을 제공합니다. 결과가 실제로 0건인지 알 수 없으므로 결과 없음 화면을 쓰지 않습니다.

다섯 화면을 모두 다른 스타일로 장식하기보다 검색창·결과 영역의 위치는 일관되게 두고, 현재 상태와 다음 행동이 달라지는 부분을 명확히 해보세요.

버튼을 누른 뒤의 규칙도 적으세요

‘다시 시도’ 버튼만 그려두면 어떤 값을 보내는지 알 수 없습니다. 이 연습에서는 실패한 검색어를 보존하고, 그 검색어로 재요청하는 것으로 정합니다. 새 검색을 하고 싶으면 입력을 수정해 검색을 실행합니다. 버튼 문구와 실제 동작이 맞는지 확인하세요.

검색 중에도 새 검색을 허용한다면, 이전 요청이 늦게 도착했을 때 최신 결과를 덮어쓰지 않도록 요구사항을 남깁니다. 반대로 중복 요청을 막는다면 무엇을 언제까지 제한하는지 적습니다. 두 선택 중 어느 것을 택했는지와 이유를 설명하는 것이 핵심입니다.

화면별 명세에는 ‘진입 조건 / 안내 문구 / 가능한 행동 / 보존할 값 / 다음 상태’를 적어보세요. 색상만으로 실패와 정상 상태를 구분하지 말고 문구로도 차이를 전달합니다.

정지 화면 대신 세 가지 경로를 점검하세요

아래 경로를 프로토타입에서 연결해보세요. 서버 없이 만든 모형이라면 응답을 가정한 시뮬레이션임을 표시합니다.

1. 처음 진입 → 제목 입력 → 검색 중 → 결과 없음 → 검색어 수정 → 결과 있음.
2. 제목 입력 → 검색 중 → 실패 → 같은 검색어로 다시 시도 → 결과 있음.
3. A 검색 → B 검색 → B 응답 → 늦은 A 응답. 화면에 남아야 할 검색어와 결과를 확인합니다.

오늘은 결과 없음과 실패 화면 두 장부터 그려보세요. 각각에서 사용자가 무엇을 바꿀 수 있는지 설명할 수 있어야 합니다. 포트폴리오에는 상태를 나눈 이유, 선택한 재시도 규칙, 아직 검증하지 못한 동작을 남기고, 시험하지 않은 사용성이나 전환율 개선을 성과로 적지 않습니다.

자료 정리와 초안 작성에 AI를 활용한 공식 정보성 글입니다. 예시는 실제 개인 경험이나 채용 성공 사례가 아닙니다.

출처 및 편집

폴리오쉽 에디터 · 공식 에디토리얼

Carbon Design System · Empty states ↗