색에 ‘비치는’ 차원을 더하다

KRDS DS-010 — 5단계 투명도 색상을 사용하고 있다.

0. 들어가며 — 색에는 ‘밝기’ 말고 또 하나의 차원이 있다

지금까지 9편은 색을 ‘무슨 색(색상)’, ‘얼마나 밝은(명도)’, ‘어떤 역할(Primary 등)’, ’어떤 비율(60:30:10)’로 다뤘습니다. 그런데 색에는 우리가 아직 다루지 않은 차원이 하나 더 있습니다.

투명도(透明度, Alpha) — 색이 얼마나 ‘비치는가’.

같은 검정이라도 100% 불투명한 검정과, 50%만 보이는 반투명 검정은 전혀 다르게 작동합니다. 모달 창 뒤를 어둡게 덮는 막, 클릭할 수 없는 비활성 버튼의 흐릿함, 배경 위에 은은하게 얹힌 구분선 — 이 모든 것이 투명도로 만들어집니다. 색이 평면이 아니라 겹쳐지는 입체가 되는 순간, 투명도가 등장합니다.

DS-010은 이 투명도를 ‘5단계로 표준화해서 쓰라’ 는 규칙입니다. 모달 막은 이만큼, 비활성은 저만큼처럼 그때그때 다른 투명도를 쓰지 말고, 미리 정해둔 5개 단계 안에서 일관되게 쓰라는 것이죠. 이번 편은 투명도가 무엇이고, 어디에 쓰이며, 왜 5단계로 묶어야 하는지를 풀어냅니다. 색의 ’깊이’를 다루는 첫 편입니다.

1. 규칙 원문 — 짧지만 새로운 개념

DS-010 (디자인 스타일 > 색상) “5단계 투명도 색상을 사용하고 있다.”

문장은 짧습니다. 핵심은 두 단어입니다.

“투명도 색상”

색에 투명도(Alpha) 가 적용된 색입니다. 완전히 불투명한 색이 아니라, 아래에 있는 것이 비쳐 보이는 색이죠. CSS로 치면 rgba(0,0,0,0.5)의 마지막 0.5, 또는 opacity 속성이 만드는 효과입니다. 색이 배경 위에 ‘덮이는’ 게 아니라 ‘섞이는’ 것입니다.

“5단계”

그 투명도를 5개의 정해진 단계로 표준화한다는 뜻입니다. 예컨대 아주 옅게 비치는 단계부터 거의 불투명에 가까운 단계까지, 5칸으로 나눠 그 안에서만 쓰는 것입니다. 색의 명도를 13단계로 표준화했듯(DS-004), 투명도도 단계로 표준화하는 것이죠.

정리: 겹쳐지는 요소에 쓰는 투명도를, 5개 단계로 정해 일관되게 써라. 이게 DS-010입니다.

2. 투명도(Alpha)란 무엇인가

투명도를 처음 접하면 ’불투명한 연한 색’과 헷갈리기 쉽습니다. 둘은 결정적으로 다릅니다.

’연한 색’과 ’투명한 색’은 다르다

연한 색(불투명) — 예: 연한 회색 #EEEEEE. 아래에 무엇이 있든 그것을 완전히 덮습니다. 그 위에 글자나 그림이 있으면 가려집니다.

투명한 색(반투명) — 예: 50% 검정 rgba(0,0,0,0.5). 아래에 있는 것이 비쳐 보입니다. 배경 사진 위에 얹으면 사진이 어둑하게 비치고, 다른 색 위에 얹으면 그 색과 섞입니다.

이 차이가 중요한 이유는, 투명도는 ’무엇 위에 얹히느냐’에 따라 결과가 달라지기 때문입니다. 같은 50% 검정도 흰 배경 위에선 회색으로, 사진 위에선 어둑한 필터로 보입니다. 즉 투명도는 주변과 융화하는 색 입니다. 이 ‘융화’ 성질이 투명도를 특별하게 만듭니다.

