러닝 커뮤니티에서 글을 보다가 마라톤 페이스 차트를 프린트해서 사용한다는 글을 보았다. 대부분의 러너들은 스포츠 워치의 GPS 기능을 활용해 페이스를 체크하지만 경우에 따라 GPS 정확도에 문제가 생기기 때문에 보조 수단으로 페이스 차트를 활용하는 경우가 있다. 해외 메이저 마라톤 대회에서는 자체적으로 페이스 차트를 제작해서 배포하는 경우도 있다.
가능하면 웹에서 페이스 차트를 설정하고 인쇄까지 바로 하면 좋겠지만 피그마 사용이 가능한 사람이라면 생성된 페이스 차트의 크기 및 스타일 수정도 피그마에서 가능하기 때문에 범용성이 좋은 피그마 플러그인으로 한번 만들어 보기로 결정했다.
기획 및 디자인
기능이 단순하기 때문에 필요한 인풋 정도만 아래와 같이 정리했다
- 평균 페이스
- 대회 타입(하프, 풀)
- 구간별 페이스(옵션)
구간별 페이스를 추가하면 UI 복잡도가 오르지만 아무래도 이런 기능은 취미 이상의 러너가 주로 사용할 거라 최대한 세부적으로 조절이 가능하도록 설계하였다. 추가적으로 조절 시에 시프트 + 클릭을 하면 1초 단위가 아닌 10초 단위로 변경하게 하였다.
개발
일단 피그마 공식 문서에서는 최신 트렌드의 프레임워크 지원이 아닌 바닐라 JS,CSS의 형태로 제공을 하는데 최근 웹 개발 트렌드를 따르는 개발자 혹은 디자이너라면 난감해지는 상황이다. 그래서 리서치를 하다가 쓸만한 템플릿을 지원하는 레포를 발견했다.
Create Figma Plugin - 피그마 플러그인 템플릿
여기서 tailwindcss를 적용한 보일러플레이트를 사용했고, 자연스럽게 react의 경량화 버전인 preact를 사용하게 되었다. 어차피 세부적인 코드는 claude의 도움을 받기 때문에 크게 걱정되지는 않았다.
일단 html 구조를 작성하고 tailwindcss로 스타일을 적용해서 아직은 작동하지않는 구조를 작성하고 이걸 claude에게 그대로 붙여 넣고 기능을 설명하였다. 프롬프트에 피그마에서 제공하는 플러그인 문서도 추가해 주었고, claude랑 핑퐁을 하면서 기능을 완성하였다. 이 부분은 웹 혹은 앱을 직접 개발하면서 겪은 상황이라 크게 문제가 없었지만 피그마 플러그인에서 설정된 내용을 바탕으로 실제로 피그마에 요소를 그리는 작업은 처음이었다.
공식 문서를 읽어보고 이건 웹 캔버스랑 비슷한 느낌이라고 생각했다. 어차피 피그마도 캔버스 기반일거라 생각했는데 맞던 거 같다. 테스트로 출력을 해보고 성공하자 세부적인 요소의 크기 및 위치를 설정하고 완성. 생각대로 나오자 크게 걱정할 정도의 난이도는 아니라고 생각했다. 물론 세부적인 기능을 적용하면 난이도가 오르겠지만 캔버스 관련 기능을 활용해 본 개발자라면 쉽게 이해할 거라 생각한다.
출시
플러그인을 퍼블리싱하는 절차도 굉장히 자연스러웠다. 생성된 프로젝트의 manifest 파일을 연동하면 누락된 정보를 알려주면서 수정을 요청하는데 시키는대로만 하면 쉽게 된다. 그리고 네트워크 관련 정책을 선택하고 썸네일, 아이콘, 이름 설명 등등을 작성하고 퍼블리싱을 하면 리뷰 단계로 넘어간다. 기능이 단순해서인지 1~2일 후에 승인되었으며 피드백도 간단하게 작성해 준다. 나의 경우 설명대로 제대로 작동한다는 피드백을 받았다.
기능이 단순해서인지 리서치, 기획 및 디자인, 개발까지는 3시간만에 완료하였다. 피그마에 양질의 플러그인이 넘쳐나는 이유를 알게 되었다. 출시 과정에서의 개발 경험은 굉장히 좋았고 스타일 적용은 바닐라 CSS에 가깝다보니 플러그인 중에서 UI가 성의 없어 보일 정도로 단순한 게 많았던 이유가 이해가 되었다.
Marathon Pace Chart - 피그마 플러그인 링크