This post is also available in the following languages. Japanese, English

감자탕 먹고 Vue.js로 Figma 번역 플러그인 만든 이야기

김민섭2023-04-07

ABC Studio에서 백엔드 개발을 하고 있습니다.

들어가며

안녕하세요. LINE+ ABC Studio에서 백엔드 개발을 하는 김민섭입니다. 이번 글에서는 최근 파파고를 이용해 Figma 번역 플러그인을 제작했던 경험을 공유하고자 합니다. 플러그인을 어떻게 제작하는지 상세히 안내하거나 코드 수준으로 다루려는 것은 아니고요. 플러그인을 만들면서 어려웠던 점과 해결한 방법, 그리고 팀에서의 제작 과정을 주로 다룰 예정입니다.

Figma 플러그인을 개발할 때는 Figma Developers 사이트를 참고하면 좋습니다. HTML과 Node.js, Typescript 관련 지식이 필요하며, 복잡한 플러그인을 만들고 싶다면 Vue.js나 React와 같은 프런트엔드 프레임워크를 사용하면 좋습니다.

Figma 번역 플러그인이 필요하다고?

저는 백엔드를 개발하고 있어서 Figma를 많이 사용하지는 않습니다. 주로 보는 용도로만 사용하는데요. 어느 날 팀 Slack 채널에 디자인을 담당하는 Jeans 님의 메시지가 올라왔습니다.

글로벌로 서비스를 제공하는 LINE은 사내에 독립적인 파파고 서버를 갖추고 있습니다. 이를 이용해 Slack과 Confluence 등의 협업 도구에 번역 기능을 제공하고 있으며 필요한 경우 API를 직접 호출해서 활용할 수도 있는데요. 아직 Figma에서는 그런 기능을 활용하지 않고 있었기에 우리에게 익숙하고 번역 품질도 높은 파파고 번역을 사용하지 못하고 다른 번역 기능을 사용해야 하는 불편한 상황이었습니다.

Figma에 플러그인이 있다는 사실을 이번에 처음 알게 된 저는 Jeans 님이 알려준 플러그인 문서를 참고해 대략적인 내용을 파악해 봤습니다. 요약하면 플러그인을 제작할 때는 Node.js와 Typescript를 사용하며, 완성된 플러그인은 아래와 같이 작동하는 구조였습니다.

플러그인 개발자가 Typescript를 이용해 로직을 담당하는 code.ts와 UI를 담당하는 ui.html을 작성하면, 컴파일된 작업물이 Figma 내에서 플러그인으로 실행되는 방식입니다(파일 이름이 중요한 것은 아닙니다).

또 하나 알아야 할 점은 번역을 담당하는 번역 API를 사용하는 방법이었는데요. 이 부분은 Slack을 통해 팀 동료의 도움을 받을 수 있었습니다.

제작에 필요한 조사를 마친 뒤, 마지막으로 요즘 유행하는 또 다른 동료(?!)에게 조언을 구하고 개발을 시작했습니다.

첫 번째 제약 사항

별로 어려울 게 없어 보였던 것과는 달리 문제는 빨리 찾아왔습니다. 개발하던 플러그인에서 API가 정상적으로 호출되지 않는 문제가 발생했습니다. 이 문제는 Figma Developers 사이트 Making Network Requests 문서 하단에서 다루고 있었으며, 그 내용은 아래와 같습니다.

Figma 및 Figma 플러그인은 브라우저 환경에서 실행되므로 Cross-Origin Resource Sharing 정책이 적용됩니다.

플러그인은 출처(origin)가 null인 iframe 내부에서 실행됩니다. 즉, 모든 출처에서 접근을 허용하는 API(Access-Control-Allow-Origin: *)만 호출할 수 있습니다.

즉 플러그인 실행 방식의 기술적인 제약 때문에 API 서버에서 모든 출처에 대한 접근을 허용해 줘야 했는데요. API 서버에서는 특별한 상황이 아니라면 이렇게 설정하지 않는 게 일반적이며 사내 파파고 API 서버 역시 허용하지 않고 있었습니다.

이 문제를 해결하기 위해 모든 출처에 대한 접근을 허용하는 프락시 서버를 통해 요청을 중계하는 방법을 사용했습니다. LINE에는 AWS의 Lamda와 같은 서버리스(serverless) 컴퓨팅 서비스, Verda Functions가 있기 때문에 이 서비스를 이용해 프락시 서버를 구축, 간편하게 문제를 해결할 수 있었습니다.

첫 번째 개발 완료

앞서 말씀드린 문제를 해결하고 나서 큰 어려움 없이 개발을 완료했습니다. 아래는 초기 번역 플러그인의 모습입니다.

최초 Jeans 님의 요구 사항과 같이 자주 사용하는 두 언어 간 번역에 초점을 두고 단순하게 기능을 구현했습니다. 우선 최대한 단순한 형태로 플러그인을 완성해 등록해 본 뒤 추후 의견을 수렴해 기능을 더 발전시킬 생각이었습니다. 여기까지 만드는 데에는 반나절이 채 걸리지 않았는데요. 이런 일은 왜 본업보다 재미있는 것인지 동료들과 저녁 식사를 마친 뒤 집에서도 작업을 이어나가 마무리했습니다.

