웹디자인개발기능사 CBT
종목 메뉴

개념 한 쪽

웹디자인개발기능사 색채디자인의 이해 — 배색 원리와 색채 심리

웹 화면의 배색은 시각적 선명도와 감성 전달을 모두 좌우한다는 점을 이해해야 한다. 색의 명도·채도·색상과 면적 비율을 어떻게 조합하느냐에 따라 사용성·가독성·브랜딩 효과가 달라진다. 색채 심리와 조화 원리를 바탕으로 적절한 배색을 선택하는 능력을 기른다.

2026-10-22 기준 · 웹디자인개발기능사 대시보드

이 개념을 문제로 확인하고 싶으면 이 개념 문제 10개 풀기 회원용

가입 없이 오늘의 10문제 바로 풀기 →

시험에 이렇게 나온다

출제기준 단원 「색채디자인의 이해」의 공개 문제 3개를 묻는 꼴별로 나누면 이렇습니다.

묻는 꼴문제 수무엇을 묻나
전경-배경 대비 선택1고채도 색을 가장 선명하게 보이게 하는 배경을 고르기
인물·이론 연결 암기1베졸트 등 색채 이론가의 발견을 이름과 연결하기
조화 원리 개념 판별1색상·명도·면적 차이에 해당하는 조화 원리 식별하기

뜻

색채 조화 원리는 색상, 명도, 채도, 면적 등이 서로 어떻게 대비하거나 유사해야 시각적으로 조화로운지를 설명한다. '명료성의 원리'는 색상·명도·면적의 차이가 분명할 때 시각적으로 깨끗하고 뚜렷한 조화를 이룬다는 개념을 말한다. 따라서 뚜렷한 대비를 요구하는 디자인에서는 명료성의 원리를 적용한다.

색의 대비 현상은 종류에 따라 구분한다. 보색대비는 서로 반대 위치의 색이 만나 강한 대비와 활력을 부여하는 반면, 연변대비는 인접한 색의 경계에서 색상·명도·채도의 대비가 더욱 강하게 느껴지는 현상을 말한다. 면적대비는 색의 넓이에 따른 시각적 영향으로, 같은 색이라도 면적이 달라 보이는 효과를 일으킨다.

색의 수축·팽창 효과는 주로 명도에 의해 결정된다. 명도가 높은 색은 팽창색으로 넓어 보이고, 명도가 낮은 색은 수축색으로 좁아 보인다. 이 원리를 활용하면 화면의 요소 배치에서 시각적 무게와 균형을 조정할 수 있다.

색채는 심리적·생리적 반응을 유발한다. 난색 계열(적·주황·노랑)은 식욕을 촉진하거나 주의를 끌고, 한색 계열(청·녹)은 차분함을 주어 식욕을 억제하거나 안정감을 준다. 안전 표지 등에서는 색상에 고정된 의미를 부여하므로 황색은 '주의', 적색은 '정지', 녹색은 '안전'의 표준적 의미로 사용한다.

디자인에서 특정 인물이나 이론명이 문제로 출제될 수 있으므로 주요 용어와 발견자도 기억해야 한다. 예컨대 베졸트는 양탄자 디자인 연구에서 한 색의 변화가 전체 배색 분위기에 미치는 효과를 발견하여 베졸트 효과로 불린다. 오메가 공간은 색상·명도·채도를 정량화한 색입체 모델로 문과 스펜서가 제안한 것으로 알려져 있다.

예제

빨강을 가장 선명하게 보이게 하려면 고채도의 빨강을 명도와 채도가 낮은 무채색 배경에 배치하면 효과가 크다. 회색 배경은 빨강과의 명도·채도 대비를 극대화하므로 버튼이나 강조 요소의 전경색으로 적합하다.

제과점 홈페이지의 색채계획 문제에서는 식욕을 돋우는 난색 계열을 선택하는 것이 일반적이다. 보기들 중 녹색을 선택하면 식욕을 억제하는 색채 심리와 어긋나므로 오답으로 판단한다.

색의 수축·팽창을 활용해 레이아웃에서 특정 요소를 크게 보이게 하려면 그 요소의 색 명도를 높게 하고 주변색은 명도를 낮춰 대비를 확보하면 된다.

대표 기출 3문항

다음 색의 배색 중 빨강색이 가장 선명하고 뚜렷해 보일 수 있는 배경색은?

  1. 주황
  2. 노랑
  3. 회색
  4. 보라
정답과 해설 보기

정답 ③ · 색의 대비 효과 중 명도 대비와 보색 대비를 고려해야 합니다. 빨강색은 채도가 높은 색으로, 배경색이 무채색인 회색일 때 명도 대비와 채도 대비에 의해 가장 선명하고 뚜렷하게 보입니다.

고채도 색인 빨강은 명도와 채도가 낮은 무채색 배경에서 대비 효과로 가장 선명하게 보인다.

양탄자 디자인의 예를 들어 하나의 색만을 변화시키거나 더함으로써 전체의 배색을 변화시킬 수 있다는 사실을 발견한 사람은?

  1. 애브니
  2. 피사로
  3. 세브뢸
  4. 베졸트
정답과 해설 보기

정답 ④ · 독일의 화학자이자 교사인 베졸트(Wilhelm von Bezold)는 양탄자의 색채 연구 중, 한 가지 색을 변경하거나 추가하면 전체의 색채 조화가 완전히 달라 보인다는 '베졸트 효과(Bezold Effect)'를 발견했습니다. 따라서 문제의 내용과 일치하는 인물은 4번 베졸트입니다.

베졸트 효과로 유명한 독일의 베졸트는 양탄자 디자인 연구 중 단색의 변화가 전체 배색에 미치는 영향을 발견했다.

색상 · 명도 · 면적의 차가 분명한 배색이 조화를 이룬다는 색채조화의 원리는?

  1. 질서의 원리
  2. 친근성의 원리
  3. 유사성의 원리
  4. 명료성의 원리
정답과 해설 보기

정답 ④ · 색채 조화의 원리 중 명료성(Clarity)의 원리는 색상, 명도, 채도 등의 차이를 뚜렷하게 주어 시각적으로 분명하고 명쾌한 느낌을 주는 조화를 말합니다. 질서의 원리는 일정한 규칙을 가질 때 조화를 이루는 것이고, 유사성의 원리는 비슷한 성질의 색을 배치하여 얻는 조화입니다.

색상, 명도, 면적의 차이가 뚜렷하여 시각적으로 분명하고 명쾌한 조화를 이루는 원리는 명료성의 원리입니다.

자주 묻는 물음

명료성의 원리란 무엇인가?
명료성의 원리는 색상·명도·면적의 차이가 분명하여 시각적으로 뚜렷하고 명쾌한 조화를 이루는 것을 뜻한다.
연변대비와 보색대비는 어떻게 구별하나?
연변대비는 인접한 두 색의 경계에서 대비가 강화되는 현상이고, 보색대비는 색상환에서 정반대 위치의 색을 함께 사용할 때 강한 시각적 대비가 나타나는 현상이다.
화면에서 특정 요소를 더 크게 보이게 하려면 어떤 색 속성을 이용하나?
명도가 높은 색은 팽창색으로 넓어 보이므로 해당 요소의 명도를 높이고 주변의 명도를 낮추어 대비를 주면 시각적으로 크게 인지되게 할 수 있다.
이 개념 문제 10개 풀기 회원용

웹디자인개발기능사 풀이 세트에서 이 개념의 문제 10개를 바로 풀어 보세요.