[UI] 2배수, 3배수 작업을 하는 이유: 피그마와 포토샵

UI 디자인에서 이미지와 그래픽의 해상도는 사용자 경험에 큰 영향을 미칩니다. 포토샵과 피그마와 같은 디자인 도구를 사용할 때, 2배수 또는 3배수로 작업하거나 export해야 한다는 말을 자주 듣게 되는데, 왜일까요?

---

포토샵에서 2배수, 3배수로 작업해야 하는 이유가 뭘까요?

포토샵에서 2배수 또는 3배수 작업을 하는 이유는 주로 고해상도 디스플레이를 지원하기 위해서입니다.

레티나 디스플레이와 같은 고해상도 디스플레이는 픽셀 밀도가 높아서 표준 해상도의 이미지가 작고 흐릿하게 보일 수 있습니다. 이를 방지하기 위해 원래 크기보다 큰 이미지를 사용하여 고해상도에서도 선명하게 보이도록 합니다. 예를 들어, 100x100 픽셀의 이미지를 200x200 픽셀(2배수) 또는 300x300 픽셀(3배수)로 제작하여 레티나 디스플레이에서도 깨끗하게 보일 수 있도록 합니다.

---

피그마에서는 1배수로 작업하는 이유

포토샵과 피그마의 핵심 차이 중 하나는 포토샵이 비트맵(bitmap) 기반인 반면, 피그마는 벡터(vector) 기반으로 작업을 지원한다는 것입니다.

피그마는 벡터 기반이기 때문에, 기본적으로 1배수 작업을 지원합니다. 즉, 화면 크기와 픽셀 해상도가 1:1로 매칭됩니다. 예를 들어, 360x616 픽셀로 작업하면 이는 360dp x 616dp로 변환될 수 있습니다. 피그마의 이러한 특성은 디자이너가 복잡한 계산 없이 직관적으로 작업할 수 있도록 도와줍니다.

---

그럼에도 피그마 작업 시에 이미지는 배수로 export하는 이유

디자인을 완성한 후에도 이미지는 여전히 배수로 export해야 할 필요가 있습니다. 이는 다양한 해상도를 지원하는 디바이스에서 일관된 품질을 유지하기 위해서입니다. 예를 들어, 1배수로 디자인된 이미지가 2배수, 3배수 해상도의 디바이스에서도 똑같이 선명하게 보여야 합니다. 따라서, 피그마에서도 최종 이미지를 export할 때는 2배수 또는 3배수의 옵션을 선택하여 고해상도 디스플레이를 지원할 수 있도록 해야 합니다.