시작하며: 피그마 슬라이드에서 도형에 링크가 안 된다고? 🧐
피그마의 야심작, 피그마 슬라이드(Figma Slides)로 발표 자료를 만들다 보면 디자인 엔지니어의 혈압이 오르는 순간이 옵니다. 분명히 이 도형에 외부 참조 링크를 딱 걸어줘야 하는데, 디자인 모드처럼 직관적으로 작동하지 않거나 과정이 너무 번거롭거든요. 😫
“아니, 슬라이드 발표하다가 참고 자료 바로 보여줘야 하는데 이게 왜 안 돼?”라는 빡침(?)에서 시작되었습니다. 그래서 결심했죠. “슬라이드 모드에서도 링크를 0.1초 만에 걸어버리고, 레이어 이름까지 🔗 주소 형식으로 스마트하게 바꿔주는 도구”를 직접 만들기로요. 0.1초의 노가다도 허용하지 않는 올리브의 집착이 투영된 결과물입니다. 🛠️
주요 기능: olive의 감성을 담다 (Key Features) ✨
단순히 기능만 작동하면 재미없죠. 올리브의 정체성을 꾹꾹 눌러 담아 설계했습니다. 플러그인을 앞으로 더 만들게 된다면 올리브를 딴 이름이 있으면 좋을 것 같아, Olive Lab 이라는 이름도 하나 지었습니다. 👀
- One-Click Linkage: 객체 선택 후 URL만 입력하면 즉시 링크 생성! 슬라이드 작업 효율을 200% 올려주는 효자 기능입니다. 🖱️
- Smart Layer Naming: 링크가 적용되자마자 레이어 이름이
🔗 oliveves.blog형식으로 자동 변경됩니다. 레이어 패널만 봐도 “아, 이 도형에 링크 걸어뒀지” 하고 마음이 편안해집니다. 🧘♂️ - Signature UI: Olive Lab의 상징, #639A68 컬러를 입혔습니다. 플러그인을 켜는 순간 “아, 내가 디자인 엔지니어의 도구를 쓰고 있구나” 하는 만족감을 줍니다. 🌿
- Quick Commands: 플러그인 창을 번거롭게 열지 않아도 우측 메뉴에서 바로 링크로 점프할 수 있습니다. 발표 준비 시간, 0.1초라도 아껴야죠. 🚀
삽질의 기록: 2FA의 벽과 아이콘의 반전 (Troubleshooting) 🛠️
개발 과정은 늘 ‘왜 안 돼?’와 ‘아, 이게 왜 돼?’의 반복이죠. 특히 저를 당황하게 했던 건 코드가 아닌 피그마의 ‘보안‘과 ‘가이드라인’이었습니다. 😤
- 권한의 벽과 401 에러의 공포: 로컬에선 완벽했는데, 게시(Publish) 버튼만 누르면 뜨는 무정한
status 401. 코드를 뜯어보고 헤매다 발견한 원인은… 허무하게도 이중 인증(2FA) 미설정이었습니다. 🔐 피그마 커뮤니티의 일원이 되려면 보안부터 철저히 해야 한다는 큰 교훈을 얻었죠. (여러분, 2FA는 선택이 아닌 필수입니다!) - 💡 디자인 엔지니어의 꿀팁: 아이콘은 코드로 깎는 게 아닙니다! 많은 분이
manifest.json설정 파일에 아이콘 경로를 어떻게든 우겨넣으려다 에러를 마주하고 탈모를 겪으십니다. 저도 잠시 그럴 뻔했죠.. 😅 하지만 진실은 허망할 정도로 간단했습니다. 아이콘은 코딩 단계에서 심을 필요가 전혀 없어요! 나중에 피그마 커뮤니티에 플러그인을 게시할 때, 웹 화면에서 직접 이미지 파일을 업로드하면 그만입니다. 코드 한 줄이라도 덜 쓰는 게 미덕인 우리에게 이보다 달콤한 팁이 있을까요? 🍬
마치며: 제출 완료! (Submission Done) 🎉
우여곡절 끝에 모든 에러를 잡고 드디어 제출 접수 완료 문구를 확인했습니다. 🏁
단순한 툴을 만드는 것보다 ‘사용자가 슬라이드 제작 중에 느낄 가려운 곳을 긁어주는 코드’를 짜는 게 얼마나 중요한지 깨달은 소중한 시간이었습니다. 기술은 결국 우리의 발표 환경을 우아하게 정돈하기 위해 존재하는 거니까요. 이제 Olive Lab의 첫 번째 피그마 플러그인이 커뮤니티에서 누군가의 시간을 0.1초라도 아껴주길 기대해 봅니다. 🚀
올리브의 한 줄 요약: “슬라이드에서 안 되면 되게 하세요. 아이콘은 마우스로 올리시고, 에너지는 코드 로직에 쏟으세요. 그것이 가장 우아한 엔지니어링입니다.” 🌿