★ 스마트폰 앱★ UI설계를 위한 프로토타이핑 전략 잘짜는 법

앱(APP)을 디자인하거나 기획하는 분들이라면 이런 경우가 많을겁니다.

머리속에 아이디어는 많은데 체계적인 UI설계 방법론이 익숙하지 않아서 고민만 하고 끄적거리다가 

프로토타입은 커녕 아무것도 계획서를 제출하지 못하는 경우.

수많은 프로젝트를 해본 경력자라면 모를까 업무에 익숙치 않은 신입 디자이너들이 많이 겪는 고충입니다.

아래의 '신사원'님도 그런 경우네요~

 

헉~! 벌써 아침 8시다..  ㅜ..ㅜ  아침까지 이팀장이 프로토타입 만들어 오라고 했는데,, 화면하나만 그려놓고 자고 말았다. 아~~~ 머리속을 어떻게 정리한담..   (나 '신사원')   요렇게 해서 조렇게 구현한다음.. 요기능을 집어 넣고 저렇게 실현될 때...  다음 화면으로 넘어가면 되는데... 생각은 꼬리를 물고, 아이디어는 날라다니고~ 정리는 안되고 머리는 복잡하고 기획은 머릿속에 있는데..... 이걸 어떻게 끄집어낼까 고민하다가 결국 잠들어 버렸다. ㅠㅠ 그나저나 이팀장은 디자이너인 내게 왜 기획단까지 해결하라는 건지  (기획자 정대리는 매일 칼퇴만 잘하더만..) 그렇다면 해결방법은 검색. 검색. 검색    오예 찾았어!!   다음에 기회되면 정식으로 과정을 꼭 이수해야 겠으~~~~ (불굴의 의지..)   뭐든지 그렇지만 열정과 아이디어만 가지고는 디자인도 기획도 할 수 없습니다. 아이디어를 구체화하고 구조화시키는 설계 방법론에 익숙해야 좋은 아이디어가 실제로 구현될 수 있겠죠? 그래서 스마트폰, 스마트기기등의 UI 설계는 더더욱 프로토타입 전략이 중요합니다. '천리길도 한걸음부터' 아무리 급해도 바늘허리에 실을 묶고 꿰멜 수는 없습니다. 기초가 튼튼해야 멋진 아이디어가 날개를 달 수 있겠죠? 흔히들 디자이너들에게 집을 그려보라고 하면 지붕부터 그리는 사람들이 많답니다. 하지만 실제로 집을 지을때는 바닥부터 공사를 하지요. UI설계는 말그대로 그림그리는 것이 아니가 설계를 하는 겁니다. 따라서 순서와 방법론이 무척 중요하답니다. 아래에서 간단하게 UI 프로토타입에 필요한 정보를 짚어보고 위에서 보았던 '신사원'님과 같은 분들에게 도움이 되었으면 좋겠습니다.     - 신사원이 스케치한 설계화면(대부분의 디자이너분들이 이렇게 아이디어를 시각화 합니다) -   UI의 정의 UI는 유저 인터페이스 User Interface의 약어로써, 사용자가 해당 기기-조작 방식 등을 통해 의도하는 조작을 할 수 있도록 도와주는 대상 혹은 방식을 의미한다. 스마트폰은 2007년 아이폰의 출시 이후에 본격적인 스마트폰의 UI가 확립되었으며, 현재는 아이폰 외에도 안드로이드폰 등 다양한 스마트폰 운영체제에서도 아이폰의 UI를 채택하고 있다.   스마트폰앱 UI디자인 패턴의 이해 앱을 통해 기획자의 의도에 따라 다양한 기능과 화면들로 구성되어 진다. 이러한 부분을 앱의 전체적인구조를 한 화면에 비주얼적으로 표현해 놓는 방식을 ‘스토리보드’라도 한다.   - Snapeee앱의 프로토타입 설계 -   스마트폰 앱 GUI 디자인 GUI는 그래픽 유저 인터페이스 Graphic User Interface의 약어로써, 시각적 대상을 통해 조작이 가능한 UI를 의미한다. 한마디로, ‘디자인 스타일’로 표현할 수 있으며, 플랫 디자인, 스큐어몰피즘등으로 설명될 수 있다. UI가 기획적 요소를 주로 삼고 있는 반면, GUI는 시각적인 표현이 주된 요소이다. 그러나 두 가지를 완전히 분리할 수는 없으며 GUI와 UI는 상호보완적 관계로써, 한 부분만 고려하여 디자인이 이루어질 수는 없다.   스마트폰 앱 GUI 디자인의 특징 1) 스마트폰 운영체제의 디자인 스타일, 폰트 사이즈, 컴포넌트 등 사전에 제공되는 가이드라인을 준수해야 한다. 단, 앱에서 표현하고자 하는 컨텐츠나 의도에 따라서 어느 정도 달라질 수 있다.   2) 다양한 사이즈의 해상도의 디바이스를 대상으로 GUI 디자인이 이루어 진다. 현재 시점 이후에 새로운 디바이스, 새로운 해상도가 출시된다면 해당 사양도 지원해야 한다. 3) 앱을 마켓에 출시하고 난 후에도 업데이트를 통해 자주 디자인을 리뉴얼하게 된다. 4) 손가락 제스처를 통한 조작이 손쉽게 이루어질 수 있도록 적절한 사이즈로 컴포넌트를 디자인해야 한다.   디자인 특징을 반영하여 포토샵으로 스마트폰 앱 GUI 디자인하기 위의 특징을 고려하여 포토샵을 통한 GUI 디자인을 진행할 경우, 아래의 원칙들을 기준으로 하여 작업하여야 한다. 이는 스마트폰의 특징을 반영한 원칙이므로 충실히 따를 경우, 사이즈 변경, 후속작업 등을 진행할 때 큰 도움을 받을 수 있을 것이다. ! 1) 오브젝트는 벡터 Vector로 제작한다. 2) 벡터로 작업하지 못하는 대상의 경우는 스마트 오브젝트 Smart Object로 변환하여 확대/축소시 손실을 최소화한다. 3) 다양한 그래픽적 표현을 위해서는 Properties의 Feather, Layer Style, Smart Filters 기능을 활용한다. 4) 추후 수정 작업이 이루어질 가능성이 많으므로 레이어 윈도우에서, 폴더, 레이어 네이밍을 적절히 관리한다. 5) 이미지를 슬라이스하는 후속 작업에는 반드시 슬라이스 툴을 사용하며, 이 경우 네이밍룰을 철저히 기입한다.   스마트폰 UI설계 및 프로토타입에 관련한 유용한 사이트 1) Apple iOS Developer Library http://developer.apple.com    : 애플 개발자 사이트로 iOS Dev Center > iOS Dev Library를 통해 들어가면 아이폰, 아이패드 앱 개발과 관련된 다양한 정보를 접할 수 있다. ! 2) Android Developer Website http://developer.android.com  : 안드로이드 개발자 사이트로써, Design 섹션에 다양한 디자인 관련 정보가 있으니 반드시 참조한다. !   3) Fluid UI   http://fluidui.com   : 디지털 프로토타이핑 툴인 플루이드 UI 사이트. 안드로이드, 아이폰, 윈도우폰 등 다양한 기본 라이브러리가 제공되며 개인이 직접 올린 이미지로도 프로토타이핑 구성이 가능하다. ! 4) Pop http://popapp.in   : 페이퍼 프로토타이핑(화면)을 촬영하여 간단한 링크를 적용한 후 폰에서 네비게이션이 가능한 심플한 디지털 프로로타이핑 툴 ! 5) App Cooker    http://www.appcooker.com   : 아이패드로 아이폰 앱과 아이패드 앱의 프로토타이핑을 만들 수 있는 디지털 프로토타이핑 툴. 만들고 난 후 무료 앱 (아이패드, 아이폰 제공)인 App Taster를 통해서 테스트도 가능하다.   *한가지 더 유용한 정보* 한국인터넷전문가협회에서는 디자이너를 위한 스마트폰 UX/UI 설계 프로토타이핑 과정을 개설합니다. 중소기업 직장인(정규, 비정규 모두)이라면 누구나 참여가 가능하며 50세 이상의 대기업 직장인도 무조건 OK! 게다가 정부에서 지원해 주는 교육과정이라 환급까지 해주죠.   스마트폰 앱의 디자인 패턴을 이해하고  이를 활용하여 페이퍼 템플릿을 활용한 스케치 디자인,  실제 스마트폰에서 디자인을 구현 테스트할 수 있는  모바일 앱 디지털 프로토타이핑 툴킷 학습이 가능하다고 합니다.   2014년 7월 22일 부터 8월 28일까지 매주 화, 목(총10회)에 진행! (여름 휴가라도 문제 없겠다)   강사님은 바로  열정과 으~~리로 소문난 모바일 계의 대부!!   앱스디자인 대표 이종원 - 모바일 앱 UX/UI 디자인 & 개발 스튜디오 ‘앱스디자인 Apps Design’ 대표 - 저서 : ‘스마트폰 앱 UX/UI 디자인’ (영진닷컴) - 강의 : SK T아카데미, 인터넷전문가협회, 아카데미 정글 강의 - ‘스마트폰 앱 UX/UI 디자인’, 'UI설계, 프로토타이핑, GUI 디자인', 'Tech Clinic: iOS7' 등 - 컨퍼런스 : '2013 스마트폰 앱 어워드 모바일전략 컨퍼런스' 발표, NOW:Conference - 인증 : 모바일 앱 디지털 프로토타이핑 툴 전문가 공인 인증 - 데이터컬러 컬러 매니지먼트 전문가 공인 인증 - Save the Children 국내 빈곤아동 구호캠페인 ‘Change the Future’ BI, 앱 디자인 재능 기부 - 삼성, LG, SK 등 다수의 프로젝트 진행 - 한국지역난방공사, SocialMC 등 기업 컨설팅     강사님의 더 많은 정보는 아래를 참조하세요.   1) 스마트폰 앱 UX/UI 디자인 (앱스디자인 이종원 저 / 영진닷컴) http://www.yes24.com/24/goods/8748501 : 스마트폰 앱 UX/UI 분야 베스트셀러! 위 도서를 통해, 본 세션에 소개한 포토샵 CS6의 신기능과 적용을 다양한 예제를 통해 소개하고 있으며 프로젝트 구성 원리와 해외 앱 개발사들의 인터뷰 등도 담고 있다. 2) Apps Design Facebook Pages http://facebook.com/appsdesignstudio : 스마트폰 앱 디자인 관련 소식은 물론, 앱스디자인 이종원 대표가 진행하는 스마트폰 앱 디자인 UX/UI/GUI 등과 관련된 다양한 교육 정보를 확인할 수 있다.   <<교육과정 참여하기>>