비개발자의 AI로 피그마 플러그인 제작기

나의 일상

피그마에서 문서 장표를 만들다 보면 생각보다 많은 시간을 텍스트 스타일을 맞추는 데 쓰게 된다.

자간을 조금 줄이고, 줄간격을 다시 맞추고, 폰트와 weight를 확인한다.

그런데 이때 흥미로운 점은 자간, 줄간격, 폰트를 이전 장표의 글자를 확인한 후 맞춰 작업한다는 것이다.

그래서 앞페이지의 글자 크기 확인하고 뒷페이지의 글자를 고치고 이런 식인 것이다.

어느 날 저녁, 작업을 마무리하다가 문득 이런 생각이 들었다.

이거… 버튼 하나로 안 되나.

개발 경험은 거의 없지만 요즘은 AI가 있으니까 최소한 “한 번 만들어보는 것” 정도는 가능하지 않을까 싶었다. 반복되는 귀찮음을 하나 줄여보고 싶었다.

시작은 작게

처음부터 큰 기능을 만들 생각은 없었다. 내가 정한 기능은 꽤 단순했다.

1. 자간 맞추기-선택한 텍스트의 letterSpacing 적용

2. 줄간격 맞추기

3. 글자체 맞추기

4. weight 맞추기

5. 색상 맞추기

상상한 UX/UI도 크게 복잡하지 않았다.

기준이 되는 텍스트와 적용이 되는 텍스트를 구분해서 선택한다

텍스트들의 프리뷰를 제공하여 어떤 텍스트를 선택했는지 알 수 있도록 한다

기준이 되는 텍스트의 속성을 알 수 있도록 한다

한 번에 적용되는 버튼을 하단 영역에 배치한다

환경을 설치하는 것부터 공부의 시작이었다

막상 시작해 보니 코드보다 먼저 등장한 건 개발 환경이었다.

VS studio/Node.js 설치

터미널 열기

npm으로 프로젝트 생성

Figma Plugin 템플릿 선택

처음에는 창을 어떻게 띄우는지 조차 감을 잡지 못해서 AI가 하나하나 어디에 파일을 만들어라라고까지 얘기해 주었다.

하지만 나중에 생각해 보면 이 구조는 꽤 직관적인 비유로 설명할 수 있었다.

“Hello World”가 뜨는 순간

몇 개의 명령어를 입력하고 나서 Figma에서 Development Plugin으로 로드했다.

npm install

npm run build

그리고 작은 팝업 하나가 떴다.

사실 아무 기능도 없는 화면이었다. 단지 텍스트 하나가 표시될 뿐이었다.

그런데도 처음으로 내가 입력한 코드가 돌아간다는 건 기쁜 일이었다.

“아, 진짜 돌아가는구나.”

코드가 이해된 건 아니었다. 하지만 전체 흐름이 실제로 작동한다는 걸 처음 본 순간이었다.

그다음부터는 에러와 대화하는 시간이었다

Hello World 이후의 시간은 대부분 에러 메시지를 읽는 일이었다.

가장 먼저 만난 에러는 이것이었다.

__html__ is not defined

아직도 정확히 이해하지는 못했지만 빌드시스템에서 정의되지 않은 게 호출되었던 것 같다.

하지만 오류 주변의 코드를 스크랩해서 보여주었더니 AI가 수정해서 새로 코드를 짜주었다.

또 하나 기억나는 에러는 이것이었다.

TypeError: not a function

이건 내가 빌드된 main.js를 직접 수정하면서 생긴 문제였다. 나중에야 정석을 알게 됐다.

src/main.ts 수정 → 다시 build

그리고 이 과정에서 처음 사용해 본 기능이 하나 있었다.

플러그인 개발을 위해 AI와의 문답을 통해서 배운 것들

이 기능을 만들면서 Figma 플러그인 동작하는 원리를 알 수 있었다.

전체 구조를 글로 정리하면 이런 흐름이다.

------------------------------------------------

버튼 클릭 (UI)

↓

postMessage

↓

main.ts

↓

선택된 텍스트 레이어 수정

------------------------------------------------

몇 번 수정하고 빌드를 반복하면서 각 폴더별 역할도 조금씩 보이기 시작했다.

------------------------------------------------

manifest.json-플러그인의 신분증 / 설명서

main.ts-플러그인의 두뇌 / 로직

ui.html-사용자가 보는 화면

build 폴더-실제 실행되는 결과물

------------------------------------------------

처음에는 그냥 여러 개의 파일이라고만 생각했다.

하지만 각각의 역할을 이해하고 나니 조금씩 AI의도 가 이해되고 구조가 보였다.

함께 개발을 진행해 본 결과 AI는 훌륭한 코딩실력을 가진 동업자였다.

그래서 비개발자인 나도 가능했던 것 같다.

이번에 플러그인을 만들면서 내가 배운 건 사실 코딩 문법이 아니었다.

오히려 하나의 반복적인 루프였다.

작게 만든다.->일단 돌려본다.->에러를 읽는다.->다시 빌드한다.

전체 구조를 완전히 이해하지 않아도 작은 루프를 계속 반복하다 보면 어느 순간 무언가가 실제로 돌아가기 시작한다. 처음 Hello World 팝업이 떴던 순간처럼.

허접하지만 대망의 결과물...!