화면 설치를 관리하는 실시간 칸반 보드

직접 만든 드래그 앤 드롭, 실시간 WebSocket 업데이트, 스프레드시트 가져오기 기능을 갖춘 칸반 모듈입니다.

내 역할: 모듈 담당. 칸반 모듈과 드래그 앤 드롭 라이브러리는 제가 작성했습니다. 그 뒤의 CRM API는 3인 팀과 공동 개발했습니다.

2025년 10월부터 현재까지

• Svelte
• SvelteKit
• WebSockets
• TypeScript

표에서 칸반으로

이 기능의 첫 버전은 설치 건을 보여주는 표였습니다. 건을 수정하려면 행을 열고, 모달이 나타나기를 기다리고, 필드 하나를 바꿔 저장해야 했습니다. 주로 읽기만 하는 데이터라면 괜찮지만, 설치 건은 하루에도 여러 번 단계를 옮깁니다.

2026년 5월쯤 칸반으로 다시 만들기 시작했습니다. 새 버전은 7월 초에 출시됐고, 지금은 첫 잠재 고객부터 최종 설치까지 화면 설치 과정을 추적하는 데 사용합니다.

제가 만든 것

운영 콘솔의 설치 건 관리 모듈 전체를 만들었습니다. 설치 단계마다 열이 하나씩 있고, 드래그할 수 있는 카드, 팝오버와 상세 화면, 빠른 담당자 지정, 필터, 스프레드시트 일괄 가져오기가 있습니다.

드래그 앤 드롭 라이브러리도 직접 작성했습니다. 카드를 옮기는 것은 화면에서 순서만 바꾸는 일이 아닙니다. 다른 열로 넘어가면 API를 통해 단계가 바뀌고, 열려 있는 다른 모든 보드에도 같은 변경이 전달돼야 합니다.

일괄 가져오기는 508줄의 파서가 처리합니다. 팀이 이전에 거래를 기록하던 스프레드시트를 설치 건으로 바꿔 주므로, 보드를 도입하기 위해 모든 내용을 다시 입력할 필요가 없었습니다.

여러 사용자의 화면을 동기화하기

보드는 WebSocket으로 실시간 업데이트를 받습니다. 한 사람이 카드를 옮기면 다른 화면에서도 새로고침 없이 이동합니다.

어려운 부분은 로컬 사용자와 WebSocket이 같은 카드를 동시에 바꿀 수 있다는 점입니다. 예를 들어 사용자가 드래그하는 중에는 들어온 이벤트가 그 동작을 방해하면 안 됩니다. 보드가 일관성을 유지하면서도 사용자와 충돌하는 느낌을 주지 않도록, 동작마다 어느 상태를 우선할지 정해야 했습니다.

성능 문제

보드의 첫 버전이 동작한 뒤에도 성능 문제가 남아 있었습니다. 드래그 중 포인터가 움직일 때마다, 또 필터에 글자를 입력할 때마다 영향을 받는 카드만이 아니라 보드 전체가 다시 렌더링될 수 있었습니다.

렌더링을 프로파일링하고 연쇄적인 재렌더링을 수정한 다음, 원인이 된 패턴을 저장소의 성능 점검 문서에 기록했습니다. 이런 문제는 테스트 실패로 드러나지 않으므로, 다음 사람이 보드를 수정할 때 볼 수 있도록 코드 가까이에 설명을 남기는 것이 중요했습니다.

프런트엔드와 API에 걸친 작업

한 가지 호환되지 않는 변경은 양쪽을 모두 수정해야 했습니다. 설치 건의 단계를 프런트엔드 모듈과 팀이 함께 만든 CRM API에서 정수 기반 enum으로 바꿨습니다. 칸반 모듈과 드래그 앤 드롭 코드는 전부 제가 작성했고, 더 큰 CRM API는 공동 작업입니다.

수치로 보면

재구축으로 72개 파일에 5,938줄이 추가됐으며, 여기에는 508줄의 일괄 가져오기 파서가 포함됩니다. 드래그 앤 드롭 라이브러리와 성능 점검 문서도 제가 단독으로 작성했습니다.

이 보드가 들어 있는 콘솔에는 총 3,027개 커밋이 있고, 그중 1,364개(45%)가 제 커밋이라 제가 가장 많이 기여했습니다. Gmail과 Calendar 연동을 포함해 보드 뒤의 데이터를 처리하는 작업은 별도 글에 정리했습니다.