JSON Beautify를 개발하면서 느낀것
왜 또 하나의 JSON 포맷터를 만들었나?
개발자라면 누구나 JSON 데이터와 씨름하는 순간을 경험합니다. API 응답을 확인하거나, 설정 파일을 작성하거나, 동료와 데이터 구조를 공유할 때 – JSON은 우리의 일상입니다. 그런데 매번 온라인 도구를 찾아 헤매거나, 브라우저 개발자 도구의 작은 창에서 긴 JSON을 확인하는 것이 불편했습니다.
매번 확인하는게 귀찮아서 구글에 검색하는 나를 보며 만든 작은 웹서비스
바로가기 링크 : https://oneweekoneproduct.com/json-beautify
특히 한국어 데이터를 다룰 때면 더욱 그랬습니다. 많은 JSON 포맷터들이 영어 중심으로 만들어져 있어, 한글이 포함된 JSON을 다룰 때 인코딩 문제나 가독성 이슈를 자주 겪었죠. “내가 원하는 대로 동작하는, 한국 개발자를 위한 JSON 도구를 만들어보자”는 생각이 이 프로젝트의 시작이었습니다.
핵심 아이디어: 실시간 피드백과 직관적인 UX
기존 도구들을 사용하면서 가장 아쉬웠던 점은 즉각적인 피드백의 부재였습니다. JSON을 입력하고, 버튼을 누르고, 결과를 확인하는 3단계 과정이 번거로웠죠. 그래서 이번 도구는 다음 세 가지 원칙으로 설계했습니다:
- 실시간 검증: 타이핑하는 순간 JSON의 유효성을 체크
- 시각적 피드백: 빨간색/초록색으로 즉시 상태 표시
- 한 번의 클릭: 포맷팅, 압축, 복사를 각각 원클릭으로
또한 개발자들이 자주 사용하는 패턴을 고려해 샘플 데이터 로드 기능을 추가했습니다. 복잡한 중첩 구조의 JSON을 테스트할 때, 매번 직접 작성하는 대신 버튼 하나로 실제와 유사한 데이터를 불러올 수 있게 했죠.
개발 과정에서 배운 것들
1. Svelte 5의 새로운 반응성 시스템
이 프로젝트에서 Svelte 5의 새로운 $state와 $effect 룬을 적극 활용했습니다. 특히 인상 깊었던 부분은 코드의 간결함이었습니다:
$effect(() => {
if (jsonInput) {
validateAndFormat();
}
});
이 몇 줄로 입력값이 변경될 때마다 자동으로 JSON을 검증하고 포맷팅하는 기능을 구현할 수 있었습니다. React의 useEffect와 비슷하지만, 의존성 배열을 명시하지 않아도 자동으로 추적된다는 점이 매력적이었죠.
2. 에러 처리의 중요성
JSON 파싱은 언제든 실패할 수 있습니다. 사용자가 입력하는 과정에서 임시로 유효하지 않은 JSON이 될 수 있고, 이를 자연스럽게 처리하는 것이 중요했습니다. try-catch 블록을 활용해 에러를 우아하게 처리하고, 사용자에게 명확한 피드백을 제공하도록 했습니다:
try {
const parsed = JSON.parse(jsonInput);
// 성공 처리
} catch (error) {
errorMessage = `JSON 파싱 에러: ${error.message}`;
// 에러 상태 표시
}
3. 클립보드 API와 브라우저 호환성
복사 기능을 구현하면서 브라우저 환경 체크의 중요성을 다시 한번 깨달았습니다. SSR(Server-Side Rendering) 환경에서는 navigator 객체가 존재하지 않기 때문에, $app/environment의 browser 변수로 체크하는 것이 필수였습니다.
또한 복사 성공/실패에 대한 시각적 피드백을 2초간 보여주는 작은 디테일이 사용자 경험을 크게 향상시켰습니다. “복사됨!” 메시지가 잠시 나타났다 사라지는 것만으로도 사용자는 안심하고 다음 작업으로 넘어갈 수 있었죠.
마무리하며
이 JSON Beautify 도구는 거창한 프로젝트는 아닙니다. 하지만 매일 사용하는 도구를 직접 만들어보는 과정에서 많은 것을 배웠습니다. 무엇보다 개발자 스스로가 첫 번째 사용자가 되어 필요한 기능을 고민하고 구현하는 과정이 즐거웠습니다.
앞으로도 이런 작은 도구들을 하나씩 만들어가며, 개발 생산성을 높이는 동시에 새로운 기술을 익히는 기회로 삼으려 합니다. 혹시 여러분도 반복적으로 불편함을 느끼는 작업이 있다면, 직접 도구를 만들어보는 것은 어떨까요? 생각보다 간단하고, 배우는 것도 많답니다.
