로그인은 늘 같은 자리에 눈에 띄게

KRDS SP-059 — 로그인 링크를 모든 화면에서 일관된 위치에 주목도 있게 배치하고 있다.

0. 들어가며 — 로그인 그룹의 시작

이번 733편부터 로그인(Login) 그룹(SP-059~100, 42개)입니다. 서비스 패턴(SP)의 셋째 그룹이죠. 로그인은 ‘로그인 기능 찾기’, ‘로그인 안내’, ‘로그인 방식 선택’, ‘로그인 정보 입력’ 등으로 나뉩니다. 첫 편 SP-059는 로그인 링크를 모든 화면에서 일관된 위치에 주목도 있게 배치하라는 규칙입니다.

로그인 링크가 — 화면마다 다른 곳에 있거나 눈에 안 띄면, 사용자가 찾기 어렵죠. SP-059는 일관 위치 + 주목도를 규정 합니다. 이번 편을 풀어냅니다.

1. 원문 — 로그인 링크 일관 위치·주목도

SP-059 (서비스 패턴 > 로그인 > 로그인 기능 찾기) “로그인 링크를 모든 화면에서 일관된 위치에 주목도 있게 배치하고 있다.”

로그인 링크를 모든 화면의 일관된 위치에 눈에 띄게 배치하라는 뜻입니다.

정리: 로그인 링크를 일관 위치에 주목도 있게 배치하라. 이게 SP-059입니다.

2. 왜 일관 위치·주목도인가

로그인은 개인화 서비스(마이페이지·신청·민원)로 가는 입구입니다. 사용자가 로그인하려면, 그 링크를 쉽게 찾아야 하죠. SP-059는 일관된 위치 + 주목도를 요구합니다. 검색 링크(SP-011)와 같은 정신입니다.

로그인 링크가 찾기 어려울 때의 문제:

매번 찾기 로그인 링크가, 화면마다 다른 곳에 있으면, 사용자는 매번 찾아야 합니다.

눈에 안 띔 로그인이 작거나 묻혀 있으면, 사용자가 못 찾거나 늦게 찾죠. 로그인이 필요한데 입구가 안 보이면 답답합니다.

그래서 SP-059는 — 일관 위치 + 주목도를 요구합니다:

일관된 위치 로그인 링크를, 모든 화면에서 같은 위치에요. 보통 헤더의 우측(검색·로그인 영역, SP-011 정신) 에요. 사용자가 어느 화면에서든 같은 자리에서 로그인을 찾죠(일관성 WCAG 3.2.3).

주목도 로그인을 눈에 띄게요. 충분한 크기·대비·위치로, 사용자가 쉽게 발견하게요. 로그인은 중요한 입구이므로, 적절히 주목도를 줍니다(단, 과하지 않게).

헤더 우측 관습 헤더 우측은, 로그인·검색이 오는 관습적 자리입니다. 사용자가 학습한 패턴이라 거기서 찾죠.

로그인 vs 로그아웃 상태. 로그인 전에는 ‘로그인’ 링크를, 로그인 후에는 ‘로그아웃’·마이페이지·사용자 이름 등을 같은 위치에 보여줍니다. 상태에 따라 표시가 바뀌되, 위치는 일관되게요.

SP-011(검색 링크)과의 공통 원리. 검색 링크(SP-011 헤더 우측 일관 배치)와 같은 원리입니다. 핵심 기능(검색· 로그인)을, 일관된 관습적 위치(헤더 우측)에 둬 쉽게 찾게 하죠. 로그인 그룹은, 검색 그룹과 구조가 유사합니다 (‘기능 찾기’ → ‘입력’ 등).

이 규칙은 로그인(SP)의 ’로그인 접근성’을 담당합니다 — 로그인 링크를 일관 위치에 주목도 있게 배치해(059), 사용자가 어느 화면에서든 쉽게 로그인 입구를 찾게 하죠. 로그인 그룹의 출발점입니다.

정리하면 — 로그인 링크가 화면마다 다르거나 눈에 안 띄면 찾기 어려우므로, 모든 화면의 일관된 위치(보통 헤더 우측)에 주목도 있게 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

일관 위치 — 로그인 링크가 모든 화면에서 같은 위치(헤더 우측)인가.

주목도 — 로그인이 눈에 띄게 충분한 크기·대비·위치인가.

상태 표시 — 로그인 전/후 표시가 같은 위치에서 바뀌는가.

개선 방향

로그인 링크를 헤더 우측 일관 위치에 주목도 있게(SP-011 정신).

로그인 전 ‘로그인’, 후 ‘로그아웃’·마이페이지를 같은 위치에. 일관성(WCAG 3.2.3).

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

역할	책임
디자이너	로그인 위치·주목도 디자인
퍼블리셔	헤더 로그인 구현

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

로그인 기능을 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 로그인 링크가 모든 화면에서 같은 위치(헤더 우측)인가요?

□ 로그인이 눈에 띄게 충분한 크기·대비·위치인가요?

□ 로그인 전/후 표시가 같은 위치에서 바뀌나요?

❓ FAQ

Q1. 로그인을 어디에 두나요? 보통 헤더 우측(검색·로그인 영역)이요. 웹 관습이라 사용자가 학습한 자리죠. 모든 화면 에서 같은 위치로 일관되게 둡니다(SP-011 정신). **Q2. ‘주목도’는 어느 정도인가요?** 충분한 크기·대비·위치로 쉽게 발견되게요. 로그인은 중요한 입구이므로 적절히 주목도 를 주되 과하지 않게요. Q3. 로그인 후엔 어떻게 하나요? 같은 위치에 ’로그아웃’·마이페이지·사용자 이름 등을 보여줍니다. 상태에 따라 표시는 바뀌되 위치는 일관되게요.

6. 마무리

SP-059의 메시지:

로그인은 늘 같은 자리에 눈에 띄게 — 로그인 링크를 일관 위치에 주목도 있게 배치하라.

로그인 링크가 화면마다 다르거나 눈에 안 띄면 찾기 어렵습니다. 일관된 위치(헤더 우측)에 주목도 있게 배치해 쉽게 찾게 하는 게 핵심이죠. 다음 편은 로그인 링크 구성(아이콘+레이블)입니다.

다음 편 예고 ▶ 「734. (SP-060) 헤더에서 제공되는 로그인 링크를 사용자 아이콘과 레이블로 구성하고 있다.」

ViewCheck는 로그인 링크가 일관 위치에 주목도 있게 배치되는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 3.2.3 Consistent Navigation — https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html

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

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