�ݺ�ߣ

앱 디자인 시작하기
Starting App Design
2014. 9. 11

자기소개
안녕하세요.
다람쥐하우스 디자이너
이상호입니다.
http://isangho.com

2010 2011
PingPing SwingSwing
2012 2013
2014
Motion
SwingSwing
Touch
mymenu 홍익시디2011 홍익시디2012
다람쥐하우스 VideoSnapshot Toolkit+ Moment Camera BShutter Icon Tester
Tagshot Eggshot 한빗페이

강의 순서
1. 강의에 들어가며
2. 앱 디자인 시작하기
3. Case Study
4. 작업하기
5. 마치며

1. 강의에 들어가며
이 강의는 앱 디자인을 시작하는
디자이너를 위한 강의입니다.
이 강의의 슬라이드는 아래 링크에서 다시 볼 수 있습니다.
http://isangho.com/study/appdesign

App
앱은 스마트기기에서
설치하고, 실행하고, 사용하는
입니다.

개발자*
App
사용자
앱을 통해서 사용자에게
가치와 경험을 제공합니다.
*여기서 개발자는 앱을 만들어 제공하는 회사나 개인으로, 포괄적 의미로 사용했습니다.

앱 디자인
개발자
App
사용자
앱 디자인은 앱이 제공하는 가치와 경험을
사용자가 제대로 느낄 수 있게 하기 위한
디자이너로서 해야 할 역할입니다.

App
개발자* 디자이너
앱 디자인은 혼자 하는 것이 아닙니다.
디자이너와 개발자의 협업이 필요합니다.
*여기서 개발자는 앱을 만들기 위해 코딩하는 프로그래머를 뜻합니다.

설치하고 실행하고 사용하는
스토어 아이콘
앱 아이콘
스크린샷
런치 이미지
프로모션 이미지
튜토리얼
UI/UX 디자인
웹사이트, 랜딩 페이지, 광고, SNS 프로필, SNS 커버

Logotype
Store
Icon
App
Icon
Screenshot
x5
Launch
Image
UI/UX
Design
Promotion
Image
SNS Cover
Image
SNS Cover,
Profile Image
Website
(Landing page) Mobile
Website

Logotype
할 일이 정말 많고, 쉬운 일도 아닙니다.
하지만 우선순위를 정해서 차근차근하다 보면
할 수 있습니다.
SNS Cover
Image

Logotype
우선순위에 답은 없고,
순서는 하다가 계속 바뀔 수도 있습니다.
한 번에 완성하려고 하지 SNS Cover
마세요.
Image

Logotype
시작이 막막하면, 다른 앱을 써보세요.
앱스토어에 있는 비슷한 앱을
내려받아 써보고, 스크린샷도 SNS Cover
찍어둡니다.
Image

Store Icon App Icon Logotype
Launch Image UI/UX Design Website (Landing page)
Screenshot SNS Cover / Profile

Paper
Launch Image UI/UX Design Website (Landing page)

Launch Image UI/UX Des http:// Website (Landing page)

3. Case Study
사례 연구는 여기까지 하겠습니다.
좋은 앱을 많이 써보고, 그때그때 스크린샷 해두고,
스크린샷만 따로 모이게끔 IFTTT* 서비스를 이용하거나,
iPhoto 스마트 앨범을 만들어 쓰면 나중에 찾아볼 때 도움이 됩니다.
*IFTTT(https://ifttt.com): IF(만약) This then(이렇게 하면) That(이렇게 해).
이런 식으로 Recipe를 만들어 쓰는 유틸리티 앱입니다. 예) “만약 스크린샷을 찍으면, 드롭박스에 올려”

4. 작업하기
이제 작업을 시작합니다.
제가 작업한 프로젝트를 예시로 보여드리겠습니다.

4. 작업하기
앱 디자인에 필요한 작업은 이 정도입니다.
- 앱 아이콘
- 화면 디자인
- 앱스토어 스크린샷
- SNS 커버/프로필
- 웹사이트 랜딩 페이지
이 많은 것을 쳐내야 합니다.
먼저 앱 내적인 것과 앱 외적인 것을 나눕니다.
그래야 우선순위를 정할 수 있습니다.

