로고는 언제나 왼쪽 위

KRDS CP-017 — 정부 로고는 항상 헤더의 왼쪽 상단에 제공하고 있다.

0. 들어가며 — 모두가 아는 그 자리

이번 137편은 정부 로고를 항상 헤더의 왼쪽 상단에 두는 규칙입니다.

웹사이트를 떠올리면, 로고는 거의 항상 왼쪽 위에 있습니다. 이건 우연이 아니라 수십 년간 굳어진 웹 관습이죠. CP-017은 정부 로고도 이 관습을 따라 항상 왼쪽 상단에 두라고 규정합니다. 관습을 따르는 것이 곧 사용성이기 때문입니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 항상 왼쪽 상단

CP-017 (컴포넌트 > 헤더) “정부 로고는 항상 헤더의 왼쪽 상단에 제공하고 있다.”

정부(서비스) 로고를 헤더의 왼쪽 위 모서리에 일관되게 배치하라는 뜻입니다.

정리: 정부 로고는 항상 헤더 왼쪽 상단에 제공하라. 이게 CP-017입니다.

2. 왜 하필 왼쪽 상단인가

웹에서 로고가 왼쪽 위에 있는 데는 이유가 있습니다.

첫째, 읽기 방향입니다. 한국어·영어는 왼쪽→오른쪽, 위→아래로 읽습니다. 사용자의 시선이 가장 먼저 닿는 곳이 왼쪽 위 모서리죠. 사이트의 정체성을 알리는 로고를 그 첫 시선 위치에 두면, 사용자가 페이지를 열자마자 ’여기가 어디인지’를 인지합니다.

둘째, 관습(convention)입니다. 거의 모든 웹사이트가 로고를 왼쪽 위에 둡니다. 사용자는 이 관습을 학습해, ‘로고를 찾으려면 왼쪽 위를 본다’는 기대를 가지고 있죠. 또 ’로고를 누르면 메인 페이지로 간다’는 기대도 함께 있습니다(CP-031). 이 관습을 따르면 사용자는 설명 없이도 로고를 찾고, 홈으로 돌아갈 수 있습니다. 관습을 깨고 로고를 오른쪽이나 가운데에 두면, 사용자는 혼란스러워하고 사이트를 비표준으로 느끼죠(닐슨의 ’제이콥의 법칙’ — 사용자는 다른 사이트에서 익힌 기대를 가지고 온다).

셋째, 일관성입니다. ’항상’이라는 단어가 중요합니다 — 모든 페이지에서 같은 위치(왼쪽 위)에 있어야, 사용자가 어느 페이지에서든 같은 곳에서 로고를 찾고 홈으로 갈 수 있습니다. 어떤 페이지는 왼쪽, 어떤 페이지는 다른 위치면 일관성이 깨지죠.

그래서 CP-017은 로고를 ’항상 왼쪽 상단’에 고정합니다. 이는 창의성을 제한하는 게 아니라, 검증된 관습을 따라 사용성을 보장하는 것입니다. 헤더에서 로고 위치만큼은 관습 준수가 절대적입니다.

3. 점검 / 개선

무엇을 점검하나

왼쪽 상단 — 로고가 헤더의 왼쪽 위에 있는가.

모든 페이지 — 모든 페이지에서 같은 위치인가(‘항상’).

홈 링크 — 로고가 메인으로 가는 링크인가(CP-031 연계).

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

역할	책임
디자이너	로고를 헤더 왼쪽 상단에 배치
퍼블리셔/개발	공통 헤더 템플릿에 로고 고정

기관 유형	CP-017 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로고가 헤더 왼쪽 상단에 있나요?

□ 모든 페이지에서 같은 위치인가요?

□ 로고를 누르면 메인으로 가나요?

❓ FAQ

Q1. 로고를 가운데 두면 안 되나요? 관습을 깨면 사용자가 혼란스러워합니다. 왼쪽 상단이 검증된 표준 위치입니다. Q2. 모바일에서도 왼쪽인가요? 네. 모바일 헤더에서도 로고는 왼쪽에 두는 것이 일반적입니다(햄버거 메뉴는 보통 오른쪽). Q3. KRDS를 채택하면 자동인가요? 표준 헤더는 로고를 왼쪽 상단에 배치합니다.

6. 마무리

CP-017의 메시지:

로고는 언제나 왼쪽 위 — 검증된 관습을 따르는 것이 곧 사용성이다.

로고를 왼쪽 상단에 두는 것은 읽기 방향·웹 관습·일관성에 근거한 표준입니다. 사용자는 ’로고는 왼쪽 위’라는 기대를 가지고 오므로, 그 기대를 충족해야 설명 없이 로고를 찾고 홈으로 갈 수 있죠. 관습 준수가 사용성입니다.

다음 편은 헤더 요소들의 순서를 다룹니다. CP-018 — “건너뛰기 링크부터 서비스 아이덴티티·유틸리티·검색·메인 메뉴 순으로 일관된 순서를 배치한다.”

다음 편 예고 ▶ 「138. (CP-018) 건너뛰기 링크가 항상 헤더에서 가장 먼저 제공되고, 컴포넌트 요소 간 상대적 순서가 일관성을 가지도록 배치하고 있다.」

ViewCheck는 정부 로고가 항상 헤더 왼쪽 상단에 제공되는지를 진단합니다.

📚 참고 출처

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

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

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