오토 레이아웃

반응형 레이아웃 컴포넌트 관리

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

질문사항

화면 비율에 따라 디자인이 달라지는 반응형 레이아웃(예: 특정 사이즈 이하에서 이미지가 아래로 내려가는 등)을 피그마 컴포넌트로 관리할 때 어떤 방식을 사용하시나요?

답변

반응형 디자인을 컴포넌트로 관리할 때는 주로 오토 레이아웃(Auto Layout)과 변수(Variables)를 활용합니다.

Auto Layout Wrap: PC에서 3단 레이아웃이 모바일에서 1단으로 변경되는 경우처럼, 요소들이 특정 너비 이하에서 자동으로 다음 줄로 넘어가도록 하려면, 상위 오토 레이아웃 프레임의 `Wrap` 속성을 활성화합니다. 이렇게 하면 프레임의 너비가 줄어들 때 내부 요소들이 자동으로 재배치됩니다.

Variables (변수): 디바이스별로 다른 사이즈나 간격 등을 정의하는 데 변수를 활용할 수 있습니다. 예를 들어, 데스크톱과 모바일의 패딩 값이나 컴포넌트의 너비 등을 변수로 설정하고, 모드(Mode)를 전환하여 각 디바이스에 맞는 디자인을 빠르게 확인할 수 있습니다.

인스턴스 스왑(Instance Swap): 모든 반응형 케이스를 오토 레이아웃과 변수로만 처리하기 어려운 경우도 있습니다. 특정 브레이크포인트에서 완전히 다른 구조의 컴포넌트가 필요하다면, 해당 브레이크포인트에 맞는 별도의 컴포넌트 베리언트를 만들고 인스턴스 스왑을 통해 교체하는 방법을 사용할 수 있습니다.

가장 효과적인 방법은 이 세 가지 기능을 유동적으로 조합하여 사용하는 것입니다. 최대한 오토 레이아웃과 변수로 처리하되, 복잡한 케이스는 인스턴스 스왑을 활용하는 것이 좋습니다.