피그마 같은 데이터 시각화 편집툴을 만들자고? (작성중)
피그마 같은 편집툴을 만드려면 2명이선 너무 공수가 부족해요.. 하하
Last updated
피그마 같은 편집툴을 만드려면 2명이선 너무 공수가 부족해요.. 하하
Last updated
팀에서 실시간 데이터 시각화 편집툴을 만들어야했다. 만들게 된 계기는 기존에 회사내에 존재하던 Builder R2 라고 불리는 데이터 시각화 편집 툴이 AngularJS 로 구축되어있었는데, 툴이 너무 오래 되기도 하였고 회사에서 관련 기술 스택을 가진 개발자들을 채용하기가 애매하다는 판단하에 회사의 EMS 통합 신제품 POLESTAR 출시와 함께 Builder R3 도 출시하게 되었다.
팀의 KPI 를 달성하기 위해, 새로운 프로젝트의 UI 관리자가 나로 임명 되었고, (시작 당시에는 UI 가 나 혼자..) 필히 기간안에 프로젝트(Builder R3)를 완성 시켜야 하는 업무를 수행하게 되었다. 설명의 편의성을 위해 새 프로젝트를 빌더라고 칭하겠다.
디자인과 기획을 하는 단계에서, 빌더에 필요한 것들을 기존 R2 를 사용했던 사용자들의 의견을 반영하여 다양한 설계들의 초안이 나오기 시작했다. 어떤 기능은 필수이고, 어떤 기능은 편의 기능으로 들어가면 좋겠다 라고 하는 제안들이 많이 나오기 시작했다. 다양한 사람들의 의견이 나오고 있어서, 이중에 어떤 기능들을 버전 1 로 가져갈지 결정해야할 사안을 당시 나와 같이 협업하기로 한 선임 백엔드 개발자(김락현)와 함께 논의하기 시작했다.
빌더에서 가장 중요하게 생각했던 부분은 사용자의 편의성이다. 어떻게 해야 사용자들이 우리가 만든 소프트웨어를 편하게 사용할지에 대해 많은 고민을 하였다.
각 노드들을 트리 구조로 핸들링
기존에 R2 에는 없던 단축키
실시간으로 협업할 수 있는 편집 툴
뒤로 가기 / 앞으로 가기
버전 히스토리 관리
피그마와 동일한 줌 / 패닝 기능
그래서 우리는 위 기능들을 필수적으로 가져가기로 하였다. 이렇게 첫 설계에 대한 기획을 마치고 빌더를 개발하기 시작하였다.
비즈니스적인 요구사항을 코드로 구현해내기 위해 내가 먼저 하는 작업은 아이패드로 아이디어 스케치를 하여, 각 요구사항을 수행하게 될 책임들을 어떤식으로 분리시킬지 컴포넌트 설계를 한다. 각 컴포넌트들은 어떤 역할을 맡게 되고, 어떤 행위를 할지 나누기 시작한다.
우선 빌더에서 프로젝트 Project 와 대시보드 Dashboard 라는 큰 개념이 두가지가 있다.
프로젝트는 대시보드 노드들을 하위로 가지고 있으며, 프로젝트 하위에 대시보드들은 실시간으로 동시 편집이 가능하며, 만약 사용자가 대시보드를 배포하였을 경우, 해당 배포된 대시보드는 버전 히스토리에 기록된다. 배포된 대시보드는 JSON 형태로 다운로드 및 업로드가 가능하다. 대시보드를 배포하게 되면, 사용자는 통합 신제품에서 배포된 뷰페이지를 사용할 수 있다.
대시보드는 프로젝트 하위에 있는 노드들이며, 대시보드 하위에는, 그룹 혹은 일반 레이어들이 들어갈 수 있다. 그룹과 대시보드의 경우 노드들의 최대 뎁스는 50 이다. 사용자는 대시보드를 오른쪽 대시보드 프레임 목록에서 drag & drop 형태로 생성하고, 실시간으로 동시 편집 할 수 있다.
프로젝트의 모든 데이터들은 노드들이다. 노드는 크게 그룹 / 레이어로 나뉘어지게 되며, 그룹의 종류에는 대시보드 / 위젯 / 일반 그룹 이 존재한다. 대시보드 / 위젯은 특수한 노드들이며, 해당 노드들은 배포가 가능하다. 사용자는 여러개의 위젯을 만들고, 해당 위젯들을 가지고 레고 블럭을 조립하듯, 대시보드를 구성할 수 있다.
레이어들은 컴포넌트 와 일반 레이어(도형, 텍스트, 이미지, 동영상) 으로 나눠지고, 이 둘을 나누는 기준은 데이터를 매핑 가능 여부이다. 데이터를 매핑할 수 있을 경우 컴포넌트라고 부르고, 데이터를 매핑할 수 없는 경우 일반 레이어라고 부른다.
