SlideShare une entreprise Scribd logo
1  sur  94
앱 디자인 시작하기 
Starting App Design 
2014. 9. 11
자기소개 
안녕하세요. 
다람쥐하우스 디자이너 
이상호입니다. 
http://isangho.com
http://daramghaus.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
2. 앱 디자인 시작하기 
App 
앱은 스마트기기에서 
설치하고, 실행하고, 사용하는 
입니다.
2. 앱 디자인 시작하기 
개발자* 
App 
사용자 
앱을 통해서 사용자에게 
가치와 경험을 제공합니다. 
*여기서 개발자는 앱을 만들어 제공하는 회사나 개인으로, 포괄적 의미로 사용했습니다.
2. 앱 디자인 시작하기 
앱 디자인 
개발자 
App 
사용자 
앱 디자인은 앱이 제공하는 가치와 경험을 
사용자가 제대로 느낄 수 있게 하기 위한 
디자이너로서 해야 할 역할입니다.
2. 앱 디자인 시작하기 
App 
개발자* 디자이너 
앱 디자인은 혼자 하는 것이 아닙니다. 
디자이너와 개발자의 협업이 필요합니다. 
*여기서 개발자는 앱을 만들기 위해 코딩하는 프로그래머를 뜻합니다.
2. 앱 디자인 시작하기 
App 
앱은 스마트기기에서 
설치하고, 실행하고, 사용하는 
입니다.
2. 앱 디자인 시작하기 
설치하고 실행하고 사용하는 
스토어 아이콘 
앱 아이콘 
스크린샷 
런치 이미지 
프로모션 이미지 
튜토리얼 
UI/UX 디자인 
웹사이트, 랜딩 페이지, 광고, SNS 프로필, SNS 커버
2. 앱 디자인 시작하기 
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
2. 앱 디자인 시작하기 
Logotype 
할 일이 정말 많고, 쉬운 일도 아닙니다. 
하지만 우선순위를 정해서 차근차근하다 보면 
할 수 있습니다. 
SNS Cover 
Image
2. 앱 디자인 시작하기 
Logotype 
우선순위에 답은 없고, 
순서는 하다가 계속 바뀔 수도 있습니다. 
한 번에 완성하려고 하지 SNS Cover 
마세요. 
Image
2. 앱 디자인 시작하기 
Logotype 
시작이 막막하면, 다른 앱을 써보세요. 
앱스토어에 있는 비슷한 앱을 
내려받아 써보고, 스크린샷도 SNS Cover 
찍어둡니다. 
Image
3. Case Study 
Paper
Store Icon App Icon Logotype 
Launch Image UI/UX Design Website (Landing page) 
Screenshot SNS Cover / Profile
Launch Image
UI/UX Design
Screenshot
Store Icon App Icon Logotype 
Launch Image UI/UX Design Website (Landing page) 
Screenshot SNS Cover / Profile
Launch Image
UI/UX Design
Screenshot
Mobile Website
Paper 
Store Icon App Icon Logotype 
Launch Image UI/UX Design Website (Landing page) 
Screenshot SNS Cover / Profile
Paper 
Logotype
Paper 
Launch Image
Paper 
UI/UX Design
Paper 
Screenshot
Paper 
Website (Landing page)
Store Icon App Icon Logotype 
Launch Image UI/UX Des http:// Website (Landing page) 
Screenshot SNS Cover / Profile
UI/UX Design
Screenshot
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 디자인 작업 
- 정리해서 개발자에게 넘겨주기
4.1. 화면 디자인 
- 와이어프레임 / 프로토타이핑 
와이어프레임은 말 그대로 선으로 대충 그려보는 것. 
프로토타이핑은 그려놓은 화면을 실제 작동 테스트해보는 것 
! 
이 과정은 디자인을 입히기 전에 아주 중요한 과정으로 
방법은 다양합니다.
4.1. 화면 디자인 
- 와이어프레임 
Google 이미지검색 “App Wireframe”
4.1. 화면 디자인 
- 프로토타이핑 
Google 이미지검색 “App Prototyping”
4.1. 화면 디자인 
- 프로토타이핑 
저는 이 작업을 할 때, 
페이퍼 프로토타이핑 하거나 
POP*앱을 이용합니다. 
POP 
*POP - Prototyping on Paper https://popapp.in 종이에 그린 것을 찍어서 바로 프로토타이핑 해보는 앱
4.1. 화면 디자인 
POP로 대충 잡아봤던 프로토타이핑(가장 우측은 샘플) 
- 프로토타이핑
4.1. 화면 디자인 
- UI 디자인 작업 
프로토타이핑에서 문제가 없다면, 
그래픽툴(포토샵/일러스트레이터)로 
화면을 디자인하기 시작합니다. 
! 
각종 리소스와 참고자료를 최대한 활용하는 것이 
작업을 더 수월하게 하는 방법입니다.
4.1. 화면 디자인 
- UI 디자인 작업 
UI 디자인 작업에 있어 몇 가지 알아뒀으면 하는 점을 
Moment 카메라를 예시로 알려 드리겠습니다.
4.1. 화면 디자인 
- UI 디자인 작업 
Moment Camera http://momentcamera.me
4.1. 화면 디자인 
- UI 디자인 작업 
스크린 크기*로 새 파일을 만듭니다. 
와이어프레임/프로토타이핑을 보며 
화면 디자인을 합니다. 
*스크린 크기 사이트 http://screensiz.es/ 
UI 요소들의 크기를 잘 모르겠다면, 
우선 OS의 디자인 가이드라인을 읽어봐야 합니다. 
잘 정리해둔 UI 템플릿를 받아서 화면에 놓으면서 작업할 수도 있습니다. 
잘 만든 앱을 스크린샷 해서 올려놓고 그려도 
크기에 대해 감을 잡기 좋습니다.
4.1. 화면 디자인 
- UI 디자인 작업 - 디자인 가이드라인 
Apple Design Guide - iOS Design Resources 
https://developer.apple.com/library/ios/design/
4.1. 화면 디자인 
Android Design Guide 
https://developer.android.com/design/ 
http://www.google.com/design/ 
- UI 디자인 작업 - 디자인 가이드라인
4.1. 화면 디자인 
- UI 디자인 작업 - GUI 템플릿 
Teehan+Lex GUI Template 
http://www.teehanlax.com/tools/
4.1. 화면 디자인 
- UI 디자인 작업 
Moment Camera UI 작업 중
4.1. 화면 디자인 
- UI 디자인 작업 - 모양 레이어와 고급 개체 
원형은 ‘모양(Shape)’ 레이어로 작업 아이콘 벡터쉐입은 ‘고급 개체(Smart Object)’로 작업 
포토샵에서 단순한 면은 ‘모양(Shape)” 도구로 그렸고, 
복잡한 아이콘은 일러스트레이터에서 그려서 
고급개체(Smart Object)로 붙여넣어 작업했습니다. 
(벡터 쉐입을 스마트 오브젝트로 하면 픽셀 퍼펙션에 있어서 좀 안 맞을 수 있지만, 
일러스트레이터가 벡터 수정하기 편해서 이런 방식을 썼습니다. 정답은 없으니 알아서 해야 합니다.)
4.1. 화면 디자인 
- UI 디자인 작업 - 버튼의 상태 
카메라 버튼의 밑판, 4가지 상태 
버튼은 4가지 상태가 있습니다. 
기본/활성화/선택/비활성화 
normal / highlighted / selected /disabled 
! 
각 버튼은 버튼 이미지 이름 뒤에 _n / _h / _s / _d 
이런 식으로 이름 붙이는 것을 저는 선호합니다.
4.1. 화면 디자인 
- UI 디자인 작업 - 버튼과 아이콘의 분리 
카메라 버튼의 아이콘과 밑판 
버튼과 아이콘을 분리하면 
확장성을 고려할 수 있는 
장점이 있습니다. 
(로테이션, 다양한 경우의 수에 대응)
4.1. 화면 디자인 
- UI 디자인 작업 - 런치 이미지 
런치 이미지는 의도에 따라 다르게 만듭니다. 
! 
앱 실행부터 자연스럽게 연결되게 하려고 하면, 
첫 화면에서 컨텐츠를 비우고, 
버튼 등은 모두 비활성화된 상태로 만듭니다. 
! 
브랜드 노출을 강조하려면, 또는 처음에 로딩이 좀 걸린다면, 
앱 아이콘과 BI를 노출한 화면을 합니다. 
! 
그냥 검정을 쓰고 페이드인 하기도 합니다. 
Moment Camera 런치이미지
4.1. 화면 디자인 
- UI 디자인 작업 - 분할 영역(Slice) 
파란 선은 분할 영역(Slice) 작업을 한 것입니다. 
UI가 완성 단계로 가게 되면, 개발에 넘겨줄 이미지를 잘라 줘야 하는데*, 
분할 영역(Slice) 기능으로 화면을 잘라서 이미지를 PNG 파일로 뽑아줘야 합니다. 
*UI 잘라내는 작업을 도와주는 포토샵 플러그인이 있습니다. Assistor PS http://witstudio.net/assistor/
4.1. 화면 디자인 
- UI 디자인 작업 - 분할 영역(Slice) - 웹용으로 저장 
웹용으로 저장(Save for Web)
4.1. 화면 디자인 
- UI 디자인 작업 - 웹용으로 저장 
웹용으로 저장(Save for Web)은 UI 작업하면서 굉장히 
자주 접하게 되는 화면일 것입니다. 
이미지 영역을 PNG 파일로 뽑아내는 역할을 합니다. 
! 
이 과정은 UI디자인 하면서 정말 많이 하기 때문에… 
단축키 손 모양만 모아놓은 웹사이트가 있을 정도입니다. 
http://saveforwebclaws.tumblr.com 
웹용으로 저장(Save for Web)
4.1. 화면 디자인 
- UI 디자인 작업 - 작업 화면을 폰으로 보면서 작업하기 
Skala Preview 
http://bjango.com/mac/skalapreview/ 
포토샵과 연동하여, 스마트폰의 앱에서 포토샵 화면을 실시간으로 확인할 수 있습니다. 
UI의 크기가 화면에서 어떻게 보이는지 바로 확인할 수 있어서 매우 편리한 앱입니다.
4.1. 화면 디자인 
- UI 디자인 작업 
UI 디자인 작업에서 고려할 게 참 많습니다. 
책이나 참고사이트를 보면서 공부를 좀 해야 할 겁니다. 
일하다 보면 다른 디자이너한테도 많이 배우고, 
개발자한테도 많이 배웁니다.
4.1. 화면 디자인 
- UI 디자인 작업 - 참고사이트 
PPP (Pixel Perfect Principles) 
PPP - http://ustwo.com/ppp/ 
PPP를 꼭 읽어보고 숙지했으면 합니다. 
이 책은 PDF로 내려받아 볼 수 있는데, 
픽셀 작업의 기본과 레이어 정리, 
각종 포토샵 에티켓까지 총망라된 교과서입니다.
4.1. 화면 디자인 
- UI 디자인 작업 - 참고사이트 
https://dribbble.com 
드리블은 작업 이미지를 공유하는 커뮤니티 기반 
포트폴리오 사이트입니다. 
GUI 디자이너가 많이 활동하고 있습니다. 
Dribbble
4.1. 화면 디자인 
- UI 디자인 작업 - 참고사이트 
http://iosfonts.com 
iOS에서 사용할 수 있는 폰트 리스트를 보여주고, 
테스트해볼 수 있습니다. 
iOS 내장 폰트 하위호환성을 확인할 때 유용합니다. 
iOS Fonts
4.1. 화면 디자인 
- 정리해서 개발자에게 넘겨주기 
저는 이 과정에 많은 공을 들이는데, 
이 과정은 사람마다 회사마다 많이 다를 것입니다. 
! 
이 과정을 통해서 개발자에게 디자인을 어떻게 만들어야 할지 
의사소통을 하게 되고, 개발을 진행할 수 있게 리소스를 정리해줍니다. 
! 
개발자가 알기 쉽게 정리한 문서와 스크린샷, 이미지 리소스를 
묶어서 전달해줍니다. 보통은 개발자들이 선호하는 스타일이 있을 겁니다.
4.1. 화면 디자인 
- 정리해서 개발자에게 넘겨주기 
개발자에게 넘겨줬던 문서들…
4.2. 앱 아이콘 디자인 
작업 순서 
- 리서치 
- 스케치 
- 디지털 작업 
- 파일로 저장 
- 기기 테스트
4.2. 앱 아이콘 디자인 
- 리서치 
리서치는 시장조사 겸 앱스토어에서…
4.2. 앱 아이콘 디자인 
- 리서치 
참고하려고 Dribbble 에서…
4.2. 앱 아이콘 디자인 
- 스케치 
Google 이미지검색 “App Icon Sketch”
4.2. 앱 아이콘 디자인 
- 스케치 
Moment 카메라의 스케치, 일러스트레이션
4.2. 앱 아이콘 디자인 
- 디지털 작업 
스케치를 마쳤다면, 디지털 작업으로 넘어옵니다. 
새 파일을 만듭니다. 
해상도: 1024x1024 px 
역시 디자이너마다 작업 다를 수 있는데, 
저는 1024px로 작업하고 앱 아이콘은 축소합니다. 
1024px의 아이콘이 스토어 아이콘으로 쓰입니다.
4.2. 앱 아이콘 디자인 
- 디지털 작업 
Moment 카메라 아이콘 (1.0, 1.3, 1.4~) 
아이폰 아이콘은 iOS6에서 7로 올라가면서 라운드가 변했습니다. 
iOS7부터는 라운드값을 일반적인 라운드로는 그릴 수 없습니다.* 
라운드의 밖은 색을 다 채워야 합니다. 
iOS 마스크 다운로드 http://daramghaus.com/icontester/mask
4.2. 앱 아이콘 디자인 
- 파일로 저장 
OS에 따라 아이콘 파일명과 규격이 정해져 있습니다. 
이미지를 축소할 때는 화질 열화(깨지는 현상)가 생기지 않아야 합니다. 
Photozoom pro로 축소하면 화질 열화가 적습니다. http://www.benvista.com/photozoompro
4.2. 앱 아이콘 디자인 
- 파일로 저장 - Icon Tester 
Icon Tester를 이용해보세요. 
아이콘 테스터는 디자이너를 위한 아이콘 테스트 솔루션입니다. 
내려받아 폴더를 풀고, 각각의 이미지를 같은 해상도의 파일로 대치시켜보세요. 
http://daramghaus.com/icontester/
4.2. 앱 아이콘 디자인 
- 기기 테스트 - Icon Tester 
Icon Tester는 제가 직접 테스트를 하기 위해 만든 솔루션입니다. 사이트에 접속해서 내려받습니다. 
내려받은 폴더의 이미지를 본인이 작업한 파일로 대치하고, 개인 웹서버에 올립니다. 
아이폰 사파리에서 ‘홈 화면에 추가’하면 아이콘이 홈 화면에 생깁니다. 
(안드로이드는 크롬 북마크로 지원 - 실제 빌드보다 조금 작게 보임) 
http://daramghaus.com/icontester/
4.3. 웹사이트 렌딩페이지 
Website (Landing page)
4.3. 웹사이트 렌딩페이지 
Paper 
Website (Landing page)
4.3. 웹사이트 렌딩페이지 
Mobile Website
4.3. 웹사이트 렌딩페이지 
Website Landing page
4.4. 스크린샷 
Cool Kindness 
앱의 브랜드 인지도나 스타일, 톤앤매너를 고려하세요. 
아이폰은 앱을 업데이트해야 스크린샷을 바꿀 수 있습니다.
4.4. 스크린샷 
Screenshot
4.4. 스크린샷 
Paper 
Screenshot
4.4. 스크린샷 
Screenshot
4.4. 스크린샷 
Screenshot
4.4. 스크린샷 
Screenshot
4.5. SNS 및 홍보 
Moment 카메라 Facebook 커버이미지 업데이트 홍보 이미지 
앱 디자인을 마치고, SNS 커버, 프로필 사진 및 홍보이미지를 올리고 나면, 
출시 준비가 다 끝난 셈입니다. 이제 앱 테스트를 하고 출시를 준비하면 됩니다. 
앱 디자인의 끝은 또 다른 시작입니다. 앱을 홍보하고, 고객의 반응을 살피고, 
피드백을 받고, 업데이트도 해야 합니다.
5. 마치며 
! 
처음이라 부족한 강의였지만, 
제 강의가 도움되었기를 바랍니다. 
감사합니다. 
디자인 분야 중 특히 이쪽 분야는 새로운 환경에 꾸준히 적응해야 
살아갈 수 있습니다. 관심을 두고 많이 보고 많이 써보기 바랍니다. 
그리고 처음부터 잘하는 사람은 없습니다. 프로젝트 하나 할 때마다 
부쩍 실력이 느는 자신을 발견할 수 있을 것입니다. 
프로젝트가 없다면, 가상의 프로젝트를 만들어보세요. 
그게 곧 사업계획서가 됩니다.
감사합니다. 
이 강의의 슬라이드는 아래 링크에서 다시 볼 수 있습니다. 
http://isangho.com/study/appdesign

