SlideShare ist ein Scribd-Unternehmen logo
1 von 22
Downloaden Sie, um offline zu lesen
Sketch3 로 기획서 관리하기
@minieetea
@minieetea
그냥 흔한 기획자입니다.
개발자 아닙니다 + 디자이너는 더더욱 아닙니다개발자 아닙니다 + 디자이너는 더더욱 아닙니다
나만의 템플릿을 만들자
Sketch3 template
- File > New from template > …
- iOS의 경우, 1x 기준으로 되어 있습니다.
- 기준해상도는 4.7inch (375px)
Free Resource
- sketchappsources.com (말고도 많아요)
- @2x 고해상도가 많습니다.
- 기준해상도는 4.7inch (750px)
Document Color
- 비쥬얼 디자인이 아니니 배색은 신경쓰지 말자
Icon / Componet SET
- 자주 쓰는 아이콘이나, 컴포넌트들을 정리
- File > Save as Template…
아트보드만 잘 다뤄도..
Artboard
- GUI 디자인을 위한 기본 해상도 지원
- 최근에 Material도 추가됨!
Arrange
- 오브젝트 1개는 Artboard 기준으로 정렬
- 오브젝트 2개 이상은 오브젝트끼리 정렬
- Backward 오브젝트 기준으로 정렬
Artboard
- iOS 는 320*568 기준 (@1x)
- Android는 360*640 기준 (720dp)
- 원하는 사이즈는 직접 조절가능
Export option
- 배경색을 지정
- Export 할 때 배경색을 포함할지 선택
반복되는 UI 그리기
Group
- 자세한 설명은 생략한다
Symbol
- 프로그래밍 언어의 포인터 같은 ... (아마도?)
- 도큐먼트 전체에서 자주 사용되는 오브젝트를 정의
- 원래 심볼 == 복붙한 심볼
- 같은 심볼을 수정하면 전부 바뀜
Detach Symbol (Symbol 해제)
- Create Symbol : Symbol1
- Copy Symbol : Symbol1 copy
- Symbol1 == Symbol1 copy
- Detach from Symbol : Symbol1
- Create Symbol : Symbol1
- Symbol1 != Symbol1 copy
잠궜다 풀었다 하면 너는 이미 안드로메다….
Text Style
- 키노트, 파워포인트… 등
- 흔한 텍스트 스타일과 동일
플러그인 사용하기
Plugin
- Javascript로 되어 있음
- 남들이 짜놓은거 찾아서 쓰자
추천
- Measure master
- Content Generator Sketch Plugin
- Sketch Notebook
Export
Export option
- Sketch의 꽃
- 모바일 멀티 해상도에 최적
- @1x 기준 ::: 2x = @2x
- 만약 @2x를 기준으로 작업했다면 ::: 2x = @4x
- @2x를 내보낼땐 ::: 0.5x = @1x / 1.5x = @3x
플러그인은 많지만, 불완전하므로 직접하는 것이 나음
Object Path
- 오브젝트, 레이어, 아트보드 이름을 지정하면 그대로 export
- / 로 이름을 구분해두면, 동일 경로의 폴더가 생성됨

Weitere ähnliche Inhalte

Andere mochten auch

JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼Sukjoon Kim
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기Sukjoon Kim
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails추근 문
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)Taeung Song
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시동현 조
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요Chris Ohk
 
쩌는게임기획서 이렇게 쓴다
쩌는게임기획서 이렇게 쓴다쩌는게임기획서 이렇게 쓴다
쩌는게임기획서 이렇게 쓴다Jinho Jung
 
카카오타임쿠폰 서비스 아이디어 기획안
카카오타임쿠폰 서비스 아이디어 기획안카카오타임쿠폰 서비스 아이디어 기획안
카카오타임쿠폰 서비스 아이디어 기획안Doyoung Oh
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께지수 윤
 
Discussion week 7 c7 (powepoint)
Discussion week 7   c7 (powepoint)Discussion week 7   c7 (powepoint)
Discussion week 7 c7 (powepoint)franzettamcneil
 

Andere mochten auch (12)

JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼JavaScript on Rails 튜토리얼
JavaScript on Rails 튜토리얼
 
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기루비, REST, jQuery 그리고 agile 웹에 관한 이야기
루비, REST, jQuery 그리고 agile 웹에 관한 이야기
 
Front-end Development with Ruby on Rails
Front-end Development with Ruby on RailsFront-end Development with Ruby on Rails
Front-end Development with Ruby on Rails
 
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
오픈소스 개발참여한 이야기 (NIPA 오픈프론티어 3기 송태웅)
 
문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시문돌이가 가르치는 웹 프론트엔드 1차시
문돌이가 가르치는 웹 프론트엔드 1차시
 
프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요프로그래머가 되고 싶으세요
프로그래머가 되고 싶으세요
 
블로그 체험단 마케팅 제안서
블로그 체험단 마케팅 제안서블로그 체험단 마케팅 제안서
블로그 체험단 마케팅 제안서
 
쩌는게임기획서 이렇게 쓴다
쩌는게임기획서 이렇게 쓴다쩌는게임기획서 이렇게 쓴다
쩌는게임기획서 이렇게 쓴다
 
카카오타임쿠폰 서비스 아이디어 기획안
카카오타임쿠폰 서비스 아이디어 기획안카카오타임쿠폰 서비스 아이디어 기획안
카카오타임쿠폰 서비스 아이디어 기획안
 
