[WEB] 피그마 협업 시 1배수 디자인 고려할 점(해상도, 배율, 뷰포트)

상황 설명

제가 사용하는 환경은 "Windows 10 Pro, 해상도 1920x1080, 뷰포트 1536x703, 디스플레이 배율 125%"입니다.
이 상태에서 타겟 사용자의 디스플레이를 MacBook Pro로 정하고, 피그마에서 1280x832 크기의 프레임으로 디자인을 진행해야 한다면, 어떻게 디자인을 해야 하고 이를 내 환경에서 어떻게 해석해 개발해야 할까요?

 

여기서 중요한 점은, 해상도 자체는 문제 되지 않는다는 것입니다. 해상도는 하드웨어가 가진 픽셀 수 차이일 뿐 개발자가 바꿀 수 있는 영역이 아닙니다.
혼란의 원인은 개발자가 사용하는 PC(예: Windows 125% 배율, 특정 뷰포트)에서 디자인이 의도와 다르게 보이는 상황입니다.
따라서 개발자는 자신의 환경을 타겟 사용자 환경(MacBook Pro 1배수 디자인 기준 뷰포트)과 맞춰 조정해야 합니다. 즉, 개발자 PC의 고유한 배율/뷰포트가 기준이 되어서는 안 되고, 타겟 환경과 동일한 조건으로 맞춘 뒤 개발·테스트해야 혼란을 줄일 수 있습니다.

예시:

• Windows 1920x1080 + 125% 배율 → Figma 1280px 디자인이 실제보다 커 보임.
• 하지만 실제 타겟은 MacBook Pro(1280x832 1배수).
• 따라서 개발자는 크롬 DevTools에서 뷰포트를 1280x832로 맞추고, 필요하면 브라우저 배율도 조정해 MacBook Pro 화면과 동일하게 확인해야 함.

---

MacBook Pro 타겟 디자인 원칙

MacBook Pro를 기준으로 1280x832 프레임을 설정하면, 이는 1배수 디자인입니다.
MacBook Pro는 레티나 디스플레이(2배수 이상)를 사용하지만, 디자인 자체는 1배수 기준으로 잡으면 충분합니다.
다만, 레티나 환경에서 이미지와 아이콘이 흐려지지 않도록 그래픽 자산은 2배수 이상(@2x, @3x) 으로 준비해야 합니다.

---

Windows 환경에서의 개발 시 고려할 점

제가 개발하는 Windows 환경(125% 배율)에서는 다음 사항을 반드시 고려해야 합니다.

1. 디자인 해석 차이
   • 제 뷰포트(1536x703)에서 1280x832 디자인은 상대적으로 크게 보입니다.
   • 특히 125% 배율이 적용되어, 디자인의 크기가 실제보다 약 1.25배 커진 상태로 보입니다.
   • 예: Figma에서 1280px로 설정된 너비 → 제 화면에서는 약 1600px처럼 보임.
2. 픽셀 단위 구현 원칙
   • 그렇다고 해서 개발할 때 픽셀 수치를 조정하는 것은 아닙니다.
   • 여전히 디자인 픽셀 수치(1280px) 를 그대로 반영해야 하고, 단지 환경 차이로 보이는 크기만 다르다는 점을 인지하고 개발하면 됩니다.
3. 환경별 확인 방법
   • 크롬 개발자 도구에서 MacBook Pro 해상도(1280x832, 또는 1512x982)로 뷰포트를 설정합니다.
   • 이렇게 하면 MacBook Pro 환경에서의 실제 결과를 가정해 테스트할 수 있습니다.

---

1배수 디자인과 해상도

많이 하는 질문이 있습니다.
“1배수 디자인을 할 때, 특정 해상도를 기준으로 잡아야 하지 않나?”

정답은 그럴 필요 없다입니다.
1배수 디자인은 픽셀 단위 그대로 진행하기 때문에 특정 해상도에 종속되지 않습니다.
즉, 디자인을 1280px로 잡았다면, 그대로 1280px로 구현하면 됩니다.

다만, 픽셀 밀도와 디스플레이 배율에 따라 보이는 결과가 달라질 수 있으므로, 이미지와 아이콘 자산은 반드시 2배수 이상으로 준비해야 합니다.

---

개발 시 해상도 고려 여부

그렇다면 “디자인과 개발 단계에서 해상도를 고려해야 할 부분은 없지 않나?” 라는 질문이 나옵니다.
정리하면 다음과 같습니다.

• 디자인 단계:
  해상도는 신경 쓰지 않고 픽셀 단위로 작업합니다.
  다만 레티나 같은 고해상도 디스플레이에서는 자산을 2배수, 3배수로 준비해야 합니다.
• 개발 단계:
  해상도 자체는 고려하지 않아도 됩니다.
  그러나 디스플레이 배율(예: Windows 125%)과 뷰포트 크기는 반드시 확인해야 합니다.
  배율 차이 때문에 의도한 것보다 크게/작게 보일 수 있으므로, 개발자 도구로 다양한 배율에서 미리 테스트하는 것이 필요합니다.

즉, 해상도는 고려하지 않아도 되지만, 배율과 뷰포트는 고려해야 한다는 것이 핵심입니다.

---

실제 개발 및 시연 팁

실무에서는 다음과 같은 방법으로 접근하면 효과적입니다.

• 개발 단계:
  Windows 환경(배율 125%)에서 크롬 개발자 도구로 MacBook Pro 해상도(1512x982)를 설정합니다.
  동시에 브라우저 배율을 125%로 맞추면, MacBook Pro 환경과 비슷한 비율로 결과를 볼 수 있습니다.
• 시연 단계:
  시연할 때는 Windows 브라우저 배율을 80% 정도로 낮추면, MacBook Pro 화면 비율과 가장 가깝게 맞출 수 있습니다.
  북마크 바가 보이는 상태로 시연하는 것도 실제 사용자 경험과 유사합니다.

---

최종 요약

• 디자인은 1배수(1280x832) 기준으로 작업.
• 이미지/아이콘은 2배수 이상 자산 준비.
• 개발 단계에서는 픽셀 단위 그대로 구현, 해상도는 신경 쓸 필요 없음.
• 다만, 디스플레이 배율(125%)과 뷰포트 크기 차이는 반드시 테스트해야 함.
• 개발자 도구와 브라우저 배율 조정을 활용해 MacBook Pro 환경을 최대한 유사하게 재현.