Contenu connexe

Tendances

CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~SEGADevTech
 
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)소프트웨어 부트캠프 설계 및 운영사례(42Seoul)
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)수보 김
 
NDC2013 - 심리학으로 다시 보는 게임 디자인
NDC2013 - 심리학으로 다시 보는 게임 디자인NDC2013 - 심리학으로 다시 보는 게임 디자인
NDC2013 - 심리학으로 다시 보는 게임 디자인Jubok Kim
 
第一回リグナイト『リガーアニメーター座談会その①』資料
第一回リグナイト『リガーアニメーター座談会その①』資料第一回リグナイト『リガーアニメーター座談会その①』資料
第一回リグナイト『リガーアニメーター座談会その①』資料BACKBONE-studio
 
「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用ESM SEC
 
脱UniRx&Croutineから始めるUniTask
脱UniRx&Croutineから始めるUniTask脱UniRx&Croutineから始めるUniTask
脱UniRx&Croutineから始めるUniTaskEuglenaching
 
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜KLab Inc. / Tech
 
オープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリオープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリ陽平 山口
 
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017Koichi Yoshida
 
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介torisoup
 
Node canvasで作るプロトタイプ
Node canvasで作るプロトタイプNode canvasで作るプロトタイプ
Node canvasで作るプロトタイプH T
 
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법MinGeun Park
 
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作Sho Iwamoto
 
