웹디자인 폰트와 컬러 이야기

03. 웹디자인 컬러와 폰트

 

웹 디자인을 할때 사이트의 전체적인 분위기와 느낌을 결정하는 중요한 요소 중의 하나가 바로 컬러입니다. 컬러는 다양한 느낌과 의미를 담고 있습니다. 어떤 컬러를 어떻게 사용했는지에 따라 사이트의 분위기와 컨셉트가 전혀 다르게 바뀝니다. 그리고 사이트 정보 전달의 핵심적인 요소는 텍스트입니다. 텍스트를 표시하기 위한 폰트는 웹 페이지의 가독성과 정보 전달의 효율성 측면에서 매우 중요한 요소입니다. 웹디자인과 컬러 및 폰트는 어떤 관계를 갖고 있는지 어떻게 사용해야 하는지에 대해서 알아봅니다.

 

<웹디자인과 컬러 _기본적인 10가지 컬러와 이미지>

- Red(FF0000) : 에너지, 열정, 따뜻함, 사랑, 위험, 공격성

- Yellow(FFFF00) : 희망, 낙천적, 행복, 즐거움, 생동감, 배신, 질투

- Orange(FF9900) : 온화함, 따뜻함, 인자함, 에너지, 활동적, 균형적

- Brown(993333) :  격조, 품격, 신뢰감, 흙, 편안함, 중후함, 우아함, 전통

- Green(009900) : 건강, 자연, 젊음, 생명, 신선함, 활력, 미숙함, 다듬어지지 않음

- Gray(999999) : 지성, 미래지향적, 우아함, 쇠퇴, 쓸쓸함, 도회적, 황혼, 조용함, 탁함

- Purple(990099) :  신비로움, 고상함, 오만함, 섬세함, 매력적, 전통적

- Blue(0000FF) : 신뢰감, 성공, 충성심, 보수적, 안전, 첨단, 안전, 젊음, 청결, 노동력, 우울함, 슬픔

- White(FFFFFF) : 순수, 청결, 간결, 정직, 결백, 여백, 청렴, 고요

- Black (000000) : 세련, 우주, 신비, 음울, 힘, 공포, 불안

 

<웹디자인과 폰트>

- 서체를 너무 많이 사용하지 마세요.

- 윈도우 기본서체를 사용하는 것이 좋습니다.

- 타이틀에 사용하는 서체의 통일성을 유지하세요.

- 서체 크기는 대상층을 면밀히 분석하여 적당한 크기로 사용하세요.

 

 

★ 보충자료

 

_ 웹 색상의 십육진법 표기

웹에서 십육진수쌍으로 색을 표현하는 방법은 RGB 가산혼합에 의한 것이다. RED, GREEN, BLUE에 해당하는 두자리 십육진수 세 쌍으로 색깔을 나타낼 수 있다. 한 채널당 1 바이트가 할당되므로 모두 3 바이트의 정보로 색을 표현한다. 웹에서 색을 지정할 때에는 특수기호 #과 3 쌍의 두자리 십육진수를 연속하여 사용한다.

 

 

▶ 표기형식

	특수기호	RED 채널	GREEN 채널	BLUE 채널
	#	00~FF	00~FF	00~FF

 

▶ 표기 예

	표  기	색  상
	#000000
	#ff0000
	#00ff00
	#0000ff

 

▶ 표현 범위

두자리의 십육진수가 표현할 수 있는 범위는 00부터 FF까지(십진수 0에서 255까지)이다. (십육진법 참조)

즉, 하나의 채널은 256 가지의 색을 표현할 수 있다.

웹 색상의 십육진법 표기는 각 채널 당 256개의 색을 표현하므로

3 채널 모두를 사용하여 나타낼 수 있는 색상은 16,777,216 가지(256*256*256)가 된다.

▶ 이름 참조

십육진법에 의한 웹 색상표기 중에서 자주 쓰이는 것은 특별히 이름을 붙여 두었다.

아래의 설명과 같이 이름이 있는 색은 십육진법에 의한 표현 대신 이름으로 표현할 수 있다.

▶ 웹 안전 색상

호환성을 위해 16,777,216 가지나 되는 색의 가짓수를 대폭 줄여서 표준으로 설정한 색을 말한다.

웹 안전 색상의 색 값은 모두 51의 배수로 이루어져 있다. (이는 최대값인 255를 5로 나눈 것이다.)

각각 0, 51, 102, 153, 204, 255의 6단계로 이루어져 있으며 (00, 33, 66, 99, CC, FF)

표현 가능한 가짓수는 모두 216가지(6³)이다.

 

 

 

▶ 표준 색상 이름

HTML 4.01 표준에는 16 가지 색깔 이름이 정의되어 있다.

색 상	16진수	색 상	16진수	색 상	16진수	색 상	16진수
black(검정)	#000000	silver(은색)	#c0c0c0	maroon(밤색)	#800000	red(빨강)	#ff0000
navy(네이비)	#000080	blue(파랑)	#0000ff	purple(보라)	#800080	fuchsia(자홍)	#ff00ff
green(초록)	#008000	lime(라임)	#00ff00	olive(올리브)	#808000	yellow(노랑)	#ffff00
teal(틸)	#008080	aqua(아쿠아)	#00ffff	gray(회색)	#808080	white(흰색)	#ffffff

 

▶ X11 색상 이름

