어디에 입력해야 하는지 보여라

KRDS DS-022 — 인풋 보더 색상을 매직넘버 50(명도대비 4.5:1)으로 적용하고 있다.

0. 들어가며 — 글자에서 ’경계’로

지난 두 편(DS-020·021)은 글자 색의 대비를 다뤘습니다. 이번엔 글자가 아니라 컴포넌트의 경계 — 구체적으로 입력칸(input)의 테두리(border) 입니다.

입력칸은 공공서비스의 심장입니다. 신청서를 쓰고, 로그인을 하고, 검색어를 넣는 모든 일이 입력칸에서 일어납니다. 그런데 그 입력칸이 어디에 있는지 안 보이면 어떻게 될까요? 사용자는 “여기에 입력하면 되나?” 헷갈리고, 폼 작성이 막힙니다. 입력칸의 테두리는 “여기가 입력하는 곳입니다”를 알리는 핵심 단서입니다.

DS-022는 이 테두리가 충분히 보이도록 대비 기준을 못 박습니다 — 매직넘버 50, 즉 대비 4.5:1. 흥미롭게도 이건 일반적인 UI 요소 기준(3:1)보다 더 엄격합니다. 왜 입력칸 테두리에 본문 글자만큼 높은 대비를 요구할까요? 이번 편은 그 이유를 풀어냅니다.

1. 규칙 원문 — 명확한 한 가지 기준

DS-022 (디자인 스타일 > 색상) “인풋 보더 색상을 매직넘버 50(명도대비 4.5:1) 으로 적용하고 있다.”

“인풋 보더 색상”

입력 필드(텍스트 입력, 검색창, 텍스트 영역 등)의 테두리 색입니다. 입력칸의 영역을 둘러싸 “여기가 입력하는 곳”임을 표시하는 선이죠.

“매직넘버 50(명도대비 4.5:1)”

그 테두리가 인접한 색(보통 배경)과 단계 차 50 이상, 즉 대비 4.5:1 이상이어야 한다는 뜻입니다. 20편에서 본 본문 글자와 같은 수준의 대비입니다.

정리: 입력칸 테두리가 배경과 대비 4.5:1(매직넘버 50) 이상이 되게 하라. 이게 DS-022입니다.

2. 왜 4.5:1인가 — 비텍스트 기준(3:1)보다 엄격하다

여기에 DS-022의 흥미로운 점이 있습니다. 2편에서 본 WCAG 1.4.11(비텍스트 대비) 는 UI 요소의 최소 대비를 3:1 로 규정합니다. 입력칸 테두리도 UI 요소이니 3:1만 넘으면 WCAG는 충족하죠. 그런데 KRDS는 4.5:1(매직넘버 50) 을 요구합니다. 국제 최소 기준보다 한 단계 더 엄격합니다.

왜 더 높일까요? 입력칸이 그만큼 중요하기 때문입니다.

입력칸은 단순한 장식 요소가 아니라, 사용자가 반드시 찾아서 상호작용해야 하는 핵심 컨트롤입니다. 버튼은 보통 색이 채워져 있어 잘 보이지만, 입력칸은 흰 배경에 테두리만 있는 경우가 많아 그 테두리가 약하면 입력칸 자체가 안 보입니다. “여기에 입력하라”는 안내가 사라지는 것이죠. 그래서 KRDS는 입력칸 테두리에 일반 UI 요소(3:1)보다 높은, 본문 글자 수준(4.5:1)의 대비를 요구합니다. 입력칸을 ’꼭 보여야 할 요소’로 대우하는 것입니다.

이 엄격함은 공공서비스의 성격과 맞닿아 있습니다. 정부 사이트의 핵심은 신청·민원 폼이고, 폼의 핵심은 입력칸입니다. 입력칸이 안 보여 폼 작성이 막히면 서비스 전체가 무력해집니다. 그래서 KRDS는 입력칸 가시성을 타협하지 않고 4.5:1로 끌어올립니다.

3. 입력칸 경계가 중요한 이유 — 폼 사용성의 기초

입력칸 테두리가 왜 그렇게 중요한지 더 들여다봅시다.

사용자가 폼을 작성하려면, 먼저 “어디에 입력하는지” 를 알아야 합니다. 입력칸이 명확히 보이면, 사용자는 한눈에 “아, 여기 칸이 있고, 여기에 이름을 쓰면 되는구나”를 압니다. 입력 영역의 경계가 또렷할수록 폼은 직관적이고, 작성이 빠릅니다.

