대비만으로 부족할 때, 두께를 더하라

KRDS DS-023 — 선명한 화면 모드에서 인풋 보더를 기본 모드보다 두껍게 적용하고 있다.

0. 들어가며 — 또 하나의 채널, ‘두께’

지난 22편에서 입력칸 테두리의 대비 기준(매직넘버 50, 4.5:1)을 봤습니다. 이번 편은 그 입력칸 테두리를 선명한 화면 모드(고대비 모드) 에서 어떻게 강화하는지입니다.

그런데 흥미롭게도, DS-023은 ’대비를 더 높이라’가 아닙니다. 그건 이미 다른 규칙(글자 대비 DS-021)이 다뤘죠. DS-023의 요구는 다릅니다 — 테두리를 더 두껍게 만들라는 것입니다.

“선명한 화면 모드에서 인풋 보더를 기본 모드보다 두껍게 적용한다.”

이 시리즈를 따라오며 우리는 가독성·가시성을 높이는 여러 채널을 봤습니다. 색(대비), 형태(아이콘), 텍스트… 그리고 여기 또 하나의 채널이 등장합니다 — 두께. 같은 선이라도 두꺼우면 더 잘 보입니다. 저시력 사용자에게 가느다란 선은 사라지기 쉽지만, 두꺼운 선은 또렷이 인지됩니다. 이번 편은 왜 고대비 모드에서 ’두께’라는 단서가 추가되는지를 풀어냅니다.

1. 규칙 원문 — 한 가지 요구

DS-023 (디자인 스타일 > 색상) “선명한 화면 모드에서 인풋 보더를 기본 모드보다 두껍게 적용하고 있다.”

핵심은 ‘기본 모드보다 두껍게’ 입니다.

“인풋 보더”

22편에서 본 입력칸의 테두리입니다. 입력 필드의 경계를 표시하는 선이죠.

“기본 모드보다 두껍게”

선명한 화면 모드에서는 이 테두리를 기본 모드일 때보다 더 두껍게 만든다는 뜻입니다. 예를 들어 기본 모드에서 1px이었다면, 선명한 화면 모드에서는 2px 이상으로요. 절대적인 두께가 아니라 ’기본 모드 대비 더 두꺼움’이 기준입니다.

정리: 선명한 화면 모드에서는 입력칸 테두리를 기본 모드보다 두껍게 해서 가시성을 더 높여라. 이게 DS-023입니다.

2. 왜 대비가 아니라 두께인가

선명한 화면 모드는 이미 대비를 극대화합니다(글자 15:1 등). 그런데 입력칸 테두리는 왜 ’대비’가 아니라 ’두께’로 강화할까요? 두께가 대비와는 다른 방식으로 가시성에 기여하기 때문입니다.

대비는 ’색의 차이’로 보이게 합니다. 두께는 ’면적의 크기’로 보이게 합니다. 이 둘은 별개의 채널입니다. 아주 또렷한 색이라도 선이 너무 가늘면, 저시력 사용자의 흐려진 시야에서는 그 가는 선이 뭉개져 사라질 수 있습니다. 반대로 선이 두꺼우면, 색 대비가 같더라도 더 넓은 면적으로 인지되어 잘 보입니다. 즉 대비는 ‘얼마나 다른가’, 두께는 ‘얼마나 큰가’ 의 문제이고, 둘 다 확보해야 가시성이 완성됩니다.

저시력 사용자를 위한 디자인에서 이 ‘두께’는 특히 중요합니다. 흐려진 눈은 가는 선의 윤곽을 놓치기 쉽습니다. 1px 선은 흐려진 시야에서 거의 안 보이지만, 2~3px 선은 또렷한 덩어리로 인지됩니다. 그래서 고대비 접근성 모드는 대비를 높이는 것에 더해, 선의 두께도 키워 ’이중으로’ 가시성을 보장합니다. 색과 면적이라는 두 채널을 함께 쓰는 것이죠.

이는 이 시리즈의 반복된 원리와 같습니다 — 중요한 정보일수록 여러 채널로 전달하라. 상태 색은 색+아이콘+텍스트로 (13편), 입력칸 가시성은 대비+두께로. 한 채널에만 의존하지 않고 여러 채널을 겹치면, 어느 하나를 놓치는 사용자도 정보를 받습니다. DS-023의 ’두께’는 입력칸 가시성에 더해진 두 번째 안전장치입니다.