이 성질을 유리에 비유하면 이해가 쉽습니다. 불투명한 색은 벽지와 같습니다 — 벽에 바르면 아래가 완전히 가려지고, 어떤 벽에 발라도 그 색 그대로 보입니다. 반면 투명한 색은 색유리(스테인드글라스)와 같습니다 — 빛이 통과하고 뒤가 비치며, 어떤 배경 앞에 두느냐에 따라 보이는 색이 달라집니다. 흰 벽 앞의 옅은 회색 유리와, 어두운 벽 앞의 같은 유리가 전혀 다르게 보이는 것처럼요. 디자이너가 투명도를 쓸 때 늘 “이 색유리 뒤에 무엇이 있는가”를 생각해야 하는 이유입니다.

그리고 투명도는 ’겹칠수록 진해진다’는 성질도 있습니다. 반투명 색을 두 겹 겹치면 한 겹보다 진해집니다. 이는 물감을 여러 번 덧칠하면 진해지는 것과 같습니다. 그래서 투명도가 적용된 요소가 여러 개 겹치는 화면 (예: 반투명 카드 위에 반투명 배지)에서는, 의도보다 색이 진해지거나 예상 못 한 색이 나올 수 있습니다. 투명도를 단계로 표준화하고 신중히 써야 하는 또 하나의 이유입니다.

왜 투명도가 필요한가

화면에는 요소들이 겹쳐지는 순간이 많습니다. 모달 창이 본문 위로 뜨고, 드롭다운이 콘텐츠를 가리고, 오버레이가 배경을 덮습니다. 이때 불투명한 색으로 덮으면 아래가 완전히 사라져 ’맥락’을 잃습니다. 반면 투명도를 쓰면, 아래 화면이 어렴풋이 비쳐서 “내가 이 화면 위에 떠 있구나”라는 맥락이 유지됩니다. 투명도는 겹침의 깊이감과 맥락을 동시에 전달하는 도구입니다.

3. 어디에 쓰이나 — 투명도의 단골 자리

KRDS는 투명도(Alpha) 색상을 BG(배경)·Text(텍스트)·Line(선) 에 사용한다고 명시합니다. 구체적인 장면으로 보면 이렇습니다.

① 오버레이 — 모달 뒤의 어두운 막

가장 대표적입니다. 팝업·모달 창이 뜰 때, 그 뒤의 본문을 반투명 검정으로 덮습니다. 이 막이 있어야 사용자의 시선이 모달에 집중되고, “지금은 이 창에 답해야 한다”는 신호가 됩니다. 동시에 막이 반투명이라 뒤 화면이 어렴풋이 보여, 어디서 왔는지 맥락도 유지됩니다.

② 비활성(disabled) 처리

지금 누를 수 없는 버튼이나 입력칸을 투명도로 흐리게 만듭니다. “이건 지금 사용할 수 없어요”를 시각적으로 전달하죠. (다만 비활성에 투명도를 쓰는 데는 주의할 점이 있는데, 이건 다음 편 DS-011의 주제입니다.)

③ 반투명 구분선·면

배경 위에 은은하게 얹히는 구분선(Line)이나 옅은 면(BG)을 투명도로 만듭니다. 불투명한 회색 선보다, 배경에 자연스럽게 녹아드는 반투명 선이 더 부드럽고 어떤 배경 위에서도 어울립니다.

④ 호버·포커스의 은은한 강조

요소에 마우스를 올렸을 때 살짝 깔리는 옅은 음영도 투명도로 만듭니다. 배경색과 무관하게 자연스럽게 강조 효과를 줄 수 있습니다.

4. 왜 ’5단계로 표준화’하나

“투명도를 그때그때 적당히 주면 되지, 왜 굳이 5단계로 정하나?” — 이 질문이 DS-010의 핵심입니다. 이유는 앞서 본 명도 13단계(DS-004)와 정확히 같습니다.

일관된 깊이감

투명도를 제각각 쓰면(모달 막은 0.4, 다른 모달은 0.55, 비활성은 0.3, 또 다른 비활성은 0.45…) 화면마다 겹침의 깊이가 미묘하게 달라져 어수선해집니다. 5단계로 표준화하면 “오버레이는 이 단계, 비활성은 저 단계”가 정해져, 사이트 전체의 겹침이 일관된 깊이감을 갖습니다.

예측 가능성과 관리

