SlideShare a Scribd company logo
1 of 33
Download to read offline
Save the designers

디자인 가이드 교육 세미나 자료

ⓒ wit studio
witstudio.net

Ver. 1.0
목차

• 디자인 가이드?
• 개발자와 협의하기

• 상황을 이해하기
• 자신의 業을 이해하기
디자인 가이드?

완성되기 까지의 험난한 과정

디자인 가이드가 필요
완성된 디자인
개발 완성
디자인 가이드?

디자인 가이드란?
디자인 결과물의 ‘모든 정보 및 의도’를 전달하는 것
수치 정보(좌표, 크기, 간격 등), 폰트 정보, 이펙트 정보, 이미지 파일(리소스), 디자인 의도

완성된 디자인

‘디자인가이드’ 문서(예시)
디자인 가이드?

착각하기 쉬운 프로세스

디자인 완성!

디자인가이드 작성!

개발 완성!
디자인 가이드?

착각하기 쉬운 프로세스

디자인 완성!

디자인가이드 작성!

개발 완성!

마치 꿈같은 프로세스
디자인 가이드?

착각하기 쉬운 프로세스

디자인 완성!

디자인가이드 작성!

개발 완성!

원하는 정보는 개발자마다 모두 다름
필요한 정보도 상황에 따라 모두 다름

결국 재작업은 불가피하고 인력/시간 낭비가 심함
모든 다툼의 근원이 되는 경우가 많음
디자인 가이드?

권장 프로세스

디자인 완성!

사전 협의!

디자인가이드 작성!

개발 완성!

(설계 단계)

개발자와 A부터 Z까지 꼼꼼히 사전 협의 권장
매 프로젝트마다 항상 사전 협의 해야함 (개발사(자)마다 스타일이 다름)
사전 협의 없이 속편하게 모든 수치 정보를 표기해 주겠다는 생각은 가장 위험 (서로 힘듦)
교육 – 실무 지식

생각하며 협의해야 할 것들
대표적인 몇 가지
교육 – 실무 지식

개발자와 협의하기
교육 – 실무 지식

‘좌표 or 간격’ 확인
같은 요소의 위치를 표기하더라도 좌표, 간격 등 다양한 방법이 존재

or
교육 – 실무 지식

절대, 상대 좌표 항상 확인
전체 화면 기준
(절대 좌표)

자신이 속한
콘텐츠 영역 기준
(상대 좌표)
교육 – 실무 지식

이미지 슬라이스 방법 확인
동일한 UI 콘트롤을 위한 리소스라도 개발자의 스타일에 따라 다름
이미지 리소스를 어떻게 잘라줄지 미리 협의해야 함

예시 : 라디오버튼 콘트롤을 이미지 슬라이스 할 때

A 스타일 :

or

B 스타일 :
교육 – 실무 지식

상황을 이해하기
교육 – 실무 지식

수치 단위 이해하기
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

100

Screen

Screen

100

Screen

Screen

…

절대 수치

Screen

X

상대 수치

O

100
교육 – 실무 지식

‘절대 수치 VS 상대 수치’ 확인 2
절대적으로 변경되지 말아야 하는 않는 부분을 제외하고 모두 상대적인 수치를 표기해야
아래처럼 다양한 디바이스 환경에서의 가변상황에 대처할 수 있음

> 내용 참고 (KMSHACK Blog – 안드로이드 앱 개발자가 제안하는 디자인 방법론 - 4. 가이드 작성법 1)

갤럭시 탭

갤럭시 S4

옵티머스 G

넥서스 4
교육 – 실무 지식

이미지 처리 여부 확인
단순한 컬러로 처리된 디자인은 굳이 이미지 파일로 일일이 잘라낼 필요는 없음
대부분 컬러코드를 넘기는 것 만으로 개발쪽에서 구현이 가능함

배경을
이미지 파일로 구현

배경을
개발에서 구현

or
main_bg.png

#10914d
교육 – 실무 지식

개발쪽 지원 기술을 미리 확인 (플랫폼 기술 범위)
개발쪽에서 지원하는 기술을 미리 파악해야 그 상황에 맞는 이미지 리소스 생성이 가능

글로시 지원 X
마스크 지원 O
그림자 지원 O

ex : 개발쪽에서 그림자 구현이 가능함에도
이미지 리소스를 그림자와 함께 자르면 실수 -> 재작업 해야함
교육 – 실무 지식

텍스트 처리 방법 확인
최근에는 텍스트를 이미지 파일로 잘라주는 경우는 거의 없음
텍스트를 개발쪽에서 구현할 수 있도록 모든 정보를 표기해야 함(폰트명, 크기, 컬러코드 등)

텍스트를 이미지로 처리

텍스트를 개발에서 처리

