아이콘 + 글자로 분명하게

KRDS SP-060 — 헤더에서 제공되는 로그인 링크를 사용자 아이콘과 레이블로 구성하고 있다.

0. 들어가며 — 로그인이 아이콘만, 또는 글자만 있으면

이번 734편은 헤더에서 제공되는 로그인 링크를 사용자 아이콘과 레이블로 구성하라는 규칙입니다.

로그인 링크가 — 아이콘만(사람 모양)이면 무슨 기능인지 모호하고, 글자만이면 덜 눈에 띌 수 있죠. SP-060은 사용자 아이콘 + ‘로그인’ 레이블 조합을 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 사용자 아이콘 + 레이블 구성

SP-060 (서비스 패턴 > 로그인 > 로그인 기능 찾기) “헤더에서 제공되는 로그인 링크를 사용자 아이콘과 레이블로 구성하고 있다.”

헤더 로그인 링크를 사용자 아이콘 + 레이블로 구성하라는 뜻입니다.

정리: 헤더 로그인 링크를 사용자 아이콘 + 레이블로 구성하라. 이게 SP-060입니다.

2. 왜 아이콘 + 레이블인가

헤더의 로그인 링크는, 사용자가 한눈에 ‘로그인이구나’를 알아야 합니다. 이를 위해 사용자 아이콘(사람 모양)과 레이블(’로그인’ 텍스트)을 함께 쓰라는 게 SP-060입니다.

아이콘만 또는 레이블만일 때의 문제:

아이콘만 모호 사용자 아이콘(사람 모양)만 있으면, 그게 로그인인지, 마이페이지인지, 회원 정보인지 모호 합니다. 아이콘 의미는 사람마다 다르게 해석될 수 있죠.

글자만 주목도 약함 ‘로그인’ 텍스트만 있으면, 다른 헤더 메뉴 텍스트들 사이에 묻혀 덜 눈에 띌 수 있습 니다.

그래서 SP-060은 — 아이콘 + 레이블을 요구합니다:

사용자 아이콘 사람 모양(person) 아이콘으로, 로그인·계정 영역임을 시각적으로 알립니다. 아이콘은 빠른 시각 인지를 돕죠.

‘로그인’ 레이블 아이콘 옆에 ‘로그인’ 텍스트를요. 무슨 기능인지 명확히요. 아이콘의 모호함을, 텍스트가 보완합니다.

아이콘 + 텍스트 = 명확 + 주목 아이콘(시각 인지) + 텍스트(의미 명확)가 함께면, 사용자가 빠르고 분명하게 로그인을 인지하죠. 둘의 장점을 합칩니다.

아이콘만 쓰지 않기. 아이콘 단독은, 의미가 모호하고 접근성에도 불리합니다(텍스트 이름 필요 SP-063). 텍스트 레이블을 함께 두면, 시각·인지 양쪽에 명확하죠. 공공 서비스는 다양한 사용자가 쓰므로, 아이콘만으로 의미를 전제 하지 않습니다.

로그인 후 표시. 로그인 후에는, 사용자 아이콘 + 이름(또는 ‘마이페이지’·‘로그아웃’)으로 바뀝니다(SP-059 상태 표시). 로그인 전 ‘아이콘 + 로그인’, 후 ’아이콘 + 이름’처럼 일관되게요.

접근성(SP-063). 아이콘 링크도, 스크린 리더가 링크로 인지하고(SP-063) 이름(‘로그인’)을 읽어야 합니다. 텍스트 레이블이 있으면 자연히 접근가능한 이름이 되죠. 아이콘만이면 별도 이름(aria-label)이 필요하고요.

이 규칙은 로그인(SP)의 ’로그인 링크 구성’을 담당합니다 — 사용자 아이콘 + 레이블로 구성해(060), 사용자가 빠르고 명확 하게 로그인을 인지하게 하죠. SP-059(위치)와 함께 로그인 발견을 돕습니다.

정리하면 — 로그인 링크가 아이콘만이면 모호하고 글자만이면 덜 띄므로, 사용자 아이콘 + ‘로그인’ 레이블을 함께 써 빠르고 명확하게 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

아이콘 + 레이블 — 로그인 링크가 사용자 아이콘 + ‘로그인’ 텍스트인가.

명확성 — 무슨 기능인지(로그인) 명확히 인지되는가.

상태·접근성 — 로그인 후 표시 일관, 스크린 리더 이름이 있는가(SP-063).

개선 방향

사용자 아이콘 + ‘로그인’ 레이블 조합(아이콘만 지양).

로그인 후 ‘아이콘+이름’ 일관. 접근가능한 이름(SP-063).

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

역할	책임
디자이너	로그인 링크 아이콘·레이블 디자인
퍼블리셔	구성 구현

기관 유형	SP-060 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (헤더 로그인 제공 시)

헤더에 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로그인 링크가 사용자 아이콘 + ‘로그인’ 텍스트인가요?

□ 무슨 기능인지(로그인) 명확히 인지되나요?

□ 로그인 후 표시 일관, 스크린 리더 이름이 있나요(SP-063)?

❓ FAQ

Q1. 아이콘만 쓰면 안 되나요? 사람 모양 아이콘만으론 로그인인지 마이페이지인지 모호합니다. ‘로그인’ 텍스트를 함께 둬 명확히 하죠. 아이콘만이면 접근성에도 불리하고요(SP-063). Q2. 글자만 쓰면요? ‘로그인’ 텍스트만이면 다른 헤더 메뉴에 묻혀 덜 띌 수 있습니다. 사용자 아이콘을 함께 둬 시각 인지를 돕죠. 아이콘 + 텍스트가 명확 + 주목입니다. Q3. 로그인 후엔 어떻게 바뀌나요? 사용자 아이콘 + 이름(또는 ‘마이페이지’·‘로그아웃’)으로요. 로그인 전 ‘아이콘+로그 인’, 후 ’아이콘+이름’처럼 일관되게 바뀝니다.

6. 마무리

SP-060의 메시지:

아이콘 + 글자로 분명하게 — 로그인 링크를 사용자 아이콘 + 레이블로 구성하라.

아이콘만이면 모호하고 글자만이면 덜 띕니다. 사용자 아이콘 + ‘로그인’ 레이블로 빠르고 명확하게 인지하게 하는 게 핵심 이죠. 다음 편은 로그인 링크의 연결 일관성입니다.

다음 편 예고 ▶ 「735. (SP-061) 로그인 링크는 항상 ‘로그인’ 화면으로 연결되도록 되어 있다.」

ViewCheck는 로그인 링크가 사용자 아이콘 + 레이블로 구성되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 로그인 가이드 — https://www.krds.go.kr/html/site/service/service_03.html

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

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