문제 해결

꽉 찬 디자인 구성요소 활용법

피그마 오픈카톡방2026. 3. 7.

질문사항

꽉 차 보이도록 디자인해야 할 때, 이미지나 늘어나도 되는 구성요소들을 어떻게 활용해야 할까요?

답변

네, 1440x960px 기준으로 디자인한 화면을 1920px 해상도에서 보여줄 때 하단에 불필요한 여백이 생겨 붕 떠 보이는 현상에 대한 고민이신 것 같습니다. 이러한 문제를 해결하기 위한 몇 가지 방법이 있습니다:

Auto Layout 활용:

콘텐츠를 담는 프레임에 Auto Layout을 적용하고, `Vertical resizing`을 `Fill container`로 설정합니다. 이렇게 하면 상위 프레임의 높이가 늘어날 때 하위 콘텐츠가 자동으로 확장되어 여백을 채울 수 있습니다.

특히, 늘어나도 괜찮은 배경 이미지나 특정 섹션에 `Fill container`를 적용하여 유연하게 대응하도록 합니다.

Constraints (제약 조건) 설정:

각 요소의 `Constraints`를 적절히 설정하여 화면 크기가 변할 때 요소들이 어떻게 반응할지 정의합니다. 예를 들어, 하단에 고정되어야 하는 요소는 `Bottom`으로, 늘어나야 하는 요소는 `Left & Right` 또는 `Top & Bottom`으로 설정할 수 있습니다.

배경 이미지나 넓은 영역을 차지하는 요소는 `Scale` 또는 `Left & Right, Top & Bottom`으로 설정하여 화면 크기에 맞춰 늘어나도록 합니다.

다양한 해상도 고려한 디자인:

처음부터 1440px, 1920px 등 여러 주요 해상도를 고려하여 디자인합니다. 가장 작은 해상도에서 콘텐츠가 잘 보이고, 큰 해상도에서는 어떻게 확장될지 미리 계획하는 것이 중요합니다.

특히, 배경 이미지나 비주얼 요소는 고해상도에서도 깨지지 않도록 충분히 큰 이미지를 사용하거나, 벡터 그래픽을 활용하는 것이 좋습니다.

고객사와의 소통:

디자인의 반응형 특성(Responsive Design)에 대해 미리 설명하고, 특정 해상도에 최적화된 디자인임을 명확히 전달합니다. 큰 해상도에서 여백이 생기는 것은 자연스러운 현상일 수 있으며, 콘텐츠의 가독성과 사용자 경험을 위해 의도된 것임을 설명할 수 있습니다.

이러한 방법들을 통해 다양한 화면 크기에서 디자인이 일관되고 의도한 대로 보이도록 관리할 수 있습니다.