안녕하세요! CSS를 통해 웹사이트를 꾸미는 법을 넘어서, 이제는 '어떤 색'을 써야 할지 고민하고 계시군요. 정말 훌륭한 접근입니다. 기술적으로 코드를 완벽하게 짜는 것도 중요하지만, 결국 사용자의 마음을 움직이고 머물게 하는 건 눈에 보이는 디자인과 색상 조합이니까요.
오늘 함께 살펴볼 문서는 기술적인 CSS 속성 설명보다는, 웹 디자이너와 프론트엔드 개발자가 가져야 할 '색상에 대한 안목과 원칙'을 다루는 '색상 현명하게 사용하기(Using color wisely)'입니다.
포트폴리오나 사이드 프로젝트를 기획하실 때 이 가이드를 참고하시면 "색감이 좀 촌스러운데?"라는 피드백을 피할 수 있을 거예요. 실무에서 기획자, 디자이너와 소통할 때도 큰 도움이 될 내용들을 이해하기 쉽고 친근한 구어체로 풀어드릴게요!
색상 현명하게 사용하기 (Using color wisely)
웹사이트에 딱 맞는 색상을 고르는 일은 꽤나 까다로운 작업입니다. 미술이나 디자인에 대한 탄탄한 배경지식이 없거나, 적어도 기본적인 '색채 이론(color theory)'을 모른다면 더더욱 그렇겠죠. 잘못된 색상 선택은 여러분의 사이트를 매력 없게 만들 수도 있고, 최악의 경우엔 대비(contrast) 문제나 색상 간의 충돌 때문에 콘텐츠 자체를 읽기 힘들게 만들 수도 있습니다. 게다가 잘못된 색상을 사용하면 특정 시각 문제를 가진 사람들(특히 색맹이나 색약)은 여러분의 콘텐츠를 아예 사용할 수조차 없게 됩니다.
이 문서의 내용 (In this article)
- 알맞은 색상 찾기 (Finding the right colors)
- 색채 이론 참고 자료 (Color theory resources)
- 색상과 접근성 (Color and accessibility)
- 팔레트 디자인 예시 (Palette design example)
- 색상, 배경, 대비, 그리고 인쇄 (Color, backgrounds, contrast, and printing)
- 참고 자료 (See also)
알맞은 색상 찾기 (Finding the right colors)
좋은 배색(color scheme)을 고르는 데 도움을 주는 훌륭한 도구와 방법들이 시중에 많이 나와 있습니다. 이런 도구들이 전문 디자이너의 섬세한 감각을 완벽히 대체할 순 없겠지만, 맨땅에 헤딩하는 초보자들에게는 훌륭한 시작점이 되어줍니다.
기본 색상 (Base color)
가장 먼저 해야 할 일은 여러분의 기본 색상(base color)을 정하는 것입니다. 이 색상은 여러분의 웹사이트나 그 주제를 대표하게 됩니다. 우리가 흔히 초록색을 보면 음료수 마운틴 듀(Mountain Dew)를 떠올리고, 파란색을 보면 하늘이나 바다를 떠올리는 것처럼, 사이트의 성격에 딱 맞는 기본 색상을 고르는 것이 모든 작업의 출발점입니다. 기본 색상을 고르는 방법에는 여러 가지가 있는데, 몇 가지 아이디어를 드리자면 다음과 같습니다:
- 여러분의 콘텐츠 주제와 자연스럽게 연결되는 색상을 찾아보세요. 특정 제품이나 아이디어를 상징하는 기존 색상이 있을 수도 있고, 여러분이 전달하고자 하는 '감정'을 대표하는 색상일 수도 있습니다.
- 다루려는 주제와 관련된 실제 이미지에서 색상을 뽑아오세요. 특정 사물이나 제품에 대한 웹사이트를 만든다면, 그 사물에 실제로 존재하는 색상을 선택하는 것이 좋습니다.
- 잘 만들어진 웹사이트나 컬러 팔레트 모음 사이트를 둘러보며 영감을 얻는 것도 훌륭한 방법입니다.
기본 색상을 뽑아내는 데 도움을 주는 유용한 브라우저 확장 프로그램들도 많습니다. 예를 들어, ColorZilla 같은 확장 프로그램은 스포이드 도구를 제공해서 어떤 웹페이지에서든 마음에 드는 색상을 콕 집어낼 수 있게 해 줍니다. 또한 특정 영역의 색상들의 '평균값'을 내주는 기능도 있죠.
이 '평균 색상(average color)'을 추출하는 기능은 생각보다 꽤 유용합니다. 우리 눈에는 그냥 하나의 덩어리 된 색상(solid block)처럼 보여도, 사실 바다나 하늘을 찍은 사진을 자세히 들여다보면 여러 가지 관련된 색상들이 섞여 있기 마련이거든요. 이런 사진에서 딱 한 픽셀의 파란색만 콕 집어내서 쓰면, 막상 웹사이트에 발랐을 때 어딘가 좀 어색하고 튀어 보일 확률이 높습니다. 평균을 내면 훨씬 더 자연스러운 색을 얻을 수 있죠.
팔레트 구체화하기 (Fleshing out the palette)
기본 색상을 정했다면, 다음 단계는 그 기본 색상과 함께 어우러질 적절한 색상들의 '팔레트'를 구축하는 것입니다. 이 과정에서 색채 이론을 적용해 어울리는 추가 색상들을 뽑아내 주는 도구들이 있습니다. 무료로 제공되는 Adobe Color CC 온라인 색상환 같은 온라인 도구를 사용하면 접근성이 뛰어나고 조화로운 컬러 팔레트를 쉽게 만들 수 있습니다.
이런 도구들 중 상당수는 여러분이 만든 팔레트에 '필터'를 씌워볼 수 있는 기능도 제공합니다. 이 필터를 통해 다양한 형태의 색맹을 가진 사람들의 눈에는 이 팔레트가 어떻게 보이는지 시뮬레이션해 볼 수 있죠. 이게 왜 그렇게 중요한지 궁금하시다면 아래의 색상과 접근성 파트를 참고해 주세요.
팔레트를 디자인할 때는 기본/포인트 색상뿐만 아니라, 하얀색(혹은 거의 하얀색), 검은색(혹은 거의 검은색), 그리고 한두 가지 톤의 회색 같은 핵심적인 '중립 색상(neutral colors)'도 함께 준비해 두는 것이 좋습니다. 글자색이나 배경색으로 쓰기 위해서죠.
참고:
보통은 가능한 한 적은 수의 색상을 사용하는 것이 훨씬 유리합니다. 모든 요소에 알록달록 색을 칠하는 것보다, 정말 중요한 콘텐츠를 강조할 때만 절제해서 색상을 사용하는 것이 임팩트도 훨씬 크고 가독성도 높아집니다.
색채 이론 참고 자료 (Color theory resources)
이 짧은 문서에서 색채 이론 전체를 다루기는 무리지만, 다행히도 인터넷에는 좋은 자료들이 넘쳐납니다. 저희가 특히 유용하다고 생각하는 자료 몇 가지를 소개합니다:
Color Science (색채 과학) (Pixar와 함께하는 Khan Academy 과정) 색이란 무엇인가, 색은 어떻게 인지되는가, 그리고 아이디어를 표현하기 위해 색을 어떻게 사용해야 하는지 등 핵심 개념을 소개하는 온라인 코스입니다. 무려 픽사(Pixar)의 아티스트들과 디자이너들이 직접 설명해 줍니다! 위키백과의 Color theory (색채 이론) 기술적이고 학문적인 관점에서의 훌륭한 정보들이 담겨 있습니다. 당장 색상을 고르는 데 직접적인 도움은 안 될지 몰라도, 배경지식을 쌓기엔 아주 좋습니다.색상과 접근성 (Color and accessibility)
여러분의 콘텐츠가 누구나 쉽게 이용할 수 있는 접근성(accessibility)을 갖추도록 하세요. 색상은 자칫하면 여러 가지 측면에서 접근성 문제를 일으킬 수 있습니다. 색상을 부적절하거나 부주의하게 사용하면, 여러분의 주요 타겟 사용자 중 일부가 사이트나 앱을 제대로 이용하지 못하게 됩니다. 이는 결국 트래픽 감소, 비즈니스 손실로 이어지고, 최악의 경우 기업 이미지 타격이나 법적 분쟁으로 번질 수도 있습니다. 그러니 색상 사용은 아주 신중하게 접근해야 합니다.
색상과 휘도(밝기)를 이해하고, 항상 색맹(color blindness)과 전정 기관 장애(vestibular disorders, 어지럼증 등)를 가진 사용자들을 배려하는 것이 중요합니다.
색맹에는 여러 종류가 있는데, 가장 흔한 것은 적록 색맹으로, 빨간색과 초록색을 구별하지 못합니다. 특정 색상을 구분하지 못하는 것부터 아예 색상 자체를 보지 못하는 전색맹까지 다양하죠. 게다가 특정한 색상 배합과 반짝이는 애니메이션의 조합은 광과민성 사용자들에게 발작(seizures)을 일으킬 수도 있습니다.
일반적으로 접근성 측면에서는 높은 색상 대비(color contrast)가 좋다고 여겨집니다. 하지만 (특히 아주 빠르게) 애니메이션이 들어갈 때는 오히려 움직이는 요소의 색상 대비를 낮추는 것이 발작 위험을 줄여줍니다. 애니메이션을 사용한다면, CSS의 prefers-reduced-motion 미디어 쿼리를 사용해 "애니메이션을 줄여달라"라고 OS 설정에서 체크한 사용자들에게는 애니메이션을 꺼주거나 얌전하게 바꿔주세요.
그렇다고 대비를 무작정 낮추면 안 됩니다. 글씨를 문제없이 읽을 수 있도록 배경과 전경(글자 등) 콘텐츠 사이에 충분한 색상 대비(color contrast)를 확보해야 합니다.
또한, 무언가 중요한 정보를 전달할 때 '오직 색상'만으로 표현해서는 절대 안 됩니다. 예를 들어, 폼 입력을 성공했을 때 입력 칸 테두리를 초록색으로 칠하고, 실패했을 때 빨간색으로 칠하는 '색상'만으로 성공/실패를 알려준다면, 적록 색맹을 가진 사용자는 방금 내가 제대로 입력했는지 틀렸는지 전혀 알 턱이 없습니다. 이럴 때는 색상과 함께 텍스트 안내나 아이콘(예: 초록색 체크 마크 ✔️ 와 빨간색 엑스 마크 ❌)을 함께 사용해서 모든 사용자가 직관적으로 알 수 있게 해주어야 합니다.
💡 강사 팁:
"접근성을 챙기면 디자인이 구려진다"라고 오해하시는 분들이 많지만 전혀 그렇지 않습니다. 오히려 색상 대비가 뚜렷하고 명확한 피드백(아이콘+색상)을 주는 사이트가 비장애인 사용자에게도 훨씬 깔끔하고 세련된 인상을 줍니다. 명확한 UI는 모두를 위한 최고의 디자인입니다!
팔레트 디자인 예시 (Palette design example)
자, 이제 실전입니다! 화성에 불시착한 배경을 다루는 게임 웹사이트의 컬러 팔레트를 만들어본다고 가정해 봅시다. 구글에서 화성 사진을 검색해 보면 아주 붉고 강렬한 색감의 사진들이 많이 나올 겁니다.
컬러 피커 도구를 써서 기본 색상으로 쓸 샘플을 하나 콕 찍어옵니다. 이 예제에서는 녹슨 오렌지-레드 색상인 #D79C7A를 골랐습니다. 이제 Paletton이라는 사이트를 열어서 나머지 색상들을 쫙 뽑아내 볼까요?
처음 화면을 열면 이렇게 보입니다:
(이미지 생략: Paletton 기본 화면)
그다음, 툴의 왼쪽 아래 구석에 있는 "Base RGB" 입력 칸에 우리가 뽑아온 헥스 코드(D79C7A)를 입력합니다:
(이미지 생략: 기본 색상 입력 후 화면)
입력하고 나면 화성 사진에서 뽑아온 색상을 바탕으로 한 '단색(Monochromatic)' 팔레트가 짠 하고 나타납니다. 만약 사이트 전체를 비슷한 톤으로 부드럽게 가져가고 싶다면 이것도 좋은 선택입니다.
하지만 우리는 이 붉은색 사이에서 확 눈에 띌 '포인트 색상(accent color)'이 필요하죠. 팔레트 타입을 선택하는 메뉴 아래에 있는 "add complementary(보색 추가)" 토글을 클릭해 봅니다. Paletton이 기가 막히게 어울리는 포인트 색상을 계산해 주네요. 오른쪽 아래 구석에 나타난 그 포인트 색상의 코드는 #508D7C (청록색 계열)입니다.
(이미지 생략: 보색이 추가된 화면)
만약 이 청록색이 우리 게임의 칙칙한 화성 분위기랑 너무 안 어울린다면? 색상표의 모드를 바꿔보면 됩니다. 이번엔 'Triad(삼각 배색)' 아이콘을 클릭해 보겠습니다.
(이미지 생략: Triad 모드가 적용된 화면)
우측 상단에 묘한 회갈색 빛이 도는 파란색이 하나 떴네요. 색상 코드는 #556E8D 입니다. 이 색상은 너무 튀지 않으면서도 붉은 화성 배경 사이에서 헤드라인, 선택된 탭, 혹은 알림 배지 등에 사용하면 아주 멋진 포인트 색상이 될 것 같습니다.
이제 우리는 든든한 기본 색상과 훌륭한 포인트 색상을 얻었습니다. 추가로 이 두 색상에서 파생된 여러 단계의 비슷한 색조(shades)들도 얻었죠. 이 파생된 색상들은 그라데이션을 만들 때 쓰거나, 링크에 마우스를 올렸을 때(hover) 색이 살짝 변하는 효과를 줄 때 아주 유용하게 쓰일 겁니다. 이 색상표는 다양한 포맷으로 추출(export)해서 CSS에 바로 가져다 쓸 수도 있습니다.
이제 마지막으로 배경과 글씨에 쓸 중립 색상(회색, 검은색, 흰색 계열)을 골라야 합니다. 배경에 깔렸을 때 글씨가 아주 선명하고 또렷하게 읽히면서도(대비가 충분해야 함), 너무 눈이 부시지 않은 색을 찾아야 합니다. 대비가 너무 낮으면 글씨가 배경에 묻혀버리고, 대비가 너무 심하게 높으면(예: 완전 순도 100% 검정 배경에 완전 100% 흰색 글씨) 눈이 피로해지고 사이트가 촌스러워 보일 수 있습니다. 살짝 부드러운 다크 그레이나 오프 화이트를 주로 쓰는 이유죠.
색상, 배경, 대비, 그리고 인쇄 (Color, backgrounds, contrast, and printing)
여러분이 심혈을 기울여 만든 웹사이트가, 사용자가 그것을 종이로 '인쇄(print)'하려고 할 때는 화면에서 보던 것과 아주 다르게 보일 수 있습니다.
사용자가 잉크를 아끼려고 흑백 인쇄를 선택할 수도 있고, 기본적으로 대부분의 브라우저들은 문서 인쇄 시 가독성과 잉크 절약을 위해 배경색과 배경 이미지를 아예 제거해 버리기 때문입니다.
인쇄할 때 가장 중요한 것은 결국 '글(텍스트)'입니다. 하지만 만약 여러분이 짠 배경색과 이미지가 단순한 장식이 아니라, 콘텐츠를 이해하는 데 절대적으로 필요한 '정보'라면 어떻게 해야 할까요? 이럴 때 CSS의 print-color-adjust 속성을 사용하면 브라우저에게 "이 요소는 내가 만든 모양 그대로 건드리지 말고 제발 인쇄해 줘!"라고 요청할 수 있습니다.
이 속성의 기본값은 print-color-adjust: economy입니다. 즉, 브라우저가 보기에 잉크도 아끼고 글씨도 잘 보이게끔 알아서 맘대로 배경을 지우거나 색을 바꿔도 된다고 허락하는 상태죠.
여기에 print-color-adjust: exact 값을 주면 상황이 바뀝니다. 브라우저에게 "내가 지정한 이 요소들은 색상과 이미지가 원래대로 있어야만 의미가 있으니 손대지 마라"라고 엄격하게 지시하는 것입니다. 이 속성이 적용된 요소는 브라우저의 마음대로 색상이 날아가지 않고, 여러분이 CSS에 지정한 그대로 그려져서 인쇄기로 넘어가게 됩니다.
참고:
하지만print-color-adjust: exact를 준다고 해서 100% 무조건 내 CSS대로 인쇄된다는 보장은 없습니다. 만약 사용자가 브라우저 인쇄 대화 상자에서 "배경 그래픽 인쇄 안 함" 체크박스를 수동으로 해제해 버리면, 사용자의 강력한 의지가print-color-adjust속성을 무시하고 이겨버립니다.
참고 자료 (See also)
- CSS 색상 (CSS colors) 모듈
- CSS를 이용해 HTML 요소에 색상 입히기 (Applying color to HTML elements using CSS)
- CSS 색상 값 (CSS color values)
- 상대 색상 사용하기 (Using relative colors)
- 색상과 휘도 이해하기 (Understanding color and luminance)
- WCAG 1.4.1: 색상 대비 (WCAG 1.4.1: Color contrast)
- Paletton (컬러 팔레트 생성 도구)
MDN 개선에 참여하기 (Help improve MDN)
이 페이지가 도움이 되셨나요?
[Yes][No]
기여하는 방법 알아보기(Learn how to contribute)
이 페이지의 마지막 수정일은 2025년 11월 20일이며, MDN 기여자들에 의해 수정되었습니다.
👨🏫 마무리 강사 코멘트:
프론트엔드 개발자는 단순히 코드를 치는 사람이 아니라, 디자이너가 의도한 감성을 브라우저라는 도화지에 오차 없이(접근성까지 챙기면서) 그려내는 예술가이자 엔지니어입니다.
오늘 살펴본 이 가이드의 원칙들을 기억해 두신다면, 나중에 디자이너 없이 혼자 포트폴리오를 구성할 때도 "오, 배색 감각이 좋은데요?"라는 칭찬을 듣게 되실 거예요. 준비하시는 면접에서도 '접근성과 색상 대비'를 고려해 보았다는 경험을 어필하시면 굉장히 큰 가산점이 될 겁니다. 응원합니다!
