상세 화면 제목은 서비스 이름으로

KRDS SP-111 — 본문 콘텐츠의 제목을 신청 서비스명으로 제공하고 있다.

0. 들어가며 — 서비스 정보 확인 서브섹션의 시작

이번 785편부터 ‘서비스 정보 확인’ 서브섹션(SP-111~124)입니다. 신청 서비스의 상세 정보 화면을 다루는 규칙들이죠. 첫 편 SP-111은 — 본문 콘텐츠의 제목을 신청 서비스명으로 제공하라는 규칙입니다.

상세 화면에 들어왔는데 — 제목이 서비스 이름이 아니거나 모호하면, 사용자는 제대로 들어왔는지 헷갈리죠. SP-111은 본문 제목을 서비스명으로 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 본문 제목 = 신청 서비스명

SP-111 (서비스 패턴 > 신청 > 서비스 정보 확인) “본문 콘텐츠의 제목을 신청 서비스명으로 제공하고 있다.”

상세 화면 본문 제목을 신청 서비스명으로 제공하라는 뜻입니다.

정리: 상세 화면 본문 제목을 신청 서비스명으로 제공하라. 이게 SP-111입니다.

2. 왜 본문 제목이 서비스명인가

사용자가 목록(SP-101~110)에서 서비스를 골라 상세 화면(‘서비스 정보 확인’)에 들어옵니다. 이때 상세 화면의 본문 제목이, 그 서비스명이어야 사용자가 제대로 들어왔는지 알죠. SP-111은 이를 요구합니다.

본문 제목이 서비스명이 아닐 때의 문제:

들어온 곳 확인 불가 상세 화면 제목이, 서비스 이름이 아니라 모호한 제목(‘상세 정보’, ‘안내’)이면, 사용자 는 자기가 고른 서비스의 상세인지 헷갈립니다.

목록↔상세 불일치 목록의 서비스명(SP-106 공식 명칭)과 상세 화면 제목이 다르면, 같은 서비스인지 의심스럽죠.

그래서 SP-111은 — 본문 제목 = 서비스명을 요구합니다:

본문 제목에 서비스명 상세 화면의 본문 제목(주 제목, <h1>)을, 그 신청 서비스명으로요. 사용자가 ’내가 고른 ○○ 서비스의 상세구나’를 바로 알게요.

목록↔상세 일치 목록의 서비스명(SP-106 공식 명칭)과 상세 제목이 일치하게요. 같은 서비스임을 분명히요.

시맨틱 제목 본문 제목을, 시맨틱(<h1>)으로요(BP-052·060). 시각 구분(크게·굵게) + 시맨틱(<h1>)으로, 스크린 리더가 ’제목 레벨 1, ○○ 서비스’로 읽게요.

페이지 제목(title)과도. 본문 제목뿐 아니라, 브라우저 탭의 페이지 제목(<title>)도 서비스명을 포함하면 좋죠. 사용자가 탭·북마크·검색에서 서비스를 식별하게요.

상세 정보의 시작점. 상세 화면은, 사용자가 서비스 정보를 깊이 확인하는 곳입니다(SP-112~124). 그 시작이 ‘무슨 서비스인가’(제목)죠. 본문 제목이 서비스명이면, 사용자가 맥락(어느 서비스의 정보)을 잡고 상세를 읽습니다.

제목 위계(BP-052·053)·시맨틱(BP-060) 적용. 콘텐츠 제목 구분(BP-052)·계층(BP-053)·시맨틱(BP-060)을, 신청 상세 화면에 적용한 거죠. 본문 제목(서비스명)을 명확·시맨틱하게요.

이 규칙은 신청(SP)의 ’상세 화면 식별’을 담당합니다 — 본문 제목을 서비스명으로 제공해(111), 사용자가 어느 서비스의 상세인지 알고 정보를 확인하게 하죠. 서비스 정보 확인의 출발점입니다.

정리하면 — 상세 화면 제목이 서비스명이 아니면 제대로 들어왔는지 헷갈리므로, 본문 제목(<h1>)을 신청 서비스명(목록과 일치하는 공식 명칭)으로 제공해야 합니다.

3. 점검 / 개선

무엇을 점검하나

본문 제목 서비스명 — 상세 화면 본문 제목이 신청 서비스명인가.

목록↔상세 일치 — 목록 서비스명(SP-106)과 상세 제목이 일치하는가.

시맨틱 제목 — 본문 제목이 <h1> 시맨틱인가(BP-052·060).

개선 방향

상세 화면 본문 제목(<h1>)을 신청 서비스명으로(목록 일치).

시각 구분 + 시맨틱(BP-052·060). 페이지 title도 서비스명 포함.

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

역할	책임
퍼블리셔/개발	본문 제목 구현
콘텐츠 운영	서비스명 일치 관리

기관 유형	SP-111 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 권장 (신청 상세 제공 시)

신청 서비스 상세 화면을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 상세 화면 본문 제목이 신청 서비스명인가요?

□ 목록 서비스명(SP-106)과 상세 제목이 일치하나요?

□ 본문 제목이 <h1> 시맨틱인가요(BP-052·060)?

❓ FAQ

Q1. 본문 제목이 서비스명이 아니면 왜 문제인가요? 상세 화면 제목이 ‘상세 정보’·‘안내’처럼 모호하면 자기가 고른 서비스의 상세인지 헷갈립니다. 서비스명이어야 ’내가 고른 ○○구나’를 바로 알죠. Q2. 목록과 일치해야 하나요? 네. 목록 서비스명(SP-106 공식 명칭)과 상세 제목이 같아야 같은 서비스임을 분명히 합니다. 다르면 의심스럽죠. Q3. 시맨틱 제목이 왜 필요한가요? 본문 제목을 <h1>로 하면 시각 구분(크게·굵게) + 스크린 리더 인지(’제목 레벨 1, ○○ 서비스’)를 둘 다 잡습니다(BP-052·060).

6. 마무리

SP-111의 메시지:

상세 화면 제목은 서비스 이름으로 — 본문 제목을 신청 서비스명으로 제공하라.

상세 화면 제목이 서비스명이 아니면 제대로 들어왔는지 헷갈립니다. 본문 제목을 서비스명(목록 일치·시맨틱)으로 제공해 맥락을 잡게 하는 게 핵심이죠. 다음 편은 이해하기 쉬운 단어·문장입니다.

다음 편 예고 ▶ 「786. (SP-112) 상세 정보 콘텐츠는 가능한 한 이해하기 쉬운 단어와 문장으로 정보를 제공하고 있다.」

ViewCheck는 상세 화면 본문 제목이 신청 서비스명으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 신청 가이드 — https://www.krds.go.kr/html/site/service/service_04.html

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

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