2013년 11월 진행된 어시스터PS 모바일 디자인가이드 교육세미나의 교육자료를 공개합니다.
We share the seminar materials for 'Mobile Design Guidelines Tips by Assistor PS'.
Assistor official site - http://assistor.net
Assistor Facebook - https://www.facebook.com/assistorAPP/
7. 디자인 가이드?
착각하기 쉬운 프로세스
디자인 완성!
디자인가이드 작성!
개발 완성!
원하는 정보는 개발자마다 모두 다름
필요한 정보도 상황에 따라 모두 다름
결국 재작업은 불가피하고 인력/시간 낭비가 심함
모든 다툼의 근원이 되는 경우가 많음
8. 디자인 가이드?
권장 프로세스
디자인 완성!
사전 협의!
디자인가이드 작성!
개발 완성!
(설계 단계)
개발자와 A부터 Z까지 꼼꼼히 사전 협의 권장
매 프로젝트마다 항상 사전 협의 해야함 (개발사(자)마다 스타일이 다름)
사전 협의 없이 속편하게 모든 수치 정보를 표기해 주겠다는 생각은 가장 위험 (서로 힘듦)
15. 교육 – 실무 지식
수치 단위 이해하기
px, pt, dpi, sp 등
착각 1 :
px(pixel)과 pt(point)는 서로 다른 단위
포토샵 캔버스 해상도를 보통 72dpi로 지정하기 때문에 같은 단위로 착각할 수 있음
> 내용 참고 (Spoqa Tech Blog – 픽셀과 포인트)
착각 2 :
sp, dp는 상대적인 수치
자신이 어떤 플랫폼/디바이스를 위한 프로젝트를 하고 있는지 정확히 인식하고 있어야 함
dp값은 해상도에 따라 다름 : ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi …
sp값도 해상도에 따라 다름 : hdpi에서의 sp값인가? xxhdpi에서의 sp값인가?
16. 교육 – 실무 지식
‘절대 수치 VS 상대 수치’ 확인 1
안드로이드 디자인의 경우 해상도, 비율 변경을 항상 고려해야 함
…
Screen
100
Screen
Screen
100
Screen
Screen
…
절대 수치
Screen
X
상대 수치
O
100
17. 교육 – 실무 지식
‘절대 수치 VS 상대 수치’ 확인 2
절대적으로 변경되지 말아야 하는 않는 부분을 제외하고 모두 상대적인 수치를 표기해야
아래처럼 다양한 디바이스 환경에서의 가변상황에 대처할 수 있음
> 내용 참고 (KMSHACK Blog – 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 4. 가이드 작성법 1)
갤럭시 탭
갤럭시 S4
옵티머스 G
넥서스 4
18. 교육 – 실무 지식
이미지 처리 여부 확인
단순한 컬러로 처리된 디자인은 굳이 이미지 파일로 일일이 잘라낼 필요는 없음
대부분 컬러코드를 넘기는 것 만으로 개발쪽에서 구현이 가능함
배경을
이미지 파일로 구현
배경을
개발에서 구현
or
main_bg.png
#10914d
19. 교육 – 실무 지식
개발쪽 지원 기술을 미리 확인 (플랫폼 기술 범위)
개발쪽에서 지원하는 기술을 미리 파악해야 그 상황에 맞는 이미지 리소스 생성이 가능
글로시 지원 X
마스크 지원 O
그림자 지원 O
ex : 개발쪽에서 그림자 구현이 가능함에도
이미지 리소스를 그림자와 함께 자르면 실수 -> 재작업 해야함
20. 교육 – 실무 지식
텍스트 처리 방법 확인
최근에는 텍스트를 이미지 파일로 잘라주는 경우는 거의 없음
텍스트를 개발쪽에서 구현할 수 있도록 모든 정보를 표기해야 함(폰트명, 크기, 컬러코드 등)
텍스트를 이미지로 처리
텍스트를 개발에서 처리
or
GothamRounded Book
28 PT
txt_ex.png
#22AF5D
21. 교육 – 실무 지식
텍스트 영역의 크기는? (Ctrl + T는 거짓)
포토샵과 각 개발 환경의 텍스트 렌더링 방식은 서로 다르기 때문에
매번 텍스트 영역의 크기를 찾아내기 위한 작업이 필요하며
보통은 포토샵에서 텍스트의 Transform(Ctrl+T)을 기준으로 삼고 있음
하지만 문제는 동일한 폰트, 동일한 크기더라도 포토샵 버전별로
Transform(Ctrl+T) 했을 때의 영역 크기가 다름 (CS3, CS4, CS5, CS6, CC 등)
포토샵에서 텍스트의 Transform(Ctrl+T) 크기를 확인하는 것은
가장 근사치를 잡기 위한 노력일 뿐 100%의 정보는 아님 (텍스트 영역 연구중)
23. 교육 – 실무 지식
항상 전체를 보는 시야가 중요 1
(디자인 시안에서 시야가 갇히면 위험)
예시 1 : 그래프 디자인
상태
변화
디자인 시안
만약 그래프가 최고 수치를 찍는다면?
수치 표기 디자인은 어디에 어떻게 위치?
(미리 가변 상황에 대한 가이드 필요)
24. 교육 – 실무 지식
항상 전체를 보는 시야가 중요 2
(디자인 시안에서 시야가 갇히면 위험)
예시 2 : 텍스트 & 플래그 디자인
상태
변화
디자인 시안
만약 텍스트의 길이가 길어진다면?
텍스트는 어떻게 처리? 우측 끝 마진은?
(미리 가변 상황에 대한 가이드 필요)
25. 교육 – 실무 지식
UI 콘트롤은 항상 모든 상황별로 디자인
항상 모든 State별로 디자인을 하는 습관을 들여야 함
의외로 이 기본을 지키지 않아 마지막에 고생하는 경우가 많음
(각 State별로 이미지를 잘라줄 것인지, Opacity처리를 할 것인지 디자인에 따라 결정도 가능)
26. 교육 – 실무 지식
UI 콘트롤 디자인은 항상 모듈화
좌측처럼 한번 회화하듯이 그리면서 작업하면 위험 (관리 및 수정 불가능)
우측처럼 UI콘트롤을 모듈화 하여야 작업을 훨씬 체계적으로 할 수 있고 관리가 용이함
UI 콘트롤 기본 지식(종류, 용어 등) 공부 필수
27. 교육 – 실무 지식
블렌드 모드는 정확히 이해하고 사용 1
블렌드 모드는 하위 레이어와 혼합하여 보여주는 이미지 처리 기술
이를 정확히 이해하고 사용해야 이미지를 잘라낼 때 실수가 없음
> 내용 참고 (wit studio Blog – GUI 디자이너가 저지르기 쉬운 실수 2)
개발 구현하여 디바이스에서 확인해 보니
전혀 다른 컬러로 표현되는 경우가 있음 (잘못된 리소스)
28. 교육 – 실무 지식
블렌드 모드는 정확히 이해하고 사용 2
레이어에 블렌드모드를
적용한 상태
이미지를 잘라내는 순간에는
하위 레이어 없이 단독으로
잘려나가기 때문에
전혀 다른 컬러로 잘림
29. 교육 – 실무 지식
항상 공부하는 자세가 중요
기술 발전과 디자인 업무는 함께 변화하기 때문에 관련 기술 이슈는 항시 파악
사용자 경험, 사용성 등 학문적인 이해도 중요하지만
정말 실무에서 필요로 하는 수치적인 이슈에 대한 이해도 매우 중요함
(PX, DPI, SP 등)
항상 논리적인 사고를 하기 위한 노력도 중요
참고하면 좋은 사이트 소개
(공식 사이트, 영문)
안드로이드 개발, 안드로이드 디자인 원칙 : Android Developers > Design Principles
애플 iOS 개발 라이브러리 : iOS Human Interface Guidelines > Designing for iOS 7
(관련 블로그)
iOS 가이드 사이트 (영문) : http://iosguides.net/
The iOS Design Cheat Sheet (영문) : http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/
위트스튜디오 블로그 : http://blog.witstudio.net/
30. 제품 소개 – 어시스터 PS
디자인 가이드 전용 툴
http://assistor.net