같은 급 방식은 탭으로 가르지 말기

KRDS SP-070 — 동일한 수준의 로그인 방식을 탭으로 구분하고 있지 않다.

0. 들어가며 — 탭 뒤에 숨은 로그인 방식

이번 744편은 동일한 수준의 로그인 방식을 탭으로 구분하지 않게 하라는 규칙입니다.

여러 로그인 방식이 — 같은 급(병렬)인데 탭으로 나누면, 다른 탭에 숨은 방식을 못 보죠. SP-070은 동일 수준 방식을 탭으로 가르지 말라고 규정합니다. 탭의 잘못된 사용을 막는 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 동일 수준 탭 구분 금지

SP-070 (서비스 패턴 > 로그인 > 로그인 방식 확인/선택) “동일한 수준의 로그인 방식을 탭으로 구분하고 있지 않다.”

같은 수준의 로그인 방식을 탭으로 나누지 말라는 뜻입니다.

정리: 동일 수준 로그인 방식을 탭으로 구분하지 마라. 이게 SP-070입니다.

2. 왜 동일 수준 탭 구분 금지인가

여러 로그인 방식(간편인증·공동인증서·금융인증서 등)을, 화면에 어떻게 배치하느냐가 중요합니다. 이들이 같은 수준(병렬·동급)인데, 탭으로 나누면 문제가 생기죠. SP-070은 동일 수준 탭 구분을 금지합니다.

탭의 본래 용도. 탭은 서로 다른 범주·맥락의 콘텐츠를, 한 공간에서 전환해 보는 UI입니다(탭 컴포넌트 CP-227~ 237). 한 번에 한 탭만 보이고, 나머지는 숨겨지죠. 그래서 ’구분되는 다른 것’에 적합합니다.

동일 수준 방식을 탭으로 나눌 때의 문제:

방식 가려짐 로그인 방식들이 같은 급인데 탭으로 나누면, 한 탭의 방식만 보이고 나머지는 숨겨집니다. 사용자가 다른 탭에 무슨 방식이 있는지 모르거나, 탭을 일일이 눌러봐야 하죠.

선택 어려움 모든 방식을 한눈에 비교해 고르고 싶은데, 탭으로 나뉘면 못 합니다. 같은 급 선택지는, 나란히 보여야 비교·선택이 쉽죠.

탭 오용 탭은 ‘다른 범주’ 전환용인데, 동급 방식을 탭으로 나누는 건 탭의 오용입니다.

그래서 SP-070은 — 탭 구분 금지를 요구합니다:

동일 수준은 나란히 같은 수준의 로그인 방식은, 탭으로 나누지 말고 한 화면에 나란히(목록·버튼 그리드) 보여줍니다. 사용자가 모든 방식을 한눈에 보고 고르게요.

탭은 다른 수준에만 탭을 쓰려면, 정말 다른 범주·수준일 때만요. 예: ‘개인’과 ’기업’ 로그인처럼 대상이 다른 경우라면 탭이 적절할 수 있죠. 하지만 같은 급 방식(간편·인증서 등)은 탭이 아닙니다.

방식 그리드·목록 로그인 방식들을, 아이콘 버튼 그리드나 목록으로 한눈에요. 자주 쓰는 걸 우선(SP-069) 하되, 다 보이게요.

탭 컴포넌트(CP)의 올바른 사용. 탭 규칙(CP-227~237)은, 탭을 ’구분되는 다른 콘텐츠’에 쓰라고 합니다. SP-070은 그 원칙을 로그인 방식에 적용해, 동급 방식을 탭으로 가르는 오용을 막죠. 검색 주제별 탭(SP-047)은 다른 주제라 탭이 맞지만, 로그인 동급 방식은 탭이 아닙니다.

이 규칙은 로그인(SP)의 ’로그인 방식 배치’를 담당합니다 — 동일 수준 방식을 탭으로 안 나눠(070), 사용자가 모든 방식을 한눈에 보고 고르게 하죠. 탭의 올바른 사용을 지킵니다.

정리하면 — 같은 수준의 로그인 방식을 탭으로 나누면 다른 탭의 방식이 가려져 비교·선택이 어려우므로, 동일 수준 방식은 탭이 아니라 한 화면에 나란히(그리드·목록) 보여줘야 합니다.

3. 점검 / 개선

무엇을 점검하나

탭 구분 없음 — 동일 수준 로그인 방식이 탭으로 나뉘지 않는가.

나란히 노출 — 같은 급 방식이 한 화면에 나란히 보이는가(그리드·목록).

탭 적정 사용 — 탭을 쓴다면 정말 다른 범주·수준에만 쓰는가.

개선 방향

동일 수준 방식을 탭 아닌 그리드·목록으로 한눈에. 자주 쓰는 우선(SP-069).

탭은 다른 범주(개인/기업 등)에만. 탭 컴포넌트 올바른 사용(CP-227~237).

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

역할	책임
기획/UX	로그인 방식 배치 설계
퍼블리셔/개발	방식 그리드·목록 구현

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

여러 로그인 방식을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 동일 수준 로그인 방식이 탭으로 나뉘지 않나요?

□ 같은 급 방식이 한 화면에 나란히 보이나요(그리드·목록)?

□ 탭을 쓴다면 정말 다른 범주·수준에만 쓰나요?

❓ FAQ

Q1. 동일 수준 방식을 탭으로 나누면 왜 안 되나요? 탭은 한 번에 하나만 보이고 나머지는 숨겨집니다. 같은 급 방식을 탭으로 나누면 다른 탭의 방식이 가려져 비교·선택이 어렵죠. 탭의 오용입니다. Q2. 탭은 언제 쓰나요? 정말 다른 범주·수준일 때만요. 예: ‘개인’과 ’기업’ 로그인처럼 대상이 다른 경우요. 같은 급 방식(간편·인증서)은 탭이 아니라 나란히 보여줍니다. Q3. 방식을 어떻게 보여주나요? 아이콘 버튼 그리드나 목록으로 한눈에요. 자주 쓰는 걸 우선(SP-069)하되 다 보이게요. 모든 방식을 비교해 고르게 합니다.

6. 마무리

SP-070의 메시지:

같은 급 방식은 탭으로 가르지 말기 — 동일 수준 로그인 방식을 탭으로 구분하지 마라.

같은 수준 방식을 탭으로 나누면 다른 탭의 방식이 가려져 비교·선택이 어렵습니다. 나란히 보여줘 한눈에 고르게 하는 게 핵심이죠. 다음 편은 방식 분류에 사용자 관점·언어 반영입니다.

다음 편 예고 ▶ 「745. (SP-071) 다양한 로그인 방식에 대한 분류 체계에 사용자의 관점과 언어를 반영하고 있다.」

ViewCheck는 동일 수준 로그인 방식이 탭으로 구분되지 않는지를 진단합니다.

📚 참고 출처

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

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

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