[UI 디자인] 자료조사부터 UI 디자인까지

본격적인 UI에 들어가기에 앞서 UI에 필요한 디자인 컨셉을 정하는데 많은 시간을 들였다.

 

제대로 된 디자인 컨셉을 결정하지 않으면 디자인을 진행하다가 처음부터 다시 되돌아가야 할 수도 있기 때문에, 핀터레스트와 노트폴리오, 비핸스 등에서 디자인 레퍼런스를 다양하게 조사했다.

 

 

1. 핀터레스트, 비핸스 등에서 디자인 레퍼런스 조사
앱 아이콘, 로고, PPT 레이아웃, UI 레이아웃 참고

 

UI SAFE AREA에 맞는 디자인을 위해, 일러스트레이터로 디자인할 때 SAFE AREA ZONE을 틀처럼 만들어서 UI 페이지마다 적용했지만, 나중에는 많은 레이어가 겹치면서 그리드를 이용해서 SAFE AREA를 만들고 그리드를 잠근 후 작업하니 작업이 더 편리해졌다.

 

 

2. IOS 운영체제에 맞는 폰트 및 아이콘 사이즈 조사

 

보통 UI디자인은 피그마(FIGMA)로 하는 것으로 알고 있는데, 일러스트로 UI 디자인을 하는 과정에서 폰트 크기나 아이콘 크기를 맞추는 게 어려운 부분이었다.

 

그래서 잘 디자인된 앱의 UI디자인 레이아웃을 실제 스크린 크기로 변경하고, 이를 참고해서 아이콘과 폰트 크기를 맞춰서 일러스트레이터로 작업했다. 

 

 

3. 무드보드 자료조사
: 색채 키워드에 맞는 이미지 조사
: 형용사 키워드에 맞는 색채 조사

: 무드보드 레이아웃 조사

4. 컬러 스타일 결정
무드보드를 통한 컬러 스타일 결정

처음에는 컬러바 사이트인 컬러헌트에서 컬러바를 참고했지만, 자연에서 영감을 얻은 개성있는 색감을 찾기 위해서 자연 사진을 참고하게 됐다.

Color Palettes for Designers and Artists - Color Hunt

 

위 사진들은 UNSPLASH에서 참고한 무료 이미지다. 위 이미지 속에서 어두운 숲속의 블랙, 흰 눈이 소복하게 쌓인 화이트 등 컨셉에 맞는 블랙&화이트 색상을 추출할 수 있었다.

 

디자인할 때 기본 블랙&화이트보다 다른 색이 약간이라도 섞인 블랙&화이트가 좋다고 배웠는데, 앱 디자인할 때 콘셉트가 살아있는 색을 쓸 수 있어서 개인적으로 만족했다.

 

5. 폰트 스타일 

폰트는 무료 폰트 중에서 사용하고 싶었는데, 애플의 공식 영문폰트인 SAN FRANSISCO와 한글 폰트가 가장 유사하게 디자인됐다는 프리텐다드(PRETENDARD)를 선택했다. PRETENDARD 폰트는 굵기가 다양해서 텍스트를 강조하고 싶을 때 유용한 폰트 같다.

 

UI디자인할 때 한글폰트로 애플산돌고딕이 더 대중적으로 많이 쓰인다고 하는데, 애플 유저라면 애플산돌고딕 폰트를 사용할 수 있다. 하지만 앞으로도 애플 산돌고딕을 사용할 기회가 많이 있을 것 같아서 처음 사용해보는 폰트였지만,  PRETENDARD로 디자인해보기로 했다.

 

위 과정을 거쳐서 완성된 모임숲 PPT와 UI디자인은 다음과 같이 완성됐다. 이렇게 완성된 UI디자인은 1차 시안으로 사용되었고, 최종 포트폴리오를 제작하면서 로고, 컬러바, 캐릭터 수정을 한 번 더 거쳤다.

 

모임숲 디자인 PPT 링크

https://ava-archive.tistory.com/37

[UI디자인] 디자인 PPT

 

모임숲 소개 PPT 링크

https://ava-archive.tistory.com/36

[UI 디자인] 디자인 PPT -1차 시안