[제로베이스 UI/UX 파트타임 스쿨] 8주차 - (토) Image Mood Board & Adobe XD 소개

제로베이스 55일차 학습노트이다.

오늘은 UI 디자인 기초 강의의 Image에 대해서 배웠다. 이미지를 어떻게 쓰는지, 무드보드는 무엇인지, 이미지 타입들은 어떤 것이 있는지에 대한 강의였다. 이미지에 대해서 전반적인 수업이었지만, 약간은 조금 다른 주제의 것들을 합쳐논 내용이라 정리가 안되어보이긴 했다. 하지만 이미지 타입에서 우리가 흔히 아는 확장자들간의 어떤 차이점이 있는지 알 수 있어 좋았다. 또한 오늘은 XD의 수업도 두번째로 들으며 실습도 준비했다.

---

오늘의 강의 내용

 

1. Image

이미지는 디자인 과정에서 가장 많이 쓰이는 요소 중 하나이다. 디자인 결과로서의 이미지도 있지만 결과물을 뽑기 위한 과정에서도 수많은 이미지들이 쓰이며 그중에서도 무드보드는 전체적인 이미지 컨셉을 잡을 때 항상 쓰이는 도구이다. 

• Message
  이미지는 보통 메세지를 담고 있다. 연출이라고 생각해도 좋을 것 같은데, 주로 광고 이미지들에서 메세지가 뚜렷한 것들이 많다. 담배가 몸에 해롭하는 것을 표현하기 위해 담배갑에 그려진 이미지나 케찹이 신선하다는 것을 표현하기 위한 토마토와 케찹병을 합성한 광고이미지 등을 예시로 들 수 있다.
• Mood Board
  무드보드는 앞서 이야기 했듯이, 디자인 과정에서 많이 쓰인다. 웹/앱 서비스의 전체적인 컨셉일 수도 있고 혹은 특정 모듈이나 엘리먼트에 들어가는 이미지들이 어떤 분위기를 가져야하는 지에 대한 것 등 다양한 산출물의 분위기를 맞추기 위한 레퍼런스를 모으는 것이다.
• Image Type
  이미지 타입은 벡터/ 비트맵이 있고, 확장자로는 JPG, GIF, PNG, SVG 등이 있다. 벡터와 비트맵은 방향과 선으로 이루어진 것이냐 혹은 점의 정보로 이루어진 것이냐의 차이인데, 이에 대한 것은 매우 많이 이야기 되었으므로 알고 있어 넘어간다. 
  
  

JPG - 사진등의 정지화상의 이미지 표현 - 1600만 화소 이미지 저장 가능함. 이미지 저장하는 사람이 화질을 조정할 수 있음.

GIF - 이미지의 용량을 라이트하게 쓰고 싶을 때 쓰는 확장자 - JPG에 비해 압축률은 작지만 사이즈가 작음. 크기가 작아 여러 이미지를 한 파일내에 저장할 수 있음 ex) 짤방

PNG - 웹에서 최상의 이미지를 구현하기 위해 제정한 파일 포맷 - 24bite의 이미지로 표현, 원 이미지에 손상을 주지 않는 포맷 형태, 투명한 이미지를 그대로 쓸 수 있는 것이 가장 큰 특징이다.

SVG - 2차원의 벡터 그래픽을 표현하기 위한, 오픈 표준의 벡터 기반 포맷. 검색화 목록화 스크립트화가 가능 - internet explorer 9 부터 가능하다. 

 

2. Adobe XD 소개

Sketch 대신 윈도우 유저들이 사용하는 프로토타이핑 툴로 포토샵과 같은 Adobe 사의 제품이라 연동이 쉽다는 장점을 가지고 있다. 기본적인 프로토타이핑 툴로서의 역할을 많이 가지고 있어 인터렉션을 만들고 반응형 프로토타입을 만들기 좋다.

---

이미지는 메세지를 가지고 있다는 점, 그리고 이 메세지들을 이용해 무드보드를 만들 수 있다는 점이 재미있었다. 또한 확장자별로 그 크기나 담고 있는 정보가 다르다는 것, 이에 따라 쓰임새가 다른 것도 어렴풋이는 알고 있었으나 이렇게 정리해서 배운 것은 처음인 것 같다. UXUI 디자이너가 되기 위해서는 이러한 정보들을 많이 알고 있어야겠다는 생각을 한다.

 

이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.