피그마 해상도와 단위 용어에 관하여

 

스크린 사이즈 (screen size): 화면의 대각선 길이. 단위는 인치

해상도(resolution): 화면의 총 픽셀 수

ppi (pixels per inch): 화소 밀도. 디스플레이에서 인치당 픽셀 수

dpi(dots per inch): 픽셀 밀도. 화면의 실제 영역 내에 있는 픽셀 수

do (density-independent pixels)

sp (scale-independent pixels)

pt (point)

 

 

픽셀 밀도(DPI)

픽셀 밀도는 화면의 실제 영역 내에 있는 픽셀 수이며 dpi로 나타냅니다.

이 밀도는 화면상의 총 픽셀 수인 해상도와 다릅니다.

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

디자인은 1x로 하지만 디바이스에는 각 배율로 보이게 됩니다.

이미지는 가장 최신 디스플레이에서 깨지지않는 해상도로 준비해야 합니다.

최근에는 모바일 디스플레이나 맥 레티나 화면의 해상도가 높아 1x 이미지는 사용자에게 흐리게 보일 확률이 높습니다.

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

 

mdpi 이전에 피처폰급의 Idpi라는 0.75X 배율이 있었지만

스마트폰 보급률이 낮은 지역의 글로벌 서비스 같은 특수한 경우를 제외하고 현재는 쓰이지 않습니다.

Export에서 제공하는 0.75x 배율의 프리셋 사이즈는 이 때문입니다.

 

8px 그리드

디자인 에셋의 사이즈, 간격 및 모든 수치를 8단위로 맛추면 모든 디바이스에서 픽셀이 깨지지않고 개발 친화적인 디자인을 할 수 있습니다. 그러므로 디자인 요소들의 사이즈는 8의 배수로 결정하는 게 좋습니다.

스크린 사이즈가 8bit를 기준으로 발전했기 때문에 8을 기본으로 해야 이미지가 깔끔하게 렌더링됩니다.

엄밀히 말해 PX는 물리적 픽셀이기 때문에 8pt나 8dp로 표시해야 하지만 여기에선 익숙한 단위인 8px로 표시합니다.

 

 

작은 버튼과 같은 경우에는 패딩 영역을 키워서 터치 영역을 만들어줍니다.

일반적으로 터치 영역은 44× 44 사이즈 이상을 권장합니다.

하지만 상황에 따라 그 보다 작아지는 경우도 많습니다.

 

 

 

 

브라우저에서는 SRGB만 사용 가능합니다.

데스크톱 앱에서는 더 넓은 색상 범위인 Unmanaged가 기본으로 선택되어 있습니다.

브라우저와 다른 디스플레이와 통일성을 맞추려면 더 범용적인 컬러 프로필인 SRGB로 선택하는 것도 좋은 방법입니다.

 

안드로이드 기본 서체

한글: NATO SANS CJK KR

영문: ROBOTO

 

한글: SD GOTHIC NEO

영문: SF PRO DISPLAY

 

+

안드로이드 기본 서체가 본고딕와 roboto라는건 처음 알았네!

roboto서체 이름은 많이 들어봤는데

 

 

2022.11.22 - [figma] - Figma 기초 다시 배우기

Figma 기초 다시 배우기

2021.02.23 - [figma] - figma 초보 입문기

figma 초보 입문기