.jpg&blockId=2c55bbc0-e5c2-8031-9656-d63e664444d4&width=3600)
1. 이름표
많은 회사들이 그렇듯이, 데이블 또한 신규 입사자를 위해 웰컴 키트를 준비하고 있습니다. 키트 외에도 새로운 구성원을 위해 추가로 준비해두는 것이 있는데요, 바로 이름표입니다.
데이블 이름표
그래서 입사일이 정해지면 그 일정에 맞춰 이름표를 제작하고 있습니다. 피그마에 미리 디자인 템플릿을 만들어두면 HR 팀에서 입사자에 맞게 템플릿을 수정해 이름표 파일을 만드는 방식으로요. 다만 최종 단계에서는 피그마를 잠시 벗어나야만 했는데요, 인쇄를 위해 최소 해상도(150dpi 이상)를 맞춰야 했기 때문입니다.
바로 이 부분 때문에, 항상 디자이너가 이름표 제작 과정에 참여해야만 했습니다. HR 팀에서 파일 수정이 끝났다고 알림을 보내면 디자이너가 인쇄용 파일로 변환한 다음 다시 HR 팀에게 작업이 완료됐음을 알려야 했죠.
물론, 어려운 작업은 아니었습니다. SVG 파일로 복사해서 인쇄 템플릿에 붙여넣기만 하면 됐으니까요. 하지만 오히려 작업이 너무 쉬워서, 이 작업을 진행하는데 필요한 커뮤니케이션이 불필요해 보였죠.
팀을 오갈 필요 없이, 그러니가 디자이너 없이, 어도비 프로그램을 다룰 줄 몰라도, HR에서 바로 인쇄를 진행할 수는 없을까? 이 부분을 해결할 방법이 없을가? 라고 고민하던 8월의 어느 날. 저는 피그마 파일을 인쇄용으로 변환해주는 플러그인을 찾아보게 되었습니다.
2. 근데 이거 만들 수 있지 않나?
찾아보니, 예상대로 피그마에서 작업한 파일을 인쇄용 파일로 변환해 주는 플러그인들이 이미 있었습니다. 다만 변환까지는 무료여도 이 변환한 파일을 내려받기 위해서는 유료 결제를 해야 했죠. 이 부분이 마음에 걸렸습니다. 아무래도 입사가 비정기적인 이벤트이다 보니, 유료 기능으로 해결하는 게 합리적일지 고민됐죠. 그러다 문득 이런 생각이 들었습니다.
“근데 이거 만들 수 있지 않나?”
마침 바이브 코딩으로 비 개발자가 이런 것도 만들 수 있다는 사례들이 많이 공유되던 시기였습니다. 또한 평소에 디자인 과정의 일부를 피그마로 이전할 수는 없을지 고민하고 있었기 때문에 이 아이디어에 더 마음이 기울었습니다. 플러그인을 제작하는데 성공하면 다른 인쇄물 작업에도 적용해 볼 수 있을 테니까요.
그래서 Claude Code를 이용해 피그마 플러그인을 만들어보기로 했습니다.
3. Frame2Print
제가 필요로 하는 기능은 크게 세 가지였습니다.
1.
픽셀 단위의 파일을 밀리미터 단위의 파일로 변환해 주는 기능
2.
최종 파일을 PDF 형식으로 내보내는 기능
3.
무엇보다 인쇄 환경에서는 항상 재단 영역 밖의 여백을 고려해야 했기 때문에, 여백 사이즈를 따로 계산해서 최종 합산해 주는 기능이 필요했습니다.
이렇게 필요한 프로그램 사양을 대략적으로 정리한 뒤, Claude Code를 통해 하나씩 구현해 나가기 시작했습니다.
처음에는 평소처럼 바로 Claude나 챗지피티를 열고 채팅을 하는 대신, 터미널을 열어서 클로드 코드를 따로 설치해야 한다는 게 부담스럽게 느껴지기도 했습니다. 그러나 막상 진행하다 보니 초반 환경 세팅만 해내면 그 뒤에는 익숙한 채팅 방식 그대로 진행할 수 있어서 생각보다 어렵진 않았습니다. (기본 터미널 프로그램의 가독성이 너무 떨어져서 Visual Studio Code로 옮기고 나니 훨씬 편하게 느껴지기도 했고요.)
그러나 아직 완벽하지 않은 코딩 에이전트와 개발을 전혀 모르는 디자이너의 합작에는 (당연히) 한계가 있었고, 인쇄용 파일의 해상도를 설정하는 과정에서 끝없이 오류가 나기 시작했습니다.
모니터를 통해 보는 웹상의 디자인은 72dpi 정도면 충분하지만, 인쇄용 파일의 경우 최소 150dpi 해상도 정도는 갖추는 게 좋은데요. 어차피 이름표 파일의 경우 사진 이미지가 들어가는 것도 아니고 벡터 오브젝트밖에 없으니 해상도를 설정하는 게 크게 어려울 거라고 생각하지 못했습니다.
하지만 실제로 진행해 보니 해상도를 설정하는 것이 여간 쉽지 않았습니다. 바이브 코딩의 한계인가 싶어 포기를 고민하던 중, 접근 방식을 바꿔보면 어떨까 싶었습니다. 그래서 Claude code에게 다음과 같은 질문을 던져보았습니다.
‘피그마 파일을 인쇄용 파일로 변환해 주는 기존 플러그인들은 어떤 로직을 쓰고 있을까?’
Claude에게 기존 플러그인들이 사용했을 법한 방식을 추측해 보라고 요청했고, pdf-lib라는 라이브러리를 특정할 수 있었습니다. 해당 라이브러리를 통해 기능을 구현해달라고 접근 방식을 지정해 주니, 마침내 해상도 문제를 해결할 수 있었습니다.
3. 내친김에 위젯까지
그렇게 Frame2Print라는 인쇄용 파일 변환 플러그인이 완성되었습니다.
이렇게 플러그인을 만들고 나니, 바이브 코딩으로 가능한 범위가 어디까지인지 감을 잡을 수 있었습니다. 그렇게 감을 잡은 김에, 이번에는 이름표 제작 과정 전체를 다시 고민해 보게 되었습니다. 혹시 더 개선할 부분이 없을까 하고요.
지금까지 이름표 제작 과정을 돌아보았을 때, 작업은 1. 이름표 템플릿(프레임)을 복사하고, 2. 이름과 부서 정보를 입력한 뒤, 3. 최종 인쇄 파일을 만드는 식으로 진행되었습니다. 이제 플러그인 덕분에 인쇄 파일을 만드는 일은 간단해졌지만, 신규 입사자의 정보를 입력하는 과정은 여전히 그대로였습니다. 템플릿을 복붙하고 텍스트를 하나하나 클릭해 수정해야만 했죠.
여기서 문제는, 모두가 피그마에 익숙한 것이 아니라는 것이었습니다. 프레임이라는 개념이나 오토 레이아웃으로 묶여있는 요소들을 수정하는 방법까지. 피그마를 다뤄본 적이 없다면 조작법을 익히는데 시간이 필요했죠.
이런 문제상황을 인지하고 나니 '그냥 텍스트를 넣고 버튼을 누르면 결과물을 만들어줄 수는 없을까?' 라는 생각이 들었고, 내친김에 이 부분까지 해결해 보기로 했습니다.
이번에는 원하는 기능을 플러그인이 아닌 위젯의 형태로 만들어보기로 했습니다. 위젯처럼 눈에 바로 보여야 사용이 용이할 것이라고 생각했기 때문입니다.
구현하고 싶었던 기능은 두 가지였습니다. 하나는 이름표 템플릿을 자동으로 복사하는 기능, 그리고 다른 하나는 입력한 정보가 정확한 위치에 들어가도록 지정하는 기능이었습니다.
위젯을 만들어 보니, 템플릿을 복사하거나 지정된 영역의 텍스트를 변환하는 일은 생각보다 쉬웠고, 오히려 복사한 템플릿을 원하는 위치에 붙여 넣는 일이 어려웠습니다. 복사된 템플릿이 자꾸만 놓쳐버린 공처럼 자꾸 저 멀리 아득한 거리에 복사됐기 때문입니다.
결과적으로, 원하는 위치를 정확히 지정하기 위해서는 막연하게 바로 옆!이라고 말하는 것이 아니라, 텍스트로만 봐도 이해할 수 있을 정도로 조건을 자세하게 설명해야만 했습니다.
이런저런 시행착오를 거친 끝에 드디어 원하던 기능을 갖춘 위젯과 플러그인을 만들 수 있었습니다.
피그마 정책상 피그마 편집 권한이 있어야만 플러그인을 사용할 수 있다는 한계는 있었지만, 그래도 이제 디자이너 개입 없이 이름표 제작부터 인쇄 파일 출력까지 한 번에 처리할 수 있게 됐습니다.
4. 모든 것이 끝나고
이렇게 AI를 활용해 플러그인을 만들어보니 다음과 같은 것들을 느꼈습니다.
첫째, 원하는 기능을 만들어달라고 한 번에 요청하는 것보다는, 세부적으로 나눠서 구현을 요청할 때의 결과가 더 좋았습니다.
둘째, 기존 유사 플러그인들은 어떻게 이런 기능을 구현했을지 역으로 물어보는 것도 방법이 될 수 있다는 것입니다. 특히 해상도 조정 기능을 구현하는 단계에서 막혔을 때, 기존 플러그인들이 어떤 라이브러리를 썼는지 추측해 보라고 한 것이 좋은 돌파구가 됐습니다.
셋째, 아이러니하게도 그 어느 때보다 코딩 지식의 필요성을 느꼈습니다. 분명 요청을 잘못 이해하고 필요 없는 작업을 수행하고 있다는 것은 알겠는데, 코딩을 전혀 모르다 보니 구체적으로 해결책을 지시할 수가 없어서 아쉬울 때가 많았기 때문입니다.
그래서 오히려 이번 제작을 통해 현재 바이브 코딩이 어디까지 가능하고, 어느 부분이 한계인지 느껴볼 수 있어서 좋은 기회가 됐던 것 같습니다. 인쇄 플러그인 또한 이제 충분한 시험 기간을 거쳐 사용성이 검증된 만큼, 첫 시도의 회고를 바탕 삼아 더 확장할 수 있을 방법이 있을지 찾아보려고 합니다.
작성자
관련된 글 더 보기
.jpg&blockId=2c55bbc0-e5c2-8031-9656-d63e664444d4&width=512)
