모바일에서도 로그인은 쉽게

KRDS SP-062 — [모바일] 화면 너비가 충분하지 않은 경우에도 직관적으로 인지할 수 있는 형태로 헤더나 탭바에 로그인 링크를 배치하고 있다.

0. 들어가며 — 모바일에서 로그인이 메뉴 깊이 숨어 있으면

이번 736편은 [모바일] 화면 너비가 충분하지 않은 경우에도 직관적으로 인지할 수 있는 형태로 헤더나 탭바에 로그인 링크를 배치하라는 규칙입니다.

좁은 모바일 화면에서 — 로그인을 햄버거 메뉴 깊이 숨기면, 사용자가 찾기 어렵죠. SP-062는 모바일에서도 헤더·탭바에 로그인을 직관적으로 배치하라고 규정합니다. SP-059의 모바일 짝이죠. 이번 편을 풀어냅니다.

1. 원문 — 모바일 로그인 링크 직관 배치

SP-062 (서비스 패턴 > 로그인 > 로그인 기능 찾기) “[모바일] 화면 너비가 충분하지 않은 경우에도 직관적으로 인지할 수 있는 형태로 헤더나 탭바에 로그인 링크를 배치하고 있다.”

좁은 화면에서도 헤더·탭바에 로그인 링크를 직관적으로 배치하라는 뜻입니다.

정리: 모바일에서도 헤더·탭바에 로그인을 직관적으로 배치하라. 이게 SP-062입니다.

2. 왜 모바일 로그인 배치인가

SP-059에서 로그인 링크를 일관 위치(헤더 우측)에 배치했죠. 그런데 좁은 모바일 화면에서는, 헤더 공간이 부족해 로그인을 햄버거 메뉴 안에 숨기기 쉽습니다. 그러면 사용자가 찾기 어렵죠. SP-062는 모바일에서도 직관적 배치를 요구합니다.

모바일에서 로그인이 숨을 때의 문제:

로그인 찾기 어려움 로그인을 햄버거 메뉴(☰) 깊이 넣으면, 사용자는 메뉴를 열고 찾아 내려가야 합니다. 로그인이 자주 쓰는 입구인데, 깊이 숨으면 불편하죠.

인지 어려움 작은 화면에서, 로그인이 안 보이거나 모호한 형태면, 사용자가 못 알아챕니다.

그래서 SP-062는 — 직관적 배치를 요구합니다:

헤더에 배치 좁은 화면에서도, 로그인을 헤더에 노출합니다. 공간이 부족하면, 사용자 아이콘(SP-060)으로 축약해서라도 헤더에 두죠. 햄버거 메뉴 안으로만 매몰하지 않습니다.

탭바에 배치(대안) 또는 모바일 하단 탭바(주요 메뉴 바)에 로그인·마이페이지를 둡니다. 하단 탭바는 엄지로 닿기 좋은 자리라, 로그인을 쉽게 접근하게요.

직관적 형태 로그인을 사용자 아이콘 + (가능하면) 레이블로(SP-060), 직관적으로 인지되게요. 작아도 무슨 기능인지 알게요.

반응형 분기 — 넓은 — 화면은 SP-059(헤더 우측 풀), 좁은 화면은 SP-062(헤더 축약·탭바)로 분기합니다.

SP-059·062의 반응형 짝. SP-059(모든 화면 일관 위치·주목도)의 모바일 구체화가 SP-062입니다. 넓은 화면은 헤더 우측에 풀로, 좁은 화면은 헤더 축약·탭바에 직관적으로요. 어느 화면 크기에서든, 로그인이 쉽게 인지·접근되게 하죠.

모바일 로그인의 중요성. 모바일에서 개인화 서비스(민원·신청)를 쓰려면 로그인이 필수입니다. 로그인이 숨어 있으면, 모바일 사용자가 서비스를 못 쓰죠. 모바일 비중이 큰 공공 서비스에서, 모바일 로그인 접근성은 중요합니다.

이 규칙은 로그인(SP)의 ’모바일 로그인 접근’을 담당합니다 — 좁은 화면에서도 헤더·탭바에 로그인을 직관적으로 배치해 (062), 모바일 사용자도 쉽게 로그인하게 하죠. SP-059(일관 위치)의 모바일 짝입니다.

정리하면 — 좁은 모바일 화면에서 로그인을 햄버거 메뉴 깊이 숨기면 찾기 어려우므로, 헤더(축약)나 탭바에 직관적으로 인지 되는 형태로 로그인 링크를 배치해야 합니다.

3. 점검 / 개선

무엇을 점검하나

헤더·탭바 노출 — 모바일에서 로그인이 헤더(축약)나 탭바에 노출되는가.

직관적 형태 — 사용자 아이콘 등으로 무슨 기능인지 직관적인가.

메뉴 매몰 없음 — 로그인이 햄버거 메뉴 깊이 매몰되지 않는가.

개선 방향

모바일 로그인을 헤더(아이콘 축약)나 하단 탭바에 노출(SP-060 형태).

햄버거 메뉴 매몰 지양. 넓은 화면(SP-059)과 반응형 분기.

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

역할	책임
디자이너	모바일 로그인 배치 디자인
퍼블리셔/개발	반응형 로그인 구현

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

모바일을 지원하며 로그인을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모바일에서 로그인이 헤더(축약)나 탭바에 노출되나요?

□ 사용자 아이콘 등으로 무슨 기능인지 직관적인가요?

□ 로그인이 햄버거 메뉴 깊이 매몰되지 않나요?

❓ FAQ

Q1. 모바일에서 로그인을 햄버거 메뉴에 넣으면 안 되나요? 깊이 매몰하면 메뉴를 열고 찾아 내려가야 해 불편합니다. 로그인은 자주 쓰는 입구라, 헤더(축약)나 탭바에 노출하는 게 좋죠. Q2. 헤더 공간이 부족하면요? 사용자 아이콘(SP-060)으로 축약해서라도 헤더에 두거나, 하단 탭바에 둡니다. 탭바는 엄지로 닿기 좋아 모바일에 적합하죠. Q3. SP-059와 같나요? SP-059(모든 화면 일관 위치·주목도)의 모바일 구체화입니다. 넓은 화면은 헤더 우측 풀, 좁은 화면은 헤더 축약·탭바로 반응형 분기하죠.

6. 마무리

SP-062의 메시지:

모바일에서도 로그인은 쉽게 — 좁은 화면에서도 헤더·탭바에 로그인을 직관적으로 배치하라.

좁은 화면에서 로그인을 메뉴 깊이 숨기면 찾기 어렵습니다. 헤더(축약)·탭바에 직관적으로 배치해 모바일에서도 쉽게 로그인 하게 하는 게 핵심이죠. 다음 편은 로그인 링크 스크린 리더 인지입니다.

다음 편 예고 ▶ 「737. (SP-063) 로그인 링크는 스크린 리더에서 링크로 인지될 수 있도록 하고 있다.」

ViewCheck는 모바일에서 로그인 링크가 헤더·탭바에 직관적으로 배치되는지를 진단합니다.

📚 참고 출처

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

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

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