애자일 게임 개발이란?
애자일 게임 개발이란?애자일 게임 개발이란?
애자일 게임 개발이란?Kay Kim
 
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법강 민우
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVCTakashi Komada
 
확률의 구현법
확률의 구현법확률의 구현법
확률의 구현법
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜Unity Technologies Japan K.K.
 
pytest × TDD テスト駆動開発のススメ
pytest × TDD テスト駆動開発のススメpytest × TDD テスト駆動開発のススメ
pytest × TDD テスト駆動開発のススメiRidge, Inc.
 

Tendances (20)

CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
CEDEC2021 Android iOS 実機上での自動テストをより楽に有意義にする為に ~端末管理・イメージ転送・動画記録等の周辺情報のノウハウ共有~
 
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)소프트웨어 부트캠프 설계 및 운영사례(42Seoul)
소프트웨어 부트캠프 설계 및 운영사례(42Seoul)
 
NDC2013 - 심리학으로 다시 보는 게임 디자인
NDC2013 - 심리학으로 다시 보는 게임 디자인NDC2013 - 심리학으로 다시 보는 게임 디자인
NDC2013 - 심리학으로 다시 보는 게임 디자인
 
第一回リグナイト『リガーアニメーター座談会その①』資料
第一回リグナイト『リガーアニメーター座談会その①』資料第一回リグナイト『リガーアニメーター座談会その①』資料
第一回リグナイト『リガーアニメーター座談会その①』資料
 