추가적으로, 넷스케이프나 인터넷 익스플로러 같은 브라우저에는 별도로 여러 색상들이 정의되었으며, 특정한 브라우저에서는 이런 색상을 인식하지 못할 수도 있다. 이들 색상 중 다수가 X 윈도우 시스템에서 분류된 X11 색상 이름에서 가져온 것이다. CSS를 지원하는 대부분의 HTML 사용자 에이전트가 이 색상들을 지원한다.

 

아래는 X11 색상 이름과 각각에 해당하는 16진수 코드의 목록이다. 

 

 

 

▶ CSS 색상

CSS 언어에서는 HTML 4.01에 정의된 색상 이름을 다시 정의하고 있다. CSS 2.1에서는 여기에 "오렌지색"을 추가로 정의했다.

색  상	16진수
orange	#ffa500

 

웹 색 상 　　#000000 검정   #c0c0c0 은색       #808080 회색   #ffffff 하양         #ff0000 빨강        #8000000 밤색 　　#800080 보라   #ff00ff 밝은자주  #008000 초록   #00ff00 밝은초록  #808000 올리브색  #ffff00 노랑 　　#0000ff 파랑   #000080 남색        #008080 틸      #00ffff 아쿠아      #ffa500 주황(CSS전용)

 

원본 주소 ‘http://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%83%89%EC%83%81’

분류: 색

 

웹디자인을 도와주는 프로그램들

http://www.motifdn.pe.kr/

 

따라하기 사이트

http://www.ssabu.co.kr

http://www.minhojungmin.com/bbs/zboard.php?id=photoshop

http://kimsk44.cafe24.com/sitemap.htm

 

 

★ 웹디자인 컬러와 폰트 및 응용프로그램

 

____ 웹디자인 컬러.

 

I.R.I 컬러시스템의 정보는 다음의 색채계에 따라 정리되어집니다.
이들 색채계는 산업자원부 지원으로 개발되어진 것입니다.

 

01. 색채분석 도구

　⊙ I.R.I Hue & Tone 120

색상(Hue) 명도(Value) 채도(Chroma) 3속성에 의한 색채표현을 색상(hue)과 색조(Tone)로 단순화 시켜 색채 분포 분석을 보다 용이하게 한 색표이다. 기존에 개발된 여러 유형의 색상 색조 체계를 발전시켜, 한국인의 감각을 수용하면서도, 세계적 범용성을 고려하는 방향으로 개발된 것이다. 120색은 110개의 유채색과 10개의 무채색으로, 110개의 유채색은 10개의 색상과 11개의 색조로 이루어져 있다.

 

 

 

　⊙ I.R.I Hue & Tone 898

색상 & 색조120색을, 각 분야별로 마켓에 등장하는 색을 기준으로 세분화된 색표이다.
898색은 880의 유채색과18개의 무채색으로, 880개의 유채색은 40개의 색상과 23개의 색조로 이루어졌다.

색상 & 색조 898표는 마켓에서 유사한 분야간 혹은 동일한 분야 내에서의 시계열변화 분석 등에 용이한 색표이다.

 

 

 

02. 색채 이미지 공간

　⊙ 단색 이미지 공간

단색, 배색, 형용사 이미지 공간은 각각 세로방향으로 부드러운(Soft), 딱딱한(Hard), 가로방향으로 동적인(Dynamic), 정적인(Static)의 동일한 기준축으로 이루어진 공간 내에서 단색, 배색 형용사가 각각 고유의 위치를 갖고 있습니다.
따라서 추상적인 이미지를 구체적인 색채로 또한 구체적인 색을 추상적 이미지로 전환하여 해석하는 것이 가능합니다.

 

　　* I.R.I 단색 IMAGE SCALE 

 

　⊙ 배색 이미지 공간

　　* I.R.I 단색 IMAGE SCALE 

 

　⊙ 형용사 이미지 공간

　　* I.R.I 형용사 IMAGE SCALE 

 

 

웹디자인 :: 대표적인 계절별 컬러 웹 활용

 

* 봄 

  

봄의 대표적 색은 모든 색에 노랑이 섞인 색으로 따뜻한 색으로 구분된다.

노란색이 기본 바탕 색상으로 봄의 컬러는 화사하고 원색적이며 선명하고 강하다.
명도와 채도가 높아 밝고 생동감 있으며 투명하고 깨끗한 이미지.

 

* 여름 

 여름의 대표적인 색은 모든 색에 흰색과 파란색이 들어 있어 찬색으로 구분된다.  

흰색이 기본 바탕 색상으로 여름의 컬러는 부드럽고 차가운 느낌을 주며 모든 색에 흰빛과

푸른빛이 지닌 색으로 파스텔 톤이 주를 이룬다.    
부드럽고 낭만적이며 여성스러운 이미지.

 

 

*가을 

 가을의 대표적인 색은 모든 색에 황색과 노란색이 들어 따뜻한 색으로 구분된다.

황색이 기본 바탕색으로 가을의 컬러는 차분하고 약간 가라앉은 느낌을 주며 모든 색에

황색 빛을 지닌 색으로 부드러우며 이지적인 이미지.

 

 

 

*겨울

 

 

겨울의 대표적인 색은 모든 색에  푸른색과 검정색이 섞여있어 색으로 구분된다.

푸른색이 기본 바탕색으로 겨울의 컬러는 채도가 높으며 강하면서도 가라앉는 느낌을

주며 모든 색에 푸른빛을 지닌 색으로 모던하고 도회적인 세련된 이미지.

 

 

 

** 웹디자인 폰트

 

 

 

[출처] 웹디자인 컬러&폰트|작성자 tagcs