사용 가이드로 건너뛰기
Search UX작성자 Owl-Listener

Search UX 스킬.

실패하는 검색까지 포함해 전체 검색 경험을 설계하세요.

  • 인터랙션 디자인
  • 검색
소스 검토 · Search UXSKILL.md
작업 인터랙션 디자인 산출물 • 검색 입력 및 추천어 명세 • 결과 카드 또는 결과 행의 콘텐츠와 필터 동작 • 검색 결과 없음 복구 방안과 검색 행동 측정 요구사항 시작하기 전에 검색 서비스와 쿼리 계측은 이 가이드의 범위 밖에 있습니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시가 아님

01 기능 소개

사용자가 다시 길을 찾도록 돕는 검색 설계

입력, 추천어, 순위 표시, 필터링, 결과 없음 복구까지 아우르는 완전한 검색 인터페이스 가이드입니다.

소스 기반 워크플로실행 벤치마크 아님

작업 방식

Search UX는 쿼리 입력부터 어떤 결과를 열지 결정하기까지의 과정을 다룹니다. 검색을 독립된 입력창으로 보지 않고 추천어, 키보드 접근, 결과 그룹화, 스니펫, 메타데이터, 필터링을 함께 고려합니다. 또한 사람들이 콘텐츠 항목이 아니라 설정 같은 목적지를 검색하기도 한다는 점을 인식합니다.

가장 강조하는 부분은 복구입니다. 결과 없음 화면은 입력한 쿼리를 유지하고, 무엇을 검색했는지 설명하며, 관련 있는 수정안이나 대체 경로를 제안해야 합니다. 이는 인터페이스 요구사항이며, 오타 허용, 관련도 순위, 개인화의 구현은 여전히 실제 검색 시스템에 달려 있습니다.

예상 산출물

  • 검색 입력 및 추천어 명세
  • 결과 카드 또는 결과 행의 콘텐츠와 필터 동작
  • 검색 결과 없음 복구 방안과 검색 행동 측정 요구사항
예시 브리프 보기

브리프에서 검토까지

  1. 01
    검색 대상 자료 정의

    콘텐츠 유형과 탐색 목적지를 나열한 다음, 결과가 클릭 결정을 뒷받침하기 위해 필요한 정보를 선택하세요.

  2. 02
    검색과 필터링 명세

    쿼리 유지, 추천어, 키보드 이동, 결과 수, 개별적으로 제거 가능한 필터를 설계하세요.

  3. 03
    실패한 쿼리 처리

    지원되는 경우 수정안이나 더 넓은 경로를 제공하고, 관찰할 가치가 있는 쿼리 및 이탈 신호를 파악하세요.

02 활용 상황

사용 시점

검색 서비스와 쿼리 계측은 이 가이드의 범위 밖에 있습니다.

적합한 경우

  • 대규모 카탈로그사용자가 작은 계층 구조를 탐색하는 대신 속성으로 항목을 찾아야 할 때 유용합니다.
  • 검색 복구현재 작업을 그대로 끝내 버리는 빈 결과 화면을 개선하려는 팀에 도움이 됩니다.

확인할 한계

  • 검색 엔진이 아님이 소스는 인덱싱 백엔드를 제공하거나 순위 알고리즘을 구현하지 않습니다.
  • 탐색 구조를 대체하지 않음좋은 검색 인터페이스가 있어도 이해하기 쉬운 카테고리와 내비게이션은 여전히 필요합니다.

준비할 입력

  • 콘텐츠 유형검색 가능한 필드와 사용자가 결과를 구분하는 데 필요한 메타데이터를 제공하세요.
  • 쿼리 근거가능하다면 자주 쓰는 쿼리, 결과 없음 사례, 탐색 목적의 검색을 포함하세요.
  • 백엔드 기능오타 처리, 필터, 정렬, 개인화를 가정하지 말고 사용 가능한 기능을 명시하세요.

03 핵심 결정

핵심 결정

  1. 결과가 일치하는 이유 설명

    유용한 스니펫이나 일치 필드 단서는 결과를 열기 전의 추측을 줄여 줍니다.

  2. 필터는 되돌릴 수 있어야 함

    눈에 보이고 개별적으로 제거할 수 있는 필터는 사용자가 좁혀진 결과 집합을 이해하고 되돌리는 데 도움이 됩니다.

04 예시 브리프

집중 브리프로 시작하기

아래 예시 브리프는 테스트되지 않았습니다. 사용하기 전에 스킬의 설정을 확인하세요.

설정 검토

저장소에 문서화된 설치 방법을 사용하고 참조된 보조 파일을 모두 유지하세요. 이 항목은 실행 가능한 애플리케이션이 아니라 집중된 디자인 방법을 설명합니다.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/search-ux/SKILL.md

검색 서비스와 쿼리 계측은 이 가이드의 범위 밖에 있습니다.

하나의 산출물로 시작

스킬을 실행하기 전에 이 브리프의 범위, 소스 자료, 제약 조건을 상황에 맞게 조정하세요.

예시 브리프
디자인 템플릿, 작성자, 튜토리얼이 포함된 라이브러리에 search-ux를 사용하세요. 추천어, 그룹화된 결과, 제거 가능한 필터를 설계하세요. 오타가 있어 결과가 없는 쿼리와 계정 설정으로 이동하려는 탐색 목적의 쿼리를 포함하세요. 검색 백엔드 작업이 필요한 동작은 표시하세요.

결과 점검

실제 출력을 다음의 관찰 가능한 기준과 비교해 확인하세요.

  • 입력한 쿼리가 필터링과 빈 결과 상태에서도 유지됩니다.
  • 적용된 필터가 보이고 제거할 수 있습니다.
  • 결과 메타데이터가 비슷해 보이는 제목을 구분하는 데 도움이 됩니다.

OpenDesign은 코딩 에이전트를 위한 로컬 디자인 워크스페이스를 제공합니다. 이 목록은 스킬이 번들로 포함되어 있다거나 외부 도구, 자격 증명, 소프트웨어 종속성이 포함되어 있다는 뜻이 아닙니다.

05 출처 및 라이선스

소스 및 라이선스

이 페이지는 아래에 링크된 고정된 소스 리비전을 설명합니다. 업스트림의 동작과 요구사항은 변경될 수 있습니다.

소스 소유자
Owl-Listener
라이선스
MIT
검토된 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
입력, 추천어, 순위 표시, 필터링, 결과 없음 복구까지 아우르는 완전한 검색 인터페이스 가이드입니다.

링크된 소스를 바탕으로 OpenDesign이 작성한 원본 요약입니다. 저장소 스타 수는 특정 시점의 인기 지표일 뿐 스킬 사용량이나 품질 점수가 아닙니다.

06 시작 전 질문

시작 전 질문

오타 허용을 추가할 수 있나요?

원하는 동작을 명세할 수는 있습니다. 해당 동작은 검색 백엔드가 지원하거나 구현해야 합니다.

결과는 항상 그리드를 사용해야 하나요?

아닙니다. 이 소스는 훑어보기 좋은 목록과 시각적 썸네일이 주된 선택 신호인 그리드를 구분합니다.

왜 탐색 목적지를 포함하나요?

일부 쿼리는 문서를 찾기보다 제품 내 알려진 위치에 도달하려는 의도를 나타냅니다.

OpenDesign

다음 디자인 반복을 위한 여유를 만드세요.

브리프, 소스 자료, 디자인 작업을 로컬 워크스페이스에 함께 보관하세요. 워크플로에 추가하기 전에 스킬 자체의 설정을 확인하세요.

업스트림 소스 파일
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/search-ux/SKILL.md