흥미로운 점은, ‘두께’가 디자이너들이 의외로 자주 간과하는 채널이라는 것입니다. 가시성을 높이라고 하면 대부분 색을 더 진하게(대비를 높게) 하는 것부터 떠올립니다. 색은 직관적이고 눈에 띄는 변화니까요. 반면 선의 두께는 1px이든 2px이든 일반 시야에서는 큰 차이로 느껴지지 않아, ’이걸 굳이 바꿔야 하나’ 싶습니다. 하지만 바로 그 ‘일반 시야에서 별 차이 없는’ 변화가, 저시력 시야에서는 결정적 차이를 만듭니다. 정상 시력의 디자이너에게는 사소해 보이는 두께가, 흐려진 눈에는 ‘보이느냐 안 보이느냐’를 가르는 것이죠. 그래서 두께 강화는 ’디자이너가 자기 눈을 기준으로 판단하면 놓치기 쉬운’ 대표적인 접근성 항목입니다.

이 점이 DS-023이 별도 규칙으로 존재하는 이유이기도 합니다. “선명한 화면 모드에서 가시성을 높여라”라는 막연한 지침만 있으면, 대부분 색 대비만 손보고 두께는 그대로 둡니다. 그래서 KRDS는 ’두께를 두껍게’를 명시적 항목으로 못 박아, 이 쉽게 잊히는 채널을 강제합니다. 규칙이 구체적일수록 실제로 지켜진다는 것 — 846개를 이렇게 세세하게 나눈 데는 이런 실용적 이유가 있습니다. 두루뭉술한 원칙은 해석의 여지를 남기지만, ’입력칸 테두리를 기본 모드보다 두껍게’라는 구체적 항목은 점검도 이행도 명확합니다.

3. 두께가 만드는 차이 — 저시력 사용자의 시야에서

두께의 효과를 저시력 사용자의 관점에서 구체적으로 봅시다.

21편에서 백내장을 ’성에 낀 유리창’에 비유했습니다. 이 흐려진 시야에서 가는 선은 어떻게 보일까요? 안개 속의 가느다란 실처럼, 윤곽이 번져 거의 보이지 않습니다. 입력칸이 가는 테두리로 둘러싸여 있으면, 저시력 사용자는 그 칸의 경계를 인지하지 못해 “여기가 입력칸인가?” 헷갈립니다. 대비를 아무리 높여도, 선 자체가 너무 가늘면 흐려진 눈에서는 그 선을 붙잡지 못하는 것이죠.

반면 두꺼운 선은 안개 속에서도 살아남습니다. 흐릿하게나마 ’굵은 덩어리’로 보이기 때문에, 저시력 사용자도 입력칸의 경계를 인지할 수 있습니다. 같은 흐림 속에서도 가는 실은 사라지지만 굵은 막대는 보이는 것과 같은 이치입니다. 그래서 선명한 화면 모드는 입력칸 테두리를 두껍게 만들어, 흐려진 시야에서도 입력칸이 또렷한 형태로 인지되게 합니다.

이 원리는 입력칸뿐 아니라 화면의 여러 경계선에 적용될 수 있는 보편 원리입니다. 다만 KRDS가 특히 입력칸 테두리를 콕 집어 규정한 것은, 22편에서 봤듯 입력칸이 사용자가 반드시 찾아 상호작용해야 하는 핵심 컨트롤이기 때문입니다. 폼을 채우지 못하면 공공서비스를 쓸 수 없으니, 입력칸 가시성은 타협할 수 없는 영역이고, 그래서 고대비 모드에서 대비에 더해 두께까지 강화하는 것입니다.

4. 선명한 화면 모드 규칙 가족 속에서

DS-023은 21편에서 정리한 ’선명한 화면 모드 규칙 가족’의 한 구성원입니다. 다시 모아보면 —

규칙	선명한 화면 모드에서 강화하는 것
DS-005	선명한 화면 모드 색 세트 제공
DS-019	깊이를 밝기로 표현
DS-021	글자 대비 강화(7:1, 15:1)
DS-023	입력칸 테두리를 두껍게

이 규칙들의 공통 메시지는 ’선명한 화면 모드는 화면 전체의 재설계’라는 것입니다(21편). 그리고 그 재설계는 한 가지 방법(대비)에만 의존하지 않습니다. 색 세트, 밝기, 대비, 두께 — 여러 수단을 동원해 가시성을 끌어 올립니다. DS-023의 ’두께’는 그중에서도 대비와 별개의 독립적 채널이라, 대비만으로 부족한 부분을 메웁니다.