단계가 정해지면 디자이너는 “이건 몇 % 투명도였더라” 고민하지 않고 정해진 단계에서 고르면 됩니다. 토큰으로 관리하면 나중에 “오버레이를 조금 더 진하게”라는 결정도 단계 정의 하나만 바꾸면 전체에 적용됩니다. 명도 단계와 똑같은 관리 이점입니다.

무절제한 투명도의 부작용 방지

투명도를 아무렇게나 쓰면 가독성 문제가 생깁니다. 텍스트에 과한 투명도를 주면 배경과 섞여 안 읽히고 (DS-002 명도 대비 위반과 연결), 오버레이가 너무 옅으면 막의 역할을 못 합니다. 5단계로 묶으면 이런 극단을 제도적으로 방지할 수 있습니다.

핵심: 5단계 표준화는 투명도를 ’감각’이 아니라 ’체계’로 다루는 일입니다. 색상·명도와 마찬가지로, 투명도도 정해진 단계 안에서 써야 화면이 일관되고 관리 가능해집니다.

왜 하필 5단계일까

명도는 13단계인데 투명도는 왜 5단계일까요? 쓰임의 다양성이 다르기 때문입니다. 명도는 배경·텍스트·구분선· 강조 등 화면의 거의 모든 요소에 쓰여 아주 세밀한 단계가 필요합니다. 반면 투명도는 쓰임이 비교적 한정적 입니다 — 오버레이, 비활성, 은은한 음영, 반투명 구분선 정도죠. 이 정도 용도라면 ’거의 안 보임 → 살짝 → 중간 → 진함 → 거의 불투명’의 5단계면 충분히 모든 상황을 커버합니다. 단계를 더 늘려봐야 인접 단계가 구분되지 않아 관리만 복잡해집니다.

이건 도구함의 원리와 같습니다. 자주 쓰고 정밀함이 필요한 공구는 여러 크기로 갖추되, 가끔 쓰는 공구는 대표적인 몇 개만 두는 게 효율적이죠. 투명도 5단계는 ‘충분하되 과하지 않은’ 실용적 균형점입니다. 명도 13단계와 투명도 5단계라는 서로 다른 숫자에는, 각 요소가 화면에서 하는 일의 무게가 반영돼 있습니다.

깊이감은 일관성에서 나온다

투명도가 만드는 가장 중요한 효과는 ‘깊이감’입니다. 모달이 본문 위에 떠 있고, 드롭다운이 그 위에 또 뜨고, 토스트 알림이 가장 위에 뜨는 — 이런 층위(layer)를 사용자가 자연스럽게 인지하려면, 각 층의 그림자와 오버레이 투명도가 일관된 규칙을 따라야 합니다. 위에 뜬 것일수록 정해진 만큼 더 또렷하고, 그 아래는 정해진 만큼 더 가려지는 식으로요. 투명도가 제각각이면 이 층위 감각이 무너져, 사용자는 무엇이 위에 있고 무엇이 아래 있는지 헷갈립니다. 5단계 표준은 이 ’깊이의 문법’을 일관되게 유지하는 토대입니다. 이는 뒤에 나올 ’엘리베이션(elevation)’ 규칙과도 직접 연결됩니다 — 그림자와 투명도가 함께 화면의 입체감을 만들기 때문입니다.

5. 투명도와 가독성 — 텍스트에 쓸 때의 주의

KRDS는 투명도를 “특히 텍스트는 가독성을 위해 배경과의 명암비를 고려” 해서 쓰라고 강조합니다. 이게 투명도 사용에서 가장 조심해야 할 지점입니다.

투명한 텍스트는 매력적입니다. 흐릿한 회색 글씨를 투명도로 만들면 세련돼 보이죠. 하지만 함정이 있습니다 — 투명한 텍스트는 어떤 배경 위에 얹히느냐에 따라 대비가 달라집니다. 흰 배경 위 50% 검정 텍스트는 회색으로 읽을 만하지만, 같은 텍스트가 연한 색 배경이나 사진 위에 얹히면 대비가 무너져 안 읽힙니다.

