오늘날의 디지털 시대에 웹사이트는 기업과 고객 간의 주요 커뮤니케이션 및 상호 작용 수단이 되었습니다. 웹사이트의 복잡성이 증가함에 따라 사용자에게 직관적인 탐색 옵션을 제공하는 것이 더욱 중요해졌으며, 이 과정에서 이동 경로 UX가 중요한 역할을 합니다. 웹사이트 탐색의 중요한 구성 요소 중 하나가 바로 이동 경로 UI입니다.
이동 경로 UI는 사용자에게 웹사이트의 계층 구조 내에서 현재 위치를 표시하고 이전에 방문한 페이지를 다시 이동할 수 있도록 하는 일종의 탐색 지원 기능입니다. 이 글에서는 웹 디자인에서 이동 경로의 중요성을 살펴보고 웹사이트에 효과적인 이동 경로를 디자인하는 방법에 대해 설명합니다.
UI에서 이동 경로란 무엇인가요?
이동 경로 탐색이라고도 하는 빵가루는 사용자에게 웹사이트 또는 애플리케이션 내에서 현재 위치의 흔적을 제공하는 사용자 인터페이스 요소의 한 유형입니다. 일반적으로 페이지 상단에 표시되며 사이트 구조를 반영하여 이전에 방문한 페이지에 대한 계층적 링크를 표시합니다.
이동 경로 UI는 사용자가 웹사이트의 구조를 쉽게 탐색하고 이해할 수 있도록 도와주기 때문에 최신 웹 디자인에서 필수적인 요소가 되었습니다. 방문자가 기본 탐색 메뉴를 사용하지 않고도 관련 페이지 사이를 빠르게 이동할 수 있으므로 여러 수준의 콘텐츠가 있는 복잡한 웹사이트에 특히 유용합니다.
효과적인 이동 경로 디자인은 원활한 사용자 경험에 크게 기여하여 방문자가 필요한 정보를 더 쉽게 찾을 수 있도록 하는 동시에 사이트 내에서 맥락과 위치를 파악할 수 있게 해줍니다.
이동 경로의 유형
브레드크럼은 디자인과 기능에 따라 위치 기반, 속성 기반, 경로 기반의 세 가지 주요 유형으로 분류할 수 있습니다. 각 유형에 대해 자세히 살펴보겠습니다:
1. 위치 기반 이동 경로
위치 기반 이동경로는 사용자가 현재 있는 페이지와 상위 카테고리를 표시하여 웹사이트 계층 구조 내에서 사용자의 현재 위치를 표시합니다. 이 유형의 이동경로는 계층 구조가 깊은 웹사이트에서 가장 일반적으로 사용됩니다.
예를 들어 이커머스 웹사이트의 위치 기반 이동경로는 다음과 같이 표시될 수 있습니다:
홈 > 여성 의류 > 드레스 > 이브닝 가운
이 예에서 사용자는 홈 페이지에서 여성 의류 섹션으로 이동한 다음 드레스 카테고리로 이동하고 마지막으로 이브닝 가운 페이지로 이동했습니다.
모바일 디바이스에서는 모바일 이동 경로를 단축하여 마지막 레벨만 포함하고 바로 상위 카테고리까지만 액세스할 수 있도록 하는 것이 좋습니다.
2. 속성 기반 이동 경로
속성 기반 이동경로는 사이트 계층 구조 내 위치가 아닌 현재 페이지의 속성 또는 특성을 표시합니다. 이 유형의 이동경로는 전자상거래 사이트나 디렉토리와 같이 필터 옵션이 있는 웹사이트에서 일반적으로 사용됩니다.
예를 들어 채용 공고 웹사이트의 속성 기반 이동경로는 다음과 같이 표시될 수 있습니다:
홈 > 채용 > 정규직 > 마케팅 매니저
이 예에서는 사용자가 정규직 채용을 선택한 다음 추가 필터링을 통해 마케팅 관리자 직책만 보도록 했습니다.
3. 경로 기반 이동 경로
경로 기반 이동경로는 사용자가 사이트 내 현재 위치에 도달하기 위해 수행한 단계를 보여줍니다. 이러한 유형의 이동경로는 서비스 가입이나 구매 완료와 같은 다단계 프로세스 또는 워크플로우에서 자주 사용됩니다.
예를 들어 온라인 쇼핑 웹사이트의 경로 기반 이동경로는 다음과 같이 표시될 수 있습니다:
홈 > 장바구니 > 배송 정보 > 결제 세부 정보
이 예에서 사용자는 장바구니에 상품을 추가하고 결제를 진행한 후 배송 정보를 입력한 후 결제 세부 정보 페이지에 도달했습니다.
웹사이트의 특정 요구 사항에 맞게 이동 경로를 조합하거나 사용자 지정할 수도 있습니다. 예를 들어, 웹사이트는 위치 기반 및 속성 기반 이동 경로를 모두 사용하여 사용자에게 사이트를 탐색할 수 있는 다양한 방법을 제공할 수 있습니다.
또한 웹사이트는 이동 경로에 사용자 정의 아이콘이나 색상을 사용하여 시각적으로 더 매력적이고 사이트의 전체 디자인과 일관성을 유지할 수 있습니다.
UI 이동 경로를 디자인하는 방법은 무엇인가요?
웹사이트의 이동 경로 표시줄 UI를 디자인할 때 효과적이고 사용자 친화적인 디자인을 위해 염두에 두어야 할 몇 가지 핵심 요소가 있습니다.
단순하고 명확하게 유지
이동 경로를 쉽게 이해하고 따라갈 수 있어야 하므로 명확하고 간결하게 유지하는 것이 중요합니다. 복잡하거나 전문적인 용어는 피하고 간단하고 쉽게 알아볼 수 있는 용어를 사용하세요.
예를 들어, 이커머스 웹사이트를 운영하며 사용자가 특정 제품을 보고 있는 경우 이동 경로를 다음과 같이 표시할 수 있습니다: 홈 > 전자제품 > 휴대폰 > 아이폰 12. 이 이동 경로 트레일은 명확하고 따라가기 쉬우므로 사용자가 사이트 내 현재 위치를 파악하고 '전자제품' 또는 홈페이지와 같은 더 넓은 카테고리로 다시 이동하는 방법을 알 수 있습니다.
이동 경로가 홈 > 카테고리-1 > 하위 카테고리-B > 제품-12345와 같이 복잡하거나 전문 용어로 가득 찬 언어를 사용한다면 사용자가 이해하고 탐색하기가 훨씬 더 어려워져 좌절감과 열악한 사용자 경험을 초래할 수 있습니다.
이동 경로를 단순하게 유지하고 익숙한 용어를 사용하면 사용자가 사이트를 더 효과적으로 탐색하고 전반적인 경험을 개선할 수 있습니다.
논리적 계층 구조 사용
앞서 언급했듯이 이동 경로 탐색은 웹사이트의 구조를 반영하는 논리적 계층 구조를 따라야 합니다. 즉, 각 이동 경로가 사이트 계층 구조에서 바로 위에 있는 페이지 또는 섹션으로 연결되어야 합니다.
예를 들어 사이트에 '홈', '제품', '회사 소개' 등의 카테고리가 있는 기본 탐색 메뉴가 있는 경우 이동 경로에도 이와 동일한 구조가 반영되어야 합니다. 홈 > 회사 소개 > 제품과 같은 카테고리를 사용하면 의미가 없고 사용자에게 혼란을 줄 수 있습니다.
명확하고 일관된 계층 구조를 따르면 사용자가 웹사이트의 조직과 탐색 방법을 이해하는 데 도움이 됩니다.
사용자 요구 고려
이동 경로 탐색은 대부분의 사용자에게 매우 유용할 수 있지만 모든 웹사이트나 사용자 인구 통계에 필요한 것은 아닐 수 있습니다. 예를 들어, 웹사이트 탐색에 익숙한 기술에 정통한 사용자가 주로 웹사이트를 이용하는 경우에는 이동 경로가 그다지 유용하지 않을 수 있습니다.
반면에 웹사이트가 기술에 익숙하지 않은 사용자를 대상으로 하거나 탐색이 복잡하고 콘텐츠 계층 구조가 깊은 경우 이동 경로를 사용하면 사용자 경험을 크게 개선할 수 있습니다.
웹사이트에 이동 경로를 구현할지 여부를 결정할 때는 타겟 고객과 그들의 요구 사항을 고려하는 것이 중요합니다. 또한 사용자 테스트를 수행하여 피드백을 수집하고 사용자가 사이트에서 이동 경로와 상호 작용하는 방식을 확인할 수도 있습니다.
모바일용 사용자 정의
모바일 디바이스가 증가함에 따라 작은 화면에서 이동 경로가 어떻게 표시되고 작동할지 고려하는 것이 중요합니다. 모바일 디바이스에서는 한 줄에 충분한 공간이 없을 때 전체 이동 경로를 표시하기 위해 가로 스크롤을 지원해야 할 수 있습니다.
기존의 이동 경로가 데스크톱에서는 잘 작동할 수 있지만 모바일 인터페이스에서는 제대로 작동하지 않을 수 있습니다. 긴 모바일 이동 경로 트레일은 여러 줄에 걸쳐 표시되어 귀중한 화면 공간을 차지하고 사용자에게 혼란을 줄 수 있습니다.
모든 디바이스에서 이동 경로를 쉽게 읽고 사용할 수 있도록 반응형 디자인 기법을 사용하는 것이 좋습니다. 또한 이동 경로를 압축하거나 텍스트 링크 대신 아이콘을 사용하여 모바일에 맞게 조정할 수도 있습니다.
시각적 단서 사용
텍스트 링크를 제공하는 것 외에도 화살표나 아이콘과 같은 시각적 단서를 사용하여 사용자가 이동 경로를 더 잘 이해할 수 있도록 도울 수 있습니다. 이러한 시각적 보조 도구는 계층 구조와 탐색 경로를 더 명확하고 쉽게 따라갈 수 있게 해줍니다.
하지만 웹사이트 전체에서 이러한 단서를 일관되게 사용하고 페이지의 다른 요소와 쉽게 구분할 수 있도록 하는 것이 중요합니다.
클릭하기 쉽게 만들기
이동 경로가 진정으로 유용하려면 클릭이 가능하고 사용자를 계층 구조의 이전 페이지 또는 레벨로 되돌아가게 해야 합니다. 이렇게 하면 사용자가 길을 잃거나 이전 페이지를 다시 방문하고 싶을 때 쉽게 되돌아갈 수 있습니다.
링크가 명확하게 표시되고 페이지의 다른 요소와 눈에 잘 띄는지 확인하세요. 호버 효과를 추가하거나 이동 경로 링크가 활성화되어 있을 때 색상을 변경하는 것도 고려해 볼 수 있습니다.
사이트 페이지만 포함
이동 경로를 구현할 때는 내 웹사이트 내의 페이지만 포함시키는 것이 중요합니다. 외부 링크를 포함하면 사용자에게 혼란을 주고 계층 구조가 명확하지 않을 수 있습니다.
또한 사이트의 어떤 페이지에 실제로 이동 경로가 필요한지 염두에 두어야 합니다. 경우에 따라 검색창이나 관련 콘텐츠 추천과 같은 다른 탐색 기술을 사용하는 것이 더 유리할 수도 있습니다.
글로벌 탐색 기능 보완
이동 경로 탐색은 보조적인 탐색 도구이며 사이트의 글로벌 탐색 모음을 대체해서는 안 된다는 점을 기억하는 것이 중요합니다.
글로벌 탐색이 사이트 구조에 대한 광범위한 개요를 제공하는 반면, 이동 경로에서는 보다 일반적인 탐색 프레임워크를 보완하는 현지화된 컨텍스트 경로를 제공합니다. 이러한 계층화된 접근 방식을 통해 사용자는 사이트를 이해하고 탐색할 수 있는 다양한 방법을 이용할 수 있습니다. 홈페이지가 웹사이트의 글로벌 탐색에 눈에 띄게 표시되는 경우 이동 경로에 홈페이지를 포함시키는 것은 중복될 수 있습니다.
현재 페이지를 명확하게 표시
이동 경로의 중요한 요소 중 하나는 계층 구조에서 현재 페이지 또는 레벨을 명확하게 표시하는 것입니다. 이를 통해 사용자는 현재 위치와 그 위치에 도달한 방법을 이해할 수 있습니다.
현재 페이지 제목을 굵게 표시하거나 화살표 기호를 사용하여 방향을 표시하는 등 몇 가지 방법이 있습니다. 어떤 방법을 선택하든 웹사이트 전체에서 일관성을 유지하여 쉽게 알아볼 수 있도록 하세요.
효과적인 이동 경로 탐색을 위한 모범 사례
화려하거나 대비가 높은 색상 사용 피하기
이동 경로를 디자인할 때는 눈에 거슬리지 않는 은은한 색상을 선택하는 것이 중요합니다. 화려하거나 대비가 높은 색상은 과도한 주의를 끌 수 있으며 사용자가 주요 탐색 요소와 주요 콘텐츠에서 주의를 분산시킬 수 있습니다.
대신 사이트의 전체 디자인 테마와 자연스럽게 어우러지는 색상을 선택하세요. 이렇게 하면 이동 경로가 유용하면서도 눈에 거슬리지 않는 탐색 도구로 남을 수 있습니다. 색상을 현명하게 선택하려면 색 구성표에 대해 자세히 알아보세요.
접근성 표준 고려하기
접근성은 웹 디자인에서 중요한 고려 사항입니다. 이동 경로를 만들 때는 웹 콘텐츠 접근성 지침(WCAG)을 준수해야 합니다.
여기에는 시각 장애가 있는 사용자도 텍스트를 읽을 수 있도록 적절한 색상 대비 비율을 사용하고, 명확한 시각적 단서를 제공하며, 키보드 탐색성을 보장하는 것이 포함됩니다. 이러한 가이드라인을 준수하면 사이트를 더욱 포용적으로 만들어 모든 사람의 사용자 경험을 향상시킬 수 있습니다.
모바일 및 다계층 사이트
모바일에서는 이동 경로가 너무 많은 공간을 차지하거나 탭하기 어려울 수 있으므로 사용자 작업에서 허용하는 경우 이동 경로를 짧게 만드는 것이 좋습니다. 간결한 이동 경로를 사용하면 혼란을 방지하고 사용성을 개선할 수 있습니다. 각 이동 경로가 쉽게 탭할 수 있을 만큼 충분히 큰지 확인하고 아이콘이나 약어를 사용하여 공간을 절약하면서 필요한 정보를 전달하는 것도 고려해 보세요.
한 학설에 따르면 다계층 구조의 웹사이트에서는 이동 경로에 여러 경로를 표시하지 말아야 한다고 합니다. 이 접근 방식은 단순성을 유지하고 사용자에게 너무 많은 옵션으로 혼란을 주는 것을 방지합니다. 가장 논리적인 경로로 사용자를 안내하는 하나의 명확한 이동 경로를 제공하는 데 집중하세요. 이 전략은 탐색을 단순하게 유지하고 인지 부하를 줄여 사용자 경험을 향상시킵니다.
효과적인 이동 경로 설계의 예
Adidas
Adidas는 다음과 같은 이동 경로를 사용합니다:
모바일 친화적: 카테고리를 구분하기 위해 슬래시(/)를 사용하여 모바일 사용자를 위해 간결한 이동 경로를 유지합니다. 이 컴팩트한 형식은 공간 사용을 최소화하여 이동 경로가 화면을 차지하지 않고 작은 기기에서도 쉽게 탐색할 수 있도록 합니다.
이해하기 쉬움: 라벨은 사용자가 쉽게 이해할 수 있는 간단한 용어를 사용합니다. 복잡한 전문 용어를 피하고 명확하고 직관적인 언어를 사용하여 사용자가 사이트 내에서 현재 위치를 빠르게 파악하고 이전 페이지로 쉽게 돌아갈 수 있도록 합니다.
Harristeeter
Harristeeter.com은 이동 경로를 효과적으로 사용합니다. 이 사이트의 이동 경로 바는 :
명확하고 간결합니다: 웹사이트의 계층 구조를 반영하여 레이블이 짧고 간결합니다. 이를 통해 사용자는 자신의 위치와 뒤로 이동하는 경로를 쉽게 이해할 수 있습니다.
시각적으로 뚜렷함: 색상(비활성 상태는 파란색, 활성 상태는 검은색)과 링크에 대한 미묘한 밑줄을 통해 클릭 가능한 항목을 명확히구분할 수 있습니다. 이를 통해 사용자는 현재 페이지와 다른 링크를 쉽게 식별할 수 있습니다.
적절한 위치: 이동 경로가 페이지 상단의 기본 탐색 메뉴 바로 아래에 있습니다. 이러한 배치는 눈에 잘 띄고 접근하기 쉬워 친숙한 탐색 보조 도구로 사용자 경험을 향상시킵니다.
최종 생각
UI 이동 경로란 사용자가 인터페이스 구조 내에서 페이지로 이동할 수 있도록 도와주는 보조적인 탐색 형태입니다. 다층적이고 계층적인 사이트 내에서 탐색을 지원하는 데 특히 유용하지만 단일 수준의 웹 페이지에서는 의미가 없습니다.
이동경로는 명확한 경로를 제공함으로써 사용자가 사이트 계층 구조 내에서 자신의 위치를 즉각적으로 파악할 수 있도록 하여 전반적인 사용성을 향상시킵니다. 사용자가 브라우저의 뒤로 가기 버튼이나 기본 탐색 메뉴에 크게 의존하지 않고도 쉽게 역추적할 수 있으므로 여러 카테고리와 하위 카테고리가 있는 복잡한 웹사이트의 경우 이 기능은 매우 중요합니다. 따라서 잘 구성된 사이트에 이동 경로를 구현하면 사용자 탐색과 전반적인 사용자 경험을 크게 개선할 수 있습니다.