4. 작업하기
앱 내적인 것
- 앱 아이콘
- 화면 디자인
앱 외적인 것
- 앱스토어 스크린샷
- SNS 커버/프로필
- 웹사이트 랜딩 페이지
먼저 앱 내적인 것과(개발과 직접 연관),
앱 외적인 것(홍보와 마케팅적 요소)을 나눕니다.
앱 내적인 것이 개발자에게 넘겨줘야 하므로 우선순위가 높습니다.
이제 작업 일정을 대강 짜보겠습니다.
일정은 개발자와 잘 조율해서 짜야 합니다.

4. 작업하기
작업 일정
개발자 공유
개발자 공유
피드백 반영
최종 검토
마무리
우선
순위
시간
앱 아이콘
화면 디자인
앱 아이콘
웹사이트 랜딩 페이지
스크린샷
SNS
테스트/점검
개발자 공유
피드백 반영 런칭 준비

4. 작업하기
1. 화면 디자인
2. 앱 아이콘 디자인
3. 웹사이트 랜딩 페이지
4. 스크린샷
5. SNS 및 홍보

4.1. 화면 디자인
작업 순서
- 와이어프레임
- 프로토타이핑
- UI 디자인 작업
- 정리해서 개발자에게 넘겨주기

- 와이어프레임 / 프로토타이핑
와이어프레임은 말 그대로 선으로 대충 그려보는 것.
프로토타이핑은 그려놓은 화면을 실제 작동 테스트해보는 것
!
이 과정은 디자인을 입히기 전에 아주 중요한 과정으로
방법은 다양합니다.

- 와이어프레임
Google 이미지검색 “App Wireframe”

Google 이미지검색 “App Prototyping”

저는 이 작업을 할 때,
페이퍼 프로토타이핑 하거나
POP*앱을 이용합니다.
POP
*POP - Prototyping on Paper https://popapp.in 종이에 그린 것을 찍어서 바로 프로토타이핑 해보는 앱

POP로 대충 잡아봤던 프로토타이핑(가장 우측은 샘플)

프로토타이핑에서 문제가 없다면,
그래픽툴(포토샵/일러스트레이터)로
화면을 디자인하기 시작합니다.
!
각종 리소스와 참고자료를 최대한 활용하는 것이
작업을 더 수월하게 하는 방법입니다.

UI 디자인 작업에 있어 몇 가지 알아뒀으면 하는 점을
Moment 카메라를 예시로 알려 드리겠습니다.

Moment Camera http://momentcamera.me

스크린 크기*로 새 파일을 만듭니다.
와이어프레임/프로토타이핑을 보며
화면 디자인을 합니다.
*스크린 크기 사이트 http://screensiz.es/
UI 요소들의 크기를 잘 모르겠다면,
우선 OS의 디자인 가이드라인을 읽어봐야 합니다.
잘 정리해둔 UI 템플릿를 받아서 화면에 놓으면서 작업할 수도 있습니다.
잘 만든 앱을 스크린샷 해서 올려놓고 그려도
크기에 대해 감을 잡기 좋습니다.

- UI 디자인 작업 - 디자인 가이드라인
Apple Design Guide - iOS Design Resources
https://developer.apple.com/library/ios/design/

Android Design Guide
https://developer.android.com/design/
http://www.google.com/design/
- UI 디자인 작업 - 디자인 가이드라인

- UI 디자인 작업 - GUI 템플릿
Teehan+Lex GUI Template
http://www.teehanlax.com/tools/

Moment Camera UI 작업 중

- UI 디자인 작업 - 모양 레이어와 고급 개체
원형은 ‘모양(Shape)’ 레이어로 작업 아이콘 벡터쉐입은 ‘고급 개체(Smart Object)’로 작업
포토샵에서 단순한 면은 ‘모양(Shape)” 도구로 그렸고,
복잡한 아이콘은 일러스트레이터에서 그려서
고급개체(Smart Object)로 붙여넣어 작업했습니다.
(벡터 쉐입을 스마트 오브젝트로 하면 픽셀 퍼펙션에 있어서 좀 안 맞을 수 있지만,
일러스트레이터가 벡터 수정하기 편해서 이런 방식을 썼습니다. 정답은 없으니 알아서 해야 합니다.)

