[초보 디자이너를 위한] SNS 이미지 작업을 위한 TIP

1. 모바일 해상도

(1) 픽셀 밀도의 변화

디스플레이의 기술 발전으로 모바일 화면의 해상도는 높아지고 있다. 이는 이미지를 더 작고 촘촘한 픽셀로 표현할 수 있음을 의미한다. 다양한 해상도를 가진 디바이스에서 미지를 같은 크기로 보여주기 위해서는 기기별로 픽셀 값을 다르게 설정해야 한다. 픽셀 밀도가 높을수록 같은 공간에 더 많은 양의 픽셀이 필요하기 때문이다. 문제는 디바이스별로 크기가 달라지면 디자이너와 개발자의 소통에 혼선이 생길 확률이 높다는 것이다. 

 

이런 문제를 방지하기 위해서 iOS와 Android는 기존의 픽셀 단위 대신 가상 단위인 pt와 dp를 도입해 이미지의 해상도를 규격화시켰다.

 

(2) iOS의 pt

iOS에서는 UI에 필요한 모든 크기를 포인트 pt로 표기한다. 예를 들어 이미지 크기가 100 X 100 (px)인 경우, 100 X 100 (pt)로 설정하면 시스템에서 자동으로 디바이스에 맞는 픽셀 밀도를 조정하여 화면에 노출시킨다.

 

(3) Android의 dp

Android에서 UI 레이아웃을 정의할 때 가상 픽셀 단위인 밀도 독립적 픽셀 단위 dp를 사용한다. pt와 마찬가지로 dp를 사용하면 디바이스가 가진 픽셀 밀도에 따라 이미지 크기를 자동으로 설정할 수 있다. 

 

2. iOS 해상도

(1) 포인트와 픽셀

포인트 단위로 측정된 크기에 픽셀 밀도를 반영하면 해상도를 구할 수 있다. 

해상도(픽셀크기) = 포인트 크기 X 픽셀 밀도 배수

 

예를 들어 화면 크기가 375 X 667 (pt)이면 화면 해상도는 750 X 1334 (px)이다.

 

(2) 모바일 웹 또는 앱을 디자인할 때 포토샵보다는 스케치나 피그마와 같이 UI에 최적화된 프로그램을 활용해서 작업하는 것이 좋다. 모바일 웹 도는 앱의 작업 사 이즌 사용하는 프로그램에 따라 달라질 수 있다. 포토샵의 경우 2배, 3 배수 크기로 작업하는 등 프로그램에 따라 다르다. 

 

(3) 해상도 예시

종이 종류	기기	화면크기 pt	픽셀 밀도 배수	화면 해상도 px
아이폰	iPhone SE	320 X 568	@2x	640 X 1136
	iPhone 8	375 X 667	@2x	750 X 1334
	iPhone X, Xs	375 X 812	@3x	1125 X 2436
아이패드	9.7인치	768 X 1024	@2x	1536 X 2048
	12.9인치	1024 X 1366	@2x	2048 X 2732

 

3. Android 해상도

(1) 일반화된 픽셀 밀도 범위

인터페이스를 디자인하는 방식을 단순화하기 위해 픽셀 밀도를 6가지로 구분한다. 화면의 밀도가 160 dpi 일 때 중간 밀도라고 하며 1dp=1px이다.

	Idpi	mdip	hdpi	xhdpi	xxhdpi	xxxhdpi
범위	~120dpi	~160dpi	~240dpi	~320dpi	~480dpi	~640dpi
배수	0.75x	1x	1.5x	2x	3x	4x

 

(2) 해상도 예시

구분	기기	화면 크기 dp	픽셀 밀도 배수	화면 해상도 px
스마트폰	갤럭시S7	360 X 640	4x	1440 X 2560
	갤노트7
	갤럭시S9	360 X 740	4x	1440 X 2560
태블릿	갤럭시탭 S	800 X 1280	2x	1600 X 2560

 

3. 웹퍼블리싱 글자

홈페이지를 제작할 때 많이 사용되는 글자 크기 단위다.

글자크기			활용
포인트 단위	픽셀 단위	퍼센트 단위
9pt	12px	75%	바닥글
10pt	13px	80%	바닥글
12pt	16px	100%	본문
13pt	17px	105%	본문
14pt	19px	120%	소제목
18pt	24px	150%	중제목
24pt	32px	200%	대제목

 

(1) 본문

스마트폰의 본문 16.5 ~ 17px을 데스크톱의 본문은 16~18px을 많이 사용한다. 하지만 글꼴에 따라 크기 조정을 해야 한다. 

 

(2) 행간 

스마트폰의 본문은 글자 크기의 170%, 제목은 150%를 추천하지만, 글꼴에 따라 조정해야 한다.

 

(3) 글줄길이

스마트폰의 본문은 30자, 데탑의 본문은 60자 정도를 추천한다.

 

4. SNS별 사이즈

(1) 페이스북

- 프로필 : 480 X 480

- 커버 : 1200 X 457

- 게시글 : 900 X 900

 

(2) 인스타그램

- 프로필 : 320 X 320

- 게시물 : 1080 X 1080

 

(3) 트위터

- 프로필 : 400 X 400

- 헤더 : 1500 X 500

- 게시물 : 1240 X 512

 

(4) 네이버 블로그

- 프로필 : 320 X 320

- 타이틀 : 966 X 300

- 게시물 : 가로 866

 

(5) 유튜브

- 프로필 : 800 X 800

- 화면비율 : 16:9