이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께이제 막 웹개발자 되고싶은 분들께
이제 막 웹개발자 되고싶은 분들께
 
Discussion week 7 c7 (powepoint)
Discussion week 7   c7 (powepoint)Discussion week 7   c7 (powepoint)
Discussion week 7 c7 (powepoint)
 
Esakki-SCM
Esakki-SCMEsakki-SCM
Esakki-SCM
 

Mehr von 이상한모임

Summernote 이야기 - 홍영택님(@hackerwins)
Summernote 이야기 - 홍영택님(@hackerwins)Summernote 이야기 - 홍영택님(@hackerwins)
Summernote 이야기 - 홍영택님(@hackerwins)이상한모임
 
Hack Reactor & Code states - 김인기님(@ingikim)
Hack Reactor & Code states - 김인기님(@ingikim)Hack Reactor & Code states - 김인기님(@ingikim)
Hack Reactor & Code states - 김인기님(@ingikim)이상한모임
 
Designer, Collaboration and Community - 김지홍님(@jihere1001)
Designer, Collaboration and Community - 김지홍님(@jihere1001)Designer, Collaboration and Community - 김지홍님(@jihere1001)
Designer, Collaboration and Community - 김지홍님(@jihere1001)이상한모임
 
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)이상한모임
 
EMOCON 2015 - 개발자로 성공적으로 실패하기
EMOCON 2015 - 개발자로 성공적으로 실패하기EMOCON 2015 - 개발자로 성공적으로 실패하기
EMOCON 2015 - 개발자로 성공적으로 실패하기이상한모임
 
EMOCON 2015 - HAL with Swagger
EMOCON 2015 - HAL with SwaggerEMOCON 2015 - HAL with Swagger
EMOCON 2015 - HAL with Swagger이상한모임
 
EMOCON 2015 - Jspm & systemjs
EMOCON 2015 - Jspm & systemjsEMOCON 2015 - Jspm & systemjs
EMOCON 2015 - Jspm & systemjs이상한모임
 
EMOCON 2015 - 카피캣으로 시작하는 오픈소스
EMOCON 2015 - 카피캣으로 시작하는 오픈소스EMOCON 2015 - 카피캣으로 시작하는 오픈소스
EMOCON 2015 - 카피캣으로 시작하는 오픈소스이상한모임
 
EMOCON 2015 - 품질과 테스트는 다르다
EMOCON 2015 - 품질과 테스트는 다르다EMOCON 2015 - 품질과 테스트는 다르다
EMOCON 2015 - 품질과 테스트는 다르다이상한모임
 
EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?이상한모임
 
전자책 담당자 생존기 ● 이상한모임
전자책 담당자 생존기 ● 이상한모임전자책 담당자 생존기 ● 이상한모임
전자책 담당자 생존기 ● 이상한모임이상한모임
 
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임이상한모임
 

Mehr von 이상한모임 (12)

Summernote 이야기 - 홍영택님(@hackerwins)
Summernote 이야기 - 홍영택님(@hackerwins)Summernote 이야기 - 홍영택님(@hackerwins)
Summernote 이야기 - 홍영택님(@hackerwins)
 
Hack Reactor & Code states - 김인기님(@ingikim)
Hack Reactor & Code states - 김인기님(@ingikim)Hack Reactor & Code states - 김인기님(@ingikim)
Hack Reactor & Code states - 김인기님(@ingikim)
 
Designer, Collaboration and Community - 김지홍님(@jihere1001)
Designer, Collaboration and Community - 김지홍님(@jihere1001)Designer, Collaboration and Community - 김지홍님(@jihere1001)
Designer, Collaboration and Community - 김지홍님(@jihere1001)
 
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)
Emocon 2015 - 웹 앱 개발자가 모르는 임베디드세상(오토모티브 월드)
 
EMOCON 2015 - 개발자로 성공적으로 실패하기
EMOCON 2015 - 개발자로 성공적으로 실패하기EMOCON 2015 - 개발자로 성공적으로 실패하기
EMOCON 2015 - 개발자로 성공적으로 실패하기
 
EMOCON 2015 - HAL with Swagger
EMOCON 2015 - HAL with SwaggerEMOCON 2015 - HAL with Swagger
EMOCON 2015 - HAL with Swagger
 
EMOCON 2015 - Jspm & systemjs
EMOCON 2015 - Jspm & systemjsEMOCON 2015 - Jspm & systemjs
EMOCON 2015 - Jspm & systemjs
 
EMOCON 2015 - 카피캣으로 시작하는 오픈소스
EMOCON 2015 - 카피캣으로 시작하는 오픈소스EMOCON 2015 - 카피캣으로 시작하는 오픈소스
EMOCON 2015 - 카피캣으로 시작하는 오픈소스
 
EMOCON 2015 - 품질과 테스트는 다르다
EMOCON 2015 - 품질과 테스트는 다르다EMOCON 2015 - 품질과 테스트는 다르다
EMOCON 2015 - 품질과 테스트는 다르다
 
EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?EMOCON 2015 - 디자인이 뭐예요?
EMOCON 2015 - 디자인이 뭐예요?
 
전자책 담당자 생존기 ● 이상한모임
전자책 담당자 생존기 ● 이상한모임전자책 담당자 생존기 ● 이상한모임
전자책 담당자 생존기 ● 이상한모임
 
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임
전자책 실무자가 바라본 전자책과 그 트렌드 ● 이상한모임
 

EMOCON 2015 - Sketch3로 기획서 관리하기