💡 25-04-17 (목)
UI는 UX의 일부이다
색의 3요소 - 색상,명도,채도
➰ 색상
색상은 사람한테 분위기와 감정에 큰 영향을 주기 때문에 중요하다
(과한 색상 사용은 시각적 산만함을 줄 수 있음)
또한 모든 색상에는 의미를 가지고 있다
▫️ 빨간색은 열정,분노,긴장감
▫️ 파란색은 시원함,신뢰,혁신적
▫️ 검정색은 세련,현대적
▶︎ 쿠팡 로고는 다양한 색으로 이루어져 있다
그래서인지 다양한 제품들이 많이 있을거 같은 느낌을 준다
▶︎ 빨간색과 검정색의 조합은 힘과 권위를 상징하기도 한다
검정색 배경과 빨간색 로고가 대비되어 뚜렷한 인상을 남겨 더 강조되는 느낌이 든다
또한 빨간색은 열정,힘,강렬함을 나타내는데
넷플릭스가 전세계 최대 규모의 OTT 플랫폼이기 때문에 로고 색만 봐도
"나 넷플릭스야~" 이러한 느낌을 주는거 같다
➰ 명도
밝음과 어두움을 나타내는 요소다
이해하기 쉽게 밝음의 정도로 생각하면 된다
고급지게 표현하고 싶다! -> 명도 낮추기
밝고 활발할때 표현하고 싶다! -> 명도 올리기
➰ 채도
색의 선명함,강렬함을 결정하는 요소다
원색에 가까울수록 채도가 높다고 말한다
채도가 높을수록 선명해지며 쨍한 느낌을 주며
채도가 낮을수록 무채색에 가까워지며 부드럽고 흐릿해진다
Pantone - 올해 선정 컬러가 무엇인지 알려주는 사이트
2025년에 올해의 컬러로 선정된 모카무스는 따뜻하고 포근한 표용력으로
진심 어린 친절함을 표현하는 색상이며 사려깊은 여유로움을 표현한다
이런식으로 기업들은 팬톤을 통해 자신들의 제품에 올해의 컬러를 넣어 판매하기도 한다
시각의 3요소 - 타이포그래피,색상,레이아웃
➰ 타이포그래피
글자를 배치하고 디자인하는 기술을 말한다_글자 디자인/아트
폰트,글자 크기,간격(행간/자간),정렬,색상 등을 조절하여
가독성+미적의 균형을 잘 맞춰야 한다
▪️ 기능적 타이포그래피는 말 그대로 function이어서 미적보다는
가독성과 판독성(글자가 서로 조화로운지)을 중요시하게 생각한다
정보를 전달하는 수단으로 적합하다
기능적 타이포그래피 사용시 고려해야 할 사항_
▪︎ 글꼴 선택
▪︎ 자간과 행간의 조절
▪︎ 여백형성
-> 여백은 미적으로 보고 공백은 빈공간으로 봄
▪️ 실험적 타이포그래피는 가독성과 판독성보다 미적을 우선시한다
활자를 디자인요소로 사용해서 역동적이지만 언어 전달 수단으로는 적합하지 않다
➰ 색상
▶︎ 색상환(color wheel)
원 형태로 스펙트럼을 시각적으로 나타낸것이다
▶︎ 컬러팔레트
우리는 빛의 파장으로 색을 인식하지만 컴퓨터는 수학적으로 색상을 인식한다
Hex : 숫자 0~9와 10~15는 알파벳 A~F로 표현하여 총 16진수로 표현한다
RGB : 빨강/초록/파랑으로 각각의 비율을 뜻한다
HSL/HSV : 색상/채도/명도의 수치를 가지고 있다
➰ 레이아웃
주어진 공간 안에 효율적으로 배치하는 것을 말한다
구성요소들이 조화롭고 균형있게 논리적 배열이 되었을때 내용이 쉽게 정확하게 전달된다
✔︎ 폰트의 종류
▪️ 산세리프(sans-serif) / 고독체
(sans : 없다 ⤴︎)
글자 끝에 장식이 없는 폰트를 말한다
현대적,직관적,깔끔,모던,가독성이 좋아진다
▪︎ Arial, Helvetica 폰트
▪️ 세리프(serif) / 명조체
글자 끝에 장식이 있는 폰트를 말한다
전통적,클래식,가독성이 상대적으로 안 좋다
▪︎ Times new roman,Georgia 폰트
✔︎ 계층구조
내가 어떤걸 중요하게 보고 강조하고 싶은지를 생각하면 된다
(중요함의 우선순위를 정하면 계층구조에 대한 이해가 더 쉬워짐)
사진처럼 중요한 내용은 크게!
두번째로 중요한 내용은 덜 크게!
✔︎ 자간과 행간
▪️ 자간은 글자 사이의 간격을 조정하는 요소다
글자들간의 응집력 또는 개방감을 표현할 수 있다
적절히 조절하면 당연히 가독성은 더 좋아진다
▪️ 행간은 첫줄과 두번째줄 사이의 간격을 말한다
행간의 간격이 좁으면 시각적으로 답답해지고 보는 사람의 눈 피로도도 심해진다
✔︎ 색상과 대비
테스트와 배경간의 시각적인 구분이 명확해야 한다
가독성을 높여줄뿐만 아니라 중요한 정보를 강조할 수 있다
흰색 배경에 채도가 낮은 글자색을 썼을때 두개의 색이 뚜렷하게
대비되지 않아서 글자가 잘 안 보이게 된다
이러면 가독성도 떨어지고 내가 전달하고 싶은 정보를 제대로 전달하지 못하게 된다
✏️ https://youtu.be/Ceur-ARJ4Wc?si=DVJbezZBfcVO-gTT
결론은 RGB보다 HSL이 더욱 직관적인 방식으로 색상을 지정한다
HSL는 색조(Hue) 채도(Saturation) 명도(Lightness) 약자로 HSV와 비슷하다
✏️ 나만의 색상팔레트 만들기
https://color.adobe.com/ko/ - Adobe Color
나는 자연적,파스텔톤,우드를 좋아해서 이 세가지가 공통으로 들어가 있는 팔레트를 만들어 보았다 😄 😄
✏️ 타이포그래피 한글/영문 두가지 버전으로 만들기
