보조 기능은 오른쪽 위

KRDS CP-020 — 유틸리티 링크 그룹은 헤더 우측 상단에 제공하고 있다.

0. 들어가며 — 로고는 왼쪽, 유틸리티는 오른쪽

이번 140편은 유틸리티 링크 그룹을 헤더 우측 상단에 두는 규칙입니다.

유틸리티 링크는 로그인·회원가입·언어 변경·즐겨찾기 같은 보조 기능 링크입니다. 로고가 왼쪽 위에 고정되듯 (137편), 유틸리티는 오른쪽 위에 두는 것이 웹 관습이죠. CP-020은 이 관습을 표준으로 못 박습니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 우측 상단

CP-020 (컴포넌트 > 헤더) “유틸리티 링크 그룹은 헤더 우측 상단에 제공하고 있다.”

로그인·언어 등 유틸리티 링크 그룹을 헤더의 오른쪽 위에 배치하라는 뜻입니다.

정리: 유틸리티 링크 그룹은 헤더 우측 상단에 제공하라. 이게 CP-020입니다.

2. 왜 우측 상단인가

헤더의 좌우 배치에는 관습적 논리가 있습니다.

왼쪽 위 = 정체성(로고). 시선이 가장 먼저 닿는 곳이라 ’여기가 어디인지’를 알리는 로고를 둡니다(137편).

오른쪽 위 = 보조 기능(유틸리티). 로그인·언어 변경 같은 유틸리티는 ’사이트를 둘러보는 핵심 행동’이 아니라 ’계정·설정 관련 보조 행동’입니다. 그래서 시선의 끝(오른쪽 위)에 두어, 핵심 콘텐츠·내비게이션과 시각적으로 분리하죠. 사용자가 ’로그인하려면 오른쪽 위를 본다’는 기대를 학습했기 때문에, 이 관습을 따르면 설명 없이도 유틸리티를 찾습니다(제이콥의 법칙).

이 좌우 분리는 사용자의 멘탈 모델과 맞아떨어집니다 — ‘왼쪽엔 사이트가 누구인지(로고)와 어디로 갈지(메뉴), 오른쪽엔 나에 관한 것(로그인·내 계정·설정)’. 직관적인 공간 구분이죠. 거의 모든 웹사이트가 이 패턴을 따르므로, 정부 사이트도 따라야 사용자가 익숙하게 사용할 수 있습니다.

또 유틸리티를 한 ’그룹’으로 묶어 우측 상단에 모으면, 흩어진 보조 링크들이 정돈돼 헤더가 간결해집니다(CP-019). 그리고 이 그룹은 디바이더로 구분하고(CP-021), 5개 이상이면 드롭다운으로 정리하죠(CP-022). 이렇게 유틸리티 관련 규칙들이 함께 작동해 ’오른쪽 위의 정돈된 보조 기능 영역’을 만듭니다.

3. 점검 / 개선

무엇을 점검하나

우측 상단 위치 — 유틸리티 그룹이 헤더 오른쪽 위에 있는가.

그룹화 — 보조 링크들이 한 그룹으로 모였는가.

로고와 분리 — 왼쪽 로고, 오른쪽 유틸리티로 명확히 나뉘는가.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
디자이너	유틸리티 그룹을 헤더 우측 상단에 배치
퍼블리셔/개발	유틸리티 그룹 마크업·구현

기관 유형	CP-020 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (유틸리티 링크가 있을 때)

유틸리티 링크(로그인·언어 등)가 있는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 유틸리티 링크가 헤더 우측 상단에 있나요?

□ 보조 링크들이 한 그룹으로 모였나요?

□ 왼쪽 로고, 오른쪽 유틸리티로 나뉘나요?

❓ FAQ

Q1. 유틸리티가 뭔가요? 로그인·회원가입·언어 변경·즐겨찾기 등 사이트 이용을 돕는 보조 기능 링크입니다. Q2. 왼쪽에 두면 안 되나요? 관습상 오른쪽 위입니다. 왼쪽은 로고·메뉴 영역이라, 유틸리티를 왼쪽에 두면 혼란스럽습니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 유틸리티를 우측 상단에 배치합니다.

6. 마무리

CP-020의 메시지:

보조 기능은 오른쪽 위 — 왼쪽엔 사이트가 누구인지, 오른쪽엔 나에 관한 것.

유틸리티 링크는 보조 기능이라 시선의 끝(우측 상단)에 모아, 핵심 내비게이션과 분리합니다. ’왼쪽 정체성, 오른쪽 내 계정·설정’이라는 직관적 공간 구분이고, 웹 관습이라 사용자가 익숙하게 찾죠.

다음 편은 유틸리티 그룹의 구분을 다룹니다. CP-021 — “유틸리티 링크 그룹을 디바이더로 구분하여 표현한다.”

다음 편 예고 ▶ 「141. (CP-021) 유틸리티 링크 그룹을 디바이더로 구분하여 표현하고 있다.」

ViewCheck는 유틸리티 링크 그룹이 헤더 우측 상단에 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 헤더(Header) 가이드 — https://www.krds.go.kr/html/site/component/component_03.html

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준