1) 8~9 | UI기초 | UIUX 디자인 스쿨 주 3일반 학습일지

 

🎯학습 내용

1-8 Image, Mood board
1-9 Color 
1-10 Typography

 

---

 1-8  Image, Mood board

1. 이미지 메시지

1-1. 이미지의 중요성
- 이미지는 의미를 직관적으로 표현하는 강력한 수단임
- 시각적으로 보여주어 강력한 메시지를 전달함
- 하인즈 케첩의 신선한 이미지를 통해 브랜드 정체성 강조함
- 지퍼팩의 신선한 과일 이미지를 통해 건강한 식재료 전달함
- 스니커즈 초코바의 위트 있는 광고 이미지를 통해 가치 전달함

1-2. 이미지 메시지 전달
- (중요) 이미지는 상품의 가치를 직관적으로 보여주어 소비자의 공감을 이끌어냄
- 니베아 선크림의 깨끗한 이미지를 통해 피부를 보호해주는 메시지 전달함
- 레이드 바퀴와 곤충을 잡는 에프킬러의 이미지를 통해 스파이더맨의 힘 강조함
- 이미지 메시지는 브랜드 이미지를 고려하여 전략적으로 사용해야 함
- 유기농 야채와 과일의 신선함을 시각적으로 보여주는 무드보드 이미지를 제안함

1-3. 무드보드 이미지
- 무드보드는 특정 주제를 설명하기 위해 이미지, 텍스트, 개체를 결합한 방식임
- 토마토와 파프리카의 유기농 신선함 이미지를 무드보드 형태로 표현할 수 있음
- 여러 이미지를 결합하여 직관적으로 이해할 수 있는 무드보드 형태로 보여줄 수 있음
- (중요) 무드보드 이미지는 일관된 기준점과 전략을 유지하면서 사용해야 함
- 협의된 이미지 가이드에 따라 제품에 포커싱한 이성적인 비주얼과 감성적인 이미지를 조합할 수 있음

2. 이미지 표현 기술

2-1. 벡터와 비트맵
- 이미지는 벡터와 비트맵으로 나뉨
- 벡터는 점과 점을 연결하여 이미지를 표현함
- 점은 엑스와이 좌표계로 나타나며, 해상도 조절이 가능함
- 이미지 크기를 키워도 해상도가 깨지지 않음
- 벡터 방식은 크기 조절이 자유로워 로고나 캐릭터 등을 제작할 때 사용함

2-2. 비트맵과 확장자
- 비트맵은 픽셀의 점이 저장된 비트 정보의 집합임
- 각 픽셀은 다른 색상 정보를 가지고 있어 조합되어 이미지를 이룸
- 벡터와 달리, 비트맵은 이미지 확대/축소 시 기존 픽셀 수 변화로 인한 깨짐 현상이 발생함
- (중요) 이미지를 표시하는 과정에서 비트맵 방식은 이미지 품질에 영향을 줌
- 사진, 풍경 화면 등 고해상도 이미지의 제작이나 전송 시 비트맵을 사용함

2-3. 이미지 압축 기술
- 사진 파일은 이지프로제스를 통해 압축된 상태임
- 인터넷에서 빠르게 이미지를 전달하기 위해 개발된 기술임
- (중요) 이미지 퀄리티를 낮추고 용량을 줄이기 위해 사용됨
- 글꼴체와 움직이는 이미지 제작에 유용함

 

 

---

 1-9  Color 

3. 디지털 프로덕트에서의 이미지와 컬러 사용 전략

3-1. 디지털 프로덕트에서의 이미지 사용
- 디지털 프로덕트에서 이미지는 의미를 직관적으로 전달하는 강력한 커뮤니케이션 수단임
- (중요) 대중 없이 사용하기보다는 모드로 끼리을 통해 이미지 사용 전략을 고려해야 함
- 이미지 타입에는 벡터와 비트맵이 있음
- 벡터는 이미지 크기 조절과 변형이 쉽고, 비트맵은 이미지 표현이 가능하지만 용량이 커짐

3-2. 이미지 표현에서의 컬러 활용
- 레드 컬러는 강렬한 이미지를 사용해 패스트푸드나 통신 서비스에 자주 사용됨
- (중요) 레드 컬러는 주의나 위험을 표시하거나 인지 오류를 유발할 수 있으므로 주의해야 함
- 옐로우 컬러는 소통을 중요시하는 메신저 앱, 금융사에서 사용되는 색상임
- 블루 컬러는 신뢰감과 정직함을 표현하는 데 적합하며, 결제 브랜드나 기업에서 선호함

