#8 -디자인 시작 - 해상도 / 그리드 / 컬럼

Material Design Layout Image 

디자인 시작에서 설명하지 못한 화면 셋팅에 대한 설명을 진행한다.

 

 

---

 

해상도 설정

해상도는 아래와 같이 여러 기준에 따라 환경을 달리한다.

 

1. 모바일 작업
   1. 벡터 작업
      1. 사용 프로그램 : 스케치, 피그마와 같은 벡터 기반 프로그램
      2. 작업 방법 : 최소 사이즈인 360 x 640기준 작업
      3. 해상도 대응 : 최소 사이즈에서 각각에 맞는 배수로 늘려 사용
   2. 비트맵 작업
      1. 사용 프로그램 : 포토샵과 같은 비트맵 기반 프로그램
      2. 작업 방법 : 최대 사이즈 또는 중간사이즈인 2 배수/4배 수로 작업
      3. 해상도 대응 : 중간 사이즈에서 축소/확대하거나, 최대 사이즈에서 축소하여 사용. 그래픽 리소스 때문에 2 수 기준(720x1280)으로 작업하는 경우가 많음
   3. 공통
      1. 작업 방식에 따라 기준 해상도를 정하여 퍼블리셔 또는 프론트엔드와 공유
      2. 작업 방식에 따라 작업 툴 선택
2. PC 작업
   1. 타겟층에 따라 최소 최대 가로사이즈 결정
   2. 이에 따른 반응형 대응에 대한 논의 필요

 

 

---

 

 

모바일 해상도 단위의 이해

Android

각기 다른 해상도에서 같은 Look을 유지하기 위해 DPI라는 개념이 등장했다. DPI는 Dots Per Inch를 뜻한다. 즉 가로 세로 1인치의 사각형 안에 점이 몇개나 들어가는지 수치화 한 것이다. DPI안에 160개의 점이 들어가는 경우가 Standard며, 이를 160 dpi라고 한다. 1인치 안에 많은 점이 들어갈수록 해상도가 높다는 뜻이다.

 

명칭		dp	비율	dpi
l (low)	dpi	1	0.75	120
Standard = m (medium)	dpi	1	1	160
h (high)	dpi	1	1.5	240
xh (extra high)	dpi	1	2	320
xxh	dpi	1	3	480
xxxh	dpi	1	4	640

 

IOS

안드로이드와 비슷한 개념이 IOS에도 있다. IOS는 1배수 / 2배수 / 3배수라고 말하며, Android와 같이 같은 공간안에서 점의 밀도가 어떻게 달라지느냐에 따라 해상도를 구분한다. 여기서는 3배수가 가장 해상도가 높은 것이다.

 

명칭	밀도
1x	10px
2x	20px
3x	30px

 

---

그리드와 컬럼

그리드

통일성 있는 레이아웃을 위해 그리드 시스템 세팅이 필요하다. 비트맵 기준 화면을 그릴 때는 모바일에서는 그리드 시스템을 8px/8dp로 셋팅하는 것이 좋다. 비트맵의 경우 xxxh로 작업하게 되는데, 그 이하 해상도에 대응하기 위해서 나누기 1.5/2/4 (xxh 제외)가 가능하기 때문이다. 아주 세밀하게 작업할 때는 4 단위로 제작하기도 한다.

 

컬럼

컬럼 관련 명칭

 

1. 좌측 이미지
   1. Columns : 컨텐츠가 들어가는 빨간색 세로 박스
   2. Gutters :  컬럼과 컬럼 사이 파란 박스
   3. Margins : 가장 좌우 간격을 표시하는 초록색 박스
   4. Container : 첫번 째 컬럼부터~마지막 컬럼까지, 콘텐츠의 가작 큰 폭.
2. 우측 이미지
   1. 실제 영역 : 파란색 영역
   2. padding : 내부 여백. 상우 하좌 순서대로 TP/RP/BP/LP라고 부르기도 함
   3. border : 선 두께. 
   4. Margine : border 밖의 여백. 상우 하좌 순서대로 TM/RM/BM/LM라고 부르기도 함

 

컬럼 정하기

1. margin 수치 셋팅하기
   1. 16/24 dp 추천
2. container 설정
3.  column 수 셋팅하기
   1. 몇 개의 column을 사용할지 셋팅
   2. 컬럼은 수치로 정하지 않고, gutter를 셋팅 한 나머지 수치로 계산한다.
   3. 가로 크기 별 추천 컬럼 수
      1. 480dp 이하 : 4개
      2. 480~960dp : 8개
      3. 960dp 이상 : 12개
4. gutter 수치 셋팅하기 : 8/16dp 추천

 

 

 

 

---

 

해상도 / 그리드 / 컬럼 선택이 어렵다면

아래 링크에서 도움을 받아 컬러를 선택해 보자.

 

#디자인 사이트 추천 - 해상도 / 그리드 / 컬럼 편

rosakim90.tistory.com/entry/6-%ED%95%B4%EC%83%81%EB%8F%84-%EC%BB%AC%EB%9F%BC-%ED%8E%B8

#6 - 해상도 / 그리드 / 컬럼 편