or

GothamRounded Book
28 PT

txt_ex.png

#22AF5D
교육 – 실무 지식

텍스트 영역의 크기는? (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/
제품 소개 – 어시스터 PS

디자인 가이드 전용 툴
http://assistor.net
관련 정보

문의
service@witstudio.net

회사
http://witstudio.net
http://blog.witstudio.net/

제품 온라인 서비스
http://assistor.net
http://facebook.com/assistorApp
http://facebook.com/groups/assistor.user
1. 제안 내용

소니 SES

연락처

witstudio.net
service@witstudio.net
T : +82 (0)2 508 2146
F : +82 (0)2 508 2147
Office : 서울시 강남구 역삼동 829-2 수연빌딩 4층
witstudio.net
blog.witstudio.net

ⓒ wit studio

More Related Content

Viewers also liked

디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서
디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서
디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서한국디자인진흥원 공공서비스디자인PD
 
'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'Jinyong Kim
 
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)USABLE 윤
 
제일기획 이마트 기획서
제일기획 이마트 기획서제일기획 이마트 기획서
제일기획 이마트 기획서Yerim An
 
Usability design guideline
Usability design guidelineUsability design guideline
Usability design guidelineBilly Choi
 
INNOIZ_UX_YuriLee
INNOIZ_UX_YuriLeeINNOIZ_UX_YuriLee
INNOIZ_UX_YuriLeeYu-Ri Lee
 
Kgc인삼공사 '심' 2013 spring
Kgc인삼공사 '심' 2013 springKgc인삼공사 '심' 2013 spring
Kgc인삼공사 '심' 2013 springsamsamstory
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)Booseol Shin
 
Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?Tai Hoon KIM
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)Booseol Shin
 
[Design dive] eyecan발표(web)
[Design dive] eyecan발표(web)[Design dive] eyecan발표(web)
[Design dive] eyecan발표(web)준석 이
 
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.Ji Lee
 
Micro Marketing for Second Button(by Pistachio)
Micro Marketing for Second Button(by Pistachio)Micro Marketing for Second Button(by Pistachio)
Micro Marketing for Second Button(by Pistachio)d.AntWort
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)Woncheol Lee
 
12 학술교류 세미나 로고 도출과정 120508
12 학술교류 세미나 로고 도출과정 12050812 학술교류 세미나 로고 도출과정 120508
12 학술교류 세미나 로고 도출과정 120508Seon-ji Hwang
 
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱hajiwon1
 
알고 마시면 더 맛있는 유럽맥주
알고 마시면 더 맛있는 유럽맥주알고 마시면 더 맛있는 유럽맥주
알고 마시면 더 맛있는 유럽맥주Yunkiu Lee
 
design, meet the future : design dive 2020. service design workshop
design, meet the future : design dive 2020. service design workshopdesign, meet the future : design dive 2020. service design workshop
design, meet the future : design dive 2020. service design workshopUSABLE 윤
 
급해요 서비스 소개서
급해요 서비스 소개서급해요 서비스 소개서
급해요 서비스 소개서jrim Choi
 

Viewers also liked (20)

디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서
디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서
디자인 관점에서 본 헬스케어 미래 비즈니스 아이디어 - 헬스케어 미래비전 최종보고서
 
'UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX''UX', 'UX Design' and 'Good UX'
'UX', 'UX Design' and 'Good UX'
 
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)
서비스디자인 서비스산업을 다시 디자인하다 (2016.7. PDF)
 
제일기획 이마트 기획서
제일기획 이마트 기획서제일기획 이마트 기획서
제일기획 이마트 기획서
 
Usability design guideline
Usability design guidelineUsability design guideline
Usability design guideline
 
INNOIZ_UX_YuriLee
INNOIZ_UX_YuriLeeINNOIZ_UX_YuriLee
INNOIZ_UX_YuriLee
 
Kgc인삼공사 '심' 2013 spring
Kgc인삼공사 '심' 2013 springKgc인삼공사 '심' 2013 spring
Kgc인삼공사 '심' 2013 spring
 
Google mail
Google mailGoogle mail
Google mail
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (2)
 
Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?Google AMP는 어떻게 빠른 성능을 내나?
Google AMP는 어떻게 빠른 성능을 내나?
 
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
안드로이드 머터리얼 디자인 기반의 앱 레이아웃 가이드 (1)
 
[Design dive] eyecan발표(web)
[Design dive] eyecan발표(web)[Design dive] eyecan발표(web)
[Design dive] eyecan발표(web)
 
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.
D.I.Y.를 중심으로한 테크놀로지 교육 - Technology Education by D.I.Y.
 
