• date: 2023-08
• github: https://github.com/redgoose-dev/json-editor
• demo url: https://redgoose-dev.github.io/json-editor/

이전 json-editor 버전에서 9년만에 업그레이드를 하게 되었다.
처음 json-editor 에디터를 만들었을 당시에는 완전히 jquery 천하나 마찬가지일 정도로 웹프로그램은 대부분 jquery 라이브러리로 만들어져 있었고, 나도 주력으로 jquery로 개발하고 있다보니 재미있게 프로그램을 만들었던 기억이 난다.

이 json-editor 프로그램을 만들었던 이유가 네비게이션 데이터를 전용 UI로 만들어 변환작업을 거쳐가며 만드는것보다 데이터 자체를 편집하는 UI로 만들어 네비게션이나 다른 설정값들을 편집할때 쓰는게 좋다고 생각되어 만들게 되었다.

현재도 여전히 사용하고 있었고, 계속 필요하여 코드를 다시 작성할 생각으로 1.0이라는 버전으로 새로 제작에 들어갔다.

구상하기

이미 만들어져 있는것을 리메이크인 셈이라서 새로 전체적으로 새로 떠올릴것은 없었다. 그래서 구상에 관해서는 지난 버전에서 있었던 문제점들이나 개선할 수 있는 요소들을 위주로 떠올렸다.

여태까지 사용해오면서 불편했던 요소들도 떠올려보고 과거 이슈가 기록된 것들을 살펴보며서 어떤것들을 더 개선하고 기능을 추가할까 고민하며 정리했다.

구상하면서 요즘의 json editor의 형태는 어떤가 리서치 해보았지만 예전에 만들었던 시기와 별반 차이가 없었다.
디자인이 좋아 보이는것도 하나도 없었고, 잘 사용하는 편도 아니라서 그다지 관심도가 높은 영역은 아닌거 같아서 맨땅에 개척할맛이 난다.

이번에는 jquery에서 벗어나고자 하는 부분이 가장컸고, 쉽게 웹 엘리먼트나 프레임워크들의 컴포넌트로 사용할 수 있도록 도움이 되었으면 하는점이 이렇게 새로 만들게된 큰 이유이기도 하다.

디자인 작업

어떠한 요소들과 기능들을 만들어야할지 정하고나서 디자인 단계에 들어갔다.
다른 에디터들은 워낙 모양이 좋지 못해서 조금만 노력하면 좀더 나아지겠지 하는 생각이 쉽게 들었다. 하지만 디자인 작업과정은 빼둘수가 없었다.

figma 디자인툴로 UI를 만들기 시작했다.
이전버전을 참고해서 기초적인 형태를 구성하고 타입요소를 좀더 부각시켰다. 타입은 눈에띄는 요소이기 때문에 컨텍스트를 열 수 있는 버튼으로 사용할 수 있겠다고 생각했다.
데이터가 얼마든지 많아질 수 있고, 컨트롤 디바이스는 마우스 포인터로 정한 상태이기 때문에 요소들을 넉넉하게 배치하는것 보다는 오밀조밀하게 모아두어야 한다. 그런다고 요소들을 너무 붙이면 클릭에 불편함을 만들 수 있는점을 조심했다.

UI를 만들면서 심볼도 같이 만들었다.
제대로 로고를 만들지도 못하는데도 내가 만드는 프로그램은 로고도 직접 만들어야겠다는 버릇 때문인지 자연스럽게 스케치북과 일러스트레이터를 열고 간단하게 만들어본다.

색은 기본적으로 무채색으로 정하고 타입만 컬러를 구분을 뒀다. 타입에 따른 구분을 영어 이니셜 뿐만 아니라 컬러에도 개성있게 만들어 쉽게 알아볼 수 있도록 정해본다.

프로그램 작업단계

리서치를 하고 svelte에서 웹 컴포넌트로 만들어낼 수 있다는 기능을 사용하여 svelte 컴포넌트로 퍼블리싱부터 일부 기능작업까지 진행해보았다.
진행중 빌드하면서 용량을 체크해보니 생각 이상으로 용량이 많이 나오는걸 확인할 수 있었다. 이런점은 편함에 대한 대가라고 느낀다. (항상 쉽게 만들어낼 수 있는 도구들은 그에 상응하는 대가를 치른다.)

svelte 컴포넌트로 만들기 포기하게 한 계기는 데이터 바인딩 방식 때문이다.
react로 시작된 자바스크립트 프로그램 방식은 데이터에 맞춰 유연하게 컴포넌트들이 렌더링되는 모습으로 표현된다.
설계된 컴포넌트라는 파이프에다 데이터라는 물을 흘려넣는 방식으로 구성되기 때문에 하위 자식 값을 변경하면 렌더링 과정이 다시 일어나기 때문에 구조가 과도하게 복잡해지고 연산이 많이 일어날거라는 예상이 들어 데이터와 관계없이 dom으로만 컨트롤하고 데이터를 뽑아낼때 dom을 전부 돌려보고 결과물을 노출해내는 방식으로 만들자고 방식을 바꾸었다.

프로그램 구성을 계속계속 고민하다가 이전 버전의 방식으로 되돌아왔다.
잘 굴러가면 그만이고 최신 기술이라고 과도하게 구조 자체를 복잡하게 만드는것보다는 나았다.

처음에는 웹 컴포넌트 클래스로 만들다가 막상 만들고보니 웹 컴포넌트가 아니고 일반 클래스로 만들어서 일반적으로 인스턴스를 만들어 사용하거나 웹 컴포넌트로 만들거나 react 컴포넌트 래퍼로 만들어서 사용하게 하는것이 좋을거 같았다.

dom 컨트롤할때 조작에 번거롭고 작업 속도가 느려서 jquery 같은 라이브러리같은걸 사용하기로 했다.
이번에는 외부에서 따로 불러오는게 아니고 내부에 같이 삽입해서 사용하기로 하여 용량이 작고 심플한게 필요했다. 예전에 jquery같은 기능을 한 용량이 작은걸 본적이 있어서 찾아보니 cash-dom이라는게 있어서 삽입하여 이용했다.

UI 작업과 기능작업, 배포에 대한 준비까지 시간을 들여 만들면서 얼추 다 만들어가는 시기에 web component, react, vue, svelte 컴포넌트로 바로 사용할 수 있도록 빌드할 준비를 하고 있는데 관리해야하는 점이 감담안될거 같은 예감이 들어서 딱 라이브러리만 제공하기로 했다.

마무리

프로그램 자체는 다 만들고 기능을 수정하면서 주로 문서작업에 삼매경이었다.

일단 readme에서 사용법과 필요한 옵션들, 메서드, 이벤트 부분들에 대한 설명을 적어넣고 위키에다 web component, react, vue, svelte 컴포넌트로 만드는 방법들을 데모를 만들어보고 상세하게 작성해보았다. 나한테 필요할지도 모르니깐..

마지막으로 npm 패키지로 퍼블리싱하고 조금씩 보충하고 보완해가면서 1.0.0 버전의 제작을 끝냈다.

꽤 신경써서 UI를 만들었는데 이것을 관리자 화면같은곳에서 사용할 생각하니 상당히 기대된다!