이 가족 규칙들을 함께 보면, 접근성 모드 설계의 철학이 보입니다 — 한 가지 강화로는 부족하다, 가능한 모든 채널을 동원하라. 글자는 대비로, 깊이는 밝기로, 입력칸은 대비와 두께로. 각 요소에 가장 효과적인 강화 방법을 적용하는 것이죠. 저시력 사용자의 시야는 사람마다 다르고, 어떤 사람은 대비에, 어떤 사람은 형태·두께에 더 의존하므로, 여러 채널을 겹쳐야 가장 많은 사람에게 닿습니다.

검증 방법도 알아두면 좋습니다. 선명한 화면 모드로 전환한 뒤, 입력칸을 보며 두 가지를 확인합니다. 첫째, 테두리 색이 배경과 또렷이 구분되는가(대비). 둘째, 그 테두리 선이 충분히 굵어 멀리서도, 흐릿한 눈으로도 ’여기 칸이 있다’가 인지되는가(두께). 둘 중 하나라도 약하면 보완이 필요합니다. 특히 화면을 일부러 흐릿하게 보거나(눈을 가늘게 뜨고 보기), 화면에서 한 걸음 물러나 보면 두께의 효과를 체감할 수 있습니다. 멀리서도 입력칸 윤곽이 잡히면 두께가 충분한 것이고, 가까이서만 보이면 더 두껍게 해야 합니다.

이런 다중 채널 접근은 결국 ‘예측할 수 없는 다양성’에 대비하는 설계입니다. 우리는 우리 사이트를 쓸 모든 사용자의 시각 상태를 알 수 없습니다. 어떤 사람은 색 대비에 민감하고, 어떤 사람은 형태와 크기에 의존하며, 어떤 사람은 보조기기를 씁니다. 이 다양성을 일일이 파악해 맞춤 대응하는 것은 불가능하므로, 대신 여러 채널로 정보를 겹쳐 두어 ’누가 오든 자기에게 맞는 채널로 받게’ 하는 것입니다. DS-023의 두께는 그 겹겹의 대비책 중 하나이며, 작아 보이지만 누군가에게는 입력칸을 보이게 하는 결정적 한 겹입니다.

5. 흔한 위반 패턴

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

함정 ① 두께 동일. 선명한 화면 모드에서도 기본 모드와 같은 두께(1px) → 저시력 사용자에게 가시성 부족. → 기본보다 두껍게(2px 이상).

함정 ② 대비만 강화. 색 대비만 높이고 두께는 그대로 → 가는 선이 흐려진 시야에서 사라짐. → 두께도 함께.

함정 ③ 모드별 두께 미분리. 두 모드가 같은 테두리 두께 → 한 모드에서 가시성 부족. → 모드별 두께 토큰.

함정 ④ 색 반전만. 선명한 모드를 색 반전만으로 → 두께 강화 누락. → 두께를 별도 설계.

핵심: 선명한 화면 모드에서 입력칸은 대비 + 두께 두 채널로 보여야 합니다. 두께를 빠뜨리면 반쪽짜리입니다.

6. 무엇을 점검하나

DS-023은 선명한 화면 모드에서 입력칸 테두리가 더 두꺼운지를 봅니다.

두께 비교 — 선명한 화면 모드 입력칸 테두리가 기본 모드보다 두꺼운가.

모드별 분리 — 모드에 따라 테두리 두께가 다르게 설정됐는가.

가시성 — 고대비 모드에서 입력칸 경계가 두께로도 또렷한가.

전환 동작 — 모드 전환 시 두께가 바뀌는가.

7. 누가 담당하나

역할	책임
디자이너	선명한 화면 모드 입력칸 테두리 두께 설계
퍼블리셔/개발	모드별 테두리 두께 토큰 구현
접근성 담당	고대비 모드에서 입력칸 가시성(대비+두께) 검증

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

적용 대상

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

선명한 화면 모드를 제공하고 입력 폼이 있는 사이트에 적용됩니다.

예외(N/A)

선명한 화면 모드를 제공하지 않거나 입력칸이 없으면 적용 시점이 오지 않습니다. 다만 둘 다 갖춘 공공 사이트가 대부분입니다.

9. 단계별 개선 방법

Before / After

