피그마의 고스트 인스턴스
할로윈 특집 Figma - Used in this file 컴포넌트 관리
안녕하세요! 똑똑한개발자 프로덕트 디자이너 수지입니다.
오늘은 할로윈 특집(?)으로 피그마의 고스트 인스턴스에 대해 소개해보고자 합니다.
고스트와 피그마, 이런 조합 상상해보신적 있나요?
고스트(Ghost)는 말 그대로 유령을 의미합니다. 우리 눈에 보이지 않지만 어딘가에 존재하며 초자연적인 힘을 때때로 행사하기도 하는 존재로 다뤄지죠.
내가 아는 고스트는 공각기동대의 고스트 뿐이라구..이미지 출처 ibs
이 단어가 이미지나 파일 등에 붙어 사용될 때에도 의미는 비슷합니다. 보이지 않는 그러나 존재하는, 혹은 화면에 보여 거슬리게 하는(?) 유령과 같은 속성을 가진 요소를 설명할 때 '고스트 이미지, 고스트 파일'이라는 이름을 붙이곤 하죠.
(다양한 응용이 가능하겠네요. 고스트 텅장.. 고스트 월급.... ㅜㅜ 보이지 않지만 분명 존재하는 나의 월급..)
피그마에도 이러한 고스트 인스턴스가 존재합니다.
분명 존재는 하는데 우리 눈에는 보이지 않고, 어딘가에 영역은 분명 잡혀있는데 막상 클릭해보면 아무것도 없고(?!??) 디자이너 입장에서 여간 신경쓰이는 존재가 아닐 수 없죠.
썸네일 열심히 만들었는데 귀여우니 한번 더 봐주세요피그마의 고스트를 설명하려면 우선 컴포넌트(Component)와 팀 라이브러리(Team Library)에 대한 설명이 필요합니다. 피그마의 유료 플랜을 결제하고 있다면, 같은 팀의 멤버들과 '컴포넌트 라이브러리'를 여러 파일에서 자유롭게 공유하는 것이 가능합니다.
아래와 같은 아이콘들을 A디자인 파일에서 하나의 컴포넌트로 만들어 두었다고 하면, 전혀 다른 B파일에서도 해당 라이브러리를 링크시켜 동일한 아이콘 에셋을 자유롭게 가져와 활용하는 것이 가능하죠.
똑똑한개발자는 자체 디자인시스템 라이브러리 산하에, 프로덕트 별 시스템을 만들어 커스텀 형태로 활용하고 있는데요. 그러다보니 이 Team Library를 불러오는 과정에서 종종, 파일 별 고스트 인스턴스(Ghost Instance)가 생기는 일이 발생하게 되었습니다.
메인 디자인시스템 산하에, 각 프로덕트 별 커스텀 된 시스템을 만들어 사용하는 구조
C라는 새 프로젝트를 만들 경우, 2개 이상의 팀 라이브러리에서 에셋을 가져와 쓰는 경우도 있다. 이 경우 고스트 인스턴트가 생겨나게 되는 일이 많다.예를 들어 C라는 새 프로젝트를 위해, C 디자인시스템을 커스텀 해 구축하게 되는데요.
이 커스텀 과정에서 메인 디자인시스템에는 없고, B나 A에만 있는 아이콘들을 일부 C로 가져오게 되기도 합니다. 그럴 경우 C 디자인시스템 컬러에 맞춰 아이콘 색상을 대치하게 되는데 이 과정에서, 일부 누락된 에셋들이 생기게 되고. 파일 내에는 존재하지만 C 라이브러리에는 존재하지 않는 고스트 인스턴스가 생겨나게 되어버리는 것이죠.
또는 대치를 전부 완료했어도, 마치 캐시(Cache)나 로그처럼 Used in this file 이라는 형태로 남아 변경도 삭제도 되지 않고, 도대체 어디에 저 녀석이 있는건지 찾을 수도 없는 요상한 상태가 되어버리기도 합니다.
요약하자면 대략 이런 상황인 것이죠.
1) 링크시켜둔 C 시스템의 라이브러리만 떠야하는데, 어딘가의 연결되지 않은 에셋이 파일 내에 존재함.
2) '내가 깜박하고 빠뜨렸나?' 하고 해당 컴포넌트를 눌러서 찾아보면, 디자인 파일에선 컴포넌트가 제대로 C 시스템에 연결되어 있음
3) 혹은 해당 컴포넌트를 눌러서 찾아보면, 존재하지 않고 어디 있는지 나오지 않음. 근데 Asset 창엔 있다고 나옴.
4) 띠용??
사실 고스트 인스턴스는 개발 구현에 큰 문제가 안되고, 어차피 안보이니까 무시하면 그만이긴 합니다만..
어딘가 알 수 없는 라이브러리에 연결된 에셋, 디자인시스템 설정들이 있다보니 작업자의 입장에서 여간 번거로운게 아닌 일들이 생기곤 한다는게 문제라면 문제인 것이었죠.
나는 연결한 적 없는데 자꾸 연결된 라이브러리가 업데이트 되었다며, 무시해도 새로 적용하라고 매번 뜨는 화면 하단의 Review 창이라든지, 작업 다 해놓고 보니 잘못 연결되어 비슷하지만 다른 Text style과 Color Style을 다시 지정해야 하는 일이 종종 생긴다든지..
Dismiss 해도 제멋대로 다시 뜨는 (내 디자인 의도와 상관없는) 컴포넌트 업데이트 알림 창..오죽하면 구글에 Figma Used in this file 이라고 검색하면 해결되지 않은 다양한 질문리스트가 존재할까요. 심지어는 Instance Finder 라는 피그마 커뮤니티에서 유저들이 만든 플러그인까지 존재하고 있었습니다.
오늘의 본론, 고스트 인스턴스 대치엔 Swap Library를 이용하세요!
결국 제가 찾아낸 (숨겨진) 해결책! Swap Library 를 이용하는 것이었습니다.
아무리 해도 찾을 수 없고, 수동으로 대치할 수 없는 Used in this file의 고스트 인스턴스가 있는 경우 이 방법을 사용해보세요!
[Used in this file의 Ghost Instance 대치 및 삭제하기]
1) 피그마 좌측의 [Assets] 패널을 열고 라이브러리 아이콘을 클릭합니다.
2) [Libraries] 팝업창에서 [Used in this file] 이라는 영역을 찾고, 대치하고 싶은 라이브러리의 더보기 화살표를 누른다.
3) [Swap Library] 버튼을 누르면, 현재 파일에서 사용되고 있는 해당 라이브러리의 인스턴스 종류가 리스트업 됩니다.
4) [Choose library] 옵션을 눌러, 이 인스턴스들을 어떤 라이브러리로 대치할지 선택해줍니다. 우리의 경우엔 C프로젝트를 진행하고 있으니 C 디자인시스템 라이브러리를 선택해 대치하면 되겠죠?
5) 위의 절차를 잘 완료했다면 다음과 같이 대치될 라이브러리 목록이 보여지게 됩니다.
6) 이 상태에서 활성화 된 [Swap Library] 버튼을 누르면 대치 끝! Connected 라고 완료 메시지가 뜬 뒤에도, 시간이 조금 걸리거나 피그마를 재실행해야 적용되는 경우도 있으니 여유를 가지고 확인해주세요.
+다만 이 경우에도 대치가 잘 되지 않거나 고스트 인스턴스가 완전히 사라지지 않는 경우도 있더라고요.
Swap library 의 단점...
그건 바로, 대치하려는 두 라이브러리의 컴포넌트 이름이 똑같아야 검색이 된다는 부분이에요!
컬러의 경우 동일한 역할을 하는 컬러 스타일이, A 라이브러리에선 [Brand color] B 라이브러리에선 [Primary color] 라는 이름으로 셋팅되었다면, Swap library 적용시에 검색이 되지 않고 [?] 로 뜨는 이슈가 있었습니다.
따라서 해당 작업 전, 대치하려는 두 컴포넌트의 네이밍 설정을 확인하고 동일하게 세팅 적용하는 순서를 추천드립니다!
이제 얼마 남지 않은 할로윈을 기다리며, 그럼 이만 귀여운 고스트와 함께 글을 마칩니다.
비슷한 문제를 겪으셨던 경우나, 다른 방법으로 해결하셨던 팁이 있으시다면 댓글로 공유해주세요!
감사합니다 :)
