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

 

 

Window 10 Pro 운영체제, 뷰포트 1536x703, 디스플레이 해상도 1920x1080, 배율 125%야.
타겟 사용자의 디스플레이를 MacBook Pro로 결정해서 피그마에서 1280x832크기의 프레임에 디자인을 해야 한다면, 어떤 식으로 디자인 해야 하고 이를 어떤 식으로 해석하여 내 디스플레이에서 개발을 진행해야 해?

ChatGPT
MacBook Pro 사용자를 타겟으로 1280x832 크기의 프레임에 디자인을 진행할 때, 그리고 Windows 10 Pro 환경에서 개발하는 경우 다음과 같은 과정을 통해 작업을 진행하는 것이 좋습니다.

1. 디자인을 Figma에서 1배수로 진행
Figma에서는 1280x832 크기의 프레임을 사용하여 MacBook Pro 타겟으로 1배수 디자인을 진행합니다. MacBook Pro의 레티나 디스플레이는 고해상도(2배수)를 지원하지만, 1배수 디자인에서 실제 크기만 맞추면 됩니다.
중요한 점은, 이미지를 포함한 그래픽 자산은 2배수 자산을 준비하는 것이 좋습니다. 예를 들어, 100px의 이미지를 사용할 때는 실제로 200px로 준비하여 레티나 디스플레이에서도 선명하게 보이도록 해야 합니다.
2. 디자인을 해석하여 개발에 반영
당신의 뷰포트 크기가 1536x703이므로, Figma에서 1280x832로 디자인한 화면을 개발할 때 상대적으로 더 크게 보일 수 있습니다. 이 차이를 인지하고 개발을 진행해야 합니다.
배율이 **125%**로 설정되어 있기 때문에, 디자인된 요소의 크기가 개발 중에 약 1.25배 커져서 보일 것입니다. 예를 들어, Figma에서 1280px로 설정된 너비는 실제로 1600px 정도로 보입니다. 따라서, 디자인을 1:1로 구현하려면 디자이너가 설정한 픽셀 크기를 참고하되, 디스플레이 배율을 고려해 적절한 테스트가 필요합니다.
3. Windows 환경에서의 확인
개발 중인 환경과 디자인된 해상도가 다르기 때문에, 최종적으로 타겟 디스플레이에서 어떻게 렌더링되는지 테스트해봐야 합니다. 개발 환경에서는 뷰포트를 조절하거나 개발 도구를 사용해 MacBook Pro 해상도에 맞춰 확인할 수 있습니다.
브라우저의 개발자 도구를 활용하여 MacBook Pro 해상도와 배율을 가정한 상태에서 확인해보는 방법도 좋습니다.
요약
Figma에서 1280x832로 1배수 디자인을 진행하되, 2배수 자산(이미지, 아이콘 등)을 준비합니다.
개발 시 Windows 환경에서는 배율 차이를 고려해 디스플레이에서 예상보다 크게 보일 수 있다는 점을 염두에 두고, 뷰포트 크기와 디자인의 상관관계를 테스트합니다.
최종적으로 MacBook Pro 디스플레이에서 디자인이 의도대로 보이는지 확인하는 단계가 중요합니다.

---
1배수 디자인을 할 때, 무슨 해상도로 디자인할 지는 생각할 필요가 없네?

ChatGPT
맞아요, 1배수 디자인을 할 때는 해상도를 크게 신경 쓸 필요가 없습니다. 1배수 디자인에서는 픽셀 단위로 작업을 진행하고, 그 픽셀 크기가 실제로 해당 화면에 그대로 적용되는 방식이기 때문에 해상도에 따라 특별히 다른 작업을 할 필요는 없습니다.

다만, 주의할 점은 디스플레이의 픽셀 밀도에 따라 보이는 결과가 달라질 수 있다는 것입니다. 예를 들어, 레티나 디스플레이와 같은 고해상도 디스플레이에서는 같은 1배수 디자인이 물리적으로 작게 보일 수 있기 때문에, 이미지나 아이콘과 같은 자산을 2배수로 준비하는 것이 좋습니다.

결론적으로, 1배수 디자인을 할 때는 디자인의 크기와 배율에 맞춰 작업하면 되고, 해상도에 맞춘 작업보다는 픽셀 크기와 디스플레이 배율에 따라 적절히 대응하면 됩니다.

---
그럼 디자인과 그 디자인을 개발할 때, 해상도를 고려해야 되는 부분은 없지?

ChatGPT
디자인과 개발 과정에서 해상도 자체는 크게 고려할 필요가 없습니다. 다만, 디스플레이 배율과 픽셀 밀도는 중요한 요소로 남아 있습니다. 아래에서 그 차이를 설명할게요:

1. 디자인 단계에서 해상도 고려
1배수 디자인은 특정 해상도에 종속되지 않으므로, 해상도를 신경 쓰지 않고 픽셀 크기대로 디자인할 수 있습니다.
하지만 고해상도 디스플레이(예: MacBook Pro의 레티나 디스플레이)에서는 **배율(2배수, 3배수)**을 고려해야 할 수 있습니다. 이때는 **그래픽 자산(이미지, 아이콘 등)**을 고해상도에서도 선명하게 보이도록 2배수 또는 3배수로 준비해야 합니다.
2. 개발 단계에서 해상도 고려
개발할 때도 디자인의 크기는 픽셀 단위로 처리되므로, 해상도 자체를 고려할 필요는 없습니다.
하지만 디스플레이의 배율과 뷰포트 크기는 여전히 중요합니다. 예를 들어, 고해상도 디스플레이에서는 브라우저가 1배수 디자인을 확대해서 보여줄 수 있으므로, 이를 개발할 때 적절하게 대응해야 합니다.
Windows에서 배율을 125%로 설정한 경우처럼, 각 요소들이 예상보다 크게 보일 수 있으므로, 브라우저의 개발자 도구를 활용해 다양한 배율에서 어떻게 보일지 미리 테스트하는 것이 좋습니다.
요약
디자인 단계: 해상도는 크게 신경 쓰지 않고, 픽셀 단위로 작업하되 고해상도 디스플레이에서 사용할 자산(이미지 등)은 배율에 맞춰 준비.
개발 단계: 해상도 자체는 신경 쓰지 않으나, 디스플레이의 배율과 뷰포트 크기를 고려한 테스트가 필요.
따라서, 해상도 자체를 고려할 필요는 없지만, 디스플레이의 배율과 뷰포트 크기만 신경 쓰면 됩니다.

 

 

---

 

 

• 개발 단계
  • Windows 환경에서 디스플레이 배율이 125%로 설정되어 있다면, **MacBook Pro 1배수 디자인(1512x982 해상도)**에 맞춰 개발자 도구에서 브라우저 크기를 1512x982로 설정합니다.
  • 브라우저 배율을 125%로 조정하여 MacBook Pro와 최대한 비슷한 화면 비율과 크기로 개발을 진행합니다.
• 시연 단계
  • 시연 시에는 Windows 환경의 브라우저 배율을 80%로 조정하여 MacBook Pro와의 화면 비율 및 해상도 차이를 보정합니다.
  • 북마크 바가 보이는 상태에서 시연하는 것이 일반적이며, 실제 사용자의 환경을 고려해 브라우저 UI와 함께 보여줍니다.