Guideline tips for a mobile design by Assistor PS
33
디자인 가이드 교육 세미나 자료 ⓒ wit studio witstudio.net Save the designers Ver. 1.0
description
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/
Transcript of Guideline tips for a mobile design by Assistor PS
디자인 가이드 교육 세미나 자료
ⓒ wit studio
witstudio.net
Save the designers
Ver. 1.0
목차
• 디자인 가이드?
• 개발자와 협의하기
• 상황을 이해하기
• 자신의 業을 이해하기
디자인 가이드?
완성된 디자인
개발 완성
완성되기 까지의 험난한 과정
디자인 가이드가 필요
디자인 가이드?
수치 정보(좌표, 크기, 간격 등), 폰트 정보, 이펙트 정보, 이미지 파일(리소스), 디자인 의도
디자인 가이드란?
디자인 결과물의 ‘모든 정보 및 의도’를 전달하는 것
완성된 디자인
‘디자인가이드’ 문서(예시)
디자인 가이드?
디자인 완성! 디자인가이드 작성! 개발 완성!
착각하기 쉬운 프로세스
디자인 가이드?
디자인 완성! 디자인가이드 작성!
마치 꿈같은 프로세스
개발 완성!
착각하기 쉬운 프로세스
디자인 가이드?
디자인 완성! 디자인가이드 작성! 개발 완성!
착각하기 쉬운 프로세스
원하는 정보는 개발자마다 모두 다름
필요한 정보도 상황에 따라 모두 다름
결국 재작업은 불가피하고 인력/시간 낭비가 심함
모든 다툼의 근원이 되는 경우가 많음
디자인 가이드?
디자인 완성! 디자인가이드 작성! 개발 완성!
권장 프로세스
사전 협의!
(설계 단계)
개발자와 A부터 Z까지 꼼꼼히 사전 협의 권장
매 프로젝트마다 항상 사전 협의 해야함 (개발사(자)마다 스타일이 다름)
사전 협의 없이 속편하게 모든 수치 정보를 표기해 주겠다는 생각은 가장 위험 (서로 힘듦)
교육 – 실무 지식
생각하며 협의해야 할 것들
대표적인 몇 가지
교육 – 실무 지식
개발자와 협의하기
교육 – 실무 지식
‘좌표 or 간격’ 확인
or
같은 요소의 위치를 표기하더라도 좌표, 간격 등 다양한 방법이 존재
교육 – 실무 지식
절대, 상대 좌표 항상 확인
전체 화면 기준 (절대 좌표)
자신이 속한 콘텐츠 영역 기준 (상대 좌표)
교육 – 실무 지식
이미지 슬라이스 방법 확인
예시 : 라디오버튼 콘트롤을 이미지 슬라이스 할 때
A 스타일 : B 스타일 : or
동일한 UI 콘트롤을 위한 리소스라도 개발자의 스타일에 따라 다름
이미지 리소스를 어떻게 잘라줄지 미리 협의해야 함
교육 – 실무 지식
상황을 이해하기
교육 – 실무 지식
수치 단위 이해하기
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값인가?
교육 – 실무 지식
‘절대 수치 VS 상대 수치’ 확인 1
Screen Screen Screen Screen Screen Screen … …
100 100 100
X
O
안드로이드 디자인의 경우 해상도, 비율 변경을 항상 고려해야 함
절대 수치
상대 수치
교육 – 실무 지식
‘절대 수치 VS 상대 수치’ 확인 2
갤럭시 탭
갤럭시 S4
옵티머스 G
넥서스 4
절대적으로 변경되지 말아야 하는 않는 부분을 제외하고 모두 상대적인 수치를 표기해야
아래처럼 다양한 디바이스 환경에서의 가변상황에 대처할 수 있음
> 내용 참고 (KMSHACK Blog – 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 4. 가이드 작성법 1)
교육 – 실무 지식
이미지 처리 여부 확인
배경을 이미지 파일로 구현
배경을 개발에서 구현
main_bg.png
#10914d or
단순한 컬러로 처리된 디자인은 굳이 이미지 파일로 일일이 잘라낼 필요는 없음
대부분 컬러코드를 넘기는 것 만으로 개발쪽에서 구현이 가능함
교육 – 실무 지식
개발쪽 지원 기술을 미리 확인 (플랫폼 기술 범위)
글로시 지원 X
마스크 지원 O
그림자 지원 O
ex : 개발쪽에서 그림자 구현이 가능함에도
이미지 리소스를 그림자와 함께 자르면 실수 -> 재작업 해야함
개발쪽에서 지원하는 기술을 미리 파악해야 그 상황에 맞는 이미지 리소스 생성이 가능
교육 – 실무 지식
텍스트 처리 방법 확인
텍스트를 이미지로 처리 텍스트를 개발에서 처리
txt_ex.png
GothamRounded Book
28 PT
#22AF5D
or
최근에는 텍스트를 이미지 파일로 잘라주는 경우는 거의 없음
텍스트를 개발쪽에서 구현할 수 있도록 모든 정보를 표기해야 함(폰트명, 크기, 컬러코드 등)
교육 – 실무 지식
텍스트 영역의 크기는? (Ctrl + T는 거짓)
포토샵과 각 개발 환경의 텍스트 렌더링 방식은 서로 다르기 때문에
매번 텍스트 영역의 크기를 찾아내기 위한 작업이 필요하며
보통은 포토샵에서 텍스트의 Transform(Ctrl+T)을 기준으로 삼고 있음
하지만 문제는 동일한 폰트, 동일한 크기더라도 포토샵 버전별로
Transform(Ctrl+T) 했을 때의 영역 크기가 다름 (CS3, CS4, CS5, CS6, CC 등)
포토샵에서 텍스트의 Transform(Ctrl+T) 크기를 확인하는 것은
가장 근사치를 잡기 위한 노력일 뿐 100%의 정보는 아님 (텍스트 영역 연구중)
교육 – 실무 지식
자신의 業을 이해하기
교육 – 실무 지식
항상 전체를 보는 시야가 중요 1 (디자인 시안에서 시야가 갇히면 위험)
예시 1 : 그래프 디자인
디자인 시안 만약 그래프가 최고 수치를 찍는다면? 수치 표기 디자인은 어디에 어떻게 위치?
(미리 가변 상황에 대한 가이드 필요)
상태 변화
교육 – 실무 지식
항상 전체를 보는 시야가 중요 2 (디자인 시안에서 시야가 갇히면 위험)
예시 2 : 텍스트 & 플래그 디자인
상태 변화
디자인 시안 만약 텍스트의 길이가 길어진다면? 텍스트는 어떻게 처리? 우측 끝 마진은?
(미리 가변 상황에 대한 가이드 필요)
교육 – 실무 지식
UI 콘트롤은 항상 모든 상황별로 디자인
항상 모든 State별로 디자인을 하는 습관을 들여야 함
의외로 이 기본을 지키지 않아 마지막에 고생하는 경우가 많음
(각 State별로 이미지를 잘라줄 것인지, Opacity처리를 할 것인지 디자인에 따라 결정도 가능)
교육 – 실무 지식
UI 콘트롤 디자인은 항상 모듈화
좌측처럼 한번 회화하듯이 그리면서 작업하면 위험 (관리 및 수정 불가능)
우측처럼 UI콘트롤을 모듈화 하여야 작업을 훨씬 체계적으로 할 수 있고 관리가 용이함
UI 콘트롤 기본 지식(종류, 용어 등) 공부 필수
교육 – 실무 지식
블렌드 모드는 정확히 이해하고 사용 1
블렌드 모드는 하위 레이어와 혼합하여 보여주는 이미지 처리 기술
이를 정확히 이해하고 사용해야 이미지를 잘라낼 때 실수가 없음
> 내용 참고 (wit studio Blog – GUI 디자이너가 저지르기 쉬운 실수 2)
개발 구현하여 디바이스에서 확인해 보니
전혀 다른 컬러로 표현되는 경우가 있음 (잘못된 리소스)
교육 – 실무 지식
블렌드 모드는 정확히 이해하고 사용 2
이미지를 잘라내는 순간에는 하위 레이어 없이 단독으로 잘려나가기 때문에 전혀 다른 컬러로 잘림
레이어에 블렌드모드를 적용한 상태
교육 – 실무 지식
항상 공부하는 자세가 중요
기술 발전과 디자인 업무는 함께 변화하기 때문에 관련 기술 이슈는 항시 파악
사용자 경험, 사용성 등 학문적인 이해도 중요하지만
정말 실무에서 필요로 하는 수치적인 이슈에 대한 이해도 매우 중요함
(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/
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html
관련 정보
문의
회사
http://witstudio.net
http://blog.witstudio.net/
제품 온라인 서비스
http://assistor.net
http://facebook.com/assistorApp
http://facebook.com/groups/assistor.user
1. 제안 내용 소니 SES
witstudio.net
T : +82 (0)2 508 2146
F : +82 (0)2 508 2147
Office : 서울시 강남구 역삼동 829-2 수연빌딩 4층
연락처
ⓒ wit studio
witstudio.net
blog.witstudio.net
