갑작스레 시작하게 된 웹 그래픽 에디터를 만들게 되었다.
에디터라는 개발은 언제나 도전적인 장르라서 계기가 생기면 도전해보고 싶어해서 제작에 대한 이야기를 듣고 개발에 긍정적으로 생각해서 개발에 뛰어들었다. 예전에 마이페이지 에디터를 진행해본 적이 있어서 처음에 구현해야 할 기능이 혼자서 만들어 볼 만하겠다는 판단이 들었다.

에디터의 기능은 서비스에서 제공되는 이미지를 에디터 뷰포트에 넣어 편집하는 기능을 요구했다. 말 그대로 이 정도 기능으로 프로토타입 삼아서 시작한다면 해볼 만하다고 생각했다.

초반에 미팅하면서 기능 로드맵과 벤치마크할 에디터를 보면서 실질적으로 개발해야 할 범위를 파악하고 조율했다. 일단 개발에 필요한 기술을 리서치하고 연구하는 데 시간이 필요했다. 작은 데모를 만들어보고 원하는 대로 잘 안 풀리면 다시 만들어야 하는 리스크가 클 것 같아서 기간을 길게 생각하고 있었다.

한번 정도 코드를 엎고 fabric.js라는 괜찮은 그래픽 편집 라이브러리를 찾게 되어 이 모듈을 활용한 상태로 바닥부터 만들어 보았다. 모든 기능을 테스트 해보지는 못했지만 기초적인 기능은 수월하게 구현할 수 있다는 것을 확인했다.

기초적인 편집을 할 수 있는 그래픽 에디터에서 할 수 있는 기능들이 다 구현되어 있어서 이것을 베이스로 활용한다면 빠르게 에디터의 기초 기능들을 개발할 수 있다는 확신을 하게 되어서 본격적으로 에디터를 제작하게 되었다.

디자인 툴로 대략적으로 에디터 UI 화면을 만들면서 버튼과 입력 폼들의 컴포넌트들을 먼저 제작했다. 컴포넌트를 만들면서 에디터의 컬러와 스타일 정립하는 과정을 가졌다. 디자인 작업을 해줄 사람이 아무도 없었기 때문에 나름대로 만들었는데 그런다고 나쁘게 보이기는 싫다 보니 무난한 형태로 스타일 시트를 조절하면서 디자인한 셈이다.

제작한 컴포넌트들 가지고 UI를 제작하고 본격적으로 에디터 개발을 시작하였다. 경험이 얼마 없는 에디터 개발이라는 점과 처음 사용해보는 라이브러리로 언제나 막히는 일 투성이다. AI 어시스턴트가 없었으면 빠르게 해답을 찾기가 어려워서 구글링 속에서 헤매게 될 것이다.

이럴 때 AI가 얼마나 대단한 건지 실감하게 된다.

에디터의 기초적인 부분들을 만들고 구현할 기능 목록들을 하나씩 구현하면서 에디터의 모습이 만들어진다.

경험이 없다 보니 제작할 기능들은 하나하나 수월한 것이 없었다. 혼자서 포토샵 같은 기능을 만드려고 하니 벅참을 느낀다. 이럴 때 동료 개발자가 있었으면 조언을 구하거나 같이 힘내면서 개발 진행을 이끌어나갈 수 없다는 점이 아쉬웠다.

이미지 서비스 API가 만들어질 가능성이 있는지 확인해보니 불가능한 환경이라서 에디터 데이터가 독립적으로 저장되고 불러지는 형태로 만들기로 했다. 로컬 스토리지는 데이터 용량에 한계가 있기 때문에 저장에 제한이 없는 IndexedDB를 이용하기로 했다. 웹 브라우저 데이터베이스라서 모델 컨트롤러 구현도 필요하게 되었다.

어쩌다 보니 데이터를 다루는 부분까지 만들다 보니 혼자서 제작하기 벅찰 지경이었다.

에디터의 기능을 얼추 편집하고 저장하고 설정 몇 가지 가능하도록 구현하고 나의 환경 문제로 그만하게 되었다.

처음에는 이미지 배치하고 간단히 편집할 수 있는 프로토타입 수준의 툴 제작을 생각하고 있었는데 점점 제품화를 원하고 본격적인 그래픽 에디터 툴을 만들게 될 것 같다는 인상을 받아서 아주 긴 제작 기간이 필요하다고 했지만 제작 분량에 대하여 확실히 정해두지 못했다는 점을 많이 느끼게 되었다.

이번에는 만들다가 중단된 작업이 아닌 예상했던 기초적인 기능까지는 만들게 되어 다행이다 싶다. 이번엔 미완성인 상태로 끝내지는 않았으니까..

이렇게 여러 번 만족할 정도로 완성하지 못한 개발이 에디터인데 기간이나 인력에 비해 기능을 한도 끝도 없이 늘려버리면 제대로 만들어지지도 않고, 여전히 정말로 어려운 분야라는 것을 깨닫는다. 역시 확실한 목적성을 가진 작은 툴을 만든다면 모르겠지만 넓은 범용성을 가진 기능을 만드는 일은 더 이상 안 할 것 같다.