정확히는 XML과 JSON을 간단히 보기좋게 만들어주는 프로그램이 필요했다. 매번 외국사이트를 뒤지는 것도 귀찮고, 회사에서 사용하는 데이터들을 외국사이트에 올려서 보기좋게 만드는 것도 불안했다. 물론 IDE에 플러그인을 깔아서 보거나, 기본적으로 지원하는 에디터나 IDE도 있겠지만 그냥 웹이 제일 편하다. 그래서 나 편하자고 만들었다.

🌐 메인 페이지

https://formatters.birdspring.com/

디자인은 잼병이라… 그냥 리액트에 기본 내장된 Tailwindcss를 사용해서 대충 만들었는데 정말 그냥 대충나왔다.

• XML을 클릭하면 XML 포멧을 이쁘게 만들어주는 페이지로
• JSON을 클릭하면 JSON을 예쁘게 만들어주는 곳으로 이동한다

📝 XML을 예쁘게

왼쪽에 xml을 넣는다. 예를 들어 이런 못생긴 XML:

<library><book id="1"><title>Introduction to Algorithms</title><author>Thomas H. Cormen</author><publisher>MIT Press</publisher><year>2009</year></book><book id="2"><title>Clean Code</title><author>Robert C. Martin</author><publisher>Prentice Hall</publisher><year>2008</year></book></library>

변환 결과

이렇게 예쁘게 고쳐준다:

<library>
    <book id="1">
        <title>Introduction to Algorithms</title>
        <author>Thomas H. Cormen</author>
        <publisher>MIT Press</publisher>
        <year>2009</year>
    </book>
    <book id="2">
        <title>Clean Code</title>
        <author>Robert C. Martin</author>
        <publisher>Prentice Hall</publisher>
        <year>2008</year>
    </book>
    <book id="3">
        <title>The Pragmatic Programmer</title>
        <author>Andrew Hunt</author>
        <author>David Thomas</author>
        <publisher>Addison-Wesley</publisher>
        <year>1999</year>
    </book>
    <book id="4">
        <title>Design Patterns</title>
        <author>Erich Gamma</author>
        <author>Richard Helm</author>
        <author>Ralph Johnson</author>
        <author>John Vlissides</author>
        <publisher>Addison-Wesley</publisher>
        <year>1994</year>
    </book>
</library>

🎯 JSON을 예쁘게

못생긴 JSON 예제:

{"timestamp":"2024-06-05T15:51:54.946","result":200,"msg":"OK","data":{"orderNo":"1","vendorOrderNo":"2","apiOrderNo":"3"}}

위 문서가 그냥 일렬로 나열되어있다. 복사해서 넣어본다.

변환 결과

우측상단의 COPY버튼을 클릭해서 복사해서 붙여보면 아래와 같이 아름다운 문자열을 볼 수 있다:

{
    "timestamp": "2024-06-05T15:51:54.946",
    "result": 200,
    "msg": "OK",
    "data": {
        "orderNo": "1",
        "vendorOrderNo": "2",
        "apiOrderNo": "3"
    }
}

💰 광고는 그냥 기대 안하고 달아놨음

근데 광고에도 광고달았다고 나온다…

🚀 사용 방법

1. formatters.birdspring.com 접속
2. XML 또는 JSON 선택
3. 왼쪽 텍스트 영역에 변환할 코드 붙여넣기
4. 자동으로 오른쪽에 예쁘게 포맷팅된 결과 확인
5. COPY 버튼으로 결과 복사

🔧 기술 스택

• React
• Tailwind CSS
• XML/JSON 파서

💡 왜 만들었나?

• 외부 사이트에 회사 데이터 올리기 불안
• IDE 플러그인 설치 귀찮음
• 웹에서 간단하게 사용하고 싶음
• 내가 편하게 쓰려고

결론: 간단하지만 유용한 도구!