- UI 디자인 작업 - 버튼의 상태
카메라 버튼의 밑판, 4가지 상태
버튼은 4가지 상태가 있습니다.
기본/활성화/선택/비활성화
normal / highlighted / selected /disabled
!
각 버튼은 버튼 이미지 이름 뒤에 _n / _h / _s / _d
이런 식으로 이름 붙이는 것을 저는 선호합니다.

- UI 디자인 작업 - 버튼과 아이콘의 분리
카메라 버튼의 아이콘과 밑판
버튼과 아이콘을 분리하면
확장성을 고려할 수 있는
장점이 있습니다.
(로테이션, 다양한 경우의 수에 대응)

- UI 디자인 작업 - 런치 이미지
런치 이미지는 의도에 따라 다르게 만듭니다.
!
앱 실행부터 자연스럽게 연결되게 하려고 하면,
첫 화면에서 컨텐츠를 비우고,
버튼 등은 모두 비활성화된 상태로 만듭니다.
!
브랜드 노출을 강조하려면, 또는 처음에 로딩이 좀 걸린다면,
앱 아이콘과 BI를 노출한 화면을 합니다.
!
그냥 검정을 쓰고 페이드인 하기도 합니다.
Moment Camera 런치이미지

- UI 디자인 작업 - 분할 영역(Slice)
파란 선은 분할 영역(Slice) 작업을 한 것입니다.
UI가 완성 단계로 가게 되면, 개발에 넘겨줄 이미지를 잘라 줘야 하는데*,
분할 영역(Slice) 기능으로 화면을 잘라서 이미지를 PNG 파일로 뽑아줘야 합니다.
*UI 잘라내는 작업을 도와주는 포토샵 플러그인이 있습니다. Assistor PS http://witstudio.net/assistor/

- UI 디자인 작업 - 분할 영역(Slice) - 웹용으로 저장
웹용으로 저장(Save for Web)

- UI 디자인 작업 - 웹용으로 저장
웹용으로 저장(Save for Web)은 UI 작업하면서 굉장히
자주 접하게 되는 화면일 것입니다.
이미지 영역을 PNG 파일로 뽑아내는 역할을 합니다.
!
이 과정은 UI디자인 하면서 정말 많이 하기 때문에…
단축키 손 모양만 모아놓은 웹사이트가 있을 정도입니다.
http://saveforwebclaws.tumblr.com
웹용으로 저장(Save for Web)

- UI 디자인 작업 - 작업 화면을 폰으로 보면서 작업하기
Skala Preview
http://bjango.com/mac/skalapreview/
포토샵과 연동하여, 스마트폰의 앱에서 포토샵 화면을 실시간으로 확인할 수 있습니다.
UI의 크기가 화면에서 어떻게 보이는지 바로 확인할 수 있어서 매우 편리한 앱입니다.

UI 디자인 작업에서 고려할 게 참 많습니다.
책이나 참고사이트를 보면서 공부를 좀 해야 할 겁니다.
일하다 보면 다른 디자이너한테도 많이 배우고,
개발자한테도 많이 배웁니다.

- UI 디자인 작업 - 참고사이트
PPP (Pixel Perfect Principles)
PPP - http://ustwo.com/ppp/
PPP를 꼭 읽어보고 숙지했으면 합니다.
이 책은 PDF로 내려받아 볼 수 있는데,
픽셀 작업의 기본과 레이어 정리,
각종 포토샵 에티켓까지 총망라된 교과서입니다.

https://dribbble.com
드리블은 작업 이미지를 공유하는 커뮤니티 기반
포트폴리오 사이트입니다.
GUI 디자이너가 많이 활동하고 있습니다.
Dribbble

http://iosfonts.com
iOS에서 사용할 수 있는 폰트 리스트를 보여주고,
테스트해볼 수 있습니다.
iOS 내장 폰트 하위호환성을 확인할 때 유용합니다.
iOS Fonts

저는 이 과정에 많은 공을 들이는데,
이 과정은 사람마다 회사마다 많이 다를 것입니다.
!
이 과정을 통해서 개발자에게 디자인을 어떻게 만들어야 할지
의사소통을 하게 되고, 개발을 진행할 수 있게 리소스를 정리해줍니다.
!
개발자가 알기 쉽게 정리한 문서와 스크린샷, 이미지 리소스를
묶어서 전달해줍니다. 보통은 개발자들이 선호하는 스타일이 있을 겁니다.

