이 블로그를 왜 시작했는가 - 개발자의 개인 사이트 만들기

개발블로그Astro사이드프로젝트

그냥 만들어보고 싶었다

GitHub 있고, LinkedIn 있고, velog도 있고. 개발자가 글 쓸 데가 없어서 직접 만드는 건 아닙니다.

솔직히 말하면 그냥 만들어보고 싶었습니다. 내 도메인에, 내가 짠 코드로 돌아가는 사이트. 거창한 이유는 없었고, “이거 내가 만든 거야”라고 말할 수 있는 게 하나쯤 갖고 싶었습니다.

매일 쓰는 도구가 다 불편했다

그래도 계기는 있었습니다.

업무 중에 JWT 토큰 까봐야 할 때, JSON 정리해야 할 때, 정규식 급하게 돌려봐야 할 때. 매번 구글 검색하고, 광고 세 개 넘기고, 반쯤 망가진 UI에서 작업하는 게 일상이었습니다. 어떤 사이트는 HTTPS도 안 걸려 있었습니다.

그러다 어느 날 문득 생각했습니다. 이거 별로 어렵지 않은데?

그래서 하나 만들었습니다. JWT 디코더. 쓸만해서 하나 더 만들었습니다. JSON 포맷터. 그러다 정규식 테스터도 만들고, Base64 인코더도 만들고. 돌아보니 도구가 10개가 넘어 있었습니다.

도구만으로는 좀 아쉬웠다

JWT 디코더를 만들면서 header, payload, signature 구조를 다시 공부했습니다. Base64 만들면서 왜 padding에 =을 쓰는지 처음 제대로 이해했습니다. 이런 걸 도구 옆에 정리해두면 나중에 내가 다시 보기에도 좋고, 같은 걸 검색하는 누군가한테도 쓸모 있을 거라고 생각했습니다.

도구를 쓰다가 “이게 왜 이렇게 동작하지?” 싶으면 바로 글로 넘어가고, 글 읽다가 직접 돌려보고 싶으면 도구로 넘어가는 구조. 이게 내가 원했던 사이트입니다.

기술 스택

어차피 만드는 거, 실무에서 쓰는 기술로 만들어보고 싶었습니다. 비슷한 스택으로 사이트를 만들어볼 생각이 있다면 참고가 될 수도 있습니다.

  • Astro — 블로그 글은 JavaScript 없이 정적으로 빠르게 뿌리고, 도구 페이지처럼 버튼 눌러야 하는 데서만 React를 붙이는 구조입니다.
  • React + DaisyUI + Tailwind CSS — 도구 UI를 빠르게 찍어내면서도 페이지마다 디자인이 따로 노는 걸 막아줍니다.
  • Turborepo — 프론트엔드, Go 백엔드, 공유 설정을 한 저장소에서 관리합니다. 나중에 뭔가 하나 더 얹을 때 구조가 잡혀 있으면 삽질이 줄어듭니다.
  • 다국어(ko/en) — 나중에 i18n 붙이는 게 얼마나 고통스러운지 아는 사람은 압니다. 처음부터 넣었습니다.

지금 뭐가 있나

현재 이런 도구들이 있습니다.

  • 개발 도구 — JSON 포맷터, JWT 디코더, 정규식 테스터, URL 인코더, UI 단위 변환기
  • 암호화 도구 — Base64 인코더, Hash 생성기, 토큰 생성기
  • 시간 도구 — 시간대 변환, D-Day 계산, 날짜 계산기
  • 계산 도구 — 퍼센트 계산기, 길이 변환, 사이즈 변환기
  • 재미 페이지 — ASCII 아트, 운세, 룰렛 (이건 그냥 만들고 싶어서 만들었습니다)
  • 즐겨찾기 — 자주 쓰는 도구 모아두는 기능

이 사이트 말고도 만든 것들

GitHub(buYoung)에서 오픈소스도 몇 개 하고 있습니다.

jsoninja — JetBrains용 JSON 플러그인

jsoninja는 IntelliJ 계열 IDE에서 JSON 작업을 하나로 몰아주는 플러그인입니다. IDE에서 JSON 만질 때마다 외부 사이트를 왔다 갔다 하는 게 싫어서 만들었습니다. 포맷팅, 압축, Escape 같은 기본은 물론이고, JMESPath/JsonPath 쿼리나 JSON Diff, 스키마 기반 샘플 생성 같은 것도 IDE 안에서 바로 됩니다.

이 사이트의 JSON 포맷터는 jsoninja를 쓰다가 만들었습니다. IDE 밖에서, 브라우저에서 바로 JSON을 정리하고 싶을 때가 있거든요. 같은 불편함에서 출발한 도구가 하나는 플러그인이 되고, 하나는 웹 도구가 된 셈입니다.

Skills — AI 코딩 에이전트용 스킬 모음

Claude Code로 작업하다 보면 비슷한 프롬프트를 반복해서 치게 됩니다. AGENTS.md 만들 때, 보안 감사할 때, 시스템 프롬프트 짤 때. 매번 처음부터 설명하는 게 귀찮아서 스킬로 정리했습니다.

그게 Skills입니다. Claude Code나 Codex에서 바로 불러 쓸 수 있고, 이 블로그 글도 그 스킬 몇 개를 써서 쓰고 있습니다.

앞으로 쓸 글들

세 방향으로 쓸 생각입니다.

  1. 개발 실무 가이드 — JWT 구조, 정규식 패턴, JSON 스키마 같은 주제. 글 읽으면서 이 사이트 도구로 바로 돌려볼 수 있으니, 검색하다 들어와서 한 번에 해결하고 나갈 수 있습니다.
  2. AI 실무 활용 — Claude Code 같은 AI 코딩 도구 실사용기, 프롬프트 패턴, 업무 자동화 사례. “이걸 회사에서 어떻게 쓰지?”에 답하는 글을 쓰려고 합니다.
  3. 개발자 일상 — 사이드 프로젝트 삽질기, 기술 트렌드에 대한 개인적인 생각들. 정답보다 경험 위주로.

마치며

완벽하게 만들어서 공개하겠다고 했으면 지금도 로컬에서 dev 서버만 돌리고 있었을 겁니다.

빠진 것도 많고, 고치고 싶은 것도 많습니다. 근데 그게 맞다고 생각합니다. 완성이 목표가 아니라 계속 만드는 게 목표니까.

도구 페이지 한번 둘러봐 주세요.