3-3. 컬러 선택 시 주의사항
- 컬러는 단기 기억 장소와 장기 기억 장소를 모두 충족해야 함
- (중요) 컬러의 선택은 과도한 사용으로 인한 정보 오해를 최소화해야 함
- 컬러의 선택은 레드, 옐로우, 블루 등의 레이아웃과 가격 탄력성에 따라 달라짐
- 컬러의 선택은 디지털 프로덕트의 전달력을 크게 좌우함

4. 색상의 특징과 활용

4-1. 색상의 종류와 특징
- 청색은 신뢰감을 줌, 그린 컬러는 신선함과 건강함을 상징함
- 녹색은 환경적 요소와 나무 등을 연상시키고, 식료품과 요식업에서 많이 사용됨
- 그린 컬러는 안정감과 성장 이미지를 줌, 식품과 화장품에 많이 사용됨
- 오렌지 컬러는 활력과 사교성을 상징, 기업 로고 포인트 컬러로 사용됨
- 퍼플 컬러는 고급스러운 이미지와 신비로움을 표현, 메인 컬러로 선택되어 사용됨

4-2. 색상의 활용과 예시
- 블랙 컬러는 현대적인 볼드한 이미지와 우아하고 신비로운 이미지를 표현, 패션 브랜드에서 많이 사용됨
- 멀티컬러는 글로벌한 이미지 스펙트럼을 표현, 구글, 마이크로소프트 등에서 주로 사용됨
- (중요) 블루 컬러는 전문적인 신뢰감과 창의성을 느낄 수 있는 컬러, 브랜드에서 가장 많이 사용됨
- 레드, 그린, 초록색 등 빛의 삼원색은 인간의 시각에서 색을 인지하는 원뿔 세포의 특징을 기반으로 함
- 인간이 인식 가능한 빛의 삼원색은 자연에서 나타나는 빛의 본질과 다름

4-3. 색상의 모드와 적용
- RGB는 빛의 3원색, CMK는 인쇄와 사진에서 색 재현에 사용됨
- RGB 모드는 혼합될수록 밝아지고, CMK 모드는 섞일수록 어두워짐
- 레드와 초록색을 합치면 노란색, 초록색과 파란색을 합치면 청록색, 파란색과 빨간색을 합치면 마젠탈 컬러가 됨
- 인간의 인식 가능한 빛의 삼원색은 자연에서 나타나는 빛의 본질과 다름
- 하드웨어 제조사마다 색감 차이가 나타날 수 있으므로 디자인 시 고려해야 함

5. 색상 모델과 코드 이해

5-1. 색상 모델의 기본 개념
- 네 가지 색상인 RGB를 사용하는 잉크 체계를 설명함
- (중요) 색상의 재현 능력이 다른 모델들과 비교했을 때, RGB 모델이 가장 높은 효율을 보임
- 다색 인쇄의 어려움과 색상 재현 사이에서 가장 높은 효율을 보이는 대안으로 제시된 모델로 고급 인쇄소에서 사용됨
- 하지만, 이론적으로 모든 색상을 나타낼 수 없으며, 이는 방식에 따른 재현 범위가 다름

5-2. 색상의 표현과 문제
- 디지털 인쇄물 작업에서 사용되는 RGB 모델의 색상 표현에 문제 발생
- (중요) 색상 재현에 있어서 가장 높은 경제성을 보이는 검용 모델인 CMik 색상에 대한 문제 제기
- 문제가 생기는 이유는 RGB 모델과 다른 색상의 모델을 사용하여 씨앗 마젠타 등이 정확하게 표현되지 않음
- 컬러 프로필을 사용하여 색상 표현의 괴리를 보정함

5-3. 색상 모델의 수정과 최신 색상 트렌드
- 펜톤은 2천년부터 매년 새로운 색상 트렌드를 발표함
- 매년 색상 트렌드를 참고하여 디자인을 진행하는 것이 유용함
- (중요) 디자이너들이 2019년부터 2021년 색상 트렌드를 참고하여 색상 디자인을 진행함
- hSB과 hSL 모델에 대한 설명과 이해가 중요함

6. 컬러 조합과 헬스코드

6-1. 색상 표현과 헬스코드
- 헬스코드와 색상 값을 이용해 이미지를 구성함
- (중요) RGB 색상 모드에 따라 이미지의 밝기와 흰색, 블랙을 구분함
- 2자리 숫자 중 하나라도 1이면 흰색, 0이면 블랙임
- 6개로 시작하는 헬스코드에서 0이 6개, 모두 꺼지면 블랙, 0이 00이라면 흰색임
- 헬스코드로 표현된 이미지는 16진수로 변환해 사용함

