검색어가 한눈에 보이게

KRDS SP-019 — 검색어 입력 필드는 일반적인 검색어가 한눈에 파악될 수 있는 너비로 제공하고 줄바꿈이나 말줄임표를 사용하고 있지 않다.

0. 들어가며 — 검색어가 잘려 보이면

이번 693편은 검색어 입력 필드는 일반적인 검색어가 한눈에 파악될 수 있는 너비로 제공하고, 줄바꿈이나 말줄임표를 사용하지 않게 하라는 규칙입니다.

검색창이 — 너무 좁으면, 입력한 검색어가 잘리거나 줄바꿈되어 한눈에 안 보이죠. SP-019는 검색어가 한눈에 보이는 너비를 규정합니다. 이번 편을 풀어냅니다.

1. 원문 — 충분한 너비, 줄바꿈·말줄임 금지

SP-019 (서비스 패턴 > 검색 > 검색어 입력) “검색어 입력 필드는 일반적인 검색어가 한눈에 파악될 수 있는 너비로 제공하고 줄바꿈이나 말줄임표를 사용하고 있지 않다.”

검색어가 한눈에 보이는 너비로 입력 필드를 제공하고, 줄바꿈·말줄임을 쓰지 말라는 뜻입니다.

정리: 검색 입력 필드를 검색어가 한눈에 보이는 너비로 하라. 이게 SP-019입니다.

2. 왜 충분한 너비인가

검색어를 입력할 때, 사용자는 자기가 무엇을 입력했는지 보면서 확인합니다. 그런데 입력 필드가 너무 좁으면, 검색어가 잘리거나 줄바꿈되어 한눈에 안 보이죠. SP-019는 충분한 너비를 요구합니다.

입력 필드가 좁을 때의 문제:

검색어 안 보임 입력 필드가 좁으면, 긴 검색어를 입력할 때 앞부분이 가려지거나(말줄임 …) 줄바꿈됩니다. 사용자는 자기가 무엇을 입력했는지 전체를 못 보죠.

오타 확인 어려움 검색어 전체가 안 보이면, 오타·오기를 확인하기 어렵습니다. 잘못된 검색어로 검색하게 되죠.

답답함 좁은 검색창은, 답답하고 쓰기 불편합니다.

그래서 SP-019는 — 충분한 너비를 요구합니다:

한눈에 보이는 너비 입력 필드를 일반적인 검색어(보통 한 문장·키워드 몇 개)가 한눈에 보이는 너비로요. 사용자가 입력한 검색어 전체를 보며 확인하게요.

줄바꿈 금지 검색어 입력 필드는, 한 줄로 유지합니다. 줄바꿈(여러 줄)이 되면 검색창 같지 않고 혼란스럽죠. 검색어는 보통 짧으니 한 줄이 적합합니다.

말줄임표(…) 금지 검색어가 잘려 말줄임표(…)로 표시되지 않게요. 입력한 검색어가 그대로 다 보이게요. 너비 가 충분하거나, 길면 가로 스크롤로 보되 잘라 숨기지 않습니다.

왜 한눈에 보여야 하나. 검색어를 입력하는 건, 사용자가 의도를 표현하는 행동입니다. 그 검색어를 보며 확인 하고 수정하죠. 안 보이면 확인·수정이 어렵습니다. 입력 내용 가시성은, 입력 UX의 기본이죠.

반응형 고려. 모바일 좁은 화면에서도, 가능한 검색어가 보이는 너비를 확보합니다. 헤더 검색이 너무 좁으면, 검색 시 전체화면·넓은 입력으로 전환하기도 하죠(SP-012 ② 형태).

디자인 토큰 활용. 입력 필드 — 너비·크기는, 디자인 시스템(텍스트 입력 컴포넌트 CP-399~405)을 따릅니다. 충분한 — 입력 영역을 확보하죠.

이 규칙은 검색(SP)의 ’검색어 가시성’을 담당합니다 — 입력 필드를 검색어가 한눈에 보이는 너비로 해(019), 사용자가 입력한 검색어를 확인·수정하게 하죠. 검색어 입력의 기본 환경입니다.

정리하면 — 입력 필드가 좁아 검색어가 잘리거나 줄바꿈되면 사용자가 입력 내용을 확인 못 하므로, 일반적 검색어가 한눈에 보이는 너비로 제공하고 줄바꿈·말줄임표를 쓰지 말아야 합니다.

3. 점검 / 개선

무엇을 점검하나

충분한 너비 — 일반적 검색어가 한눈에 보이는 너비인가.

줄바꿈 없음 — 입력 필드가 한 줄로 유지되는가.

말줄임 없음 — 검색어가 잘려 …로 표시되지 않는가.

개선 방향

검색어가 한눈에 보이는 너비. 한 줄 유지(줄바꿈 금지).

말줄임표 금지(전체 보이게). 모바일은 검색 시 넓은 입력 전환.

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

역할	책임
디자이너	검색 입력 필드 너비 디자인
퍼블리셔	너비·줄바꿈 구현

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

검색 기능을 제공하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 일반적 검색어가 한눈에 보이는 너비인가요?

□ 입력 필드가 한 줄로 유지되나요?

□ 검색어가 잘려 …로 표시되지 않나요?

❓ FAQ

Q1. 입력 필드가 좁으면 뭐가 문제인가요? 긴 검색어가 잘리거나(…) 줄바꿈되어 입력 내용을 한눈에 못 봅니다. 오타도 확인 어렵고 답답하죠. 한눈에 보이는 너비가 필요합니다. Q2. 검색어가 길면 어떻게 하나요? 가로 스크롤로 보되, 잘라 숨기지 않습니다(말줄임표 금지). 보통 검색어는 짧으니 한눈에 보이는 너비면 충분하죠. Q3. 모바일에선 좁을 수밖에 없지 않나요? 가능한 너비를 확보하고, 헤더 검색이 좁으면 검색 시 전체화면·넓은 입력으로 전환합니다(SP-012 ②). 검색어가 보이게요.

6. 마무리

SP-019의 메시지:

검색어가 한눈에 보이게 — 입력 필드를 충분한 너비로, 줄바꿈·말줄임 없이 제공하라.

입력 필드가 좁으면 검색어가 잘려 입력 내용을 확인 못 합니다. 한눈에 보이는 너비로 제공해 확인·수정하게 하는 게 핵심 이죠. 다음 편은 통합 검색 외 검색의 레이블입니다.

다음 편 예고 ▶ 「694. (SP-020) 통합 검색이 아닌 검색에는 입력 필드에 레이블을 제공하고 있다.」

ViewCheck는 검색 입력 필드가 검색어가 한눈에 보이는 너비인지를 진단합니다.

📚 참고 출처

KRDS 서비스 패턴 — 검색 가이드 — https://www.krds.go.kr/html/site/service/service_02.html

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

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