오토 레이아웃

도형 대신 프레임 사용 이유

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

질문사항

Figma에서 도형(Shape) 대신 프레임(Frame)을 사용해야 하는 주요 이유가 무엇인가요? 특히 개발자에게 설명할 때 어떤 점을 강조해야 할까요?

답변

Figma에서 도형(Shape) 대신 프레임(Frame)을 사용하는 것은 디자인의 구조화, 재사용성, 그리고 개발자와의 협업 효율성 측면에서 매우 중요합니다. 주요 이유는 다음과 같습니다:

오토 레이아웃(Auto Layout) 적용 가능:

프레임에만 오토 레이아웃을 적용할 수 있습니다. 오토 레이아웃은 내부 요소들의 간격, 정렬, 크기 조절 등을 자동으로 관리해주어 반응형 디자인을 쉽게 만들 수 있게 합니다.

도형은 오토 레이아웃의 부모 컨테이너가 될 수 없습니다.

컨테이너 역할:

프레임은 다른 레이어(도형, 텍스트, 이미지, 다른 프레임 등)를 담는 컨테이너 역할을 합니다. 이는 디자인 요소를 논리적으로 그룹화하고 계층 구조를 명확하게 만듭니다.

도형은 주로 단일 시각적 요소로 사용되며, 다른 레이어를 담는 컨테이너 역할에는 부적합합니다.

클리핑 콘텐츠(Clip Content):

프레임은 'Clip Content' 기능을 통해 프레임 경계를 벗어나는 내용을 숨길 수 있습니다. 이는 스크롤 가능한 영역이나 특정 영역 내에서만 보여야 하는 콘텐츠를 디자인할 때 유용합니다.

도형에는 이 기능이 없습니다.

제약 조건(Constraints) 및 반응형 디자인:

프레임 내의 요소들은 부모 프레임에 대한 제약 조건(Constraints)을 설정하여 화면 크기 변화에 따라 유연하게 반응하도록 만들 수 있습니다.

도형은 단독으로 사용될 때 제약 조건의 이점을 충분히 활용하기 어렵습니다.

컴포넌트화의 기본:

재사용 가능한 UI 컴포넌트를 만들 때, 프레임은 컴포넌트의 기본 구조를 형성하는 데 필수적입니다. 컴포넌트는 오토 레이아웃이 적용된 프레임으로 구성되는 경우가 많습니다.

개발자에게 설명할 때:

개발자들은 웹/앱 개발 시 `div`나 `View`와 같은 컨테이너 요소를 사용하여 UI를 구성합니다. Figma의 프레임은 이러한 개발 개념과 매우 유사합니다.

"Figma의 프레임은 개발에서 `div` 태그나 `View` 컴포넌트처럼 다른 요소들을 담는 '상자' 역할을 합니다. 이 상자에 오토 레이아웃을 적용하면, 내부 요소들이 자동으로 정렬되고 크기가 조절되어 반응형 웹/앱을 만드는 데 필요한 구조를 미리 디자인할 수 있습니다. 이는 개발자가 코드를 작성할 때 디자인 의도를 더 명확하게 이해하고, 효율적으로 UI를 구현하는 데 큰 도움이 됩니다." 라고 설명할 수 있습니다.