ChatGPT와 함께 피그마 플러그인 만들기
앱 유저들의 문제만 디자이너의 문제가 아니랍니다
이 글은 2024년 8월 2일 알다 디자인 팀 미디엄에도 발행된 글입니다.
유행은 좀 지났지만 ChatGPT를 이용해서 팀에서 필요한 피그마 플러그인을 만들어 봤습니다. 구체적인 제작 방법보다는 문제 해결에 대한 경험을 공유합니다.
어느 날 우리 디자인 팀의
고인물(우리 회사에서 햇수로 5년차…)인
지은님이 말했다.
할 말 있다고 해서 쫄았잖아요 지은님…ㅎㅎ…….분위기 잡고 말하지 말아 주세요….피그마에서 바로 글자 수 세면 좋을 것 같아요.
매번 네이버에 입력하는 거 귀찮아요.
우리는 금융 서비스를 제공하고 있는데, 금융 상품의 이름이 길어지는 경우가 허다하다. 예를 들면 알다은행 킹갓왕짱울트라알뜰살뜰행복드림두드림하하아들하드림출발드림팀론 같은 느낌인 경우들이 있다. 한 화면 안에서 내가 가진 대출이나 예적금 정보가 싹 들어와야 눈이 깔끔! 머리가 상쾌!한 것이기 마련인데, 이런 긴 이름들이 훼방을 놓기 시작하면 눈이 혼란스러워진다. 인식해야 하는 정보의 양이 한번 훑어서 읽을 수 있는 정도를 넘어가기 시작하는 것이다.
아휴 깔끔하니 잘 보인다(안 보임)특히 지은님께서 담당하는 마이데이터 스쿼드는 사용자가 가진 자산 정보를 모두 연동해서 볼 수 있는 통합 서비스를 책임지고 있다. 다양한 금융사의 상품들을 다 볼 수 있어야 하는데, 이제 금융 상품명이 저렇게 길다보니 정작 사용자 화면에서는 ‘알다은행 킹…’ 으로 끝나버리게 되는 경우가 많았다. 그래서 지은님께서는 매번 글자 수에 대한 정책을 세우는 동시에 한쪽에는 네이버, 한쪽에는 피그마를 열고 복사-붙여넣기를 해가면서 글자 수를 세고 있는 수작업을 하고 계셨던 것이다.
나름 팀장으로서(사실 플러그인 만들고 싶어서) 우리 팀의 이 중대(?)한 문제를 간과할 수 없었다. 마침 개인적인 용도로 ChatGPT를 결제해서 사용하고 있었기 때문에, 이걸 활용해서 글자 수를 세어주는 피그마 플러그인을 바로 만들어 보기로 했다.
그런 건 좀 참아도 되는데 어휴 거참사실 이전에도 피그마 플러그인을 만들어보려는 시도를 해봤었는데, 막연하게 ‘만들어야지!’ 라는 생각이라 뭘 만들지를 몰라 헤맸고, 피그마 플러그인의 작동 방식을 잘 모르기도 했고, 무엇보다 ChatGPT와 대화하는 법이 어색해 제대로 된 답변을 받지 못해서 접었던 적이 있었다.
GPT와의 첫 소개팅은 그야말로 처참했다 / 출처: 망그러진 곰그 이후로 피그마 플러그인의 구조에 조금 더 익숙해지기도 했고, ChatGPT를 조련(?)하는 법도 어느정도 익숙해져서 이참에 소뿔 1코인으로 뽑아버릴 각오로 바로 시작했다.
ChatGPT야 안녕? 플러그인 내놔!
ChatGPT(이하 ‘지피티’)는 웹으로도 사용할 수 있지만, 아주 사랑스럽게도 데스크탑 앱으로도 사용할 수 있다. 특히 맥에서는 데스크탑 앱을 설치하면 Opt + Space Bar로 바로 호출할 수 있어서 유용하다.
첫 메시지의 떨리는 순간지피티에게 피그마 플러그인을 만들어 달라고 하면 플러그인을 만드는 기본 세팅만 알려준다. 기본적인 개발 지식이 전무한 사람이 보면 정말 무슨 소리인지 알 수가 없을 것이다.
하나도 안 간단하잖아 이 녀석아지피티로 무언가를 만들면서 가장 중요한 것은 ‘질문하는 법을 배우는 것' 일지도 모른다. 커뮤니티 활동을 하다보면 굉장히 많은 질문과 답변이 오가는데, 대부분의 디자이너들은 이렇게 ‘피그마 플러그인 어떻게 만드나요?’ 정도의 질문을 한다. 그런데 이제 물음표가 붙었다고 다 질문이 되는 건 아니라는 것이다.
뭐 대충 이런 느낌답변만이 지식을 전달하는 것이 아니다. 질문 역시 지식을 전달한다. 우리가 누군가에게 질문을 한다는 건, 그 사람에게 내가 어떤 것을 모르는 지를 알려주는 것과 같다. 지피티와 얘기할 때 역시 마찬가지다. 지피티는 내가 어디까지 아는지, 어디부터 모르는지, 배경지식은 얼마나 있는지 전혀 모른다. 따라서 피그마 플러그인을 만들어달라고 하면, 나에게 플러그인에 대한 기초 지식이 있을 거라고 추측한 답변을 줄 수 밖에 없다.
따라서 지피티에게 무언가를 요청할 때는 매우 구체적이어야 한다. 조건도 필요하고, 상황도 필요하고, 어떤 상태에 있다고 가정도 전달하면 좋다. 우리는 그것을 프롬프트(Prompt)라고도 할 수 있다. 좋은 답변은 좋은 질문에서 온다.
묘하게 말투만 친절해진 것 같다각설하고, 글자 수를 세는 플러그인을 만들어 달라고 말해보자. 이때, 피그마 플러그인을 만드는 2가지 방법이 있다. 하나는 외부의 누군가가 만들어 둔 기능을 피그마 플러그인에 넣는 것이 있고, 나머지 하나는 기본적인 함수로도 실행할 수 있어서 플러그인 자체만으로 만들 수 있는 것이 있다.
처음에 만들어 보려고 했던 건 한글 맞춤법 검사기 플러그인이었는데, 스크립트 자체로는 맞춤법을 검사할 수 없어서 외부에서 맞춤법 검사하는 프로그램을 플러그인 안에 넣어줘야 했다. 무료로 제공되는 프로그램이 없어서 다음을 기약했는데, 글자 수를 세는 건 스크립트 자체로도 할 수 있기 때문에 외부의 서비스를 붙일 필요가 없어 쉽게 만들 수 있었다.
어떤 것을 만들 것인지 매우 구체적으로 설명하니, 바로 본격적인 코드를 전달해주기 시작했다.
녀석 이해가 빠르구만 계속해봐피그마 플러그인은 크게 3가지 파일로 구성된다. 플러그인의 정보가 담겨있는 manifest 파일, 플러그인 화면 자체를 구성하는 ui 파일, 그리고 플러그인의 실제 작동을 담당하는 code 파일로 구성된다. 이 3가지의 구성을 알고 있다면 이제 플러그인을 본격적으로 (지피티가) 만들 수 있다.
그 다음 단계부터는 이제 지피티에게 다음을 물어보고, 코드를 적용하고, 오류를 전달해서 수정된 코드를 받는 과정을 반복하게 된다. 그렇게 해서 약 만 하루에 걸쳐 만들어진 플러그인이 바로 이 글자 수 세기 플러그인이다.
https://www.figma.com/community/plugin/1392574201488109868
만들다보니 원래는 국문 글자 수만 세어주려고 했는데, 우리나라에서 한글'만' 쓰는 경우는 없고, 영문과 숫자도 항상 같이 쓴다는 걸 깜박했다. 그래서 ‘한글 글자 수 세기' 에서 ‘글자 수 세기' 로 변경했다. 그리고 공백을 포함한 경우와 포함하지 않은 경우 둘다 보이게도 변경했다.
프로토타입을 써보고, 몇가지를 더 추가로 개선했다. 보이지 않는 레이어를 알려준다거나, 포커스된 레이어로 화면을 이동하는 등의 사용성 개선을 더 했다.
지피티와의 해커톤 소감
최종적으로 문제가 없고 이정도면 기본적인 사용이 가능하겠다는 걸 확인한 후에 커뮤니티에 플러그인을 업로드했다. 플러그인을 업로드하면 피그마 커뮤니티 담당자가 문제가 없는지 확인하고, 문제가 없다면 바로 공개된다.
공개되자마자 지은님께 이 소식을 전달했더니 정말 좋아하셨다.
안 좋더라도 좋은 척 많이 해주셔서 고마워요 지은님…지은님의 반응과 실제 사용하시면서 훨씬 업무 효율이 개선됐다는 걸 확인하고, 바로 링크드인에 올려 다른 디자이너분들에게도 공개해보기로 했다. 공개해본 결과, 생각보다 네이버 검사기와 피그마를 전환하며 사용하시는 분들이 많았다. 또 그것에 너무 익숙해져서 불편한 걸 모르고 생산성을 매우 깎아 먹고 있는 요소라는 것도 알아차리지 못하고 있다는 걸 알았다. 무엇보다, 한번 쓰고 나면 네이버 검사기를 다시 쓰지 않아도 된다는 수요가 확실하게 있다는 걸 알 수 있었다.
링크드인 분들의 반응. 감사합니다!지피티는 생각보다 더 똑똑하고, 더 쓸만 했다. 하지만 아직은 사람의 지성이 필요하다. 코드에 오류가 있다면 수정본을 보내주지만 이전에 요구한 기능을 없애서 일을 2번 한다든지, 코드 리뷰만으로는 파악할 수 없는 오류가 반복되면 답변 역시 변하지 않는다든지, 길어지면 자꾸 끊어서 보내는 등의 문제가 있었다. 또한 내가 하고 싶은 방향이 추상적이면, 그것을 이해하도록 문장을 작성하는 것이 매우 어려웠다. 만약 인간의 지성이었다면, 앞선 요구사항들을 모두 포함하면서 지금의 문제를 해결하기 위한 최선의 방법을 고민했을 거고, 길어지면 코드를 끊는게 아니라 알아서 정리해서 전달하거나, 또는 더 짧고 효율적인 코드로 리팩토링을 하는 등의 방법을 고민했을 것이다.
그 과정에서 시행착오는 지피티보다 더 많이 했을지라도, 사람의 경험으로 얻어지는, 검색으로는 절대 학습할 수 없는 경험의 영역이 있다. 우리가 사람에게 질문하고, 집단의 지성을 믿는 것은 여전히 사람만이 할 수 있는 것이라고 확신하는 영역이 있기 때문이 아닐까.
그럼에도 불구하고 매우 만족스러웠다. 기껏해야 css 정도 끄적거리고, jquery 간신히 호출해서 document.ready 정도나 할 수 있는 내가 플러그인을 혼자 만들 수 있었던 건 지피티 덕분이다.
내가 한 건 단순히 플러그인 만들기가 아니었다
프로덕트 디자이너는 항상 사용자의 문제에 집중하고, 사용자에게 애정과 관심을 쏟는다. 우리 앱에 들어오는 순간부터 나가는 순간까지 어떻게 하면 더 편하고 쉽고, 빠르게 과업을 완수하게 해드릴까를 고민하는, 마치 손님을 맞이하는 밥집 사장님과 주방장의 마음인 것이다.
하지만 많은 디자이너들이 간과하는 것은, 그 식당에서 손님을 맞이하는 직원들 역시 우리 식당의 손님이라는 것이다. 더 효율적인 동선으로 일하고, 더 쾌적한 근무 환경이 있어야 하고(물론 금융 치료도 있지만), 정말 내가 해야 하는 일에 집중할 수 있도록 방해물을 치워줘야 이 사람들도 손님에게 정성을 더 투입할 수 있다.
인터널 프로덕트 디자이너라고도 한다. 다소 생소할 수 있는데, 한지유 님과 강영화 님께서 이 직무 경험을 가지고 계신다. 쉽게 말해, 우리 회사에서 일하는 사람들이 더 쉽고 편하고 빠르게 일할 수 있도록 회사 내부의 업무 프로세스를 개선하는 디자이너 직무다. 어떻게 보면 채널톡같은 SaaS 제품을 다루는 디자이너와 유사하다고 볼 수 있다(이건 인게이지먼트 게임 3가지 유형으로 설명할 수 있는데, 다음 기회에…).
우리는 항상 사용자에게 관심을 준다고는 하지만, 정작 그 관심을 주기 위한 과정에서 생겨나는 비효율은 감수하는 경향이 있다. 하지만 디자이너는 우리 제품을 쓰는 사용자만을 위해 디자인해선 안 된다. 사용자를 위해 제품을 만들어 내는 우리 구성원들 역시 우리 회사의 업무 프로세스라는 제품의 사용자인 것이고, 그 과정을 꾸준히 개선하는 것도 디자이너의 할 일인 것이다.
디자이너가 해결해야 하는 문제는 회사 밖에만 있는 것이 아니다. 내 옆, 내 뒤에 있는 동료의 문제도 디자이너가 해결할 수 있는 문제일 수 있다. 앱 사용자만 사용자가 아니다. 누군가 불편을 겪고 있다면 그 문제의 원인을 찾고 개선점을 만들어 내는 것, 그것 자체가 디자이너의 본질이라는 걸 잊지 않았으면 좋겠다.
금융의 모든 연결고리, 알다
앱 다운로드 바로 가기