개발자에게 넘겨줬던 문서들…

4.2. 앱 아이콘 디자인
작업 순서
- 리서치
- 스케치
- 디지털 작업
- 파일로 저장
- 기기 테스트

- 리서치
리서치는 시장조사 겸 앱스토어에서…

- 리서치
참고하려고 Dribbble 에서…

- 스케치
Google 이미지검색 “App Icon Sketch”

- 스케치
Moment 카메라의 스케치, 일러스트레이션

- 디지털 작업
스케치를 마쳤다면, 디지털 작업으로 넘어옵니다.
새 파일을 만듭니다.
해상도: 1024x1024 px
역시 디자이너마다 작업 다를 수 있는데,
저는 1024px로 작업하고 앱 아이콘은 축소합니다.
1024px의 아이콘이 스토어 아이콘으로 쓰입니다.

- 디지털 작업
Moment 카메라 아이콘 (1.0, 1.3, 1.4~)
아이폰 아이콘은 iOS6에서 7로 올라가면서 라운드가 변했습니다.
iOS7부터는 라운드값을 일반적인 라운드로는 그릴 수 없습니다.*
라운드의 밖은 색을 다 채워야 합니다.
iOS 마스크 다운로드 http://daramghaus.com/icontester/mask

- 파일로 저장
OS에 따라 아이콘 파일명과 규격이 정해져 있습니다.
이미지를 축소할 때는 화질 열화(깨지는 현상)가 생기지 않아야 합니다.
Photozoom pro로 축소하면 화질 열화가 적습니다. http://www.benvista.com/photozoompro

- 파일로 저장 - Icon Tester
Icon Tester를 이용해보세요.
아이콘 테스터는 디자이너를 위한 아이콘 테스트 솔루션입니다.
내려받아 폴더를 풀고, 각각의 이미지를 같은 해상도의 파일로 대치시켜보세요.
http://daramghaus.com/icontester/

- 기기 테스트 - Icon Tester
Icon Tester는 제가 직접 테스트를 하기 위해 만든 솔루션입니다. 사이트에 접속해서 내려받습니다.
내려받은 폴더의 이미지를 본인이 작업한 파일로 대치하고, 개인 웹서버에 올립니다.
아이폰 사파리에서 ‘홈 화면에 추가’하면 아이콘이 홈 화면에 생깁니다.
(안드로이드는 크롬 북마크로 지원 - 실제 빌드보다 조금 작게 보임)
http://daramghaus.com/icontester/

4.3. 웹사이트 렌딩페이지
Website (Landing page)

Paper
Website (Landing page)

Mobile Website

Website Landing page

4.4. 스크린샷
Cool Kindness
앱의 브랜드 인지도나 스타일, 톤앤매너를 고려하세요.
아이폰은 앱을 업데이트해야 스크린샷을 바꿀 수 있습니다.

4.4. 스크린샷
Paper
Screenshot

4.5. SNS 및 홍보
Moment 카메라 Facebook 커버이미지 업데이트 홍보 이미지
앱 디자인을 마치고, SNS 커버, 프로필 사진 및 홍보이미지를 올리고 나면,
출시 준비가 다 끝난 셈입니다. 이제 앱 테스트를 하고 출시를 준비하면 됩니다.
앱 디자인의 끝은 또 다른 시작입니다. 앱을 홍보하고, 고객의 반응을 살피고,
피드백을 받고, 업데이트도 해야 합니다.

5. 마치며
!
처음이라 부족한 강의였지만,
제 강의가 도움되었기를 바랍니다.
감사합니다.
디자인 분야 중 특히 이쪽 분야는 새로운 환경에 꾸준히 적응해야
살아갈 수 있습니다. 관심을 두고 많이 보고 많이 써보기 바랍니다.
그리고 처음부터 잘하는 사람은 없습니다. 프로젝트 하나 할 때마다
부쩍 실력이 느는 자신을 발견할 수 있을 것입니다.
프로젝트가 없다면, 가상의 프로젝트를 만들어보세요.
그게 곧 사업계획서가 됩니다.

감사합니다.
이 강의의 슬라이드는 아래 링크에서 다시 볼 수 있습니다.
http://isangho.com/study/appdesign

�ݺ�ߣ

앱 디자인 시작하기

More Related Content

앱 디자인 시작하기