[Figma] 디자인하기 전 알아야 하는 UI 기술 지식

 

디자인하기 전 알아야 하는 UI 기술 지식에 대해 알아보자

 

 

 

용어	설명
스크린 사이즈 (screen size)	화면의 대각선 길이, 단위는 인치
해상도 (resolution)	화면의 총 픽셀 수
ppi (pixels per inch)	화소 밀도, 디스플레이에서 인치당 픽셀 수
dpi (dots per inch)	픽셀 밀도, 화면의 실제 영역 내에 있는 픽셀 수
dp (density-independent pixels)	안드로이드 사이즈 단위. 화면 크기와 해상도가 달라도 레이아웃을 동일한 비율로 보여주기 위해 안드로이드에서 정의한 단위
sp (scale-independent pixels)	안드로이드 텍스트에서만 사용하는 단위. dp와 동일한 비율
pt (point)	iOS 사이즈 단위. dp와 같은 역할

 

 

---

 

해상도와 화소 밀도 (PPI)

화소 밀도는 디스플레이에서 1인치에 들어가는 픽셀 수이며 ppi로 나타낸다. 화소 밀도가 높을수록 화면이 선명해지며, 스크린 사이즈와 해상도, 화소 밀도는 비례하지 않고 기기마다 다르다. 

 

해상도와 ppi가 높을수록 이미지가 선명해진다. 

해상도가 높으면 더 조밀한 픽셀로 레이아웃을 표현하므로 전체적인 디자인이 작아진다. 

바람을 넣은 풍선에 그림을 그리고 바람을 빼면 그림이 작아지는 원리로 생각하면 이해하기 쉽다.

 

 

---

 

픽셀 밀도 (DPI)

픽셀 밀도는 화면의 실제 영역 내에 있는 픽셀 수이며 dpi로 나타낸다. 이 밀도는 화면상의 총 픽셀 수인 해상도와 다르다.

다양한 디바이스에 디자인이 같은 비율로 보이도록 1x를 기본으로 디자인한다.

 

디자인은 1x로 하지만 디바이스에는 각 배율로 보이게 된다. 이미지는 가장 최신 디스플레이에서 깨지지 않는 해상도로 준비해야 한다. 최근에는 모바일 디스플레이나 맥 레티나 화면의 해상도가 높아 1x 이미지는 사용자에게 흐리게 보일 확률이 높다.

 

항상 2x로 PNG 이미지를 Export 해야 한다는 점을 기억하자.

 

dpi	픽셀 밀도	안드로이드 배율	iOS 배율
mdpi	~160dpi	1x	@1	기준
hdpi	~240dpi	1.5x
xdpi	~320dpi	2x	@2
xxhdpi	~480dpi	3x	@3
xxxhdpi	~640dpi	4x

 

 

---

 

픽셀 단위 (DP, SP, PT)

안드로이드와 iOS는 디자인 요소가 여러 디스플레이에서 같은 비율로 보일 수 있도록 독립된 단위를 사용한다.

단위를 px로 지정하면 디스플레이의 물리적 픽셀로 인식하여 화면별로 사이즈가 달라진다.

 

이를 방지하기 위해 논리적 픽셀 단위인 dp를 사용한다.

 

dp: 안드로이드 기본 사이즈 단위

sp: 안드로이드 텍스트에서 사용하는 단위

pt: iOS 사이즈 단위로 dp와 같다.

 

iOS는 단위를 pt로 통일해서 사용한다. 모든 기기에서 디자인이 동일하게 보이는 1x 사이즈에서 시작해서 2x, 3x로 늘려서 대응한다. 

 

 

---

 

 

8px 그리드

디자인 에셋의 사이즈, 간격 및 모든 수치를 8단위로 맞추면 모든 디바이스에서 픽셀이 깨지지 않고 개발 친화적인 디자인을 할 수 있다. 그러므로 디자인 요소들의 사이즈는 8의 배수로 결정하는 게 좋다. 스크린 사이즈가 8bit를 기준으로 발전했기 때문에 8을 기본으로 해야 이미지가 깔끔하게 렌더링 된다.