디자인이 디바이스에 표현되는 방식
물리적 해상도, 논리적 해상도 등
디자인 작업물 하나로 어떻게 다양한 크기의 화면에 모두 적용이 될까요? 피그마(Fimga)나 스케치(Sketch) 같은 UXUI 프로그램에서 작업한 크기 단위가 특정 디바이스에 표현될 때, 그 디바이스의 해상도에 맞춰 크기가 조절됩니다.
디자이너라면 이 과정을 알아두면 좋습니다. 작업한 디자인이 실제 결과물과 다르게 표현되었을 때 원인을 이해할 수 있으니까요. 원인을 몰라서 괜히 개발자의 실력을 의심하는 상황을 만들지 않기를 바랍니다.
전체적인 과정
디자인 작업물이 디바이스 화면에 적용되기까지 총 4가지 단계가 있습니다. 하이라이트로 표시한 4개가 각 단계를 표현하는 대표 키워드입니다. 단계별로 키워드에 대해 알아보도록 하겠습니다.
1. 피그마 작업 = 논리적 해상도로 화면을 설계
2. 작업한 디자인 요소 추출 = 논리적 해상도 크기를 물리적 해상도로 변경
3. 추출할 수 없는 디바이스에 대응하기 = 다운 샘플링
4. 실제 적용하기 = 각 디바이스에 추출한 디자인 적용
논리적 해상도
디자인 작업할 때 사용되는 해상도
피그마나 스케치와 같은 UXUI 프로그램에서 작업하는 화면을 논리적 해상도라고 합니다. 웹이나 앱을 디자인할 때 기준이 되는 해상도입니다. 이전 편에서 말했던 PT, DP, SP 단위가 해당됩니다. PT, DP, SP 단위로 작업하면 여러 디바이스 해상도에 따라 자동으로 비율이 조절된다는 내용이 논리적 해상도로 작업한다는 뜻입니다.
물리적 해상도
디스플레이로 보이는 기본 해상도
피그마로 작업한 디자인(x1)에서 개발할 때 기기에 정해진 배율(x2, x3..)만큼 얻는 픽셀값을 물리적 해상도라고 합니다. 이전에 말했던 레티나 디스플레이 기술이 적용되는 단계라 할 수 있습니다.
지금 보는 이미지처럼 논리적 해상도가 디바이스 크기의 배율만큼 픽셀로 만드는 과정을 래스터화라고 합니다. 물리적 해상도로 만드는 과정을 래스터화라고 할 수 있습니다.
예를 들어, 아이콘을 일러스트에서 제작했습니다. 일러스트는 벡터 속성이기 때문에 제작한 아이콘 크기를 늘려도 포토샵처럼 화질이 깨지지 않습니다. 하지만 디바이스 화면에 아이콘이 표현되려면 포토샵처럼 픽셀 단위가 필요합니다. 일러스트에서 제작한 아이콘을 디바이스의 픽셀 사이즈로 만드는 과정(래스터화)이 필요한 것이죠.
다운 샘플링
디스플레이로 보이는 기본 해상도를 수정
대부분의 디바이스는 아래 배율값에 맞춰 제작되어 있지만 예외는 항상 있기 마련입니다. 만약 디바이스 중에 3 배율보다는 작지만 2 배율보다는 높은 해상도가 있다면 어떻게 처리해야 할까요. 3 배율로 추출해서 사이즈를 줄이면 해결될 것입니다. 이 과정을 다운 샘플링이라 합니다.
다운 샘플링이 적용되는 대표적인 디바이스가 아이폰6+입니다. 아이폰6+은 논리적 해상도가 414x736인데 디바이스의 해상도는 1080x1920 픽셀 크기입니다. 계산해 보면 아이폰6+는 피그마에서 작업한 뒤 약 2.61 배율로 추출해야 하는데 예외 케이스라서 대표 배율(x2, x3 등)처럼 추출이 불가능합니다.
이런 문제를 다운 샘플링으로 해결합니다. 3 배율로 추출한 크기를 1080x1920 픽셀 화면에 다른 디바이스와 동일한 버튼 크기로 보이도록 줄여서 버튼 이미지가 깨지지 않도록 만드는 것입니다. 포토샵에서 원본 이미지 크기를 늘리면 화질이 깨지지만, 원본 이미지 크기를 줄이면 화질이 깨지지 않는 것과 같은 원리입니다.
실제 적용
마지막 단계
피그마에서 작업한 버튼을 디바이스 해상도에 필요한 픽셀 크기로 변환했다면, 실제 디바이스 해상도에 표현된 디자인 요소를 검토하면 됩니다. 이때 디자이너는 '디바이스마다 ppi가 달라서 선명도가 다를 수 있다'는 점을 인지하는 것이 중요합니다.
동일한 디바이스 크기여도 ppi가 다르면, 디자인 선명도가 달라지기 때문에 얇은 선이 ppi가 낮은 디바이스에서는 안 보일 수도 있습니다. 이 점을 디자이너가 이해하고 있다면, 개발자에게 왜 선을 넣지 않았냐며 따지는 일은 없을 것입니다. 우리 앱이 ppi가 낮은 디바이스에 꼭 대응을 해야 하는 상황에서 얇은 선을 다시 설계하면 되는 일이니까요.
정리
1. 논리적 해상도 : 피그마나 스케치로 작업할 때 사용하는 크기 단위
2. 물리적 해상도 : 피그마나 스케치에서 작업한 단위를 각각 디바이스 픽셀 크기로 변경한 것(x2, x3...)
3. 래스터화 : 벡터 속성을 디바이스에 필요한 픽셀 단위(비트맵 속성)로 변경하는 것
4. 다운 샘플링 : 1.3 배율이 필요한 디바이스라면, 2배율로 추출해 해당 디바이스 크기에 맞추는 것
