🔍QA & TEST/🎨 UI 컴포넌트
[UI 컴포넌트] 헤더 Header
siwoobyeol
2025. 2. 27. 18:43
프로젝트 진행 시 다양한 직무자와 커뮤니케이션이 진행된다.
(기획자, 디자이너, 개발자, QA 엔지니어, 테스터등)
테스터와 QA 엔지니어를 위한 UI 컴포넌트를 소개한다.
UI 컴포넌트 소개는 대한민국 정부 가이드 라인에서 발췌한 내용이다. (출처 : KRDS)
헤더 Header
사용자가 웹사이트에 접속하자마자 마주하게 되는 화면의 최상단 영역으로
디지털 정부 서비스의 브랜드 이미지를 전달하는 핵심 영역이다.
모든 화면에 일관성 있게 배치되며 통합검색, 메인 메뉴 등 서비스 정보를 탐색하고 이동할 수 있는 핵심 탐색 수단을 제공한다.
사용성 가이드 라인
- 헤더의 스타일 수정을 최소화
헤더의 일관성을 유지하는 것은 정부 브랜드 인지도와 사용자 신뢰를 구축하는 데 필수 - 정부 로고는 항상 헤더의 왼쪽 상단에 제공
정부 로고는 정부와의 연결을 강화하며, 디지털 서비스 전반에 걸쳐 일관된 경험을 제공 - 핵심적인 정보만 간결하게 제공
헤더에 포함되는 요소 중 필수적인 항목을 간결하게 배치해야 한다.
헤더에 불필요한 꾸밈이나 과다한 정보가 배치되면, 사용자가 모든 화면에서 이용에 어려움을 겪을 수 있다. - 유틸리티 링크 그룹은 헤어 우측 상단에 제공한다.
헤더 우측 상단은 일반적으로 사용자들이 유틸리티 그룹을 발견할 수 있을 것으로 예측하는 공간이다. - 유틸리티 링크 그룹을 디바이더로 구분하여 표현한다.
서로 관련되지 않은 링크가 시각적으로 명확하게 변별될 수 있도록 여러 가지 형태의 디바이더를 활용하여 구분해야 한다. - 유틸리티 링크가 5개 이상 필요한 경우 드롭다운 메뉴를 사용한다.
유사한 목적을 가진 링크를 하나의 드롭다운 메뉴로 제공함으로써 사용자는 관련 있는 기능을 더 빠르게 인지할 수 있으며, 헤더를 간결하게 유지함으로써 보다 중요한 정보에 집중하는 데 도움이 된다. - 언어 설정을 위한 드롭다운 메뉴에 국기를 사용하지 않는다.
한 국가 내에서도 다양한 언어가 사용될 수 있기 때문에 국기 대신 언어의 이름을 해당 언어로 제공해야 한다. - 아이콘 버튼/링크에 텍스트 레이블을 제공한다.
아이콘에 표현된 정보가 명확하지 않거나 정보 해석에 많은 시간 소요되는 사용자는 아이콘만 제공되었을 때 컨트롤의 기능을 이해하지 못할 가능성이 높다. 검색, 로그인처럼 대부분의 사용자가 의미를 이해할 수 있고 아이콘이 간결한 경우에는 텍스트 레이블을 생략할 수 있다. - 메인 메뉴와 검색 위치는 웹사이트의 목적에 적합한 형태로 제공한다.
메인 메뉴의 길이와 검색의 복잡도, 이용 빈도에 따라 적절한 레이아웃의 메인 메뉴와 통합검색 버튼 스타일을 결정한다. - 화면을 스크롤 했을 때 헤더를 뷰포트 상단에 고정할 수 있다.
헤더가 간결하게 구성되어 잇다면 사용자가 긴 화면을 스크롤 하면서도 헤더에서 제공되는 탐색 및 유틸리티에 계속 접근 가능하도록 헤더를 고정하여 제공할 수 있다.
만약 2행을 초과하는 헤더를 고정하고자 한다면, 사용자가 현재 화면에서의 과업에 집중할 수 있도록 사용자가 스크롤을 내릴 때에는 헤더를 고정하지 않는다. 스크롤을 올릴 때에는 헤더를 화면 상단에 고정하여 메인 화면으로 이동하거나 메뉴를 탐색하고자 하는 사용자의 행동을 도울 수 있다.
헤더가 고정될 때에는 공식 배너를 제외한 전체 헤더가 고정되어야 한다.