「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用「Entity Framework Coreを使ってみる」 公開用
「Entity Framework Coreを使ってみる」 公開用
 
脱UniRx&Croutineから始めるUniTask
脱UniRx&Croutineから始めるUniTask脱UniRx&Croutineから始めるUniTask
脱UniRx&Croutineから始めるUniTask
 
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
『ラブライブ!スクールアイドルフェスティバル ALL STARS』を支えるビルドパイプライン 〜より安定したサービス提供を目指して〜
 
テスト自動化入門@Graat勉強会
テスト自動化入門@Graat勉強会テスト自動化入門@Graat勉強会
テスト自動化入門@Graat勉強会
 
オープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリオープンソースで作るスマホ文字認識アプリ
オープンソースで作るスマホ文字認識アプリ
 
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017
チームをワークさせるために 最も大事なコミュニケーション 意識していますか? - XP祭り2017
 
Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介Unity開発で使える設計の話+Zenjectの紹介
Unity開発で使える設計の話+Zenjectの紹介
 
Node canvasで作るプロトタイプ
Node canvasで作るプロトタイプNode canvasで作るプロトタイプ
Node canvasで作るプロトタイプ
 
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법
[NHN_NEXT] 게임 휴먼 프로젝트 CI + GitHub 세팅 방법
 
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
MusicEngine for Unity/ADX2を使った簡単音楽同期ゲーム制作
 
애자일 게임 개발이란?
애자일 게임 개발이란?애자일 게임 개발이란?
애자일 게임 개발이란?
 
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법
[IGC2018] 펄어비스 강건우 - 펄어비스에서 기획자가 일하는 방법
 
ゲーム開発とMVC
ゲーム開発とMVCゲーム開発とMVC
ゲーム開発とMVC
 
확률의 구현법
확률의 구현법확률의 구현법
확률의 구현법
 
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
【Unity道場】AssetGraph入門 〜ノードを駆使しててUnityの面倒な手作業を自動化する方法〜
 
pytest × TDD テスト駆動開発のススメ
pytest × TDD テスト駆動開発のススメpytest × TDD テスト駆動開発のススメ
pytest × TDD テスト駆動開発のススメ
 

Similaire à 앱 디자인 시작하기

앱팀메이킹1111381
앱팀메이킹1111381앱팀메이킹1111381
앱팀메이킹1111381Jungsook Baek
 
앱팀메이킹
앱팀메이킹앱팀메이킹
앱팀메이킹Jungsook Baek
 
앱팀메이킹
앱팀메이킹앱팀메이킹
앱팀메이킹Jungsook Baek
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop성관 윤
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔NAVER D2
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427Will Kim
 
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)SeHeung Oh
 
Sencha 사용후기
Sencha 사용후기Sencha 사용후기
Sencha 사용후기Younuk Park
 
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기Soojin Ro
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.designJeongeun Kwon
 
