독자리뷰
모바일 UX UI 디자인 강의 Adobe XD 앱디자인 웹디자인 스케치
drcro***
2021-09-21
모바일 UX/UI 디자인 강의 with Adobe XD
모바일 앱 디자인 실무에 바로 적용할 수 있는 앱 디자인 실전 테크닉 북이다. UX/UI 디자인을 국내 실정에 맞는 워크플로와 프로세스에 맞추어 설명하고, 실제 앱 디자인 프로젝트를 예제를 통해 XD의 핵심 기능을 익힐 수 있게 구성했다. 실무 경험이 부족한 예비/신입 웹디자이너나 UX/UI에 관심 있는 기획자, 개발자들이 모바일 앱 디자인 실무를 익히는 데 안성맞춤이다.
- 저자 : 김영삼
- 출간 : 2021-08-30
모바일 앱 디자인을 시작하는 입문자와 실무 워크플로우가 궁금했던 디자이너분들에게 도움이 될만한 책 한권을 소개합니다.
웹디자인 가이드에 비해 모바일 앱 디자인은 까도롭기도 하고 특히나 UX UI 디자인을 트렌디있게 작업하려면 실무외에는 정보를 얻기가 쉽지 않아왔습니다.
따로 수십만원 이상의 비싼 비용을 내고 강의를 듣지 않는한 배우기 녹녹치 않았던 분야이긴 하죠.
모바일 UX UI 디자인 강의 책은 어도비XD 프로그램을 기반으로 설명합니다.
책은 두개의 파트로 나눠져 있고 PART1 은 모바일 UX UI 디자인을 하기 위한 준비 내용을 담고 있습니다.
PART2 는 여러 실무 프로젝트 샘플을 통해서 실제로 모바일 앱 디자인을 따라하게 됩니다.
책을 보면서 이 책이 갖는 몇가지 포인트를 짚고 넘어가보도록 하죠.
우선, PART1 과 PART2 의 각 CHAPTER 마다 TIP 과 10년차 선배의 멘토링이 있습니다.
둘다 요긴한 정보이긴 하나...
10년차 선배의 멘토링은
말그대로 오랜 실무경험에서 꼭 필용한 노하우, 놓치지 말아야 할 업무 지식을 답고 있습니다.
더 빠르고 효율적으로 현업에서 일할 수 있는 노하우라고 보면 되겠네요.
TIP 은
이론이나 실습에서 놓치기 쉬운 부분, 자주 헷살릴 수 있는 부분을 정리한 것으로
유용한 정보와 참고 사항이니 팁은 놓치면 손해라는것 아시죠?
또한 디자이너의 비밀 노트 라는 내용으로 CHAPTER 중간이나 말미에 몇페이지씩 활당되어 있습니다.
앞서 얘기한 TIP 과 10년차 디자이너 선배의 멘토링보다는 확장되어 심층적인 내용을 토대로 안내해주니 꼭 챙겨 보십시오.
PART1 모바일 UX UI 디자인
모바일 앱 UX 는 어떻게 시작됐는지,
모바일 앱과 UX 디자인의 변화와 UX, User Experience 을 이해하며 UX 디자인 요소에 대해 배워봅니다.
모든 디자인은 철저한 기획으로 시작됩니다.
모든 서비스가 이미 있는 상황에서 정리하는게 아니라,
가상의 모바일 UX 시나리오 과정을 통해 오류를 최소화하고 서비스를 기획하게 됩니다.
네이티브 앱, Native App
모바일 웹앱, Mobile WebApp
반응형 웹앱, RWD, Responsive Web Design
적응형 웹앱, AWD, Adaptive Web Design
하이브리드 앱, Hybrid App
실무 파트에서는 6개의 프로젝트를 통해 모바일 앱과 모바일 웹을 실제로 제작해 봅니다.
5개는 웹과 앱을 디자인하며 나머지 한개는 공유 기능을 이용한 개발자 협업에 대한 내용을 담고 있네요.
모바일 웹 모바일 앱 디자인은 상당히 많은 소스들과 튜토리얼 정보들이 올려져 있습니다.
굳이 책이 없더라도 유튜브나 인터넷에서 다양한 강좌를 통해서 배울 수 있죠.
하지만 책에 담긴 내용처럼 체계적으로 방대한 학습서를 통해 배우려면 유료 강좌밖에 없습니다.
그런 측면에서 몇만원 안되는 모바일 UX UI 디자인 강의 책을 통해서 맛배기라도 전체적인 워크플로우를 익혀 보세요.
안드로이드, iOS 두 플랫폼에 맞는 모바일 앱을 제작해서 판매한다면 보다 더 좋은 수익을 얻을 수 있겠죠?
위 사진에 있는 UX를 제품이 아닌 가치를 제공하는 개념으로 알자라고 하는 내용은
우리가 일상에서 경험하는 모든 UX는 유형보다는 무형의 서비스이면서도
디자인을 큰 범주로 보고 접근해야 함을 언급하는 것이라고 보면 됩니다.
앞서 얘기했던 디자이너의 비밀 노트 페이지네요.
모름지기 디자인으니 반은 컬러라고 해도 과언이 아닙니다.
제품이든 서비스든간에 각각 브랜드와 서비스가 고객, 소비자들에게 각인되도록 신경쓰죠.
같은 계열의 색상이라도 미묘하게 다르고 웹과 상품에 적용되면서도 느낌이 다르죠.
모바일 디자인에 있어서 해상도 얘기를 빼놓을 수 없죠.
DPI 는 Dots Per Inch 가로세로 1Inch 에 들어가는 도트을 수를 정의합니다.
PPI 는 Pixel Per Inch 가로세로 1Inch에 들어가는 픽셀의 수를 정의합니다.
웹디자인을 할때도 웹사이트에서의 메뉴 흐름, 네비게이션을 고려해서 레이아웃을 디자인하게 됩니다.
마찬가지로 모바일도 GUI 디자인을 함에 있어 보다 더 최적화된 GUI 구조를 염두해야 합니다.
타블렛이 아닌 스마트폰 화면에서 사용자가 바로 바로 다음 메뉴를 통해 화면을 앱서비스를 컨트롤할 수 있어야 하고
안드로이드, iOS 고유의 메뉴 컨트롤 구조를 이해해야 하는것이죠.
이제 본격적으로 프로젝트 파트로 넘어가 볼까요!
PART2 실무에서는 여러 모바일앱을 실제로 디자인하는 프로젝트로 구성되어 있습니다.
기획을 하고 스토리보드를 구상해서 처음부터 진행하기에는 지면상으로나 과정상으로 한계가 있겠죠!
그래서 어도비XD 프로그램을 사용한 메인 화면 위주로 디자인을 따라해 나갑니다.
5번째 프로젝트에서는 반응형 모바일 웹 화면도 디자인을 하게 됩니다.
반응형에서는 뷰포트 Viewport 를 잘 잡아줘야 합니다.
디바이스(스마트폰, 타블렛/패드, 데스크탑)에 따라 해상도가 바뀌는 지점을 미리 정의해서
각 화면에 맞게 레이아웃을 적절하게 재배치 되도록 디자인 합니다.
다만 책 뒷장에 있는 차례 보기에 약간의 문제가 있네요.
바로 위에 거론했넌 뷰포트의 경우 책에는 150페이지에 있다고 나와있지만
실제로는 150페이지가 아닌 103페이제 설명이 시작됩니다.
모든 용어의 차례보기가 그런지 모르겠지만 확인이 필요할것 같습니다.
지금까지 모바일 UX UI 디자인 강의 를 Adobe XD 통해서 개발할 수 있는 앱디자인 과정을
워크플로우에 맞게 어떻게 작업하는지 학습해 봤습니다.
이 정도의 내용이라면 입문하는 분 입장에서는 충분히 배우면서 기초를 익히는데 도움이 될것 같네요.
