참고 사항은 그 항목 옆에

KRDS SP-136 — 작성 시 참고해야 할 사항은 화면 상단이나 입력폼 하단이 아닌 입력 항목 자체에 제공하고 있다.

0. 들어가며 — 참고 사항이 화면 맨 위·맨 아래에만 있으면

이번 810편은 작성 시 참고해야 할 사항은 화면 상단이나 입력폼 하단이 아닌 입력 항목 자체에 제공하라는 규칙입니다.

특정 항목을 채울 때 참고할 사항이 — 화면 맨 위나 맨 아래에만 있으면, 사용자는 그 항목을 채우며 참고 사항을 못 보죠. SP-136은 참고 사항을 그 입력 항목 자체에 두라고 규정합니다. 근접성의 신청 적용이죠. 이번 편을 풀어냅니다.

1. 원문 — 참고 사항 입력 항목 자체 제공

SP-136 (서비스 패턴 > 신청 > 신청서 작성) “작성 시 참고해야 할 사항은 화면 상단이나 입력폼 하단이 아닌 입력 항목 자체에 제공하고 있다.”

참고 사항을 상단·하단이 아닌 해당 입력 항목 자체에 제공하라는 뜻입니다.

정리: 참고 사항을 해당 입력 항목 자체에 제공하라. 이게 SP-136입니다.

2. 왜 항목 자체에인가

신청서를 작성할 때, 특정 항목에 대해 참고할 사항(형식·예시·주의·조건)이 있습니다. 이를 어디에 두느냐가 중요하죠. SP-136은 화면 상단·하단이 아니라 그 입력 항목 자체에 두라고 합니다.

참고 사항이 상단·하단에만 있을 때의 문제:

멀어서 못 봄 참고 사항이 화면 맨 위(상단)나 맨 아래(폼 하단)에만 있으면, 사용자가 중간의 그 항목을 채울 때 참고 사항이 화면 밖이거나 멀어서 안 보입니다. 참고 사항이 있는 줄도 모르고 잘못 입력하죠.

연결 안 됨 상단·하단의 참고 사항이, 어느 항목에 대한 건지 헷갈립니다. 여러 항목 참고 사항이 한곳에 모여 있으면 더요.

그래서 SP-136은 — 항목 자체에를 요구합니다:

항목 옆·아래에 참고 사항을, 해당 입력 항목의 바로 옆·아래에 둡니다. 사용자가 그 항목을 채울 때, 바로 참고 사항을 보게요. 도움말 텍스트·도움 컴포넌트(SP-134)로요.

근접성 참고 사항과 그 항목을, 가깝게 둡니다(근접성 BP-071·CP). 어느 항목에 대한 참고인지 분명하게요.

맥락 도움 그 항목을 채우는 맥락에서, 필요한 도움을요(맥락 도움 CP-355~365). 사용자가 필요할 때 바로요.

SP-134·136의 연계. SP-134(전문 용어 도움 컴포넌트)·SP-136(참고 사항 항목 자체)이 같은 정신입니다. 도움·참고를, 그 항목 옆에 둬, 사용자가 그 항목을 채울 때 바로 보게요. 맥락 도움의 위치 원칙이죠.

SP-021(플레이스홀더)·BP-074(레이블·설명)와의 관계. 참고 사항(중요 단서)은, 플레이스홀더가 아니라(SP-021) 항상 보이는 도움말·레이블로(BP-074), 그 항목에 둡니다. 입력해도 안 사라지고, 그 항목 맥락에서요.

입력 정확성 향상. 참고 사항을 그 항목에 두면, 사용자가 그 항목을 정확히 채웁니다. 형식·예시·주의 를 바로 보고요. 잘못 입력·오류를 줄이죠(BP-063 사전 안내 정신).

이 규칙은 신청(SP)의 ’참고 사항 배치’를 담당합니다 — 참고 사항을 입력 항목 자체에 제공해(136), 사용자가 그 항목을 채울 때 바로 참고해 정확히 입력하게 하죠. SP-134(항목 도움)·SP-135(다양한 도움)과 함께 갑니다.

정리하면 — 참고 사항이 화면 상단·하단에만 있으면 그 항목을 채울 때 안 보이고 연결이 안 되므로, 참고 사항을 해당 입력 항목 자체(옆·아래)에 두어 채울 때 바로 보게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

항목 자체 — 참고 사항이 해당 입력 항목 옆·아래에 있는가(상단·하단만 아님).

근접성 — 참고 사항과 항목이 가까워 연결이 분명한가.

항상 보임 — 참고 사항이 플레이스홀더가 아닌 도움말로 항상 보이는가(SP-021).

개선 방향

참고 사항을 해당 항목 옆·아래에(도움말·도움 컴포넌트 SP-134).

근접성(BP-071). 플레이스홀더 아닌 항상 보이는 도움말(BP-074, SP-021).

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

역할	책임
UX 라이터/기획	참고 사항 작성·배치
퍼블리셔/개발	항목별 도움말 구현

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

신청서 작성 폼을 제공하는 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 참고 사항이 해당 입력 항목 옆·아래에 있나요(상단·하단만 아님)?

□ 참고 사항과 항목이 가까워 연결이 분명한가요?

□ 참고 사항이 플레이스홀더가 아닌 도움말로 항상 보이나요(SP-021)?

❓ FAQ

Q1. 참고 사항을 상단·하단에 모으면 깔끔하지 않나요? 그 항목을 채울 때 참고 사항이 화면 밖이거나 멀어서 안 보입니다. 어느 항목에 대한 건지도 헷갈리죠. 그 항목 옆에 둬야 채울 때 바로 봅니다. Q2. SP-134와 어떻게 함께 가나요? SP-134(전문 용어 도움 컴포넌트)·SP-136(참고 사항 항목 자체)이 같은 정신입니다. 도움·참고를 그 항목 옆에 둬 채울 때 바로 보게요. 맥락 도움의 위치 원칙이죠. Q3. 플레이스홀더에 두면 안 되나요? 안 됩니다. 참고 사항(중요 단서)은 입력 시 사라지는 플레이스홀더가 아니라(SP-021) 항상 보이는 도움말·레이블로 그 항목에 둡니다(BP-074).

6. 마무리

SP-136의 메시지:

참고 사항은 그 항목 옆에 — 작성 참고 사항을 입력 항목 자체에 제공하라.

참고 사항이 상단·하단에만 있으면 그 항목을 채울 때 안 보입니다. 참고 사항을 해당 항목 옆·아래에 둬 채울 때 바로 참고 해 정확히 입력하게 하는 게 핵심이죠. 다음 편은 도움말 정확성입니다.

다음 편 예고 ▶ 「811. (SP-137) 도움말은 텍스트 오탈자 없이 공식적인 명칭을 사용하여 정확한 내용으로 제공하고 있다.」

ViewCheck는 작성 참고 사항이 입력 항목 자체에 제공되는지를 진단합니다.

📚 참고 출처

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

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

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