반대로 테두리가 약하면 여러 문제가 생깁니다. 입력칸이 배경에 묻혀 “여기가 입력칸인가?” 헷갈리고, 여러 입력칸이 어디서 끝나고 시작하는지 구분이 안 됩니다. 특히 입력칸이 많은 긴 신청서에서, 약한 테두리는 사용자를 길 잃게 합니다. 저시력·고령 사용자에게는 더 심각해서, 입력칸을 아예 못 찾아 폼 작성을 포기할 수도 있습니다.

연구에 따르면 시각적 대비가 부족하면 사용자가 상호작용 요소를 인지하지 못하는 비율이 크게 높아집니다 (2편에서 본 닐슨노먼그룹의 분석처럼요). 입력칸은 사용자가 반드시 상호작용해야 하는 요소이므로, 그 가시성은 폼 완성률과 직결됩니다. 입력칸 테두리의 대비는 미관이 아니라 사용성과 완성률의 문제입니다.

구체적인 장면을 떠올려 봅시다. 한 어르신이 복지 급여를 신청하려고 긴 신청서 페이지에 들어왔습니다. 이름, 주민번호, 주소, 연락처, 계좌번호… 입력할 항목이 줄줄이 이어집니다. 그런데 이 사이트의 입력칸들은 흰 배경에 아주 연한 회색 테두리로 되어 있어, 노안이 온 어르신의 눈에는 칸의 경계가 거의 보이지 않습니다. 어디까지가 이름 칸이고 어디부터가 주소 칸인지 헷갈리고, 빈 공간을 클릭해야 입력이 되는지조차 확신이 서지 않습니다. 결국 어르신은 몇 번 헤매다 “이거 너무 어렵네” 하고 주민센터로 직접 발걸음을 옮깁니다. 온라인으로 끝났어야 할 일이 오프라인 방문으로 되돌아온 것이죠.

이 장면이 보여주는 것은, 입력칸 가시성이 단순한 디자인 디테일이 아니라 디지털 행정의 성패를 가르는 요소라는 점입니다. 정부가 온라인 서비스를 아무리 잘 만들어도, 입력칸이 안 보여 사용자가 폼을 못 채우면 그 서비스는 무용지물입니다. 반대로 입력칸이 또렷하면, 같은 사용자가 같은 신청을 집에서 5분 만에 끝냅니다. 4.5:1이라는 테두리 대비 기준 하나가, 디지털 격차를 줄이고 행정 효율을 높이는 작지만 결정적인 장치인 셈입니다. 입력칸 테두리는 폼이라는 건물의 ’문’이고, 문이 안 보이면 아무도 들어올 수 없습니다.

4. 비텍스트 대비(1.4.11)와의 관계

DS-022는 2편에서 잠깐 본 WCAG 1.4.11(비텍스트 대비)의 구체적 적용입니다. 정리해 봅시다.

1.4.11은 UI 요소(버튼·입력칸·체크박스 등)와 의미 있는 그래픽이 인접 색과 3:1 이상 대비를 가져야 한다고 규정합니다. 입력칸 테두리는 ’입력 컨트롤을 식별하는 데 필요한 시각 정보’라 이 기준의 대상입니다.

KRDS는 이 3:1 기준을 받아들이되, 입력칸 테두리에 한해 4.5:1로 강화합니다. 즉 DS-022는 ’1.4.11을 지키되 더 엄격하게’인 셈입니다. 그리고 매직넘버 덕분에 이 4.5:1을 계산 없이 단계 차 50으로 확인할 수 있습니다(20편). 입력칸 테두리 단계와 배경 단계의 차이가 50 이상이면 통과입니다.

또 하나 기억할 점 — 1.4.11은 입력칸의 상태(focus, error, disabled 등)에도 적용됩니다. 입력칸을 클릭했을 때의 초점 테두리, 오류일 때의 테두리도 충분한 대비를 가져야 합니다. DS-022는 기본 테두리를 다루지만, 상태별 테두리도 같은 정신으로 또렷해야 합니다(focus는 2편, error는 14편과 연결).

5. 고스트 인풋의 함정

DS-022 위반의 대표 사례가 ‘고스트 인풋(ghost input)’ 입니다. 테두리가 거의 없거나 아주 연한 입력칸이죠.

요즘 디자인 트렌드 중에 입력칸을 미니멀하게 만드는 것이 있습니다. 테두리를 없애고 밑줄만 두거나, 아주 연한 회색 테두리로 처리하거나, 배경색만 살짝 다르게 하는 식이죠. 깔끔해 보이지만, 이런 입력칸은 대비가 약해 “여기가 입력칸인지” 알기 어렵습니다. 특히 흰 배경에 연회색 테두리는 대비가 1.x:1 수준이라 거의 안 보입니다.

