로고를 누르면 홈으로

KRDS CP-031 — 헤더의 로고는 메인 페이지로 이동하는 링크로 사용하고 있으며, 대체 텍스트에 ’로고’라는 단어가 포함되지 않게 작성되어 있다.

0. 들어가며 — 헤더 그룹의 마무리

이번 151편은 헤더 그룹(CP-015~031)의 마지막, 헤더 로고의 두 가지 요구를 다룹니다 — ① 메인 페이지로 가는 링크일 것, ② 대체 텍스트에 ’로고’라는 단어를 넣지 말 것.

로고는 단순한 그림이 아니라, 사용자가 ‘홈으로 돌아가는’ 통로입니다. 그리고 그 대체 텍스트는 군더더기 없이 작성돼야 하죠. CP-031은 이 두 가지를 함께 규정하며 헤더 그룹을 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 홈 링크 + 깔끔한 대체 텍스트

CP-031 (컴포넌트 > 헤더) “헤더의 로고는 메인 페이지로 이동하는 링크로 사용하고 있으며, 대체 텍스트에 ’로고’라는 단어가 포함되지 않게 작성되어 있다.”

헤더 로고는 ① 누르면 메인 페이지로 가는 링크여야 하고, ② 대체 텍스트에 ’로고’라는 단어를 넣지 말라는 뜻입니다.

정리: 헤더 로고는 메인 페이지 링크로 쓰고, 대체 텍스트에 ‘로고’ 단어를 빼라. 이게 CP-031입니다.

2. 두 가지 요구 풀이

① 로고는 메인 페이지로 가는 링크

웹 관습 중 가장 강력한 것 하나가 ’로고를 누르면 홈(메인 페이지)으로 간다’입니다. 거의 모든 웹사이트가 이렇게 작동하고, 사용자도 이를 학습해 — 길을 잃거나 처음으로 돌아가고 싶을 때 무의식적으로 로고를 클릭하죠. 이건 ’홈으로 가는 가장 안전한 방법’으로 자리잡았습니다.

그래서 헤더 로고는 단순한 이미지가 아니라 메인 페이지로 이동하는 링크여야 합니다. 로고가 링크가 아니면 — 사용자가 로고를 눌러도 아무 일이 안 일어나, “어? 왜 안 가지?” 하며 당황하죠. 관습을 어긴 것입니다. 로고를 홈 링크로 만들면, 사용자는 어느 페이지에서든 로고 클릭 한 번으로 출발점으로 돌아갈 수 있습니다. 깊은 하위 페이지에서 헤매다가도 로고로 리셋할 수 있죠.

② 대체 텍스트에 ’로고’라는 단어 배제

CP-030에서 이미지 로고에 대체 텍스트가 필요하다고 했습니다. CP-031은 그 대체 텍스트를 어떻게 쓸지를 규정합니다 — ’로고’라는 단어를 넣지 말라는 것이죠.

왜일까요? 대체 텍스트의 목적은 ‘이 요소가 무엇을 하는지’를 전달하는 것입니다. 헤더 로고는 ’메인 페이지로 가는 링크’이므로, 스크린리더 사용자에게 필요한 정보는 ’어디로 가는 링크인지’(사이트명)이지, ‘이게 로고 이미지 이다’가 아닙니다. alt="○○ 로고"라고 하면 스크린리더가 “○○ 로고, 링크”라고 읽는데, ’로고’는 군더더기죠 — 사용자는 그게 로고든 텍스트든 상관없이’○○으로 가는 링크’임만 알면 됩니다. 그래서 alt="○○"(사이트명만)으로 작성해, “○○, 링크”로 깔끔하게 읽히게 합니다.

이는 대체 텍스트 작성의 일반 원칙입니다 — ‘이미지’, ‘사진’, ‘로고’ 같은 ’이게 그림이다’를 알리는 단어는 불필요합니다(스크린리더가 이미 ’image’임을 별도로 안내하거나, 링크면 ’link’를 안내함). 대체 텍스트엔 ’내용· 기능’만 담는 것이 모범이죠.

이 두 요구를 합치면 — 헤더 로고는 <a href="/"> 안에 <img alt="사이트명">(로고 단어 없이)로 구현됩니다. 누르면 홈으로 가고, 스크린리더는 “사이트명, 링크”로 읽죠. 관습과 접근성을 모두 충족하는 완성형입니다.

3. 점검 / 개선

무엇을 점검하나

홈 링크 — 로고가 메인 페이지로 가는 링크인가.

‘로고’ 단어 배제 — 대체 텍스트에 ’로고’라는 단어가 없는가.

사이트명만 — 대체 텍스트가 사이트(기관)명으로 깔끔한가.

Before / After

<!-- ❌ 링크 아님 / '로고' 포함 --> <img src="logo.svg" alt="행정안전부 로고"> <!-- ✅ 홈 링크 + 사이트명만 --> <a href="/"><img src="logo.svg" alt="행정안전부"></a>

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

역할	책임
퍼블리셔/개발	로고를 홈 링크로 구현 + 대체 텍스트 작성(‘로고’ 단어 배제)
접근성 담당	링크 기능·alt 검수

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로고를 누르면 메인 페이지로 가나요?

□ 대체 텍스트에 ’로고’라는 단어가 없나요?

□ 대체 텍스트가 사이트(기관)명으로 깔끔한가요?

❓ FAQ

Q1. 왜 ’로고’를 빼나요? 대체 텍스트엔 ’기능·내용’만 담습니다. 헤더 로고는 ’홈 링크’이므로 사이트명만 있으면 되고, ’로고’는 군더더기입니다. Q2. 로고가 꼭 홈 링크여야 하나요? 네. ’로고=홈’은 강력한 웹 관습이라, 링크가 아니면 사용자가 당황합니다. Q3. KRDS를 채택하면 자동인가요? 표준 헤더 로고는 홈 링크 + 깔끔한 대체 텍스트로 제공됩니다.

6. 마무리 — 헤더 그룹을 마치며

CP-031의 메시지:

로고를 누르면 홈으로 — 그리고 대체 텍스트는 군더더기 없이 사이트명만.

헤더 로고는 ‘홈으로 가는 링크’라는 강력한 관습을 따라야 하고, 대체 텍스트는 ’로고’ 같은 군더더기 없이 사이트 명만 담아 “사이트명, 링크”로 깔끔하게 읽혀야 합니다. 관습과 접근성을 모두 충족하는 완성형이죠.

이로써 헤더(Header) 그룹 17개 규칙(CP-015~031)을 마쳤습니다. 유형 선택부터 스타일·로고·요소 순서·유틸 리티·언어·아이콘·고정·반응형·건너뛰기·대체 텍스트까지 — 사이트의 얼굴인 헤더를 촘촘히 규정한 17개였습니다.

지금까지 공식배너(6) + 식별자(8) + 헤더(17) = CP 31개를 마쳤습니다. 다음 편부터는 푸터(Footer) 그룹 13개(CP-032~044)로 넘어갑니다. 헤더가 사이트의 머리라면, 푸터는 사이트의 발 — 마무리 정보와 부가 내비게이션의 영역입니다.

다음 편 예고 ▶ 「152. (CP-032) 푸터 그룹의 첫 규칙」 — 푸터(Footer) 13개 규칙 시작

ViewCheck는 헤더 로고가 홈 링크이고 대체 텍스트가 적절한지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.1.1 / 2.4.4 Link Purpose / KWCAG 대체 텍스트

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

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