6-2. 컬러의 조합
- 헬스코드를 통해 색상 조합의 이론적 개념을 이해함
- (중요) 반대색과 보색을 통해 유사색과 보색의 조화를 표현함
- 유사색을 기준으로 작은 플래그나 새소식을 표현할 때 반대색을 사용함
- 디자인에서 보색과 유사색을 적절히 사용하면 효과적임
- 디지털 프로덕트에서 색상 선정 시 색상환 기준을 고려함

6-3. 컬러 모드와 헬스코드
- (중요) RGB 모드는 가산 혼합으로 빛이 섞일수록 밝아지며, CMK 모드는 잉크가 섞임
- (중요) CMK 모드에서는 색상이 섞일수록 어두워짐
- 헬스코드는 이론적으로 알고 있어야 실무에서 사용 가능함
- 디자인을 위한 색상과 컬러의 적절한 이해와 사용이 중요함

---

 1-10  Typography

1. 디지털 타이포그래피

1-1. 타이포그래피 소개
- 타이포그래피는 디자인 요소 중 하나임
- (중요) 텍스트가 가진 정보 전달과 감성을 담아 사용됨
- 볼드체는 정보 전달에, 세리프체는 가독성과 가독성에 중점을 둠
- 텍스트의 가독성은 무게감과 묵직함으로 표현됨
- 다양한 타이포그래피가 존재하며, 감성과 역사성을 전달할 수 있음

1-2. 타이포그래피 용어
- 타이포그래피 용어는 실무에서 쓰임
- 세리프와 산세리프의 차이점을 이해해야 함
- (중요) 폰트의 두께, 크기, 위치, 배치는 타이포그래피에 중요함
- 볼드체는 가독성이, 세리프체는 가독성이 떨어질 수 있음
- 라이트한 웨이트의 손글씨 서체는 가독성이 좋지 않을 수 있음

1-3. 타이포그래피 디자인
- 타이포그래피는 영화 포스터 등에서 보여짐
- 타이포그래피는 정보 전달뿐 아니라 감정 전달을 함
- (중요) 디자인 용어는 폰트에 적용되어 텍스트를 독특하게 만듦
- (중요) 디자인 용어를 통해 디자인 요소를 효과적으로 사용할 수 있음
- 타이포그래피 용어 이해는 실무에서 도움이 됨

2. 디자인 용어

2-1. 세리프와 산세리프
- 세리프는 글자 작은 요소, 돌기형 장식이 있는 것
- 산세리프는 장식 요소가 없는 것
- 장식의 유무로 세리프와 산세리프 구분
- 세리프 사용은 디자인에서 정보 전달에 효과적임
- (중요) 디자인에서 장식 요소 중요, 산세리프가 가독성 높임

2-2. 디자인 용어 정리
- 베이스라인은 알파벳 대소문자 중 아래로 내려오는 부분 제외한 지평선
- 소문자 기준 대문자 높이 값은 캐릭터 특성에 따라 다름
- 어센더와 디센더라인은 텍스트 영역의 윗과 아랫부분을 의미
- 텍스트 영역의 위아래 간격 측정 시, 어센더와 디센더라인 라인 중요
- 레터스페이싱은 알파벳 레터와 레터 사이의 공간값을 의미

2-3. 디자인 요소 적용
- 커닝은 한 글자와 한 글자 사이 간격 조정
- 라인 랭스는 텍스트의 길이를 의미, 너무 짧거나 너무 길면 불편함
- (중요) 디자인할 때 라인 랭스 중요, 유사하게 맞추면 안정감 있게 보임
- 라인 헤이트는 베이스라인에서 베이스라인까지 간격
- 타입 얼라이먼트는 정렬값을 의미, 디자인 요소 적용 시 중요

---

 

 

💡느낀점

이번 강의는 완전 처음 접한 건 아니지만, 전체를 한 번에 정리하면서 머릿속 구조가 좀 잡히는 느낌이었다.
특히 이미지랑 무드보드는 평소에도 많이 봐왔던 개념인데, 그 안에 담긴 메시지 전달 전략까지 생각해보는 건 새로웠다.
타이포그래피도 그냥 '예쁜 폰트 고르기'가 아니라, 정보 전달이랑 감정 표현의 핵심이라는 게 다시 와닿았고.
컬러 쪽은 확실히 생소한 영역이었고, 색상 모델이나 헬스코드는 낯설지만 흥미로웠다.
색이 단순히 '느낌'이 아니라 과학적으로 계산된 도구라는 점이 인상 깊었어.
전체적으로 시각 요소 하나하나가 사용자에게 주는 인지가 얼마나 큰지 다시금 정리하게 된 시간이었다.
이제는 그냥 '감으로 디자인'하는 게 아니라, 이유를 설명할 수 있는 디자인을 하고 싶다는 생각이 들었다.

 

 

 

 

 

 

 

 

 

 

 

이 글은 제로베이스 UXUI 디자인 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.