해상도와그리드시스템
디스플레이 해상도, 래스터화, 배율 디자인, 그리드 시스템, 반응형 그리드, 간격 시스템을 알아봅니다
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
해상도와 그리드 시스템
1. 해상도와 래스터화
해상도(Resolution)와 ppi(pixels per Inch)
해상도란 TV, 모니터, 스마트폰 등 디스플레이 장치에서 화면을 이루는 각각의 면이 몇 개의 픽셀로 이루어져 있는가를 나타내는 것입니다.
해상도는 이미지의 가로와 세로에 몇 개의 화소(픽셀)가 있는지를 뜻합니다. 화소(픽셀)가 적은 30x30보다 100x100 해상도에서 더욱 또렷하게 보입니다. 화소(픽셀)가 많으면 많을수록 더 세밀하게 이미지를 표현할 수 있기 때문입니다.
그러나 여기서 문제가 생깁니다. 똑같은 화소(픽셀)의 양이라도 '화소(픽셀)의 크기'가 다르다면? 세밀함의 정도가 또 달라 보일 수 있습니다. 그래서 약속의 단위를 만들었는데, 바로 **PPI(Pixels per Inch)**입니다. PPI는 'Pixels per Inch'의 약자로 1인치당 픽셀(Pixel)이 몇 개인지를 나타내는 것으로 디스플레이의 픽셀 밀도를 뜻합니다.
해상도와 ppi는 높을수록 좋은 것일까요? 답은 NO입니다.
해상도와 ppi는 높을수록 세밀한 표현이 가능하지만 화소(픽셀) 하나하나는 모두 메모리에 그 정보가 기록됩니다. 그렇기 때문에 해상도가 높아지면 그만큼 메모리를 많이 소모하게 됩니다. 메모리 용량은 무제한으로 커질 수 없기 때문에 인터넷 환경이 느려지게 됩니다.
Info: 스마트폰의 경우 20
30cm를 기준으로 437ppi까지 구분이 가능하고, 모니터의 경우 시청거리를 5060cm정도에서 인접 픽셀이 구분되지 않을 정도로 선명하다고 느끼는 ppi는 185ppi 정도입니다. 디스플레이는 크기와 용도에 따라 요구되는 해상도가 다르게 제작됩니다.
5K는 해상도의 단순 표현 방법의 하나로 1,000(kilo)의 5배라서 5K라고 부릅니다. 정확하게 5,000을 의미하는 게 아니라 '약 5,000픽셀 정도의 가로 해상도'가 바로 5K가 되는 것입니다.
래스터화(Rasterization)란?
그래픽을 렌더링하는 방식 중 하나로, 래스터화란 화면의 오브젝트를 픽셀로 매핑하는 것으로, 디스플레이 시스템이 전자 데이터 또는 신호를 비디오나 이미지로 바꾸는 프로세스입니다.
래스터화 단계
- 논리적 표현 : dp - 처음에는 모든 도면의 좌표가 dp단위로 지정됩니다. dp는 추상 단위이며, Density-independent pixel의 줄임말로 화면의 크기가 달라도 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위입니다.
- 물리적 표현 : Rendered Pixels(px) - dp는 픽셀(px)로 렌더링됩니다. 이 과정을 래스터화(rasterization)라고 합니다. dp에 배율을 곱하여 픽셀(px)을 얻습니다. 배율이 높을수록 선명도가 높아집니다.
- 다운샘플링 : Physical Pixels(px) - 장치 화면의 해상도가 렌더링된 이미지보다 낮을 수 있습니다. 이미지를 표시하려면 해상도를 낮추기 위해 이미지를 다운샘플링(크기 조정)해야 합니다.
- 인지 : Physical Device(ppi) - 마지막으로, 계산된 픽셀(px)이 물리적 화면에 표시됩니다. ppi는 1인치에 얼마나 많은 픽셀(px)이 들어가는지를 알려줍니다.
2. 해상도 종류
iPhone 해상도의 래스터화 단계
Samsung Galaxy 해상도의 래스터화 단계
주요 디바이스 해상도
Info: 표 작성시점 : 2019년 3월
국내 해상도 점유율
2016년 1월 ~ 2018년 12월 (대한민국 기준)
Tip: 412x846는 Galaxy S9+ 외, 412x732는 Galaxy Note5 외 다수의 디바이스를 포함합니다.
3. 해상도에 따른 배율 디자인
디스플레이 기술이 발전함에 따라 고밀도 디스플레이(레티나 디스플레이)가 등장하면서 디바이스 해상도는 발전했습니다. 같은 크기의 물리적 공간 안에 더 많은 픽셀을 넣을 수 있게 되었고, 화면은 더 선명하게 표현할 수 있게 되었습니다.
픽셀(px) 크기는 정해진 크기가 아니라, 픽셀 밀도가 높을수록 픽셀 크기는 작아집니다. 같은 1픽셀(px)인데 크기가 차이나는 현상이 발생합니다. 디자인해놓은 것들이 50% 줄어서 보이는 이유는 픽셀 개념으로 디자인되었기 때문입니다.
이런 현상으로 인해 "밀도 독립적 픽셀(dp)" 개념이 등장합니다.
px, dp의 개념
스크린은 픽셀(px)로 구성됩니다. 픽셀을 기준으로 디자인하면 디바이스의 픽셀 밀도(ppi)로 인해 의도한 것과 다르게 작거나 크게 표시될 수 있습니다. Android에서는 어떤 화면에서도 같은 크기로 보이도록 dp(iOS에서는 pt) 단위를 사용합니다. 그래픽 디자인 툴은 보통 1px = 1dp로 설정되어 따로 설정을 변경할 필요는 없습니다.
고밀도 디스플레이에서 줄어든 이미지를 dp 개념에 맞춰 강제로 크기를 늘리면 이미지가 깨지는 현상이 발생합니다. 그러므로 각기 다른 디바이스에 디자인을 적용하기 위해 디자이너는 원래 크기(1배)는 물론 2배, 3배, 4배의 다양한 크기로 작업해야 합니다.
Warning: 작은 이미지를 키우면 깨지는 현상이 발생하므로 애초에 가장 큰 이미지로 제작하여 각각의 디바이스에 대응해야 합니다.
8배수 디자인
배율 디자인에서 아이콘, 이미지 등의 픽셀 크기가 8의 배수로 하는 것이 좋습니다.
디바이스가 그래픽을 렌더링하는 데 홀수의 경우 픽셀이 깨지게 되는 등의 어려움이 있기 때문에 짝수로 처리되어야 합니다. 8의 경우 1.5배 등과 같이 0.5배 시에도 소수가 아닌 정수의 값이 유지됩니다.
각 해상도 밀도들은 0.5 : 1 : 1.5 : 2 : 3 : 4의 비율을 가지고 있습니다.
4.0 xxxhdpi 기반에서 8배수에 맞춰 디자인한 예시
4.0 xxxhdpi 기반에서 32x32px의 아이콘을 만들어 각각의 밀도로 변환(다운사이징)하면:
- 1.0 mdpi = 8px
- 1.5 hdpi = 12px
- 2.0 xhdpi = 16px
- 3.0 xxhdpi = 24px
4.0 xxxhdpi 기반에서 8배수에 맞추지 않은 예시
4.0 xxxhdpi 기반에서 36x36px의 아이콘을 만들어 각각의 밀도로 변환(다운사이징)하면:
- 1.0 mdpi = 9px
- 1.5 hdpi = 13.5px (!)
- 2.0 xhdpi = 18px
- 3.0 xxhdpi = 27px
Warning: jpg나 png에서 13.5px의 넓이를 갖는 이미지는 만들 수 없습니다. 아직 1.5x 디스플레이가 존재하고 있으므로, 모든 디바이스에 대응하기 위해서는 크기와 간격을 8의 배수로 하는 것이 좋습니다.
효율성을 위한 다운사이징
이론적으로는 4.0 xxxhdpi 기반에서 디자인하는 것이 맞지만, 2.0 xhdpi 기반에서 스마트폰 기준으로 사람이 구분 가능한 픽셀 밀도인 약 430ppi를 충족하고 있으므로 효율성을 위해 2.0 xhdpi 기반에서 디자인하여 사용합니다.
2의 배수, 4의 배수 디자인은 안 되나요?
8의 배수는 가장 큰 기본 배수고 8이 포함하는 2와 4의 배수 디자인도 물론 가능합니다. 8의 경우가 모든 디바이스의 옵션이 가능하기 때문입니다. 디자인 작업 시 꼭 8배수를 지키지 않아도 되며, 2배수, 4배수도 활용하여 유연하게 디자인하는 것을 권장합니다.
Tip: 2배수, 4배수가 불가능한 옵션인 1.5 hdpi 밀도의 주요 디바이스로는 Microsoft사의 노트북 Surface 시리즈가 있습니다.
4. 그리드 시스템
그리드 시스템이란
그리드 시스템(Grid System)에서 'Grid'는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집 디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다.
그리드 시스템의 장점
디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로 보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로 내부의 기준을 정하는 데 도움이 되며, 반응형 디자인의 경우 해상도 대응이 쉬워지고 디자이너와 개발자 사이의 쉬운 커뮤니케이션 시스템이 됩니다.
그리드 시스템의 기본 요소
그리드는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성됩니다.
- 칼럼(Columns) : 실제로 콘텐츠를 포함하는 부분입니다. 칼럼의 넓이는 고정된 값으로 제공되며, 1개 이상의 칼럼이 조합하여 콘텐츠의 크기를 결정합니다. 하나의 칼럼 안에는 반드시 양 옆에 여백, 즉 거터를 동반합니다.
- 거터(Gutters) : 칼럼과 칼럼 사이의 공간입니다. 거터의 넓이 역시 고정 값으로 제공하며, 스크린의 너비에 비례하여 넓은 거터는 큰 스크린에 적합합니다.
- 마진(Margins) : 내용과 화면의 왼쪽 및 오른쪽 가장자리 사이의 공간입니다. 큰 여백은 내용 둘레에 더 많은 공백을 만들기 때문에 큰 스크린에 적합합니다.
칼럼 그리드 시스템
제한된 스크린 너비에서 칼럼의 수에 따라 콘텐츠를 표현할 수 있는 넓이는 달라집니다. 웹 디자인에서는 일반적으로 2, 3, 4, 6칼럼으로 쉽게 분할할 수 있는 12분할 그리드와 3, 5칼럼으로 분할할 수 있는 15분할 그리드를 주로 사용하고 있습니다.
Info: 그리드 시스템은 사실상 디자인 작업 시에만 필요합니다. 개발 단계에서는 분할된 칼럼을 기준으로 백분율로 사용되기 때문에 12, 15개의 고정된 칼럼 개수는 의미가 없습니다. 디자인 작업 시에 칼럼 시스템 백분율 너비를 참고하여 유연하게 그리드를 사용하는 것이 좋습니다.
5. 반응형 그리드 시스템
반응형 그리드 시스템이란
최근에는 디바이스 환경에 따라 다양한 크기의 해상도를 지원하는 반응형 그리드 시스템이 있습니다. 고정 그리드 시스템과 형태는 비슷하지만, 칼럼의 너비를 고정 값이 아닌 백분율로 지정하고 디바이스별 브레이크 포인트를 지정하여 화면 크기와 방향에 맞게 레이아웃을 조정합니다.
브레이크 포인트
특정 레이아웃 요구사항이 있는 미리 결정된 화면 크기의 범위입니다. 각 브레이크 포인트 범위는 디스플레이 크기에 따라 칼럼 수와 권장 마진 및 거터를 결정합니다.
브레이크 포인트 지정 방법
- 해상도 점유율을 통계적인 수치로 검사하여 점유율이 가장 높은 해상도를 선택하여 제작하거나, 일정 비율 이하로 낮은 해상도를 제외하고 제작합니다.
- 웹사이트 프론트 개발자는 미디어 쿼리를 이용하여 각 브레이크 포인트로 제작합니다.
- 디자인 작업 시에는 모바일, 태블릿, 데스크톱의 경우로 시안을 최소한으로 작업하고, 브레이크 포인트마다 약간의 간격 조정이 있음을 이해하고 있어야 합니다.
Tip: 칼럼 수와 거터 및 마진은 유연한 값이며 동일할 필요는 없습니다.
주요 디바이스 브레이크 포인트 그리드 예시
6. 간격 시스템
1px 단위로 디자인을 할 경우 너무 작은 단위이기 때문에 효율성이 떨어집니다. 그래서 기본 단위를 4배수에 기반한 6가지 단위로 규정하여 사용하길 권장합니다. 이 간격 시스템은 디자인 작업의 효율을 높이고 디자이너와 개발자 간의 소통을 원활하게 도와줍니다.
간격 시스템 단위
간격 시스템 적용 예시