[LIBBON] (Uxui기획)서정환 포트폴리오
[LIBBON] (Uxui기획)서정환 포트폴리오[LIBBON] (Uxui기획)서정환 포트폴리오
[LIBBON] (Uxui기획)서정환 포트폴리오libbonkorea
 
Sencha architect2 사용후기
Sencha architect2 사용후기Sencha architect2 사용후기
Sencha architect2 사용후기claird00
 
기획안 만들기
기획안 만들기기획안 만들기
기획안 만들기BongSoo Jang
 
포트폴리오 김규하
포트폴리오 김규하포트폴리오 김규하
포트폴리오 김규하GyooHa Kim
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용jinwook shin
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4Usys4u
 
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4Usys4u
 

Similaire à 앱 디자인 시작하기 (20)

앱팀메이킹1111381
앱팀메이킹1111381앱팀메이킹1111381
앱팀메이킹1111381
 
앱팀메이킹
앱팀메이킹앱팀메이킹
앱팀메이킹
 
앱팀메이킹
앱팀메이킹앱팀메이킹
앱팀메이킹
 
LingoStar iPhone App Design Workshop
LingoStar iPhone App Design WorkshopLingoStar iPhone App Design Workshop
LingoStar iPhone App Design Workshop
 
[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔[124] 하이브리드 앱 개발기 김한솔
[124] 하이브리드 앱 개발기 김한솔
 
How to implement your dream 20150427
How to implement your dream 20150427How to implement your dream 20150427
How to implement your dream 20150427
 
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)
앱 스크린샷을 최적화하는 방법 (How to optimize App screenshot)
 
Sencha 사용후기
Sencha 사용후기Sencha 사용후기
Sencha 사용후기
 
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
D2 캠퍼스 세미나 - 학생 개발자에서 신입 개발자로 한단계 업그레이드 하기
 
Sencha
SenchaSencha
Sencha
 
9th.lecture.ui.design
9th.lecture.ui.design9th.lecture.ui.design
9th.lecture.ui.design
 
[LIBBON] (Uxui기획)서정환 포트폴리오
[LIBBON] (Uxui기획)서정환 포트폴리오[LIBBON] (Uxui기획)서정환 포트폴리오
[LIBBON] (Uxui기획)서정환 포트폴리오
 
Sencha architect2 사용후기
Sencha architect2 사용후기Sencha architect2 사용후기
Sencha architect2 사용후기
 
기획안 만들기
기획안 만들기기획안 만들기
기획안 만들기
 
포트폴리오 김규하
포트폴리오 김규하포트폴리오 김규하
포트폴리오 김규하
 
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용K모바일발표 120113 남들보다뛰어난앱만들기_공유용
K모바일발표 120113 남들보다뛰어난앱만들기_공유용
 
Architect
ArchitectArchitect
Architect
 
Yeonseo idea
Yeonseo ideaYeonseo idea
Yeonseo idea
 
iOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4UiOS Human_Interface_Guidlines_#1_SYS4U
iOS Human_Interface_Guidlines_#1_SYS4U
 
iOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4UiOS Human_Interface_Guidlines_#2_SYS4U
iOS Human_Interface_Guidlines_#2_SYS4U
 

