개인 웹서비스의 자유: JSON Formatter를 직접 만들어본 이야기

개인 웹서비스라는 놀이터

개인 웹서비스를 운영하면서 가장 좋다고 느끼는 점이 하나 있습니다. 필요한 기능을 떠올리는 순간, 바로 만들어볼 수 있다는 것입니다.

회사에서 일할 때는 기능 하나를 추가하려면 기획, 리뷰, 일정 조율 같은 과정을 거쳐야 합니다. 당연히 필요한 과정이지만, 때로는 "이거 하나 만들면 편할 텐데"라는 생각이 들어도 선뜻 손대기 어려운 경우가 많습니다. 개인 프로젝트에서는 그런 제약이 없습니다. 아이디어가 떠오르면 바로 구현하고, 마음에 안 들면 바로 고치고, 쓸모없으면 바로 치울 수 있습니다.

이 블로그도 마찬가지입니다. 글을 쓰는 플랫폼이라는 본래 목적이 있지만, 그 위에 개발자로서 필요한 도구를 하나씩 얹어갈 수 있는 공간이기도 합니다. 최근에 그 첫 번째 도구로 JSON Formatter를 만들어봤습니다.

왜 JSON Formatter였을까

개발 업무를 하다 보면 JSON 데이터를 다루는 일이 정말 많습니다. API 응답을 확인하거나, 설정 파일을 편집하거나, 디버깅 과정에서 데이터를 들여다보거나. 그때마다 외부 JSON formatter 사이트를 찾아가게 됩니다.

솔직히 말하면, 이미 좋은 JSON formatter 서비스는 많습니다. 굳이 직접 만들 이유가 있었냐고 묻는다면, 꼭 필요해서라기보다는 만들 수 있으니까라는 대답이 더 솔직할 것 같습니다. 개인 웹서비스의 장점이 바로 이런 데 있다는 생각이 들었습니다. 거창한 이유 없이, 한번 만들어보고 싶다는 마음만으로 시작할 수 있다는 것.

다만 만들면서 느낀 소소한 장점도 있었습니다.

• 광고가 없습니다. 기존 서비스들은 대부분 광고가 붙어 있어서, 간단한 작업을 하러 갔다가 시각적으로 산만한 경험을 하게 됩니다.
• 데이터가 브라우저를 떠나지 않습니다. 모든 처리가 클라이언트 사이드에서 이루어지기 때문에, 민감한 데이터를 다룰 때도 걱정이 없습니다.
• 내가 원하는 대로 만들 수 있습니다. 다크 모드, 들여쓰기 옵션, 트리 뷰 같은 기능을 내 취향에 맞게 구성할 수 있었습니다.

어떻게 만들었는가

이 블로그는 Next.js 15 기반으로 되어 있어서, 새로운 페이지를 추가하는 건 어렵지 않았습니다. /tools/json-formatter 경로에 페이지를 하나 만들고, React 컴포넌트로 JSON Formatter를 구현했습니다.

주요 구성은 이렇습니다.

• 입력 패널: JSON 데이터를 붙여넣는 영역. 라인 넘버와 구문 하이라이팅을 지원합니다.
• 출력 패널: 포매팅된 결과를 보여주는 영역. Formatted 뷰와 Tree View 두 가지 모드를 제공합니다.
• 도구 모음: Format/Minify 전환, 들여쓰기 설정(2칸/4칸), 클립보드 복사, 샘플 데이터 로드 등.

기술적으로 특별히 복잡한 부분은 없었습니다. JSON.parse와 JSON.stringify가 핵심이고, 구문 하이라이팅은 정규식으로 JSON 토큰을 파싱해서 각 타입(키, 문자열, 숫자, 불리언, null)에 색상을 입히는 방식입니다. 트리 뷰는 재귀 컴포넌트로 구현했고, 깊이 3단계까지는 기본적으로 펼쳐 보이도록 했습니다.

JSON 입력 → JSON.parse()로 파싱 → 에러 시 메시지 표시
                                   → 성공 시 JSON.stringify(obj, null, indent)로 포매팅
                                   → 또는 트리 뷰 렌더링

돌이켜보면 가장 신경 쓴 부분은 기능보다는 사용 경험이었습니다. 입력 영역의 구문 하이라이팅이 자연스럽게 보이도록 투명한 textarea 위에 하이라이팅 레이어를 겹치는 방식을 썼고, 에러 메시지가 레이아웃을 밀어내지 않도록 고정 높이 영역을 확보해두었습니다.

개인 프로젝트에서 도구를 만든다는 것

사실 JSON Formatter 하나를 만들었다고 해서 대단한 이야기는 아닙니다. 하지만 이 경험을 통해 개인 웹서비스가 단순한 콘텐츠 플랫폼을 넘어설 수 있다는 가능성을 느꼈습니다.

블로그라는 공간이 글을 쓰는 용도로만 존재할 필요는 없다는 생각이 들었습니다. 개발자라면 자주 쓰는 도구들을 하나씩 만들어 넣을 수 있고, 그 과정 자체가 학습이 됩니다. 남들을 위한 서비스가 아니더라도, 자기 자신을 위한 도구를 만드는 경험에는 나름의 가치가 있다는 생각이 들었습니다.

앞으로도 개발 과정에서 "이거 있으면 편하겠다"라는 생각이 들 때마다, 이 블로그의 /tools 경로 아래에 하나씩 추가해볼 생각입니다. Base64 인코더/디코더가 될 수도 있고, 정규식 테스터가 될 수도 있고, 색상 팔레트 도구가 될 수도 있습니다. 어떤 도구가 될지는 모르겠지만, 필요할 때 만들 수 있다는 사실 자체가 개인 웹서비스를 운영하는 즐거움 중 하나라는 생각이 듭니다.

마치며

개인 웹서비스를 구축하면 좋은 점은 여러 가지가 있겠지만, 결국 가장 본질적인 것은 자유라는 생각이 들었습니다. 무엇을 만들지, 어떻게 만들지, 언제 만들지를 스스로 결정할 수 있다는 자유. JSON Formatter는 그 자유를 처음으로 구체적인 형태로 만들어본 결과물입니다.

혹시 개인 블로그나 웹사이트를 운영하고 계신 분이라면, 글만 쓰는 공간으로 두지 말고 자신에게 필요한 작은 도구를 하나 만들어보시는 건 어떨까요. 생각보다 재미있고, 생각보다 유용합니다.