개발 배경
포토샵으로 여러 가지의 아트보드를 동시에 띄운 채 작업하면 컴퓨터가 못 버티는 사양이라 최근에는 주로 피그마를 사용해 작업 중이다. 포토샵은 아이콘 드로잉이나 디테일이 필요한 리소스를 만들 때에만 사용하게 되었다.
피그마도 그동안 많은 업데이트를 해오며 포토샵 못지 않은 기능들이 추가되었으나, 개인적으로는 몇 가지 아쉬운 부분이 있었다.
그 중 가장 필요했던 기능이 바로 내가 작업한 모든 페이지를 Grayscale 로 변환하는 기능이었다.
UIUX에서 중요한 부분인 접근성과 명도 대비로 인한 시인성 체크를 위해 포토샵에서 가장 애용하던 기능인데, 그것이 피그마에서 아직 지원되고 있지 않았다. 이를 보충하기 위한 여러 플러그인이 이미 존재하기도 했지만, 너무 무겁거나 영구적으로 변환해주는 등 내가 원하는 목적에 맞지 않게 작동하는 경우가 대부분이었다.
그래서 목마른 사람이 우물을 판다고, 한창 프로그래밍의 재미에 빠져 있던 나는 직접 플러그인을 만들어보기로 결심했다.
개발 준비
- [피그마] - [플러그인] - [개발] - [새 플러그인] 클릭
- 이름 작성 및 타입 선택 나의 경우는 Fig Jam 등에서 사용할 계획이 없기에 Figma Design 단독 사용, 그리고 한번 실행 옵션을 골랐다.
- 다른 이름으로 저장 눌러서 플러그인이 위치할 폴더 만들기
- code.js 파일 내에 원하는 기능 작성
- [플러그인] - [개발] - [개발 중인 플러그인 관리] 클릭하면, 현재 코드가 제대로 실행되는지 테스트 가능
작동 원리
작동원리는 무척 간단하다.
- 내가 작업 중인 영역을 모두 덮을 만한 크기의 Rectangle 오브젝트를 만든다.
- 해당 Rectangle 의 Fill Color 를 #000000, 즉 완전한 검은색으로 만든다.
- 해당 Rectangle 의 Blend Mode 를 Saturation (채도) 로 설정한다.
이것으로 해당 Rectangle 영역 안에 있는 페이지들은 모두 Grayscale 필터를 적용한 것처럼 회색조의 상태로 변할 것이다. (여기까지는 수동으로 해야한다)
하지만 분명히 한 프로젝트 내에서 레이어를 굉장히 많이 사용하고 있기에, 매번 그 Rectangle 을 찾아서 show/hide 를 하는 것은 무척이나 번거로울 것이다. 그러니 필터에 해당하는 오브젝트만 타겟하여 show/hide 값을 바꿔주는 코드를 만들어 해당 과정이 자동으로 일어나도록 할 필요가 있다.
figma.loadFontAsync({ family: "Inter", style: "Regular" }).then(() => { const TARGET_LAYER_NAME = "Grayscale filter"; // 토글할 레이어 이름 function toggleVisibility(layerName) { function findLayer(node) { // Visibility 토글 if ("visible" in node) { node.visible = !node.visible; } } figma.notify(`"${layerName}" Layer Visibility Toggled`); figma.closePlugin(); } // 실행 toggleVisibility(TARGET_LAYER_NAME); });
다만, 이 상태에서 테스트했을 때 실행이 무척 느리게 일어났다. 그 원인은 “Grayscale filter” 라는 이름을 가진 레이어를 하나 찾을 때까지 그 모든 많은 레이어를 전부 훑어야 하기 때문이었다. 계속해서 테스트하며 이현상을 해결하기 위해 몇 가지 검색 조건을 추가했다.
- 검색할 레이어 타입이 Rectangle 일 것.
- Section 내부 요소는 검색하지 않을 것.
- 대소문자 상관 없이 키워드만 들어가 있으면 일치하다고 처리할 것.
Section 에 포함되지 않은 Rectangle 이라는 제약 조건이 붙었지만, 피그마로 작업하는 대부분의 디자이너들은 Section으로 프로젝트를 잘 정리할 것이라 믿고 검색 조건으로 사용하였다.
그에 맞추어 코드도 아래와 같이 수정하였다.
figma.loadFontAsync({ family: "Inter", style: "Regular" }).then(() => { const TARGET_LAYER_NAME = "Grayscale filter"; // 토글할 레이어 이름 (부분 일치 가능) const ALLOWED_TYPES = ["RECTANGLE"]; // 검색할 레이어 타입 function toggleVisibility(layerName) { function findLayer(node) { // Section 내부 요소는 검색하지 않음 if (node.parent && node.parent.type === "SECTION") return; // 허용된 타입만 검색 if (!ALLOWED_TYPES.includes(node.type)) return; // 대소문자 무시 if (!node.name.toLowerCase().includes(layerName.toLowerCase())) return; // Visibility 토글 if ("visible" in node) { node.visible = !node.visible; } } figma.currentPage.children.forEach(findLayer); figma.notify(`"${layerName}" Layer Visibility Toggled`); figma.closePlugin(); } // 실행 toggleVisibility(TARGET_LAYER_NAME); });
이 플러그인을 단축키로 실행하게 하길 원했지만, 그건 피그마 자체에서 지원하고 있지 않은 기능이라 불가했다.
원한다면 AutoHotKey 라는 외부 프로그램을 통해서 컴퓨터 단위의 단축키를 커스텀해 사용할 수 있지만 그렇게 되면 번거로움이 더 커지기에, 그냥 자주 사용하면서 최근 사용 플러그인 리스트에 남아 있도록 하거나, 최근 사용한 플러그인 단축키 [Ctrl + Alt + P] 로 껐다켰다 할 수 있게 쓰고 있다.
배포 과정
개발하고 로컬에서 혼자서만 쓸 수도 있지만 그래도 다 같이 쓰면 좋으니 배포를 해보았다.
과정이 조금 번거롭지만 승인도 금방 나고, 이후 업데이트도 간편하니 너무 걱정할 필요 없다.
- 아이콘 및 썸네일 제작
- 아이콘 : 128 * 128px
- 썸네일 : 1920 * 1080px
: 피그마에서 간단하게 만들어서 이미지로 저장.
- 개발 중인 플러그인 옆 미트볼 버튼 - [게시하기] 클릭.
- 리소스 설명 작성 : 다른 사람도 잘 사용할 수 있게 사용법과 주의 사항을 꼼꼼하게 적어주었다.
- 아이콘 및 썸네일 첨부
- 데이터 처리 관련 사항 체크 : 본인 플러그인 조건에 맞춰서 답변. 그런데 작은 개인 개발이면 대부분 No 를 누르면 된다.
- 제출하고 며칠 후에 담당자로부터 Screen recording or demo video showcasing 을 보내달라는 메일이 온다. 그러면 이 플러그인이 어떤 원리로 작동되는 건지 시연 동영상을 촬영하여 답장 메일로 전송하면 된다. 7일 내에 전송하지 않으면 승인 반려. (큰 문제 없을 경우 1-2일 내에 승인)
- 승인되면 Figma Plugin 검색하면 누구든 접근 가능한 형태로 공개!
매주 메일로 몇 명이 사용했는지에 대한 정보를 보내주는데 이를 확인하는 재미도 있다.
회고
이번 플러그인 개발은 ChatGPT 에게 질문하며 진행하였는데, 생각 외로 “바이브 코딩”은 전혀 우아하게 진행되는 것이 아니었다.
Figma API 내에 존재하지 않는 함수를 멋대로 만들어 내거나, 충분히 구현할 방법이 있음에도 구현 불가능하다고 답변할 때도 있었다. 에러 메시지를 복사 붙여넣기 한다고 한들 그것이 마법처럼 한 번에 오류를 없애주지도 않았다.
문제를 해결하기 위해선 결국 좋은 질문을 하는 것이 중요했다. 이런 것을 만들고 싶어! 라고 요청할 때보다, 어떤 것 때문에 이런 결과가 생겼을지 스스로 추론해 보고, 원인이 그게 맞는지, 이런 대안을 적용하면 어떨지 물어볼 때 더 잘 해결되곤 했다.
이처럼 낯선 문법 속에서 오류를 발견하고 고쳐 나가는 그 과정이 어렵기는 했지만 그래도 무척 흥미로웠다.
또한, 평소에 “이랬으면 좋겠다”라고 혼자 생각만 하고 있었던 것을 직접 내 손으로 구현하는 경험을 해보니, 앞으로 더 만들어 보고 싶은 것들에 대한 아이디어나 의욕이 샘솟았다. 배포를 통해 다른 사람들이 내가 만든 플러그인을 유용하게 쓰는 모습을 보는 것도 뿌듯했다.
이번 경험 이후로, 개인 홈페이지 제작에도 관심이 생겨 열심히 꾸려 나가고 있다. 앞으로는 또 어떤 것들을 만들 수 있을지 기대된다.