미니멀한 디자인 자체가 나쁜 건 아니지만, ‘안 보이는’ 미니멀은 사용성을 해칩니다. DS-022의 4.5:1 기준은 이 고스트 인풋을 막는 안전장치입니다. 테두리를 미니멀하게 하더라도, 배경과 단계 차 50은 확보해야 한다는 것이죠. 깔끔함과 가시성은 충돌하지 않습니다 — 적당히 진한 테두리도 충분히 깔끔할 수 있습니다. 문제는 ’연한 것’이 아니라 ’안 보이는 것’입니다.

이 고스트 인풋 트렌드가 퍼진 데는 이유가 있습니다. 민간의 트렌디한 서비스, 특히 젊은 사용자를 겨냥한 앱들이 미니멀한 입력 디자인을 즐겨 쓰고, 그것이 ’세련된 디자인’의 표준처럼 여겨지면서 공공 사이트에도 그대로 따라 들어온 것이죠. 디자이너 입장에서는 최신 트렌드를 반영하고 싶은 마음이 자연스럽습니다. 하지만 민간 앱의 주 사용자와 공공 서비스의 주 사용자는 다릅니다. 젊고 시력 좋은 사용자에게는 연한 테두리도 보이지만, 공공 서비스의 폭넓은 사용자층 — 특히 고령자 — 에게는 보이지 않습니다.

그래서 공공 서비스는 민간의 미니멀 트렌드를 무비판적으로 따라가면 안 됩니다. ’모두가 쓸 수 있어야 한다’는 공공의 원칙이 트렌드보다 우선이기 때문입니다. DS-022가 비텍스트 최소 기준(3:1)을 넘어 4.5:1을 요구하는 것은, 바로 이 ’트렌드에 휩쓸린 고스트 인풋’을 제도적으로 차단하려는 것입니다. 세련됨을 포기하라는 게 아니라, 세련됨이 가시성을 해치지 않는 선을 지키라는 것이죠. 진짜 좋은 디자인은 보기에도 좋으면서 모두가 쓸 수 있는 디자인입니다. 안 보이는 입력칸은 세련된 게 아니라 그냥 불친절한 것입니다.

6. 흔한 위반 패턴

DS-022 위반은 이렇게 나타납니다.