앱 디자인 시작하기

  • 1. 앱 디자인 시작하기 Starting App Design 2014. 9. 11
  • 2. 자기소개 안녕하세요. 다람쥐하우스 디자이너 이상호입니다. http://isangho.com
  • 5. 2010 2011 PingPing SwingSwing 2012 2013 2014 Motion SwingSwing Touch mymenu 홍익시디2011 홍익시디2012 다람쥐하우스 VideoSnapshot Toolkit+ Moment Camera BShutter Icon Tester Tagshot Eggshot 한빗페이
  • 6. 강의 순서 1. 강의에 들어가며 2. 앱 디자인 시작하기 3. Case Study 4. 작업하기 5. 마치며
  • 7. 1. 강의에 들어가며 이 강의는 앱 디자인을 시작하는 디자이너를 위한 강의입니다. 이 강의의 슬라이드는 아래 링크에서 다시 볼 수 있습니다. http://isangho.com/study/appdesign
  • 8. 2. 앱 디자인 시작하기 App 앱은 스마트기기에서 설치하고, 실행하고, 사용하는 입니다.
  • 9. 2. 앱 디자인 시작하기 개발자* App 사용자 앱을 통해서 사용자에게 가치와 경험을 제공합니다. *여기서 개발자는 앱을 만들어 제공하는 회사나 개인으로, 포괄적 의미로 사용했습니다.
  • 10. 2. 앱 디자인 시작하기 앱 디자인 개발자 App 사용자 앱 디자인은 앱이 제공하는 가치와 경험을 사용자가 제대로 느낄 수 있게 하기 위한 디자이너로서 해야 할 역할입니다.
  • 11. 2. 앱 디자인 시작하기 App 개발자* 디자이너 앱 디자인은 혼자 하는 것이 아닙니다. 디자이너와 개발자의 협업이 필요합니다. *여기서 개발자는 앱을 만들기 위해 코딩하는 프로그래머를 뜻합니다.
  • 12. 2. 앱 디자인 시작하기 App 앱은 스마트기기에서 설치하고, 실행하고, 사용하는 입니다.
  • 13. 2. 앱 디자인 시작하기 설치하고 실행하고 사용하는 스토어 아이콘 앱 아이콘 스크린샷 런치 이미지 프로모션 이미지 튜토리얼 UI/UX 디자인 웹사이트, 랜딩 페이지, 광고, SNS 프로필, SNS 커버
  • 14. 2. 앱 디자인 시작하기 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
  • 15. 2. 앱 디자인 시작하기 Logotype 할 일이 정말 많고, 쉬운 일도 아닙니다. 하지만 우선순위를 정해서 차근차근하다 보면 할 수 있습니다. SNS Cover Image
  • 16. 2. 앱 디자인 시작하기 Logotype 우선순위에 답은 없고, 순서는 하다가 계속 바뀔 수도 있습니다. 한 번에 완성하려고 하지 SNS Cover 마세요. Image
  • 17. 2. 앱 디자인 시작하기 Logotype 시작이 막막하면, 다른 앱을 써보세요. 앱스토어에 있는 비슷한 앱을 내려받아 써보고, 스크린샷도 SNS Cover 찍어둡니다. Image
  • 18. 3. Case Study Paper
  • 19. Store Icon App Icon Logotype Launch Image UI/UX Design Website (Landing page) Screenshot SNS Cover / Profile
  • 23. Store Icon App Icon Logotype Launch Image UI/UX Design Website (Landing page) Screenshot SNS Cover / Profile
  • 28. Paper Store Icon App Icon Logotype Launch Image UI/UX Design Website (Landing page) Screenshot SNS Cover / Profile
  • 34. Store Icon App Icon Logotype Launch Image UI/UX Des http:// Website (Landing page) Screenshot SNS Cover / Profile
  • 38. 3. Case Study 사례 연구는 여기까지 하겠습니다. 좋은 앱을 많이 써보고, 그때그때 스크린샷 해두고, 스크린샷만 따로 모이게끔 IFTTT* 서비스를 이용하거나, iPhoto 스마트 앨범을 만들어 쓰면 나중에 찾아볼 때 도움이 됩니다. *IFTTT(https://ifttt.com): IF(만약) This then(이렇게 하면) That(이렇게 해). 이런 식으로 Recipe를 만들어 쓰는 유틸리티 앱입니다. 예) “만약 스크린샷을 찍으면, 드롭박스에 올려”
  • 39. 4. 작업하기 이제 작업을 시작합니다. 제가 작업한 프로젝트를 예시로 보여드리겠습니다.
  • 40. 4. 작업하기 앱 디자인에 필요한 작업은 이 정도입니다. - 앱 아이콘 - 화면 디자인 - 앱스토어 스크린샷 - SNS 커버/프로필 - 웹사이트 랜딩 페이지 이 많은 것을 쳐내야 합니다. 먼저 앱 내적인 것과 앱 외적인 것을 나눕니다. 그래야 우선순위를 정할 수 있습니다.
  • 41. 4. 작업하기 앱 내적인 것 - 앱 아이콘 - 화면 디자인 앱 외적인 것 - 앱스토어 스크린샷 - SNS 커버/프로필 - 웹사이트 랜딩 페이지 먼저 앱 내적인 것과(개발과 직접 연관), 앱 외적인 것(홍보와 마케팅적 요소)을 나눕니다. 앱 내적인 것이 개발자에게 넘겨줘야 하므로 우선순위가 높습니다. 이제 작업 일정을 대강 짜보겠습니다. 일정은 개발자와 잘 조율해서 짜야 합니다.
  • 42. 4. 작업하기 작업 일정 개발자 공유 개발자 공유 피드백 반영 최종 검토 마무리 우선 순위 시간 앱 아이콘 화면 디자인 앱 아이콘 웹사이트 랜딩 페이지 스크린샷 SNS 테스트/점검 개발자 공유 피드백 반영 런칭 준비
  • 43. 4. 작업하기 1. 화면 디자인 2. 앱 아이콘 디자인 3. 웹사이트 랜딩 페이지 4. 스크린샷 5. SNS 및 홍보
  • 44. 4.1. 화면 디자인 작업 순서 - 와이어프레임 - 프로토타이핑 - UI 디자인 작업 - 정리해서 개발자에게 넘겨주기
  • 45. 4.1. 화면 디자인 - 와이어프레임 / 프로토타이핑 와이어프레임은 말 그대로 선으로 대충 그려보는 것. 프로토타이핑은 그려놓은 화면을 실제 작동 테스트해보는 것 ! 이 과정은 디자인을 입히기 전에 아주 중요한 과정으로 방법은 다양합니다.
  • 46. 4.1. 화면 디자인 - 와이어프레임 Google 이미지검색 “App Wireframe”
  • 47. 4.1. 화면 디자인 - 프로토타이핑 Google 이미지검색 “App Prototyping”
  • 48. 4.1. 화면 디자인 - 프로토타이핑 저는 이 작업을 할 때, 페이퍼 프로토타이핑 하거나 POP*앱을 이용합니다. POP *POP - Prototyping on Paper https://popapp.in 종이에 그린 것을 찍어서 바로 프로토타이핑 해보는 앱
  • 49. 4.1. 화면 디자인 POP로 대충 잡아봤던 프로토타이핑(가장 우측은 샘플) - 프로토타이핑
  • 50. 4.1. 화면 디자인 - UI 디자인 작업 프로토타이핑에서 문제가 없다면, 그래픽툴(포토샵/일러스트레이터)로 화면을 디자인하기 시작합니다. ! 각종 리소스와 참고자료를 최대한 활용하는 것이 작업을 더 수월하게 하는 방법입니다.
  • 51. 4.1. 화면 디자인 - UI 디자인 작업 UI 디자인 작업에 있어 몇 가지 알아뒀으면 하는 점을 Moment 카메라를 예시로 알려 드리겠습니다.
  • 52. 4.1. 화면 디자인 - UI 디자인 작업 Moment Camera http://momentcamera.me
  • 53. 4.1. 화면 디자인 - UI 디자인 작업 스크린 크기*로 새 파일을 만듭니다. 와이어프레임/프로토타이핑을 보며 화면 디자인을 합니다. *스크린 크기 사이트 http://screensiz.es/ UI 요소들의 크기를 잘 모르겠다면, 우선 OS의 디자인 가이드라인을 읽어봐야 합니다. 잘 정리해둔 UI 템플릿를 받아서 화면에 놓으면서 작업할 수도 있습니다. 잘 만든 앱을 스크린샷 해서 올려놓고 그려도 크기에 대해 감을 잡기 좋습니다.
  • 54. 4.1. 화면 디자인 - UI 디자인 작업 - 디자인 가이드라인 Apple Design Guide - iOS Design Resources https://developer.apple.com/library/ios/design/
  • 55. 4.1. 화면 디자인 Android Design Guide https://developer.android.com/design/ http://www.google.com/design/ - UI 디자인 작업 - 디자인 가이드라인
  • 56. 4.1. 화면 디자인 - UI 디자인 작업 - GUI 템플릿 Teehan+Lex GUI Template http://www.teehanlax.com/tools/
  • 57. 4.1. 화면 디자인 - UI 디자인 작업 Moment Camera UI 작업 중
  • 58. 4.1. 화면 디자인 - UI 디자인 작업 - 모양 레이어와 고급 개체 원형은 ‘모양(Shape)’ 레이어로 작업 아이콘 벡터쉐입은 ‘고급 개체(Smart Object)’로 작업 포토샵에서 단순한 면은 ‘모양(Shape)” 도구로 그렸고, 복잡한 아이콘은 일러스트레이터에서 그려서 고급개체(Smart Object)로 붙여넣어 작업했습니다. (벡터 쉐입을 스마트 오브젝트로 하면 픽셀 퍼펙션에 있어서 좀 안 맞을 수 있지만, 일러스트레이터가 벡터 수정하기 편해서 이런 방식을 썼습니다. 정답은 없으니 알아서 해야 합니다.)
  • 59. 4.1. 화면 디자인 - UI 디자인 작업 - 버튼의 상태 카메라 버튼의 밑판, 4가지 상태 버튼은 4가지 상태가 있습니다. 기본/활성화/선택/비활성화 normal / highlighted / selected /disabled ! 각 버튼은 버튼 이미지 이름 뒤에 _n / _h / _s / _d 이런 식으로 이름 붙이는 것을 저는 선호합니다.
  • 60. 4.1. 화면 디자인 - UI 디자인 작업 - 버튼과 아이콘의 분리 카메라 버튼의 아이콘과 밑판 버튼과 아이콘을 분리하면 확장성을 고려할 수 있는 장점이 있습니다. (로테이션, 다양한 경우의 수에 대응)
  • 61. 4.1. 화면 디자인 - UI 디자인 작업 - 런치 이미지 런치 이미지는 의도에 따라 다르게 만듭니다. ! 앱 실행부터 자연스럽게 연결되게 하려고 하면, 첫 화면에서 컨텐츠를 비우고, 버튼 등은 모두 비활성화된 상태로 만듭니다. ! 브랜드 노출을 강조하려면, 또는 처음에 로딩이 좀 걸린다면, 앱 아이콘과 BI를 노출한 화면을 합니다. ! 그냥 검정을 쓰고 페이드인 하기도 합니다. Moment Camera 런치이미지
  • 62. 4.1. 화면 디자인 - UI 디자인 작업 - 분할 영역(Slice) 파란 선은 분할 영역(Slice) 작업을 한 것입니다. UI가 완성 단계로 가게 되면, 개발에 넘겨줄 이미지를 잘라 줘야 하는데*, 분할 영역(Slice) 기능으로 화면을 잘라서 이미지를 PNG 파일로 뽑아줘야 합니다. *UI 잘라내는 작업을 도와주는 포토샵 플러그인이 있습니다. Assistor PS http://witstudio.net/assistor/
  • 63. 4.1. 화면 디자인 - UI 디자인 작업 - 분할 영역(Slice) - 웹용으로 저장 웹용으로 저장(Save for Web)
  • 64. 4.1. 화면 디자인 - UI 디자인 작업 - 웹용으로 저장 웹용으로 저장(Save for Web)은 UI 작업하면서 굉장히 자주 접하게 되는 화면일 것입니다. 이미지 영역을 PNG 파일로 뽑아내는 역할을 합니다. ! 이 과정은 UI디자인 하면서 정말 많이 하기 때문에… 단축키 손 모양만 모아놓은 웹사이트가 있을 정도입니다. http://saveforwebclaws.tumblr.com 웹용으로 저장(Save for Web)
  • 65. 4.1. 화면 디자인 - UI 디자인 작업 - 작업 화면을 폰으로 보면서 작업하기 Skala Preview http://bjango.com/mac/skalapreview/ 포토샵과 연동하여, 스마트폰의 앱에서 포토샵 화면을 실시간으로 확인할 수 있습니다. UI의 크기가 화면에서 어떻게 보이는지 바로 확인할 수 있어서 매우 편리한 앱입니다.
  • 66. 4.1. 화면 디자인 - UI 디자인 작업 UI 디자인 작업에서 고려할 게 참 많습니다. 책이나 참고사이트를 보면서 공부를 좀 해야 할 겁니다. 일하다 보면 다른 디자이너한테도 많이 배우고, 개발자한테도 많이 배웁니다.
  • 67. 4.1. 화면 디자인 - UI 디자인 작업 - 참고사이트 PPP (Pixel Perfect Principles) PPP - http://ustwo.com/ppp/ PPP를 꼭 읽어보고 숙지했으면 합니다. 이 책은 PDF로 내려받아 볼 수 있는데, 픽셀 작업의 기본과 레이어 정리, 각종 포토샵 에티켓까지 총망라된 교과서입니다.
  • 68. 4.1. 화면 디자인 - UI 디자인 작업 - 참고사이트 https://dribbble.com 드리블은 작업 이미지를 공유하는 커뮤니티 기반 포트폴리오 사이트입니다. GUI 디자이너가 많이 활동하고 있습니다. Dribbble
  • 69. 4.1. 화면 디자인 - UI 디자인 작업 - 참고사이트 http://iosfonts.com iOS에서 사용할 수 있는 폰트 리스트를 보여주고, 테스트해볼 수 있습니다. iOS 내장 폰트 하위호환성을 확인할 때 유용합니다. iOS Fonts
  • 70. 4.1. 화면 디자인 - 정리해서 개발자에게 넘겨주기 저는 이 과정에 많은 공을 들이는데, 이 과정은 사람마다 회사마다 많이 다를 것입니다. ! 이 과정을 통해서 개발자에게 디자인을 어떻게 만들어야 할지 의사소통을 하게 되고, 개발을 진행할 수 있게 리소스를 정리해줍니다. ! 개발자가 알기 쉽게 정리한 문서와 스크린샷, 이미지 리소스를 묶어서 전달해줍니다. 보통은 개발자들이 선호하는 스타일이 있을 겁니다.
  • 71. 4.1. 화면 디자인 - 정리해서 개발자에게 넘겨주기 개발자에게 넘겨줬던 문서들…
  • 72. 4.2. 앱 아이콘 디자인 작업 순서 - 리서치 - 스케치 - 디지털 작업 - 파일로 저장 - 기기 테스트
  • 73. 4.2. 앱 아이콘 디자인 - 리서치 리서치는 시장조사 겸 앱스토어에서…
  • 74. 4.2. 앱 아이콘 디자인 - 리서치 참고하려고 Dribbble 에서…
  • 75. 4.2. 앱 아이콘 디자인 - 스케치 Google 이미지검색 “App Icon Sketch”
  • 76. 4.2. 앱 아이콘 디자인 - 스케치 Moment 카메라의 스케치, 일러스트레이션
  • 77. 4.2. 앱 아이콘 디자인 - 디지털 작업 스케치를 마쳤다면, 디지털 작업으로 넘어옵니다. 새 파일을 만듭니다. 해상도: 1024x1024 px 역시 디자이너마다 작업 다를 수 있는데, 저는 1024px로 작업하고 앱 아이콘은 축소합니다. 1024px의 아이콘이 스토어 아이콘으로 쓰입니다.
  • 78. 4.2. 앱 아이콘 디자인 - 디지털 작업 Moment 카메라 아이콘 (1.0, 1.3, 1.4~) 아이폰 아이콘은 iOS6에서 7로 올라가면서 라운드가 변했습니다. iOS7부터는 라운드값을 일반적인 라운드로는 그릴 수 없습니다.* 라운드의 밖은 색을 다 채워야 합니다. iOS 마스크 다운로드 http://daramghaus.com/icontester/mask
  • 79. 4.2. 앱 아이콘 디자인 - 파일로 저장 OS에 따라 아이콘 파일명과 규격이 정해져 있습니다. 이미지를 축소할 때는 화질 열화(깨지는 현상)가 생기지 않아야 합니다. Photozoom pro로 축소하면 화질 열화가 적습니다. http://www.benvista.com/photozoompro
  • 80. 4.2. 앱 아이콘 디자인 - 파일로 저장 - Icon Tester Icon Tester를 이용해보세요. 아이콘 테스터는 디자이너를 위한 아이콘 테스트 솔루션입니다. 내려받아 폴더를 풀고, 각각의 이미지를 같은 해상도의 파일로 대치시켜보세요. http://daramghaus.com/icontester/
  • 81. 4.2. 앱 아이콘 디자인 - 기기 테스트 - Icon Tester Icon Tester는 제가 직접 테스트를 하기 위해 만든 솔루션입니다. 사이트에 접속해서 내려받습니다. 내려받은 폴더의 이미지를 본인이 작업한 파일로 대치하고, 개인 웹서버에 올립니다. 아이폰 사파리에서 ‘홈 화면에 추가’하면 아이콘이 홈 화면에 생깁니다. (안드로이드는 크롬 북마크로 지원 - 실제 빌드보다 조금 작게 보임) http://daramghaus.com/icontester/
  • 82. 4.3. 웹사이트 렌딩페이지 Website (Landing page)
  • 83. 4.3. 웹사이트 렌딩페이지 Paper Website (Landing page)
  • 85. 4.3. 웹사이트 렌딩페이지 Website Landing page
  • 86. 4.4. 스크린샷 Cool Kindness 앱의 브랜드 인지도나 스타일, 톤앤매너를 고려하세요. 아이폰은 앱을 업데이트해야 스크린샷을 바꿀 수 있습니다.
  • 92. 4.5. SNS 및 홍보 Moment 카메라 Facebook 커버이미지 업데이트 홍보 이미지 앱 디자인을 마치고, SNS 커버, 프로필 사진 및 홍보이미지를 올리고 나면, 출시 준비가 다 끝난 셈입니다. 이제 앱 테스트를 하고 출시를 준비하면 됩니다. 앱 디자인의 끝은 또 다른 시작입니다. 앱을 홍보하고, 고객의 반응을 살피고, 피드백을 받고, 업데이트도 해야 합니다.
  • 93. 5. 마치며 ! 처음이라 부족한 강의였지만, 제 강의가 도움되었기를 바랍니다. 감사합니다. 디자인 분야 중 특히 이쪽 분야는 새로운 환경에 꾸준히 적응해야 살아갈 수 있습니다. 관심을 두고 많이 보고 많이 써보기 바랍니다. 그리고 처음부터 잘하는 사람은 없습니다. 프로젝트 하나 할 때마다 부쩍 실력이 느는 자신을 발견할 수 있을 것입니다. 프로젝트가 없다면, 가상의 프로젝트를 만들어보세요. 그게 곧 사업계획서가 됩니다.
  • 94. 감사합니다. 이 강의의 슬라이드는 아래 링크에서 다시 볼 수 있습니다. http://isangho.com/study/appdesign