Variants 기능의 추가로 인한 부작용

💡 2021년 기준, 이 내용은 해결되었습니다.

2020년 10월 말, 피그마는 Variants 라는 아주 유용한 기능이 포함된 업데이트를 진행했는데요, 좋은 점이 굉장히 많은 기능입니다(아래 영상을 참고해 주세요).

하지만, **이 문서에서는 그로 인해 발생한 부작용에 대해 다루고자 합니다. **

⚠️ 구글 시트 플러그인의 사용성이 상당히 떨어지게 되었어요. 이 플러그인을 사용하지 않았던 분들에게는 부작용이 크게 와 닿지 않을 수 있습니다.

Google Sheet Sync 플러그인을 모르는 분들을 위해 링크를 첨부합니다https://www.figma.com/community/plugin/735770583268406934/Google-Sheets-Sync

업데이트 전

피그마에서 인스턴스의 레이어 이름을 자유롭게 바꿀 수 있었습니다.
Google Sheet Sync 라는 플러그인을 사용해 피그마로 구글 스프레드시트의 텍스트를 가져올 수 있었어요. 다만 피그마 텍스트 레이어와 시트 컬럼의 이름을 일치시켜 줘야 하는데요, 피그마의 컴포넌트 기능을 사용하고 있다면 그 안에 있는 텍스트 레이어의 네이밍을 바꿔야 상황에 맞게 싱크를 맞출 수 있는 것입니다.
재사용성이 높은 컴포넌트 기능을 응용하여, 복제된 인스턴스 안의 텍스트 레이어 이름을 바꾸는 것으로, 메인 컴포넌트를 하나로 유지한 채 텍스트를 여러 버전으로 관리할 수 있었습니다.
이 기능은 하나의 프로젝트를 여러가지 언어로 관리하는 데 굉장히 유용해요.

업데이트 후

Variants 라는 기능이 추가되면서, 컴포넌트의 네이밍 규칙이 바뀌었어요. 인스턴스의 레이어 이름을 바꿀 수 없게 되는 변화가 있었습니다.
따라서 앞으로 Google Sheet Sync 를 사용해 텍스트를 관리하기 위해서는, 텍스트 레이어 이름을 메인 컴포넌트에서 설정하는 수밖에 없습니다.
기존의 메인 컴포넌트는 굉장히 넓은 범위에서 사용되고 있을 가능성이 높아요. 그것을 전부 고려해 바꾸는 것은 많은 시간이 소요됩니다.
한창 진행중인 기존 프로젝트에서는, 당장의 빠른 적용을 위해 기존의 인스턴스를 전부 detach 하고 일일이 텍스트 레이어 이름을 바꿔서 시트를 사용하게 됩니다.
그런데 그렇게 작업하면 자연스레 컴포넌트끼리 연동된다는 장점이 사라집니다. 따라서, Variants 기능과 관계없이 시트를 이용한 텍스트 관리에는 기존보다 많은 시간이 소요됩니다.

해결책?

피그마가 롤백하지 않는 이상, 기존 프로세스를 그대로 사용할 수는 없습니다. 웹 기반 툴이라는 특성 때문에요.
Workaround도 간단하지만은 않습니다.
1. 메인 컴포넌트 제작 당시부터 구글 시트의 적용을 염두에 두고 네이밍을 할 수 있어요.
2. 앞서 기술한 것처럼, 구글 시트를 사용할 프로젝트만 전부 detach하여 관리할 수 있습니다.

→ 디자인 시스템 전체 리팩토링 수준의 많은 시간 소요가 예상됩니다.

→ 해당 컴포넌트에는 dev를 위한 네이밍이 불가능하게 됩니다.

*→ 일괄적으로 **detach**하는 기능을 피그마에서 제공하지 않기 때문에, **nested component*가 많을 수록 detach 자체에 긴 시간이 소요됩니다.

*→ 모두 **detach*했을 경우 컴포넌트 레벨로 관리할 수 없습니다.

인사이트

피그마는 웹 기반의 툴이기 때문에 유저는 최신 업데이트를 항상 따라갈 수밖에 없습니다. 좋은 업데이트만 있다면 상관 없으나, 이렇게 기존 프로세스와 충돌할 경우 툴 사용에 있어 하나의 위험 요인으로 작용할 것 같아요.
특히, 플러그인은 피그마가 직접 개발하지 않는다는 사실을 염두에 두어야 할 것 같습니다. 플러그인의 사용은 좋지만, 이번처럼 피그마의 업데이트로 인해 효용성이 급락할 수 있으니 주의가 필요할 것 같아요. (안타깝게도 떠오르는 해결책은 없습니다..)