[sktech] sketch 정의

- 가벼운 용량
- 무한 아트보드 생성
- 벡터기반 1x 배율 작업
- 아트보드 위 페이지 상위 개념
- 양질의 많은 플러그인 지원
- 스타일(텍스트, 레이어스타일) 저장 기능
- symbol 기능 (포토샵 smart object) : 마스터의 모양, 스타일을 유지하면서 인스턴스 내용을 개별적으로 편집할 수 있음.

 

sketch 기능

 

정렬 : 아트보드 기준으로 개체 정렬.

width, height 값을 조절할 경우 %로도 수치 입력 가능(사칙연산으로도 값 조절 가능)

리사이징 : 반응형 작업시 사용

Appereance : 레이어 스타일을 등록, 수정하는 기능

Blur : 실제 사용 시 background blur 기능 주로 사용 (이미지 레이어가 밑으로 가게끔 작업해야함)

Make exportable : 아이콘등을 몇배율로 내보내기할건지 선택할 수 있음.

---

해상도

 

안드로이드(dp단위) dpi : dots per inch (1인치에 몇픽셀이 들어가는지?)

1px = 1dp

160dpi = mdpi (medium density)

240dpi = hdpi (high)

320dpi = xhdpi (extra-high)

480dpi = xxdpi (extra-extra-high)

649dpi = xxxdpi (extra-extra-extra-high)

 

해상도에 따른 dp, px 계산

160dpi = mdpi (medium) 1px = 1dp

240dpi = hdpi (high) 1.5px = 1dp

320dpi = xhdpi (extra-high) 2px = 1dp

480dpi = xxdpi (extra-extra-high) 3px = 1dp

649dpi = xxxdpi (extra-extra-extra-high) 4px = 1dp

포토샵 작업의 경우 실제 해상도 비율에 맞춰 640dpi 해상도의 경우 160dpi의 4배의 해상도 비율로 맞춰 작업해야 하는 번거로움이 있으나, 스케치는 1배율로 작업 가능

* 반응형 웹사이트의 경우 %단위를 사용하기 때문에 정확한 수치를 사용할 수 없음.

 

연령에 상관없이 누구나 사용하는 사이트일 경우 작은 모니터 기준으로 작업

(ex. 네이버 : 1080px, 다음 : 990px)

---

컨테이너 영역

 

PC 추천폭 : 1200px (총 12단 추천)

gutters : 30px

columns : 72px (30px 거터의 경우 한 컬럼당 72px의 정수로 떨어짐)

(12단으로 나눈 후 2,4,6,8의 정수단으로 디자인해야 퍼블리싱, 개발시에도 작업이 수월함)

View Layout setting메뉴에서 조절 후 작업 가능 (단축키 Ctrl + L)

 

모바일 해상도 추천폭 : 360px

(좌, 우 margin 20px 값으로 할 경우 320px 컨테이너 영역)

gutters : 16px, colums : 6px로 하면 정수로 떨어짐

---

프로토타입

 

Fix position when scrolling : 스크롤해도 고정

커스텀 사이즈로 만들 경우 preview에서 스크롤이 안되므로 create custom size로 등록 후 작업

 

반응형시에는 아트보드 클릭 후 adjust content on resize 체크

---

에셋

 

에셋 내보내기 기본 사항

참고 : https://brunch.co.kr/@pizzakim/26  

01. 모두 소문자 (대문자로 작성시 개발 환경에 따라 오류를 일으킬 수 있음)

02. 첫글자는 숫자 사용 X

03. 띄어쓰기 사용 X (글자간의 구분은 '-' 또는 '_' 으로 사용(아이폰은 '-', 안드로이드는 '_')

04. 자주 사용하는 아이콘은 축약하여 사용

icon : ic
button : btn
background : bg
image : img

05. 유형(접두사)+이름+상황(접미사).확장자

ic-favorite-normal.png
btn-primary-hover.png
bg-mainbanner-01.png

06. 에셋 네임은 앱에서 고유해야하기 때문에, 크기가 다른 추가 버튼이 있는 경우

add_icon_small.png / add_icon_big.png 등으로 대응

07. 파일 확장자

png - 웹, 앱(하위버전 대응)
svg - 웹, 안드로이드 앱
pdf - ios앱

svg와 pdf는 벡터기반의 이미지를 담을 수 있는 확장자이기 때문에 아이콘 같은 경우 해당 확장자로 출력하면 따로 배율에 맞게 출력할 필요 없음.

08. 소스방식 (ios - swift / Android - xml)