그래서 텍스트에 투명도를 쓸 때는 2편(명도 대비)의 기준을 반드시 함께 확인해야 합니다. “이 투명한 글자가 실제 배경 위에서 4.5:1을 넘는가?”를요. 투명도는 융화하는 색이라 배경에 따라 대비가 변하므로, 가장 불리한 배경을 기준으로 검증해야 안전합니다. 투명도의 ’세련됨’과 텍스트의 ’가독성’은 충돌하기 쉬우니, 중요한 본문 텍스트에는 투명도 대신 명도 단계의 불투명 색을 쓰는 것이 더 안전할 때가 많습니다.

6. 투명도 vs 불투명색 — 언제 무엇을

그렇다면 언제 투명도를 쓰고, 언제 불투명 색(명도 단계)을 써야 할까요? 기준은 ‘아래가 비쳐야 하는가’ 입니다.

투명도가 맞는 경우 — 아래 화면이 비쳐야 의미가 있을 때. 모달 오버레이(뒤 맥락 유지), 어떤 배경 위에든 얹혀야 하는 범용 구분선·음영, 호버 강조처럼 ‘배경과 무관하게 작동해야’ 하는 효과.

불투명 색이 맞는 경우 — 아래를 가려도 되거나, 정확한 색·대비가 보장돼야 할 때. 본문 텍스트, 카드 배경, 명확한 면 구분처럼 ’예측 가능한 색’이 필요한 곳.

핵심 구분은 이것입니다. 투명도는 ‘어떤 배경 위에서도 자연스럽게 융화’ 가 장점이지만, 동시에 ‘배경에 따라 결과가 변한다’ 가 약점입니다. 그래서 결과가 변해도 되는 곳(오버레이)엔 투명도가, 결과가 정확해야 하는 곳(본문)엔 불투명 색이 어울립니다. DS-010이 투명도를 5단계로 관리하라는 것은, 이 장점을 살리되 무절제로 인한 약점은 막자는 의도입니다.

흔히 겪는 ‘opacity’ 사고 — 글자까지 흐려지는 함정

투명도 구현에서 가장 자주 터지는 실수가 있습니다. 개발자가 어떤 카드나 박스의 ‘배경만’ 반투명하게 하려고 요소 전체에 opacity: 0.5를 주는 경우입니다. 그러면 배경뿐 아니라 그 안의 글자·아이콘·이미지까지 전부 반투명해집니다. 결과적으로 박스 안 텍스트가 흐릿하게 비쳐서 안 읽히는 사고가 납니다. “배경만 연하게 하려 했는데 글자까지 흐려졌다”는 흔한 하소연이 여기서 나옵니다.

원인은 opacity 속성의 성질입니다. opacity는 요소와 그 모든 자식을 통째로 투명하게 만듭니다. 배경 색만 반투명하게 하고 싶다면, opacity가 아니라 배경색 자체에 alpha를 주는 방식(background: rgba(...) 또는 alpha가 포함된 색 토큰)을 써야 합니다. 이렇게 하면 배경만 비치고 글자는 또렷하게 유지 됩니다. 이 차이를 모르면, 디자인 의도는 멀쩡한데 구현에서 가독성이 무너지는 일이 반복됩니다.

이 사례가 주는 교훈은, 투명도는 ‘디자인의 문제’이자 동시에 ’구현의 문제’ 라는 것입니다. 5단계로 잘 정의된 투명도 토큰이 있어도, 그것을 opacity로 잘못 적용하면 의도가 깨집니다. 그래서 DS-010은 디자이너의 단계 설계와 개발자의 정확한 구현이 함께 맞물려야 완성됩니다.

7. 흔한 위반 패턴

실무에서 DS-010 위반은 이렇게 나타납니다.

함정 ① 제각각 투명도값. 모달마다, 비활성마다 투명도가 다 다름(0.3, 0.4, 0.55…). 화면별 겹침 깊이가 들쭉날쭉. → 5단계로 표준화해 토큰으로.

함정 ② 텍스트 투명도 가독성 붕괴. 본문·안내 글자에 과한 투명도를 줘, 특정 배경에서 안 읽힘. → 텍스트는 명도 대비를 우선 확인, 가능하면 불투명 색.

