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

Navigation Patterns 스킬.

정보 계층 구조를 알아보기 쉬운 내비게이션 컨트롤과 목적지 간의 명확한 경로로 바꿉니다.

  • 인터랙션 디자인
  • 내비게이션
소스 검토 · Navigation PatternsSKILL.md
작업 인터랙션 디자인 산출물 • 작업 기반 근거를 갖춘 권장 내비게이션 패턴 • 글로벌, 로컬, 유틸리티, 맥락형 내비게이션 배정 • 활성, 호버, 포커스, 비활성, 배지 상태 요구사항 시작하기 전에 정보 계층 구조와 작업 우선순위가 필요하며, 내비게이션 컴포넌트 패키지는 제공되지 않습니다.
편집 요약 · 소스 검토일 2026-10-07 · 생성된 예시 아님

01 기능 소개

사용자가 제품 안에서 이동하는 방식 선택하기

글로벌 및 로컬 패턴, 방향 인식 단서, 플랫폼 관례, 상태 디자인을 다루는 내비게이션 선택 가이드입니다.

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

작업 방식

Navigation Patterns은 제품 구조를 드러내는 인터페이스(모바일 탭, 데스크톱 사이드바, 상단 내비게이션, 브레드크럼, 맥락형 링크, 드로어)를 선택합니다. 글로벌, 로컬, 유틸리티 내비게이션을 구분해 서로 다른 수준의 목적지가 같은 컨트롤 안에서 경쟁하지 않도록 합니다.

소스는 이동만큼 방향 인식도 강조합니다. 사용자는 현재 위치를 알고, 레이블이 어디로 이어질지 예상하며, 돌아가는 길을 찾을 수 있어야 합니다. 활성 상태는 색상 외의 방식으로도 알아볼 수 있어야 하며, 패턴은 단순히 화면 공간을 아끼기보다 플랫폼과 사용 빈도에 맞아야 합니다.

예상 산출물

  • 작업 기반 근거를 갖춘 권장 내비게이션 패턴
  • 글로벌, 로컬, 유틸리티, 맥락형 내비게이션 배정
  • 활성, 호버, 포커스, 비활성, 배지 상태 요구사항
예시 브리프 보기

브리프에서 검토까지

  1. 01
    구조 파악

    기존 정보 구조에서 주요 목적지, 중첩된 섹션, 가끔 쓰는 유틸리티를 식별합니다.

  2. 02
    맥락에 맞는 패턴 선택

    컨트롤을 고르기 전에 플랫폼, 목적지 수, 계층 깊이, 모바일 도달성을 고려합니다.

  3. 03
    방향 인식 확인

    현재 위치 단서를 명시하고, 대표 사용자와 함께 레이블과 섹션 간 작업을 테스트합니다.

02 활용 상황

사용 시점

정보 계층 구조와 작업 우선순위가 필요하며, 내비게이션 컴포넌트 패키지는 제공되지 않습니다.

적합한 경우

  • 탭과 드로어 중 선택내비게이션 옵션마다 가시성과 접근성의 장단점이 다를 때 유용합니다.
  • 깊은 제품 구조계층 수준을 섞지 않고 브레드크럼과 로컬 내비게이션을 함께 구성하는 데 도움이 됩니다.

확인할 한계

  • 정보 구조 설계의 대체재가 아님카테고리와 레이블이 불분명하면 어떤 컨트롤도 제대로 작동하기 전에 구조 개편이 필요할 수 있습니다.
  • 사용성이 자동으로 입증되지 않음패턴 권장안은 첫 클릭 테스트나 작업 기반 검증이 필요합니다.

준비할 입력 자료

  • 목적지 계층 구조확정된 섹션과 그 상하위 관계를 제공하세요.
  • 사용 우선순위자주 하는 작업, 섹션 간 이동, 유틸리티 목적지를 알려 주세요.
  • 플랫폼데스크톱과 모바일의 제약, 관례, 접근성 요구사항을 설명하세요.

03 핵심 결정

중요한 결정

  1. 가시성에는 비용이 따릅니다

    내비게이션을 숨기면 레이아웃은 단순해질 수 있지만 중요한 목적지를 발견하기 어려워집니다.

  2. 색상 이상의 상태 표시

    굵기, 밑줄, 표시기를 사용하면 색조에만 의존하지 않고 현재 위치를 인지할 수 있습니다.

04 예시 브리프

집중 브리프로 시도하기

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

설정 검토

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

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

정보 계층 구조와 작업 우선순위가 필요하며, 내비게이션 컴포넌트 패키지는 제공되지 않습니다.

하나의 산출물로 시작

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

예시 브리프
주요 섹션 6개, 중첩된 보고서 폴더, 모바일 접근이 있는 데스크톱 분석 앱에 navigation-patterns을 사용하세요. 사이드바와 상단 내비게이션을 비교하고, 유틸리티를 분리하며, 브레드크럼과 활성/포커스 상태를 명시하세요. 구현 전에 해결해야 할 정보 구조 질문도 설명하세요.

결과 점검

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

  • 글로벌 수준과 로컬 수준이 실수로 섞이지 않습니다.
  • 현재 목적지가 색상 외의 방식으로도 표시됩니다.
  • 섹션 간 작업에 찾을 수 있는 경로와 돌아오는 경로가 있습니다.

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

05 출처 및 라이선스

소스 및 라이선스

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

소스 소유자
Owl-Listener
라이선스
MIT
검토 시점 스냅샷
2026-10-07 · 9a6930cf84a8
편집 소스 요약
글로벌 및 로컬 패턴, 방향 인식 단서, 플랫폼 관례, 상태 디자인을 다루는 내비게이션 선택 가이드입니다.

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

06 시작 전 질문

시작 전 질문

모바일 내비게이션은 항상 드로어를 사용해야 하나요?

아니요. 소스는 소수의 주요 목적지에는 눈에 보이는 탭을 선호하며, 드로어는 발견 가능성 면에서 트레이드오프가 있다고 봅니다.

브레드크럼은 언제 유용한가요?

더 깊은 콘텐츠 계층에서 위치와 상위 구조를 설명하는 데 도움이 되며, 보통 로컬 내비게이션과 함께 쓰입니다.

낯선 섹션 이름을 고쳐 줄 수 있나요?

문제를 짚고 레이블 테스트를 권장할 수는 있지만, 근본적인 카테고리는 정보 구조 작업이 필요할 수 있습니다.

OpenDesign

다음 디자인 반복을 위한 공간을 마련하세요.

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

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