컴포넌트 & 인스턴스

인스턴스 속성 변경 시 문제

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

질문사항

인스턴스의 속성을 변경할 때 인스턴스가 확대되거나 corner radius 값이 변경되는 현상이 발생합니다. 마스터 컴포넌트에서는 이런 문제가 없는데, 인스턴스에서만 발생합니다. 원인이 무엇일까요?

답변

인스턴스에서 속성 변경 시 확대되거나 `corner radius` 값이 변경되는 현상은 주로 다음과 같은 원인으로 발생할 수 있습니다.

오버라이드(Override) 충돌 또는 잔여 오버라이드:

이전에 인스턴스에 적용되었던 오버라이드 값이 남아있거나, 마스터 컴포넌트의 변경 사항과 인스턴스의 오버라이드가 충돌할 때 발생할 수 있습니다.

해결책: 해당 인스턴스를 선택하고 마우스 오른쪽 버튼 클릭 후 `Reset all changes`를 시도해보세요. 이렇게 하면 인스턴스가 마스터 컴포넌트의 원래 상태로 돌아가면서 오버라이드가 초기화됩니다. 이후 다시 속성을 변경해보세요.

Auto Layout 설정 문제:

컴포넌트나 그 내부 요소에 `Auto Layout`이 적용되어 있을 경우, 내부 요소의 크기나 패딩/간격 설정이 변경되면서 전체 인스턴스의 크기가 예상치 못하게 변할 수 있습니다.

특히 `Hug contents`나 `Fill container` 설정이 복합적으로 사용될 때 이런 현상이 나타나기 쉽습니다.

해결책: 마스터 컴포넌트와 인스턴스 내부의 `Auto Layout` 설정을 자세히 확인해보세요. `Resizing` 속성(Hug, Fill, Fixed)이 올바르게 설정되어 있는지, 패딩(Padding)이나 아이템 간 간격(Space between items)이 의도한 대로 작동하는지 검토해야 합니다.

제약 조건(Constraints) 문제:

`Auto Layout`이 아닌 일반 프레임 내의 요소에 `Constraints`가 적용되어 있을 경우, 부모 프레임의 크기가 변경될 때 자식 요소의 크기나 위치가 예상과 다르게 변할 수 있습니다.

해결책: 마스터 컴포넌트 내의 요소들에 적용된 `Constraints` 설정을 확인하고, `Scale`이나 `Left & Right`, `Top & Bottom` 등의 설정이 적절한지 검토하세요.

Nested Components (중첩 컴포넌트) 문제:

`card` 컴포넌트 안에 `썸네일` 컴포넌트가 중첩되어 있다면, `썸네일` 컴포넌트 자체의 `Resizing` 설정이나 내부 `Auto Layout` 설정이 `card` 인스턴스에 영향을 줄 수 있습니다.

해결책: `썸네일` 마스터 컴포넌트의 설정을 먼저 확인하고, 그 다음 `card` 마스터 컴포넌트의 설정을 확인하여 서로 어떻게 상호작용하는지 파악해야 합니다.

가장 먼저 `Reset all changes`를 시도해보시고, 그래도 문제가 해결되지 않는다면 `Auto Layout` 및 `Constraints` 설정을 면밀히 검토해보시는 것을 추천합니다.