개발자 99% 커뮤니티에서 수다 떨어요!
Snippet Studio: 반복 텍스트를 쉽게 삽입하는 크롬 확장 프로그램
Snippet Studio
(1) 자기소개
안녕하세요. 😀
개발자는 아니고 여태 해온 업무 특성상 JS/Python을 자주 사용하다보니
자연스럽게 코딩, AI에 관심이 많아져서 관련해서 이것저것 공부만 하는 중인 평범한 직장인입니다.
공부한 것들로 업무에 많이 활용하고 있고, 요즘은 코딩 AI Agent를 좀 써보고 있습니다.
최근 ChatGPT Pro 대란으로...
5개월치 쟁여놨다가 이제 사용하게 됐는데, 너무 안쓰면 아까울 것 같아서 Codex로 개발해봤습니다.
(2) 서비스 소개
반복적으로 사용하는 메일 템플릿, AI 프롬프트, 코드 등을
스니펫으로 저장하고 바로 불러와 삽입할 수 있는 크롬 확장 프로그램입니다.
Command를 통해 스니펫을 검색 및 삽입할 수 있습니다.
# Command
노션의 Slash(/) command처럼 #을 통해 스니펫 목록을 검색할 수 있고,
방향키 위/아래로 목록을 선택 후 탭 또는 엔터로 저장한 스니펫을 삽입할 수 있습니다.
> Setting에서 트리거 키를 변경할 수 있습니다.
Variables
스니펫의 Placeholder를 적용합니다. Tab stop과 유사한 기능입니다.
Variables를 적용한 스니펫을 사용하면 별도 Dialog가 나오며 Placeholder 부분에 삽입할 값을 입력할 수 있습니다.
(3) 시작하게된 계기
(요즘 같은 시대에 AI와 관련된 건 아니지만...)
저는 여태 해왔던 업무 특성상 웹 로우 코드 툴을 많이 사용해왔는데요,
그러다보니 반복적으로 사용하는 코드들 또는 반복적으로 쓰는 메일 내용들...
그리고 요즘에는 AI 프롬프트까지... 반복적으로 사용하는 텍스트/코드가 많았습니다.
원래는 VS Code Extension을 만들어서 거기에 단축키나 스니펫을 등록해서 쓰고,
복사해서 사용하는 툴에 붙여넣는 방식으로 많이 했었는데요, 이걸 이제는 굳이 복사하지 않고 웹에서 바로바로 사용하고 싶었습니다.
사실 크롬 웹스토어만 가도 스니펫 관련된 확장 프로그램이 꽤 많긴한데요,
제가 원하는 모든 것들을 충족시키는 것은 딱히 없는 것 같아서 제 욕망을 반영한 확장 프로그램을 기획하게 되었습니다.
Text Editor를 지원하며 Editer <-> HTML 양방향 편집을 지원 및 HTML 렌더링 지원 (Mail template)
MarkDown, XML을 지원한다. (프롬프트용)
VS Code의 스니펫처럼 검색 가능하고, 탭스탑을 지원한다.
굳이 특정 웹앱/툴이 아닌 모든 웹페이지에서 사용할 수 있어야 한다.
e.g. Gmail, Google Form, ChatGPT, Gemini 등등...정말 딱 필요할 때만 불러오고 스니펫 목록을 검색할 수 있어야한다.
오직 키보드만 쓴다.
위 내용을 모두 만족하는 확장 프로그램을 찾기가 저는 어렵더라구요...
일부는 만족해도 UI가 맘에 들지 않는다거나... 사용성이 맘에 들지 않는다거나...
5번은 왜 있냐면 어떤 스니펫 확장 프로그램은 키워드만 작성하고서 1-2초 기다리면 자동변환이 되는 기능이더라구요... 제가 원하지 않아도 바로 변환되어서 불편할 것 같았습니다.
그리고 무엇보다 VS Code의 Auto Suggestion처럼 목록 형태로 나왔으면 했고, 탭스탑같은 기능이 있으면 했습니다.
그래서 위에 작성한 모든 것들을 충족하는 확장 프로그램을 기획하게 되었습니다.
원래는 현재 근무 중인 회사 내에서 업무용으로만 쓸까하다가,
아에 개인 사이드 프로젝트로 진행하고, 저번 주말동안 열심히 해서 인생 처음으로 웹스토어 등록하게 되어 공유드리게 됐습니다.
(4) 개발
코딩 Agent는 Codex로만 진행했고, 이것저것 skill들을 사용해보고 공부하면서 해봤습니다.
WXT, React, Tailwindcss, Tribute, Codemirror 등 꼭 써야하는 프레임워크, 라이브러리만 처음에 확실하게 명시하고, UI 초안은 Pencil.dev를 연결해서 대략적인 것만 잡았습니다.
전반적으로 Bkit plugin PDCA 기반으로 작업을 했고, QA는 playwright-cli를 적극적으로 활용했습니다.
향후 Variables는 input text만 지원하는 것이 아닌 드롭다운 및 추가적인 Contenteditable/textarea도 지원하게 할 예정입니다. + JS/Python Syntax 추가
하다보니 Google DOCS 같은 별도 canvas 및 iframe 내에 있는 요소는 작동하지 않아서 조금 아쉽습니다... (Google Spread sheet는 되는데...)
+ 네이버 메일 바디에도 작동 안하는데, HTML로 전환해서 하면 작동을 하더군요... 근데 왜 트리거(#)가 남는 지... 이것도 원인 파악이 안돼서 아쉽습니다... 🥴
+ Notion/Slack 같은 데스크톱앱으로 많이 사용하는 건 고려하지 않았습니다.
그래도 많이 쓰는 Gmail, ChatGPT, Gemini, Claude, Genspark 등 대부분 가능해서 개인적으로 만족하고 있습니다.
(5) 바라는 것은?
배포해보고 싶은 다른 확장 프로그램이 있는데...
이건 크롬 정책상 리젝될 가능성이 높아서 걱정입니다 ㅎ...
그래도 한번 시도해보고 최대한 승인 받아볼려 합니다.
많은 분들이 사용할만한 확장프로그램은 아니지만...
사용하시게 되면 피드백도 해주시면 정말 감사하겠습니다!