모바일 UI 디자인을 공부하는 3가지 단계
UI 디자인 초보자를 위한 안내서
대부분의 UI 디자이너 지망생들은 - UI 디자인을 공부하기위해 여러가지 난관에 부딛히게됩니다. 대부분의 경우 '무엇을, 얼마나 알아야하는지'를 알지 못하기 때문에 오히려 더 헤메이게되는 경우가 많죠. 온갖 어려운 문서들을 잔뜩 읽게되거나. 혹은 기본기를 제대로 다루지 못한 채로 - 응용시안을 만드는 등. 다양한 문제에 부딛히게됩니다. 이런 상황에서는 UI 디자인이 너무 어렵고, 배우기도 쉽지 않다는 생각을 하게되기 마련입니다. 그래서 오늘은 - 초심자의 입장에서. 아주 간단하게 - 모바일 UI 디자인을 공부하는 방법에 대해서 이야기해보겠습니다.
1. 기본적인 그래픽 툴 배우기
모바일 UI디자인은 기본적으로 디자인 도구를 사용할 줄 알아야합니다. 아무리 디자인 하기가 쉬워진 요즘이라 하더라도. 기본적인 디자인 툴을 배우는건 꼭 필요한 일입니다. 기본적인 기술을 갖고있어야 원하는 내용을 표현하고, 만들어낼 수 있으니까요.
- Adobe 포토샵
대부분의 해외 회사에서는 포토샵이 Sketch 라는 가벼운 프로그램으로 대체되고있는 상황입니다. 그러나 이 경우 애플의 Mac OS에서만 돌아간다는 특성때문에 - 아직도 많은 회사들은 포토샵을 사용하고있습니다. 물론 Adobe 사에서 XD 라는 신규 프로그램을 만들어내기는 했습니다. 하지만 여전히 업데이트가 늦다거나. 세밀한 작업이 불가능하다는 이유에서 여전히 포토샵이 널리 쓰이고있는 상태입니다. 그러니 Adobe사의 포토샵 프로그램은 UI 디자이너로서 일하기 위해 꼭 배워야할 프로그램들 중 하나가 되겠습니다.
- Adobe 일러스트레이터
2D 비트맵 이미지를 다루는데에 있어 포토샵과 Sketch 프로그램이 쓰인다면. 벡터 이미지를 다루기 위해서는 Adobe사의 일러스트레이터가 있습니다. 일러스트레이터는, 수학적으로 점과, 선 만으로 이루어진 수학적 도형인 벡터 이미지를 다룹니다. 주로 아이콘이나, 폰트 등을 사용할때 다루게되는 것이 이 프로그램이죠. 만약 본인이 포토샵이 아니라 Sketch 프로그램을 사용한다 하더라도, 일러스트레이터는 꼭 배워야할 프로그램 중 하나입니다.
1-1. 실무에서 쓰이지만, 중요도는 낮은 디자인 도구들
기본적으로는 포토샵이나 Sketch, 그리고 일러스트레이터를 배운 분이라면. 이외의 프로그램은 디자인에 있어서 배우는데 시간이 그리 오래 걸리지 않는 것들이 대부분입니다. 그래도 그냥 넘어가게되면 아쉬우니. 한번 정리를 해보도록 하겠습니다.
- Zeplin 플러그인
제플린 플러그인은 - 우리가 UI 디자인작업을 진행했을 때. 그 결과물을 개발자들이 쉽게 보고 만들 수 있도록 도와주는 프로그램입니다. 기본적으로 포토샵이나 Sketch 등의 프로그램과 연동이 되는 방식으로 동작합니다. 이 프로그램은 기본적으로 일일히 디자인 가이드를 손으로 그리거나. PPT나 문서파일로 만들어야했던 디자이너들의 고충을 줄여주는데 좋은 역할을 했지만. 동시에 UI 디자이너가 더 많은 업무를 해내야하는 이유가 된 도구이기도 합니다. 기능이 기본적으로 공유를 위한 도구다보니, 별로 어렵지 않게 배울 수 있습니다. 다만 OS별 기기해상도 개념을 어느정도 이해하실 필요가 있다는거...!
- MS Office : 파워포인트
우릭 대학교나 고등학교때 - 조별과제용으로 자주 사용했던 PPT입니다. 아니, 근데 PPT는 왜 배워야한다는걸까요? 사실 여전히 많은 업체들에서 제안서 작업을 할 때, PPT 프로그램을 자주 사용합니다. 또한 여전히 일부 회사에서는 PPT를 통한 와이어프레임 작업 (뼈대를 잡는 디자인 작업)을 진행하기도 하죠. 물론 이 부분을 XD나 Sketch 프로그램이 대체하고있기는 합니다. 하지만 여러분이 회사를 가게된다면, PPT 프로그램을 매우 높은 확률로 마주하게 될 가능성이 높습니다. 그러니 너무 깊게는 아니어도 좋으니. 기본적인 사용법만 알아두셔도 충분할겁니다.
물론, PPT에는 의외의 지점이 하나 있긴 합니다. PPT를 통해 와이어프레임 작업을 하던 사람들은 Sketch나 XD 프로그램으로 옮겨가도, 전혀 무리없이 작업을 할 수 있습니다. 그 작업 방식이 상당히 유사하기 때문입니다. 그러니 배워두어서 손해볼건 없다고 봐야겠죠?
1-2. 배우면 좋지만, 급하게 배울 필요는 없는 디자인 도구들
포토샵과 일러스트레이터를 사용할 줄 아는 사람이라면. Sketch나 XD 등의 프로그램은 굳이 사용할 필요가 없습니다. 그럼에도 불구하고 시대적으로 꼭 알아두어야하는 프로그램들이기에. 따로 정리를 해놓기로 하겠습니다.
- Sketch app
현재 UI 디자인 업계에서는 가장 뜨거운 감자중 하나인 Sketch. 점차 UI 디자인 작업이 단순해지고, 무거운 포토샵 프로그램에 대해 기피하게된 결과, Sketch는 디자인업계의 가장 중요한 도구로 떠올랐습니다. 시안도 금방 만들 수 있고, 디자인을 스마트폰에 연결해서 바로바로 확인할 수 있다는 장점도 있습니다. 플러그인도 다양해서 여러모로 인기만발인 프로그램이죠. 하지만 이건 해외에서의 이야기이고, 한국에서는 모든 프로그램을 Mac으로 바꿔야한다는 부분 때문에 - 아직 포토샵을 사용하는 곳이 많습니다. 게다가 Adobe XD의 뒤늦은 등장으로 인해 조금씩이나마 대체가 되고있어서, Sketch 툴 자체에 대해서는 꼭 배워야하는 툴은 아닙니다. 스스로 Sketch를 사용하는 곳에서 일을 하고싶다던가, 이력서에 한줄 더 추가할 내용을 더하고싶은게 아닌 이상. 이 툴의 사용여부가 핵심적인 능력이 되어주지는 못하기 때문입니다.
- Adobe XD
Sketch를 따라잡고싶은 Adobe의 바램. 하지만 정작 Sketch를 대신하기엔 너무나도 부족함이 많은 프로그램. Adobe XD는 기본적으로 Adobe사의 UI 프레임을 따르고있고, Sketch와 많이 닮아있는 프로그램입니다. 와이어프레임 작업에 편하게 사용할 수 있고, 가볍고, 빠릅니다. 일러스트레이터의 벡터 파일도 금방금방 불러오고, 사진 파일을 담아서 원하는 시각물을 만들기도 편리하죠. 다만 세밀한 작업을 하거나. 사진을 편집하고 잘라내는 등의 고도의 작업은 포토샵에 견줄 수가 없습니다. 그래서 대부분의 경우 Sketch 앱을 대체하여 포토샵, 일러스트레이터와 함께 사용되는 경우가 많습니다.
XD 앱은 기본적으로 PPT와 매우 유사한 구조를 띠기 때문에. PPT를 기반으로 사용했던 디자이너의 경우 한두시간 이내에 XD를 자유자재로 다루는 마술같은 상황을 경험하실 수 있습니다. 필자 역시도 그런 경우라서, XD를 사용하면서 PPT수준으로 - 이질감을 전혀 느끼지 못할만큼, 편하게 사용하고있습니다.
2. 대표적인 모바일 OS의 UI를 따라 만들어보기
기본적으로 모바일 UI 디자인은 각각의 모바일 OS의 디자인에 많은 영향을 받습니다. 게다가 기기 자체의 특성에서도 여러 제약을 받기 떄문에. 대표적인 OS와 기기들을 사용해보는 과정은 꼭 필요합니다. 여기에 OS의 디자인을 따라만들어보는 과정이 이어진다면 - UI 디자이너로서의 핵심역량인 - 모바일에 대한 비례와, 디자인 감각을 얻게되실 수 있습니다.
- 구글의 안드로이드 OS
안드로이드 OS는 구글이 만든 대표적인 모바일 OS입니다. 전 세계의 70%가 넘는 스마트폰 사용자가 안드로이드를 사용하고있습니다. 그만큼 압도적으로 사용되고있는 안드로이드는 - 다양한 회사에서 만들어낸 개별 기기 해상도를 모두 지원해야합니다. 그렇기 떄문에 DP 개념과 해상도 구분에 대한 개념을 이해하지 않고서는 디자인을 하거나, 개발을 진행하는게 불가능합니다. 그러니 안드로이드 OS에 대해서 공부하려한다면. 구글의 안드로이드 디자인 가이드를 꼭 읽어보시고, 해상도 개념에 대해 확실히 이해해야할 필요가 있습니다.
안드로이드 OS는 기본적으로 자체 디자인 스타일인 Material 디자인 스타일을 사용하고있으며. 해당 문서는 다음 링크에서 확인하실 수 있습니다.
https://material.io/design/
-
안드로이드 OS 목업 파일 다운로드
현재 안드로이드의 최신 버전은 8.1이며, OREO(오레오) 라는 이름으로 불리고 있습니다. 하지만 최신 UI의 목업 디자인은 유료인 경우가 많습니다. 그러니 약간 과거버전인 7.0 Nougat (누가) 버전의 UI 디자인의 목업 UI를 사용하시길 추천합니다. 가능하면 개별 UI 요소들의 명칭을 외우려고 하기보다, 일단 따라서 만들어보세요. 그러다보면 어떤 UI 요소들이 있고. 각각이 어떤 기능을 하는지를 자연스럽게 알게되실겁니다.
안드로이드 7.0 버전의 UI 목업 파일은 다음 링크에서 다운받으실 수 있습니다.
https://drive.google.com/file/d/1wKZvSpXJULOxYnHYGJUaIPSbBU7VNLtZ/view?usp=sharing
PS. 만약 최신 버전의 UI 목업 파일을 다운받을 수 있다면, 그 파일을 사용하세요! 항상 최신 OS 자료를 통해 내용을 배우는게 중요합니다.
- 애플의 iOS
애플의 iOS는 안드로이드와 다르게 매우 높은 완성도로 유명했습니다. 게다가 애플의 잡스는 IT 업계에서 신화 그 자체인 사람이었죠. 워낙 완성도가 높은 UI와 기기를 만들다보니 대부분의 디자이너들은 iOS를 주로 사용하고. 디자인을 하더라도 iOS에 맞춰서 디자인을 하는 경우가 많습니다. 하지만 이런 관행은 생각보다 위험한 행동입니다. 안드로이드와 iOS는 각각 사용성이 다르기 때문에, 개별 기기를 모두 사용해보면서. 개별 UI 요소를 따로따로 바라봐야합니다.
iOS는 안드로이드에 비해 훨씬 이해가 쉽다는 장점을 가지지만. 최근 아이폰 X와 노치의 등장. 해상도 파편화로 인해 여러모로 신경써줘야하는게 많아진 상태입니다. 하지만 안드로이드의 해상도 개념을 이해한 여러분이라면. iOS의 @1x, @2x, @3x와 같은 해상도 개념은 금방 배우게 될테니 너무 걱정하지마세요.
iOS는 기본적으로 Apple 사의 Human Interface Guidelines중 iOS 부분을 따르고있으니. 해당 문서를 꼭 확인하시길 바랍니다.
https://developer.apple.com/design/human-interface-guidelines/
-
iOS 목업 파일 다운로드
현재 iOS의 최신 버전은 12.1 버전이며, 해당 버전에 대한 목업 파일은 당연히 유료인 경우가 대부분입니다. 안드로이드의 경우와 마찬가지로, 최신 UI 목업 파일을 사용하기보다, 무료인 이전 버전을 사용하시기를 추천드립니다. 안드로이드에 대한 UI 요소를 파악했던 것과 마찬가지로. 어떤 UI 요소들이 있고. 어떤 방식으로 디자인 되어있는지. 따라 만들어보면서 차근차근 하나씩 확인해보시기를 추천드립니다.
iOS 10의 UI목업은 다음 링크에서 다운받으실 수 있습니다.
https://drive.google.com/file/d/1K4ri9IIhyQkABoEX4sDTs76N2Yt3V5ks/view?usp=sharing
PS. 만약 최신 버전의 UI 목업 파일을 다운받을 수 있다면, 그 파일을 사용하세요! 항상 최신 OS 자료를 통해 내용을 배우는게 중요합니다.
3. UI 디자인에 대한 다양한 지식쌓기
모바일 UI 디자인은 모바일 기기에 대한 내용 외에도 다양한 지식이 필요합니다. 그래서 확인해야하는것이, 각각의 OS에 대한 내용이나. 버튼에 대한 내용. 모바일 웹에 대한 기술. 디자인 트렌드 같은 것들도 확인해야하죠. 게다가 나아가서는 브랜드 디자인이나, 타이포그래피, 아이콘 세트 만들기, 색상사용 등 다양한 내용을 공부해야합니다. 이런것들을 하나하나 해나가는 과정에서 매우 여러가지 탐색과, 연구가 필요해질텐데요. 그런 내용들을 직접 찾아다니는 것도 좋고. 학원을 다니는 것도 좋은 방법일겁니다. 혹은 전문가의 브런치나, 블로그 등 - 여러 지식을 찾아다니는 것도 좋은 방법이 되겠죠.
추후에 여러분이 정보를 찾아나서게 된다면 - 정보를 여러 관점에서 바라보는 것이 중요합니다. 개발자의 관점에서 바라보는 모바일 UI 디자인은 어떤 것인지. 기획자의 관점에서는 어떤 것인지. 그리고 마케터나, 사용자의 입장에서는 어떤 것들을 알아야하는지를. 하나하나 고민해야하죠. 게다가 모바일 시장은 계속해서 죽어가고있는 환경이기 때문에. IT 시장의 변화지점이나, 추후에 다가오게될 모바일 OS들의 변화. 웹 생테계의 변화에 대해서도 여러가지 공부를 해나가야합니다. 때로는 해외의 서적이나 전문적인 기사들을 찾아봐야할때도 있을거고. 개발자들을 만나 이야기를 나누거나, 그들의 기술 포럼에 참석해 귀를 기울여야할 때도 있겠죠. 중요한건 - 스스로 다양한 지식을 추구하고, 찾아나서는 방법을 알아나가는 것. 그리고 그 탐색을 멈추지 않는 것에 있습니다.
트렌드를 고민하거나, 기술의 발전. 혹은 앞으로의 IT 업계가 변화해나가는 상황을 들여다보는 것. 그런 노력이 앞으로 여러분에게는 많이 필요해질 겁니다. 그런 지식을 얻기 위해서는, 최신의 트렌드나. 해외 정보를 얻는것도 중요하겠죠. 미약하지만 여기 몇개의 링크들을 남겨봅니다. 부디 도움이 되면 좋겠네요.
https://brunch.co.kr/@clay1987/119
https://brunch.co.kr/@clay1987/120
https://brunch.co.kr/@clay1987/136
이외에도 제 브런치에서는 여러 UI 디자인 번역 자료와, UI 트렌드에 대한 글들을 작성하고있습니다.
디자인 실무강의와, UI 디자인 스터디, 웹개발 관련 카테고리를 확인해보세요!
UI 디자인은 생각보다 많은 부분을 포함하고있는 디자인 영역입니다. IT의 영역과 물리기기의 영역. 웹사이트와 PC의 영역을 넘나들기도 합니다. 그런면에서 모바일 UI 디자인은, UI 디자인의 커다란 내용들 중 일부에 불과하죠. AI 스피커가 등장하고, IoT의 개념이 등장한 현대 사회에서 - UI 디자이너는 앞으로도 다양한 화면 디자인을 해나가야하는 중요한 역할을 맡게될 겁니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