함정 ③ 오버레이 투명도 부적절. 모달 막이 너무 옅어 집중 효과가 없거나, 너무 진해 뒤 맥락이 사라짐. → 적정 단계의 표준 오버레이 투명도 사용.

함정 ④ opacity 오용. 요소 전체에 opacity를 줘서 그 안의 글자까지 흐려짐(자식 요소 전부 투명해짐). → 배경에만 투명도를 주려면 rgba/배경 alpha를, 요소 전체가 아니라.

공통 교훈: 투명도는 편리하지만 통제가 필요한 도구입니다. 5단계 표준이 그 통제 장치입니다.

8. 무엇을 점검하나

DS-010은 투명도가 표준 단계로 일관되게 쓰였는지를 봅니다.

단계 표준화 — 투명도 값이 5단계로 정의·토큰화돼 있는가, 제각각인가.

용도 적합성 — 오버레이·비활성·구분선 등 투명도가 어울리는 자리에 쓰였는가.

텍스트 가독성 — 투명한 텍스트가 실제 배경에서 명도 대비를 충족하는가.

opacity 오용 — 요소 전체 opacity로 자식 콘텐츠까지 흐려지지 않았는가.

사용된 투명도(alpha) 값들을 수집해 KRDS 5단계 규격과 대조하고, 투명 텍스트의 실제 대비를 함께 계산하면 판정할 수 있습니다.

9. 누가 담당하나

역할	책임
디자인 시스템 담당 / 디자이너	투명도 5단계 정의(또는 KRDS 채택), 용도별 배치
퍼블리셔/개발	투명도를 토큰으로 구현, opacity 오용 방지, rgba 정확히 적용
접근성 담당	투명 텍스트의 실제 대비 검증

투명도는 디자인과 구현이 함께 신경 써야 합니다. 특히 개발 단계에서 opacity와 배경 alpha를 혼동하면 의도치 않게 글자까지 흐려지므로, 구현 정확성이 중요합니다.

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

적용 대상

기관 유형	DS-010 적용
중앙행정기관(대표)	✅ KRDS Alpha 5단계 채택
중앙행정기관(운영)	✅ 동일
공공기관	✅ 동일
지방자치단체	✅ 동일

예외(N/A) 가능성

이 규칙은 겹침 요소가 있을 때 적용됩니다. 모달·오버레이·드롭다운·비활성 처리·반투명 면이 하나라도 있으면 대상입니다. 만약 아주 단순한 정적 페이지라 겹쳐지는 요소가 전혀 없다면, 이 규칙은 예외(N/A) 가 될 수 있습니다. 다만 현실의 공공 사이트는 대부분 모달·드롭다운·비활성 버튼 중 하나는 갖고 있어, 대체로 적용됩니다.

KRDS 토큰을 채택하면 Alpha 5단계가 이미 포함돼 있어, 정의 작업 없이 가져다 쓰면 됩니다.

11. 단계별 개선 방법

Before / After

/* ❌ Before: 제각각 투명도 + 텍스트 가독성 위험 */ .modal-overlay { background: rgba(0,0,0,0.42); } .modal-overlay-2 { background: rgba(0,0,0,0.55); } .hint { color: rgba(0,0,0,0.35); } /* 배경 따라 안 읽힐 수 있음 */ /* ✅ After: 5단계 토큰으로 표준화 */ :root { --alpha-1: rgba(0,0,0,0.05); --alpha-2: rgba(0,0,0,0.16); --alpha-3: rgba(0,0,0,0.32); --alpha-4: rgba(0,0,0,0.48); --alpha-5: rgba(0,0,0,0.64); /* 정확한 값은 KRDS 토큰 기준 */ } .modal-overlay { background: var(--alpha-4); } /* 오버레이 = 정해진 단계 */ .hint { color: var(--gray-50); } /* 텍스트는 불투명 명도색으로 */

정비 순서

사용 중인 투명도 값 수집 — 화면에서 쓰인 alpha 값을 모두 찾는다.

5단계로 통합 — 흩어진 값을 가까운 표준 단계로 묶어 토큰화.

텍스트 투명도 점검 — 투명 텍스트를 불투명 명도색으로 교체(가독성 우선).

opacity 오용 정리 — 요소 전체 opacity를 배경 alpha로 분리.

12. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달·오버레이 막의 투명도가 화면마다 일관된가요?

□ 투명도 값이 토큰(변수) 으로 관리되나요, 매번 다른 값인가요?

□ 투명한 글자가 어떤 배경 위에서도 읽히나요?

□ 요소에 opacity를 줘서 안의 글자까지 흐려지지 않았나요?

□ 비활성 표시에 쓰는 투명도가 일관된가요?

❓ FAQ

Q1. 투명도를 꼭 5단계로 해야 하나요? KRDS 표준은 5단계입니다. 자체 설계라면 이 규격에 맞추는 게 정합성에 좋고, KRDS 토큰을 채택하면 자동 충족됩니다. 핵심은 ’단계로 표준화했느냐’이지 정확한 개수 그 자체는 아닙니다.

Q2. opacity와 rgba 투명도가 뭐가 다른가요? opacity는 요소 전체(그 안의 글자·이미지 포함)를 투명하게 만듭니다. rgba(...,alpha)나 배경 alpha는 해당 색만 투명하게 합니다. 배경만 반투명하게 하고 글자는 또렷하게 두려면 후자를 써야 합니다. 이 둘을 혼동하면 의도치 않게 글자가 흐려집니다.

Q3. 투명한 텍스트가 세련돼 보이는데 쓰면 안 되나요? 쓸 수 있지만, 실제 배경 위에서 명도 대비를 반드시 확인해야 합니다(2편). 투명 텍스트는 배경에 따라 대비가 변하므로 위험합니다. 중요한 본문이라면 불투명 명도색(예: gray-50)을 쓰는 게 더 안전합니다.

Q4. 모달 오버레이는 얼마나 진해야 하나요? 뒤 화면이 어렴풋이 비치면서도 모달에 집중되는 정도가 적당합니다. 너무 옅으면 막의 역할을 못 하고, 너무 진하면 맥락이 사라집니다. KRDS 5단계 중 오버레이용 단계를 쓰면 검증된 값을 바로 적용할 수 있습니다.

Q5. 우리 사이트는 모달이 없는데 이 규칙이 해당되나요? 모달·드롭다운·비활성·반투명 면이 전혀 없다면 예외(N/A)가 될 수 있습니다. 다만 비활성 버튼 하나라도 있으면 대상입니다. 실제로는 대부분의 사이트가 겹침 요소를 하나는 갖고 있습니다.

13. 마무리 — 색의 ’깊이’를 다스리다

DS-010은 색에 ’비침’이라는 차원을 더하는 규칙입니다.

투명도는 화면에 깊이를 주는 강력한 도구지만, 통제 없이 쓰면 가독성과 일관성을 무너뜨린다.

5단계 표준화는 그 통제 장치입니다. 색상을 팔레트로, 명도를 13단계로 관리하듯, 투명도도 5단계로 관리해야 화면의 겹침이 일관된 깊이감을 갖습니다. 그리고 텍스트에 쓸 때는 늘 가독성(명도 대비)을 먼저 확인하는 것 — 이게 투명도를 다루는 핵심 태도입니다.

다음 편은 이 투명도의 ’예외’를 다룹니다. DS-011 — “disabled 상태에 투명도 색상을 사용하지 않고 있다.” 방금 비활성 처리에 투명도를 쓴다고 했는데, 정작 disabled에는 투명도를 쓰지 말라니 — 모순처럼 보이는 이 규칙에 어떤 깊은 이유가 있는지 파헤칩니다.

다음 편 예고 ▶ 「011. disabled 상태에 투명도 색상을 사용하지 않고 있다.」

우리 사이트의 투명도가 일관되게 관리되는지 확인하려면? ViewCheck는 사이트에서 사용된 투명도(alpha) 값을 모두 수집해 KRDS 5단계 규격과 대조하고, 투명 텍스트의 실제 대비와 opacity 오용 여부까지 함께 진단합니다.

📚 참고 출처

KRDS 색상(Color) 스타일 가이드 (Alpha 5단계 투명도) — https://www.krds.go.kr/html/site/style/style_02.html

KRDS 디자인 토큰 가이드 — https://www.krds.go.kr/html/site/style/style_07.html

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

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