[FIGMA] 아토믹 디자인 시스템 적용 시 발생하는 스케일 버그

1. 배경

Figma에서 아토믹 디자인 시스템을 적용할 때, Variants를 활용하여 다양한 모드를 설정하거나 Swap Instance 기능을 사용하여 인스턴스를 교체하는 경우가 많다. 그러나 이러한 작업을 수행할 때, 인스턴스 크기를 변경하면 중첩된(Nested) 컴포넌트가 원래 크기로 돌아가거나, 제자리에 위치하지 못하는 버그가 발생할 수 있다. 이 문제는 디자인 시스템을 체계적으로 관리하고자 할 때 심각한 장애 요소가 된다.

2. 문제의 원인

• 컴포넌트 구조: Figma에서 중첩된 컴포넌트가 포함된 인스턴스를 변경하면, 내부 컴포넌트의 크기가 자동으로 원본 크기로 되돌아가는 경우가 있다.
• 자동 레이아웃(Auto Layout)의 한계: 자동 레이아웃을 적용하더라도 중첩된 컴포넌트가 원래 크기를 유지하려는 경향이 있다.
• 제약 조건(Constraints) 오류: 일부 경우에는 부모 요소의 크기가 변경되면서, 자식 요소가 의도한 대로 확장되지 않고 원래 위치에서 벗어나거나, 크기가 이상하게 조정되는 경우가 있다.

3. 해결 방법

(1) 컴포넌트 프로퍼티 활용하기

피그마의 컴포넌트 프로퍼티(Component Properties) 기능을 활용하면, 중첩된 컴포넌트의 속성을 상위 컴포넌트에서 제어할 수 있다. 이를 통해 중첩된 컴포넌트의 크기와 위치를 부모 인스턴스에서 직접 수정할 수 있으며, 스케일 오류를 방지할 수 있다.

(2) 중첩 인스턴스의 프로퍼티 노출

중첩된 인스턴스의 프로퍼티를 상위 레벨에서 노출하는 설정을 활성화하면, 개별 인스턴스가 독립적으로 크기 변경을 수용할 수 있도록 조정할 수 있다. 단, 마스터 레벨에서 사이즈가 있거나, 조정되는 상태여야 한다.

(3) Auto Layout과 Constraints 조정

• 중첩된 컴포넌트에서 Fixed Width/Height을 설정하면 부모 인스턴스 변경 시 크기가 자동으로 되돌아가는 현상이 발생할 수 있다. 따라서 Hug Contents 또는 Fill Container 설정을 적절히 조정해야 한다.
• 부모 인스턴스에서 Resizing을 Scale이 아니라 Stretch 또는 Fixed로 변경하면, 중첩된 요소가 원래 크기로 되돌아가는 현상을 방지할 수 있다.

(4) 오버라이드(Overrides) 재설정

인스턴스에서 크기 변경이 필요할 경우, 기존 오버라이드를 유지하는 것이 아니라 재설정을 통해 원본 컴포넌트의 속성을 유지해야 한다. 불필요한 스타일, 패딩 값이 자동으로 되돌아가는 현상을 줄이려면, 컴포넌트 변경 전 오버라이드가 정확히 적용되었는지 확인하는 것이 중요하다.

4. 해외 피그마 포럼에서 논의된 해결 방법

해외 Figma 커뮤니티 및 Reddit에서도 인스턴스 크기 조정 시 발생하는 문제와 해결 방법에 대한 논의가 이루어지고 있다.

• Component handling in an established design system에서는 컴포넌트 구조를 간소화하고, 최소한의 Variants를 사용하여 스케일 버그를 줄이는 방식을 제안한다.
• Figma 공식 포럼에서는 Auto Layout과 Constraints를 올바르게 설정하는 것이 가장 중요한 해결 방법으로 논의되고 있다.

결론적으로...

Figma에서 아토믹 디자인 시스템을 적용할 때, 스케일 버그는 빈번하게 발생할 수 있지만, 컴포넌트 프로퍼티 활용, 중첩 인스턴스 프로퍼티 노출, Auto Layout과 Constraints 조정, 오버라이드 재설정 등의 방법을 통해 효과적으로 해결할 수 있다. 하지만 안되는 경우가 잦아서 또다른 해결법을 찾아 가야 한다.

해외 디자이너들도 유사한 문제를 겪고 있으며, 디자인 시스템을 보다 체계적으로 운영하려면 컴포넌트 구조의 단순화와 올바른 Auto Layout 활용이 핵심이라고 할 수 있다.

다만, 실제 적용해서 본인만의 노하우를 깨치는 데 까지는 꽤 시간이 걸린다. 그리고 꼭 회고록을 작성해서 다양한 케이스 스터디를 기록하는것도 잊지 말자.