Micro Marketing for Second Button(by Pistachio)
Micro Marketing for Second Button(by Pistachio)Micro Marketing for Second Button(by Pistachio)
Micro Marketing for Second Button(by Pistachio)
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)
 
12 학술교류 세미나 로고 도출과정 120508
12 학술교류 세미나 로고 도출과정 12050812 학술교류 세미나 로고 도출과정 120508
12 학술교류 세미나 로고 도출과정 120508
 
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱
강남풀살롱/풀싸롱/야구장 매직미러 하상무O1O.6639.7772 강남풀사롱,풀쌀롱,풀싸롱,역삼풀살롱
 
알고 마시면 더 맛있는 유럽맥주
알고 마시면 더 맛있는 유럽맥주알고 마시면 더 맛있는 유럽맥주
알고 마시면 더 맛있는 유럽맥주
 
design, meet the future : design dive 2020. service design workshop
design, meet the future : design dive 2020. service design workshopdesign, meet the future : design dive 2020. service design workshop
design, meet the future : design dive 2020. service design workshop
 
급해요 서비스 소개서
급해요 서비스 소개서급해요 서비스 소개서
급해요 서비스 소개서
 

Guideline tips for a mobile design by Assistor PS

  • 1. Save the designers 디자인 가이드 교육 세미나 자료 ⓒ wit studio witstudio.net Ver. 1.0
  • 2. 목차 • 디자인 가이드? • 개발자와 협의하기 • 상황을 이해하기 • 자신의 業을 이해하기
  • 3. 디자인 가이드? 완성되기 까지의 험난한 과정 디자인 가이드가 필요 완성된 디자인 개발 완성
  • 4. 디자인 가이드? 디자인 가이드란? 디자인 결과물의 ‘모든 정보 및 의도’를 전달하는 것 수치 정보(좌표, 크기, 간격 등), 폰트 정보, 이펙트 정보, 이미지 파일(리소스), 디자인 의도 완성된 디자인 ‘디자인가이드’ 문서(예시)
  • 5. 디자인 가이드? 착각하기 쉬운 프로세스 디자인 완성! 디자인가이드 작성! 개발 완성!
  • 6. 디자인 가이드? 착각하기 쉬운 프로세스 디자인 완성! 디자인가이드 작성! 개발 완성! 마치 꿈같은 프로세스
  • 7. 디자인 가이드? 착각하기 쉬운 프로세스 디자인 완성! 디자인가이드 작성! 개발 완성! 원하는 정보는 개발자마다 모두 다름 필요한 정보도 상황에 따라 모두 다름 결국 재작업은 불가피하고 인력/시간 낭비가 심함 모든 다툼의 근원이 되는 경우가 많음
  • 8. 디자인 가이드? 권장 프로세스 디자인 완성! 사전 협의! 디자인가이드 작성! 개발 완성! (설계 단계) 개발자와 A부터 Z까지 꼼꼼히 사전 협의 권장 매 프로젝트마다 항상 사전 협의 해야함 (개발사(자)마다 스타일이 다름) 사전 협의 없이 속편하게 모든 수치 정보를 표기해 주겠다는 생각은 가장 위험 (서로 힘듦)
  • 9. 교육 – 실무 지식 생각하며 협의해야 할 것들 대표적인 몇 가지
  • 10. 교육 – 실무 지식 개발자와 협의하기
  • 11. 교육 – 실무 지식 ‘좌표 or 간격’ 확인 같은 요소의 위치를 표기하더라도 좌표, 간격 등 다양한 방법이 존재 or
  • 12. 교육 – 실무 지식 절대, 상대 좌표 항상 확인 전체 화면 기준 (절대 좌표) 자신이 속한 콘텐츠 영역 기준 (상대 좌표)
  • 13. 교육 – 실무 지식 이미지 슬라이스 방법 확인 동일한 UI 콘트롤을 위한 리소스라도 개발자의 스타일에 따라 다름 이미지 리소스를 어떻게 잘라줄지 미리 협의해야 함 예시 : 라디오버튼 콘트롤을 이미지 슬라이스 할 때 A 스타일 : or B 스타일 :
  • 14. 교육 – 실무 지식 상황을 이해하기
  • 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%의 정보는 아님 (텍스트 영역 연구중)
  • 22. 교육 – 실무 지식 자신의 業을 이해하기
  • 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
  • 31. 관련 정보 문의 service@witstudio.net 회사 http://witstudio.net http://blog.witstudio.net/ 제품 온라인 서비스 http://assistor.net http://facebook.com/assistorApp http://facebook.com/groups/assistor.user
  • 32. 1. 제안 내용 소니 SES 연락처 witstudio.net service@witstudio.net T : +82 (0)2 508 2146 F : +82 (0)2 508 2147 Office : 서울시 강남구 역삼동 829-2 수연빌딩 4층