비엔지니어가 Claude Code로 「업무에서 사용할 수 있는 변환 도구 모음」 18개를 만든 이야기
요약
코딩 전문 지식이 없는 비엔지니어(非エンジニア)가 Claude Code를 활용하여 업무에 필요한 18가지 웹 변환 도구 모음 사이트를 구축한 경험을 공유하는 글입니다. 이 도구들은 Markdown-Slack/Discord 변환, HTML 출력, 문자열 계측, 다양한 포맷 변환 등 실무에서 자주 발생하는 반복적인 데이터 처리 및 서식 변환 작업을 자동화합니다. 이 프로젝트의 핵심은 단순히 코드를 생성하는 것을 넘어, '사용자가 원하는 사양(Specification)'을 명확하게 언어화하여 Claude Code에 전달함으로써 실제 동작하는 웹 도구로 구현해냈다는 점입니다. 또한, 모든 도구가 브라우저 내에서만 작동하도록 설계되어 보안성이 높고, 통일된 UI/UX를 갖추어 사용 편의성을 극대화했습니다.
핵심 포인트
- Claude Code를 활용하여 코딩 지식 없이도 실용적인 웹 도구 모음을 구축할 수 있다.
- 반복적이고 사소한 데이터 변환 작업(예: Markdown to Slack)을 자동화하는 것이 업무 효율성 증대에 매우 효과적이다.
- 모든 도구가 클라이언트 측(브라우저 내)에서만 작동하도록 설계되어 민감 정보 처리 시 높은 보안성을 확보했다.
- 도구 개발 과정은 '하고 싶은 일'을 구체적인 사양(Specification)으로 언어화하는 능력이 핵심이며, 에러 메시지나 스크린샷 활용이 문제 해결에 큰 도움이 된다.
어느 IT 기업에서 일하고 있는 지에무(じーえむ)라고 합니다. 엔지니어 조직에 소속되어 있지만, 제 자신은 코드를 작성하는 전문직이 아닙니다.
그런 제가, Claude Code를 사용하여 18개의 Web 도구가 담긴 사이트를 만들었습니다.
🔧 완성된 사이트: rery-tools.com
이 기사에서는, 「코드를 작성할 수 없는 사람이 Claude Code로 무엇을 어디까지 만들 수 있는가」의 리얼한 결과물로서, 완성된 도구들을 소개하겠습니다.
⚠️ 본 기사는 기술 해설이 아니라,
도구 소개에 가까운 내용입니다. 「이런 것도 만들 수 있구나」라는 감각을 가져가실 수 있다면 좋겠습니다.
계기는 두 가지가 있습니다.
Markdown → Slack, JSON 포맷, Base64, 글자 수 카운트, UNIX 타임스탬프…….
편리한 도구는 인터넷상에 얼마든지 있습니다. 하지만, 매번 각각 다른 사이트를 검색해서 접속하는 것이 귀찮습니다. 탭이 늘어나고, 북마크도 늘어나고, UI도 제각각입니다.
「전부 한 곳에 모여 있고, UI도 통일되어 있으면 좋을 텐데」라는 것을 계속 생각하고 있었습니다.
최근에는 「Claude에게 붙여넣어서 변환해줘」로 끝나는 경우도 많지만, 이것이 은근히 문제입니다.
- 약간의 서식 변환을 할 때마다 대화를 소비하는 것은 토큰 (Token)이 아깝다
- 매번 프롬프트 (Prompt)를 쓰고 결과를 기다리는 것은 보통 느리다
- Claude의 메시지 상한이 있는 플랜이라면, 이런 잡무로 제한을 쓰고 싶지 않다
「AI를 쓸 정도는 아닌 단순 작업은, 결정론적 (Deterministic)으로 동작하는 도구로 한 번에 처리하고 싶다」고 생각하여 손을 움직이기 시작했습니다.
그리고 실제로, Claude Code에게 「Slack의 mrkdwn 형식으로 변환하는 도구를 만들어줘」라고 부탁했더니, 정말로 동작하는 것이 나왔습니다. 이거라면 가능할지도 모르겠다며 18개까지 늘어났습니다.
업무에서 가장 많이 사용하는 것이 이 카테고리입니다.
Slack은 독자적인 mrkdwn 형식을 사용하기 때문에, 일반적인 Markdown을 붙여넣으면 굵게(Bold)나 기울임꼴(Italic)이 깨집니다. 이를 양방향으로 변환합니다.
| 항목 | Markdown | Slack |
|---|---|---|
| 굵게 | **굵게** | *굵게* |
| 기울임꼴 | *기울임꼴* | _기울임꼴_ |
| 링크 | [이름](URL) | `<URL |
| 취소선 | ~~취소~~ | ~취소~ |
GitHub의 Issue를 Slack에 공유할 때나, 의사록을 보낼 때 반드시 사용합니다.
Discord는 Slack과 비슷하면서도 다른 서식. 커뮤니티를 운영하는 분들에게 유용할 것이라 생각합니다.
Teams에서 Markdown이 깨지는 문제, 은근히 괴롭지요. 이것도 변환할 수 있습니다.
블로그나 CMS에 붙여넣기 용도. 깔끔한 HTML을 출력합니다.
글자 수·바이트 수·행 수를 실시간으로 계측. SNS나 SEO의 제한 체크도 가능합니다 (X의 280자, meta description의 120자 등).
복사해서 붙여넣은 데이터의 숫자가 전각(Full-width)이었던 경우처럼, 일괄 변환할 수 있으면 은근히 도움이 됩니다.
전각 공백·연속 공백·공백 라인을 한꺼번에 청소. 복사한 텍스트의 정리에 사용합니다.
글을 쓰는 사람용. 「이 글은 몇 분 만에 읽을 수 있는가」를 계산합니다.
CSV / TSV / HTML 테이블을 Markdown 형식으로 변환. Excel의 표를 GitHub Issue에 붙이고 싶을 때 유용합니다.
UTF-8 대응. 일본어도 제대로 다룰 수 있습니다.
MD5 / SHA-1 / SHA-256 / SHA-512에 대응합니다.
API 디버깅 시에 사용합니다.
정렬 / 미니파이 (Minify) / 검증. 구문 에러 (Syntax Error) 위치도 표시하므로, 디버깅이 빨라집니다.
일시와 UNIX 시간의 상호 변환. JST / UTC 모두 대응합니다.
「계약일로부터 ◯일 후」, 「나이 계산」 등, 은근히 손으로 계산하기 싫은 것들.
브라우저 내에서 완결되어 생성. 서버로 전송하지 않습니다.
HEX / RGB / HSL을 상호 변환. 컬러 피커가 포함되어 있습니다.
이 사이트의 도구는, 입력 데이터를 일절 서버로 보내지 않습니다. 모든 것이 브라우저 안에서 처리가 완결됩니다.
업무에서 사용하는 이상, 비밀번호나 JWT, 사내 문서를 붙여넣어도 안심하고 사용할 수 있도록 만들고 싶었기에 이 부분은 타협할 수 없었습니다. Claude Code에게 "서버리스(Serverless)로, 브라우저 안에서만 동작하게 하고 싶다"라고 전달했더니, 처음부터 그런 설계로 구현해 주었습니다.
도구마다 제각각인 사이트를 오가며 느꼈던 스트레스를 해소하고 싶었기에, 모든 도구에 동일한 레이아웃, 동일한 배색, 동일한 복사 버튼 위치를 적용했습니다. 한 번 사용법을 익히면 다른 도구도 헤매지 않고 사용할 수 있습니다.
기술 기사는 아니므로 깊게 들어가지는 않겠지만, 직접 해보며 알게 된 세 가지만 말씀드리겠습니다.
코드를 쓰는 방법은 몰라도, **"Slack의 굵은 글씨는 *로 감싸니까, Markdown의 를 변환해 줬으면 좋겠어"와 같은 사양(Specification)을 일본어(한국어)로 쓸 수 있다면 동작하는 결과물이 나옵니다. 평소 업무에서 "하고 싶은 일을 언어화하는 기술"은 누구나 사용하고 있으므로, 그것이 그대로 활용되었습니다.
막혔을 때는 에러 메시지를 Claude Code에 그대로 붙여넣거나, 화면 스크린샷을 보여주면 해결책을 돌려줍니다. "스스로 고치지 못하면 만들 수 없다"라는 장벽이 거의 사라진 것이 큽니다.
18개의 도구를 한꺼번에 만든 것이 아니라, 도구 하나씩, 기능 하나씩 쌓아 올렸습니다. "Slack 변환만", "다음은 Discord 변환만"과 같이 범위를 나누면 Claude Code도 높은 정밀도로 구현해 주며, 사용량(=토큰 소비)도 최소한으로 유지할 수 있습니다.
"AI에게 부탁할 정도는 아니지만, 매번 검색하는 것은 귀찮은" 작업이라는 게 의외로 많거든요.
그런 작은 마찰들을 한곳에 모아두니,
- AI 사용량을 절약할 수 있다
- 검색과 탭 관리로부터 해방된다
- 결과적으로, 정말로 AI에게 부탁해야 할 작업에 집중할 수 있다
라는 세 가지 효과가 있었습니다.
혹시 업무에서 쓸 만한 도구가 있다면, 꼭 rery-tools.com을 살펴보시기 바랍니다. 북마크해 두면 검색하는 번거로움이 사라집니다.
🔧 rery-tools: https://rery-tools.com/
요구사항이나 "이런 도구도 있었으면 좋겠다"라는 의견이 있다면 댓글로 알려주시면 감사하겠습니다. 다음 도구를 만드는 힌트가 됩니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기