/* ❌ Before: 두 모드가 같은 두께 */ input { border: 1px solid var(--gray-50); } /* ✅ After: 선명한 화면 모드에서 더 두껍게 */ input { border: 1px solid var(--gray-50); } /* 기본 모드 */ [data-mode="high-contrast"] input { border: 2px solid var(--gray-5); /* 두께 + 강화 대비 */ }

정비 순서

모드별 두께 토큰 — 입력칸 테두리 두께를 모드별로 정의.

선명한 모드 두께 강화 — 기본보다 두껍게(예: 1px→2px).

대비와 병행 — 두께와 함께 색 대비도 강화(DS-021 연계).

전환 검증 — 모드 전환 시 두께가 바뀌는지 확인.

10. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 선명한 화면 모드 입력칸 테두리가 기본 모드보다 두꺼운가요?

□ 모드별 테두리 두께가 분리돼 있나요?

□ 고대비 모드에서 입력칸이 두께로도 또렷한가요?

□ 대비만 높이고 두께를 빠뜨리지 않았나요?

□ 모드 전환 시 두께가 바뀌나요?

❓ FAQ

Q1. 왜 대비로 부족해서 두께까지 더하나요? 대비와 두께는 별개의 채널입니다. 아주 또렷한 색이라도 선이 너무 가늘면 흐려진 시야에서 사라집니다. 두께를 더하면 색 대비가 같아도 더 넓은 면적으로 인지되어 잘 보입니다. 둘 다 확보해야 가시성이 완성됩니다.

Q2. 얼마나 두껍게 하나요? ’기본 모드보다 두껍게’가 기준입니다. 보통 1px→2px 정도로 늘립니다. KRDS 토큰을 쓰면 검증된 두께를 적용할 수 있습니다. 핵심은 절대 두께보다 ’기본 모드 대비 더 두꺼움’입니다.

Q3. 모든 경계선을 두껍게 해야 하나요? DS-023은 입력칸 테두리를 규정합니다. 입력칸이 사용자가 반드시 상호작용해야 하는 핵심 컨트롤이기 때문입니다. 다만 같은 원리(고대비 모드에서 두께 강화)는 다른 중요한 경계에도 응용할 수 있습니다.

Q4. 두꺼운 테두리가 디자인을 투박하게 만들지 않나요? 선명한 화면 모드는 미적 모드가 아니라 접근성 모드입니다(5편). 이 모드의 우선순위는 ’또렷함’이지 ’세련됨’이 아닙니다. 일반 사용자는 기본 모드를 쓰므로, 선명한 모드의 두꺼운 테두리가 일반 경험을 해치지 않습니다.

Q5. KRDS를 채택하면 자동인가요? KRDS는 선명한 화면 모드의 입력칸 테두리 두께를 별도로 정의합니다. 모드별 토큰을 쓰면 DS-023이 자동 충족됩니다.

11. 마무리 — 가시성은 여러 겹으로

DS-023의 메시지는 이 시리즈의 핵심 원리를 다시 확인시킵니다.

중요한 것을 보이게 하는 방법은 하나가 아니다. 대비로도, 두께로도, 형태로도 — 여러 겹으로 보장하라.

입력칸은 사용자가 반드시 찾아야 하는 핵심 컨트롤입니다. 그래서 기본 모드에서는 대비(4.5:1)로(22편), 선명한 화면 모드에서는 대비에 더해 두께로 — 두 겹, 세 겹의 가시성을 확보합니다. 저시력 사용자의 흐려진 시야에서는 한 채널이 사라져도 다른 채널이 남아야 합니다. 두께라는 단순한 단서 하나가, 대비만으로는 닿지 못하는 사용자에게 입력칸을 보여줍니다.

다음 편은 입력칸에서 아이콘으로 넘어갑니다. DS-024 — “기본 모드에서 아이콘 색상을 매직넘버 40(대비 3:1)으로 적용한다.” 글자 없이 형태만으로 의미를 전하는 아이콘이, 충분히 보이려면 어떤 대비가 필요한지를 다룹니다.

다음 편 예고 ▶ 「024. 기본 모드에서 아이콘 색상을 매직넘버 40(명도 대비 3:1)으로 적용하고 있다.」

우리 사이트의 선명한 화면 모드 입력칸이 충분히 보이는지 확인하려면? ViewCheck는 선명한 화면 모드의 입력칸 테두리 두께가 기본 모드보다 두꺼운지, 대비와 두께가 함께 강화돼 가시성이 확보됐는지를 진단합니다.

📚 참고 출처

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컴포넌트,웹표준