그런데 플러그인을 등록하기 위해서는 필요한 것이 더 있었습니다. 바로 플러그인 아이콘과 커버 아트입니다. 다른 건 다 해도 디자인을 할 자신은 없었기에 팀에 도움을 청했고, Scott 님의 도움을 받을 수 있었습니다.

Vue.js 도입

3일 후 Scott 님이 아이콘과 커버 아트 디자인을 완료했다고 연락 주셨습니다. 그런데 감사하게도 아이콘과 커버 아트뿐 아니라 플러그인 화면 전체 디자인을 작업해 주셨습니다. 개발자가 만든 투박한 화면을 디자이너로서 참을 수 없었던 것일까요? 놀랍습니다.

초기 플러그인은 HTML과 Vanilla JS로만 화면이 구성돼 있었는데요. 새로 만들어야 할 플러그인 화면에는 여러 기능이 추가됐기 때문에 Vanilla JS로는 구현이 어렵다고 판단, 이 시점에서 Vue.js를 사용하기로 결정했습니다.

왜 Vue.js냐고 물어보신다면, 제가 할 줄 아는 게 그것뿐이라서 그렇습니다. 사실 Figma Developers 사이트의 문서와 플러그인 샘플은 React가 기준이지만, 새로운 기술을 배우는 데에 시간을 들이고 싶지 않았습니다. 이는 빠른 제품 출시를 위한 선택이었고, 만약 React를 할 줄 안다면 React를 사용하는 게 조금 더 나을 것 같습니다.

두 번째 제약 사항

이때 두 번째 문제가 발생했습니다. Vue.js를 사용하면서 생성된 .js 파일과 .css 파일이 플러그인 내에서 정상적으로 로드되지 않는 문제였습니다.

이 문제에 대해서는 Figma Developers 사이트의 Resource Links 문서에서 다루고 있었습니다. 원인을 살펴보니 Figma 플러그인에서는 상대 경로가 아닌 http:// 또는 https://로 시작하는 절대 경로 자원만 사용할 수 있었습니다. 즉, ui.html과 code.js 외에 이미지와 같은 다른 파일을 같이 포함해서 사용할 수는 없었습니다.

이 문제는, 제가 사용한 Vue.js 프로젝트는 번들러로 webpack을 사용하기 때문에 아래 두 가지 webpack 플러그인을 이용해 .js 파일과 .css 파일을 HTML에 포함하는 방법으로 해결했습니다(React는 공식 샘플을 참고하세요).

Vue.js에서 webpack을 설정하는 방법은 Vue CLI 사이트의 webpack 문서에 나와 있습니다. 이 문서를 참고해 vue.config.js 파일에 아래와 같은 내용을 입력해서 설정을 완료했습니다.

plugins: [
    new HtmlInlineScriptPlugin({
        htmlMatchPattern: [/ui.html$/],
    }),
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new HTMLInlineCSSWebpackPlugin(),
]

참고로 최신 버전의 Vue.js에서는 Vite를 사용해 번들링하는 것을 권장하고 있으며, Vite에서는 아래 플러그인을 이용하면 이 문제를 해결할 수 있을 것으로 보입니다.

vite-plugin-singlefile

짜잔! 출시!

제작 완료 후 팀 내에서 테스트하기 위해 먼저 Figma의 LINE용 공간에 베타로 올렸는데요. 어떻게 알았는지 다른 팀에서 사용해 보고 태국어를 추가할 수 있는지 문의하기도 했습니다. 이에 정식 버전을 릴리스하면서 지원 언어를 추가해 LINE 안에서 더 폭넓게 사용할 수 있도록 개선했습니다. 사용자의 피드백을 받아 제품을 발전시키는 멋진 경험이었습니다.

제작한 플러그인은 Figma에서 아래와 같이 실행할 수 있습니다.

마치며

이번 작업은 아주 짧은 기간에 여러 동료의 도움을 받아 하나의 작은 제품을 완성한 재미있는 경험이었습니다. 이런 멋진 경험을 할 수 있었던 건 잘 갖춰진 LINE의 사내 인프라 환경과 더불어, 기획·개발·디자인이 모두 한 팀에 속해서 자유롭고 빠르게 커뮤니케이션하는 문화를 갖춘 ABC Studio였기에 가능했던 것 같습니다.

마지막으로 Scott 님이 만들어 주신 플러그인 작동 화면을 보여드리며 글을 마치겠습니다.

오픈소스로 공개!

지난 4월에 처음 이 글을 공개한 후 3개월간 준비를 거쳐 Vue.js로 만든 Figma 번역 플러그인의 샘플 코드를 오픈소스로 공개했습니다.

https://github.com/line/figma-translator-vue-plugin-sample

Apache License 2.0을 적용해서 자유롭게 활용, 개작 및 배포가 가능하기 때문에 Figma를 사용하면서 Vue.js로 플러그인을 제작할 예정이라면 이 오픈소스를 참고하면 좋을 것 같습니다. 자세한 내용은 README.md를 참고해 주시기 바랍니다.

Blog