#2 Sketch 입문 - OS 별 해상도 및 안드로이드 DP 단위_20200221

1. 아트 보드를 만드는 단축키 A

2. OS 별 아트 보드 사이즈 프리셋들이 구비되어 있음.

3. 안드로이드와 iOS 둘 다 px라는 절댓값을 사용하지 않고, dp 또는 pt라는 상대값을 사용한다.

 3-1) DPI는 Dots per inch로 1인치에 몇 픽셀이 들어가는지에 대한 값이다. 예를 들어 10dpi 이면, 1인치에 10x10 = 100개의 픽셀이들어가는 것이다.  - 안드로이드의 핵심 기준은 mdpi = 160DPI 이다.

    3-1-a) xhdpi(320dpi)로 해상도가 좋아진 스마트폰을 디자인하려면 mdipi 기준인 160dpi로 나누면 된다. 그러면 2라는 수치가 나오게 되고, xhdpi에서 1dp = 2px 이 되는 것이다.

    3-2-b) 마찬가지로 640dpi 해상도를 가진 스마트폰에서는 640 / 160 = 4 이므로, 1dp = 4px 이 된다.

 

4. 반응형 웹디자인을 위한 최적화된 그리드 만들기

   4-1) 레이아웃을 만들 때는 크게 4가지 요소가 있다. - 최대폭(max-width), 컨테이너(container), 단의 개수(columns), 거터와 칼럼 넓이

   4-2) 반응형 웹이란 브라우저 넓이에 따라 최적화된 사이트를 말한다.

   4-3) 네이버의 컨테이너 넓이 : 1080px / 다음의 컨테이너 넓이 : 990px

   4-4) 전체폭 : 가로폭으로 최대 몇까지 지원할 것인지에 대한 내용

           컨테이너 : 담고 있는 영역이며, 좌우 마진을 두고 콘텐츠를 담고 있는 공통된 폭

   4-5) 디자이너가 참고하면 좋은 사이트 : Awwward, Behance, Dribble

   4-6) 컨테이너를 1200px 단(Columns)을 12로 하고, 거터(단과 단 사이 간격)을 30px로 하는 것을 추천

출처 : DESIGN BASE

   4-7) 12단을 하는 이유는 반응형에 최적화가 되어 있다. / 디자이너가 16단, 20단 이런식으로 단이 많아지면 퍼블리셔가 구현하기 어려울 뿐 아니라, 반응형에 취약하다.