2018년 5월 25일 금요일

PC, Tab, Mobile 에 따라서 dpi와 pixel을 각각 고려해서 디자인 해야 하는 이유


640*400 사이즈의 이미지의 경우 각 디바이스에 출력될때 실제 사이즈가 위와 같이 다르게 출력된다.
만약 저 이미지가 버튼이라고 한다면 모바일에서는 손톱만큼 출력되는 버튼 이미지가 태블릿에서는 손바닥만하게 출력될 수도 있다는 말이다. 따라서 이미지의 경우 각디바이스의 dpi에 따라서 아래와 같이 다르게 준비하여야 한다.
(dpi란 1 inch 당 출력되는 pixel 수를 의미한다. 위의 경우 dpi는 PC < Tab < Mobile 순이 된다.)

먼저 위의 디바이스의 경우 dpi는 아래와 같다.
     PC : 1280 / 13 = 98 dpi
     Tab : 1280 / 9 = 142 dpi
     Mobile : 1280 / 5 = 256 dpi

A.png가 버튼이미지라고 가정하고, 모든 디바이스에서 가로 2.54cm 세로 2cm 만큼 사용자에게 보여져야 된다고 가정하고
각 이미지의 가로사이즈를 얼마로 준비 해야 하는지 계산해 보면 아래와 같다.
     2.54 cm = 1 inch

따라서 각 디바이스에 해당하는 이미지 가로 해상도는 아래와 같다.
     PC : 1 * 98 = 98 pixel
     Tab : 1 * 142 = 142 pixel
     Mobile : 1 * 256 = 256 pixel

댓글 없음:

댓글 쓰기