함정 ① 연한 테두리. 흰 배경에 아주 연한 회색 테두리(#eee 등) → 대비 부족, 입력칸 안 보임. → 매직넘버 50 이상.

함정 ② 테두리 없는 입력칸. 테두리를 아예 없애고 배경색만 → 경계 불명확. → 충분한 대비의 테두리.

함정 ③ 3:1로만. 비텍스트 최소(3:1)에만 맞춤 → KRDS 4.5:1 미달. → 매직넘버 50(4.5:1).

함정 ④ 상태 테두리 약함. focus·error 테두리가 약해 안 보임 → 상태 인지 불가. → 상태 테두리도 또렷이.

핵심: 입력칸은 반드시 보여야 하는 컨트롤입니다. 테두리 대비 4.5:1로 “여기가 입력칸”을 분명히 하세요.

7. 무엇을 점검하나

DS-022는 입력칸 테두리가 충분한 대비를 갖는지를 봅니다.

테두리 대비 — 입력칸 테두리가 배경과 단계 차 50(4.5:1) 이상인가.

테두리 존재 — 입력칸에 식별 가능한 경계가 있는가(고스트 인풋 아님).

상태 테두리 — focus·error 등 상태 테두리도 또렷한가.

팔레트 사용 — 테두리 색이 팔레트 단계로 매직넘버 적용 가능한가.

8. 누가 담당하나

역할	책임
디자이너	입력칸 테두리를 매직넘버 50 이상으로 설계
퍼블리셔/개발	테두리 색을 토큰으로 적용, 상태별 테두리 구현
접근성 담당	테두리 대비가 4.5:1을 충족하는지 검증

9. 우리 사이트에 해당될까?

적용 대상

기관 유형	DS-022 적용
중앙행정기관(대표)	✅ 필수
중앙행정기관(운영)	✅ 필수
공공기관	✅ 필수
지방자치단체	✅ 필수

입력 폼이 있는 모든 사이트 = 해당. 신청·로그인·검색 등 입력칸이 있으면 적용됩니다.

예외(N/A)

입력칸이 전혀 없는 순수 정보 페이지라면 예외일 수 있으나, 검색창 하나라도 있으면 대상입니다. 대부분의 공공 사이트는 입력 폼을 갖습니다.

10. 단계별 개선 방법

Before / After

/* ❌ Before: 연한 테두리(대비 ~1.3:1, 거의 안 보임) */ input { border: 1px solid #eee; background: #fff; } /* ✅ After: 매직넘버 50 이상(대비 4.5:1↑) */ input { border: 1px solid var(--gray-50); /* 흰 배경(0)과 단계 차 50 → 4.5:1 */ background: var(--gray-0); } input:focus { border-color: var(--primary-50); /* 초점도 또렷하게 */ outline: 2px solid var(--primary-50); }

정비 순서

기본 테두리부터 — 연한 입력칸 테두리를 매직넘버 50 이상으로.

고스트 인풋 제거 — 테두리 없는 입력칸에 경계 부여.

상태 테두리 — focus·error 테두리도 또렷하게.

팔레트화 — 임의 색 테두리를 팔레트 단계로 전환.

11. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 입력칸 테두리가 배경과 또렷이 구분되나요(대비 4.5:1)?

□ “여기가 입력칸”임을 클릭 전에 알 수 있나요?

□ 테두리 없는 ’고스트 인풋’을 쓰고 있지 않나요?

□ 입력칸을 클릭(focus)했을 때 테두리가 또렷해지나요?

□ 오류 입력칸의 테두리가 분명히 보이나요?

❓ FAQ

Q1. 비텍스트 최소가 3:1인데 왜 4.5:1인가요? 입력칸이 그만큼 중요하기 때문입니다. 사용자가 반드시 찾아 상호작용해야 하는 핵심 컨트롤이라, KRDS는 일반 UI(3:1)보다 높은 본문 수준(4.5:1)을 요구합니다. 입력칸 가시성을 타협하지 않는 것입니다.

Q2. 미니멀한 입력칸 디자인을 쓰고 싶은데요? 미니멀해도 됩니다. 단 ‘안 보이는’ 미니멀은 안 됩니다. 테두리를 연하게 하더라도 배경과 단계 차 50은 확보하세요. 적당히 또렷한 테두리도 충분히 깔끔합니다.

Q3. 테두리 대신 배경색만 다르게 하면 안 되나요? 배경색 차이로 입력칸을 표현할 수도 있지만, 그 경우에도 입력칸과 주변의 대비가 충분해야 합니다. 핵심은 ’입력칸이 식별되는가’이지 테두리냐 배경이냐가 아닙니다. 다만 테두리가 가장 명확한 방법입니다.

Q4. focus 테두리도 4.5:1인가요? focus는 별도로 또렷해야 합니다(2편). 키보드 사용자에게 현재 위치를 알리는 중요한 단서이므로, 기본 테두리보다 더 분명하게 만드는 것이 좋습니다. outline을 함께 쓰면 효과적입니다.

Q5. 선명한 화면 모드에서도 같나요? 선명한 화면 모드에서는 테두리를 더 두껍게 만듭니다(다음 편 DS-023). 대비뿐 아니라 두께로도 가시성을 강화하는 것입니다.

12. 마무리 — 보이지 않는 입력칸은 입력칸이 아니다

DS-022의 메시지는 단순합니다.

입력칸은 사용자가 반드시 찾아야 하는 곳이다. 그러니 반드시 보여야 한다.

입력칸 테두리는 “여기에 입력하세요”라는 안내입니다. 이 안내가 흐릿하면 사용자는 어디에 써야 할지 모르고, 폼 작성이 막힙니다. 그래서 KRDS는 입력칸 테두리에 일반 UI보다 높은 4.5:1 대비를 요구합니다. 깔끔함을 좇아 테두리를 지우는 트렌드가 있지만, 공공서비스의 핵심인 폼에서는 ’보이는 것’이 ’예쁜 것’보다 우선입니다. 입력칸이 안 보이면, 그건 더 이상 입력칸이 아닙니다.

다음 편은 이 입력칸 테두리를 선명한 화면 모드에서 어떻게 강화하는지 봅니다. DS-023 — “선명한 화면 모드에서 인풋 보더를 기본 모드보다 두껍게 적용한다.” 대비를 넘어 ’두께’로 가시성을 강화하는 이야기입니다.

다음 편 예고 ▶ 「023. 선명한 화면 모드에서 인풋 보더를 기본 모드보다 두껍게 적용하고 있다.」

우리 사이트의 입력칸 테두리가 충분히 보이는지 확인하려면? ViewCheck는 입력칸 테두리와 배경의 대비를 계산해 4.5:1(매직넘버 50)을 충족하는지, 고스트 인풋은 없는지, focus·error 상태 테두리가 또렷한지를 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (인풋 보더·매직넘버) — https://www.krds.go.kr/html/site/style/style_02.html

WCAG 2.1 Understanding 1.4.11 Non-text Contrast — https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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

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