그라데이션

덤프버전 :

파일:다른 뜻 아이콘.svg
은(는) 여기로 연결됩니다.
나무위키 문법으로 그라데이션을 구현하는 방법에 대한 내용은 나무위키:문법 도움말/심화 문서
나무위키:문법 도움말/심화번 문단을
그라데이션 부분을
, 팝픈뮤직 수록곡에 대한 내용은 Gradation 문서
Gradation번 문단을
#s-번 문단을
Gradation# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
, {{{#!html }}}에 대한 내용은 문서
#s-번 문단을
#s-번 문단을
# 부분을
# 부분을
참고하십시오.




1. 색채 용어로서의 그라데이션
1.1. 개요
1.2. 종류
1.2.1. 예시
1.3. 활용
1.4. 여담
2. 사진 용어로서의 그라데이션
3. 남용
4. 관련 문서



1. 색채 용어로서의 그라데이션[편집]



1.1. 개요[편집]


그라데이션(Gradation)은 하나의 색채에서 다른 색채로 변하는 단계, 혹은 그러한 기법을 의미하는 단어다. 아래아 한글이나 파워포인트, 포토샵 등을 이용해 제작해 본 사람들은 이 기법을 쉽게 이해할 수 있을 것이다. 순우리말로는 '바림', 한자어로는 계조(階調)라고 한다. 일본어 잔재 현장 용어로는 보카시라고도 한다. 사진이나 영상 전문가들은 계조라는 표현을 상당히 쓰는 편이다.

서양에서는 'Gradation(그라데이션)'보다 'Gradient(그레이디언트)'라는 표현을 더 많이 쓴다.[1]

외래어 표기법에 따른 표준어는 ‘그데이션’이다. 하지만 언중에서는 a를 ㅏ로 적는 경우가 많아 ‘그라데이션’으로 쓰는 경우가 많다. 이는 aquamarine(아콰마린)도 마찬가지.[2]

하나의 색에서 다른 색으로 단계적으로 변화하는 것인 만큼 컴퓨터 그래픽으로 구현하기 용이하고 널리 사용되고 있지만 수작업으로 구현할 수 없는 기법도 아니다. 이를테면 최근에는 프라모델이나 네일아트에 주로 사용되는 에어브러시는 원래 보다 점도가 낮은 도료를 공기압으로 뿌려서 그라데이션같은 효과를 내는게 원래 목적. 순우리말인 '바림' 역시 원래 수작업으로 직물을 염색(물들임)하는 사람들 사이에서 쓰는 단어였다. 물론 컴퓨터에서는 단순히 RGB를 계산하여 만들어낼 수 있으므로 누구나 쉽게 표현 가능하다. 하지만 무턱대고 남용하면 안 된다. 이것을 디자인에 기본값으로 (포토샵이나 파워포인트에서 제공하는 기본 무지개 빛깔 등) 많이 넣게 되면 개자인 취급 받는다. 그라데이션을 너무 자주 쓰게 되면 전체 디자인이 되레 촌스러워 보이는 기묘한 분위기를 낼 수 있기 때문. 예를 들어서, 한때 iOS의 그라데이션이 난무한 디자인 콘셉트 디자인[3]이 발표된 이후 누리꾼들에게 대차게 까이면서 디자인 패러디를 모은 텀블러가 만들어지기까지 했다. 따라서 전체 디자인 콘셉트에 맞춰 적당히 사용하는 편이 좋다. 적절히 사용할 것.

또한, 컴퓨터나 인쇄물에서 표현할 수 있는 색공간의 한계가 있으므로 그라데이션을 잘못 사용하면 부드러운 색상 변화가 나타나는게 아니라 색의 층이 지게 되므로 이러한 점을 잘 고려하지 않으면 결과물의 질을 저하시키게 된다. 모니터도 마찬가지, 싸구려 모니터라면 이 문서에서도 그라데이션에 층이 지는 것을 볼수 있다. 이를 컬러밴딩이라고 한다.

극단적인 빛의 파장 차이가 나는 경우에는 자연스럽게 가시광선 대역에 걸쳐 색이 나타나므로 자연에서 쉽게 발견할 수 있다. 예컨대 노을진 하늘에서 붉은색-어두운 파란색으로 이루어진 그라데이션을 볼 수 있으며 무지개도 마찬가지. 아마 초등학교 과학 실험 시간에 분광 프리즘으로 많이 보았을 것이다. 현재 한국이나 일본 등은 무지개를 7가지 색으로 구분하지만 '모든 색'을 포함하고 있는 특성상 문화권에 따라 이를 구분하는 개수가 달라진다. 과거에는 우리나라에서도 5가지 색으로 무지개를 구분했다고 한다.

디자인 입시를 시작하면 가장 기초로써 배우는 기법이다. 원기둥, 원뿔, 구(도형), 정육면체를 채색하는 과정이 바로 그것. 간단히만 쓸 줄 알더라도 그림에 입체감을 주기 좋다.


1.2. 종류[편집]


  • 선형(Linear): 가장 기본적인 그라데이션으로, 색의 변화가 직선이다.
  • 방사형(Radical): 가운데에서 바깥으로 뻗어 나가는 형태의 그라데이션으로, 크게 원형 방사형과 다각형 방사형이 존재한다. [4]
  • 극좌표형(Polar): 한 바퀴 빙 돌아가는 형태의 그라데이션. 위의 선형 그라데이션을 원뿔 모양으로 이어붙인 형태이다.


1.2.1. 예시[편집]


그라데이션 표현 예시


파일:kPdz1FA.png


파일:keaqjUF.png

파일:MucbzZD.png

{{{#f5f5f5,#2d2f34

선형 (수평)

{{{#f5f5f5,#2d2f34

선형 (수직)

{{{#f5f5f5,#2d2f34

선형 (대각)


파일:6AXwI83.png


파일:CJ41tZm.png


파일:3aQGpaU.png


파일:cQJkybm.png

{{{#f5f5f5,#2d2f34

방사형 (사각)

{{{#f5f5f5,#2d2f34

방사형 (원)

{{{#f5f5f5,#2d2f34

극좌표형

{{{#f5f5f5,#2d2f34

자유형



1.3. 활용[편집]


파일:external/www.ysinews.com/2012111918335.jpg
높이에 따라 색상을 달리하여 나타내는 등심도(등고도). 그라데이션의 가장 대표적인 활용 예시이다.

파일:Weierstrass_elliptic_function_P.png
수학에서는 복소평면 상의 그래프를 이렇게 표현하기도 하는데, 복소함수의 값을 2차원상에서 나타내기 위해 그라데이션을 이용한다.

파일:external/png.clipart.me/efficiency-gauges-concept_195447782.jpg
수치 게이지 등에서도 자주 활용된다. 주로 위험이나 경고 등의 부정적인 의미가 자주 나오기 때문에, 붉은색이 자주 사용된다.

파일:shKyep5.png
계단 현상을 없애주는 안티에일리어싱도 그라데이션의 원리. 포토샵이나 일러스트레이터에서 금속 재질을 구현할때 꼭 필요하다. 해당 튜토리얼 참고.

화장할 때도 많이 쓰인다. 한 색깔로만 화장하는 건 촌스럽고 색을 확 바꾸면 너무 튀기 때문. 아이 메이크업의 경우 여러 가지 아이섀도를 이용해서 연한 색을 바탕색으로 깔고, 진한 색을 눈꼬리부터 중간까지 자연스럽게 그라데이션을 하는데, 그래야 색감이 떠보이지 않고 아이라인과 자연스럽게 어우러지기 때문이다. 2010년 초반부터는 틴트립스틱을 이용해 입술 안쪽부터 진하게, 바깥쪽으로 갈수록 연하게 물들이는 방식의 립 메이크업이 유행하고 있다.


1.4. 여담[편집]


파일:lgcshyx.png
  • 나무위키패비콘에도 그라데이션이 적용이 되어 있다. 잘 안 보인다면 맨 왼쪽◆(#00A495)과 맨 오른쪽◆(#13AD65)을 비교해 보자.

파일:external/e9d0a88df96a5437e28211fa02ec2e66b14c8c91bc160283531c9741f4abc050.jpg
  • 발표 당시 충격과 공포를 선사했던 2012-2013 시즌 FC 바르셀로나 유니폼. 이처럼 잘못 쓰일 경우 옷맵시를 상당히 손상시킨다.[5]


  • HTML . {{{#!wiki style="background-color:#000000"
.}}}
HTML / wiki style의 "background-clip: text"를 적절하게 쓰면 이렇게 글자마다 색을 지정하지 않고도 글자에 그라데이션을 입힐 수 있으나 사파리에서만 제대로 보이고 크로뮴 기반 브라우저에서는 오류[6]가 뜨면서 그라데이션 배경으로만 출력된다.


  • Samsung Experience 8.1 이상의 버전을 탑재한 보급기에 수록된 배경화면 중 홈 배경은 잠금화면 배경의 색에 맞는 그라데이션 배경이 채택되었다.

  • 점진적 오글거림오그라데이션(오글+그라데이션)이라 표현한다.


2. 사진 용어로서의 그라데이션[편집]


카메라로 찍은 필름이나 디지털 이미지, 인화물이 명암을 얼마나 정교하고 부드럽게 표현하는지를 가리키는 용어. '계조'라고도 부른다. 관용도(dynamic range)와 종종 혼동하는 경우가 있는데, 둘이 밀접한 관계이긴 하지만 각각 전혀 다른 개념을 지칭하는 단어이다. 관용도는 디지털 카메라의 센서, 필름이 감지할 수 있는 가장 어두운 빛과 가장 밝은 빛의 범위를 가리키는 말이고, 계조는 사진 안에서 밝은 부분과 어두운 부분의 비율의 분포를 그래프화했을 때 명암이 얼마나 섬세하고 부드럽게 표현되었는지를 말하는 것이다. 즉 관용도는 수광부(필름 사진의 경우 필름, 디지털 사진의 경우 센서) 각각의 고유한 성능 같은것이고, 계조는 같은 카메라와 필름을 가지고 찍어도 사진 촬영 당시의 상황이나 촬영 후 리터칭에 따라 여러 가지로 표현이 가능하다. 물론 수광부의 관용도에 따라 결과물로 나오는 사진의 계조가 영향을 받긴 하지만, 관용도 외에도 계조에 영향을 주는 요인은 매우 다양하기 때문에 관용도=계조라고 단언하는 건 오산이다.

디지털 센서나 필름의 표현 능력을 S자 모양 커브로 표현하는 것도, 흔히 하는 오해와 달리 계조가 아닌 관용도를 보여주는 그래프이다. 특성곡선 또는 허터-드리필드 곡선 (Hurter-Driffield curve)이라고 한다. 참고.[7]

사진의 계조는 특성곡선이 아닌 히스토그램으로 확인할 수 있다. 위에서 계조를 설명할 때 언급했던 '밝은 부분과 어두운 부분의 분포를 그래프화' 한 것이 바로 히스토그램이다. 히스토그램에서의 그래프 윗단의 높이의 궤적이 통계학에서 주로 쓰는 정규분포의 모양과 닮을수록 일반적으로 이상적인 것으로 여기는 계조의 사진인 것이라 할 수 있다. [8]

일반적으로 사람의 눈이 가진 관용도보다 카메라의 관용도가 좁기 때문에 카메라로 사진을 찍으면 보통 우리가 눈으로 직접 보는 장면보다 더 강한 계조로밖에 사진을 얻을 수 밖에 없게 되는데, 이를 해결하기 위한 방법 중 하나가 HDR 기법이다. 단, 이게 만능은 아니니 남용하면 안된다. HDR기법을 통해 원래 손실되었어야 하는 하이라이트, 섀도의 톤은 사진상 가시영역으로 끌어올수 있지만, 또 그만큼 중간톤의 계조는 약해져서 극단적인 경우 사람이 보는 계조와 심한 차이가 나서 톤의 느낌이 사진보단 그림에 가까워 질 수 있다.


3. 남용[편집]


2010년대에 접어들면서 플랫하고 단색의 디자인 시대가 도래하면서 Google Material Design 및 애플 디자인의 가이드라인이 나오고 각종 기업들에서도 너도 나도 단색 및 플랫 디자인을 사용하면서 그라데이션 사용을 최소화 및 자제하거나 아예 사용을 안하는 추세이다. 그런 와중 그라데이션 기법을 남용하면 시대착오적 소리를 들을 수 있으니 주의하자.

그리고 2010년대 중후반부터 다시금 그라데이션이 이용되는 빈도가 늘어나기 시작했다. 어도비 CC나 인스타그램, 페이스북 메신저, 다음의 아이콘이 대표적.

그라데이션을 남용한 사례는 아래와 같다.


4. 관련 문서[편집]




파일:크리에이티브 커먼즈 라이선스__CC.png 이 문서의 내용 중 전체 또는 일부는 2023-11-14 18:40:17에 나무위키 그라데이션 문서에서 가져왔습니다.

[1] 수학에서도 Gradient라는 용어를 쓰는 데 이는 미국 영어로 Slope과 같은 뜻이다. 즉, 기울기로 숫자가 기울기를 따라 서서히 변한다고 생각하면 쉽다. "구배(勾配)" 라고도 한다.[2] 아쿠아마린, 아콰머린이 아니다. 아콰마린이다.[3] 당시 애플 수석 디자이너 조너선 아이브는 일약 그라데이션의 대명사가 되었다.[4] 포토샵에서는 원형 방사형, 사각형 방사형을 지원한다.[5] 정작 바르셀로나는 저 뒤로 몇 년간 더욱 괴상한 유니폼들이 출시되어 저 시즌의 유니폼이 재평가를 받고 있다.[6] -webkit-background-clip: text 는 잘 되지만 나무위키에서 사용할 수 없다.[7] 엄연히 말하자면 허터-드리필드 곡선은 디지털 센서에서는 적용이 되지 않는다. 필름과 디지털 센서의 관용도가 기능론적으론 같은 거라고 볼 수 있지만 그 원리는 전혀 다르기 때문이다. 디지털 센서의 관용도는 위에서 말한 대로 감지 가능한 가장 어두운 빛과 가장 밝은 빛의 범위 이지만, 필름에서 관용도는 '필름베이스 불투과율과 필름포그의 농도를 합친 값' 에서 '솔라리제이션(solarization)현상 직전의 농도값' 사이의 범위를 말한다. 허터-드리필드 곡선은 바로 이것 즉, 노광량에 따라 필름베이스+포그농도에서부터 솔라리제이션 현상이 일어나기 시작하는 부분까지의 필름농도의 변화 과정을 그래프로 옮긴 표이다.[8] 여기서 일반적 상황이라는것은 스튜디오에서 찍은 사진이 아니라 대체로 풍경 사진이다. 배경색이 흰색 또는 검은색인 스튜디오 상황상 히스토그램상 검정색이나 흰색쪽의 그래프가 높이 올라갈 수 밖에 없다. 또 굳이 스튜디오 사진이 아니더라도 촬영자가 로키(low key) 또는 하이키(high key)를 의도했을 경우 히스토그램의 중간톤 지점이 당연히 한쪽으로 치우치게 된다.