프로젝트 소개
이 프로젝트는 고객 응대 업무에서 자주 발생하는 "정보는 있는데 실행이 안 되는" 문제를 해결하기 위해 시작했습니다. 현장에서는 고객관리 도구, 메모 도구, 파일 저장소, 보고서 작성 도구가 각각 분리되어 있어, 담당자가 상황을 파악하고 다음 액션으로 넘어가는 데 불필요한 전환 비용이 큽니다.
그래서 고객 목록 확인부터 상담 기록, 할일 등록, 문서 참조, 보고서 생성, 운영 템플릿 관리까지를 하나의 서비스로 통합했습니다. 사용자는 화면을 이동해도 데이터 맥락이 끊기지 않고, 관리자는 같은 기준으로 데이터를 축적할 수 있습니다.
서버는 Node.js와 Express 기반으로 구현했고, 인증/세션 처리, 고객 및 기록 데이터 흐름, 노트/할일 API, 자료실 파일 처리, 보고서 내보내기를 일관된 정책으로 운영하도록 구성했습니다. 특히 기능별 API를 분리해 유지보수 시 영향을 최소화하도록 설계한 점이 핵심입니다.
- 고객 중심 업무를 화면 단위가 아닌 흐름 단위로 설계
- 실행 항목(할일)과 기록 항목(메모/노트)을 분리해 관리
- 운영 자료와 산출물(보고서)을 같은 컨텍스트에서 생성
- 설정/템플릿으로 반복 업무를 표준화
아래 화면 구성은 실제 운영 화면 11장을 기준으로 정리했으며, 각 화면은 코드에서 구현된 기능과 1:1로 연결해 설명합니다.
핵심 기능 구성
고객 데이터 통합 관리
고객 목록 화면에서는 이름, 연락처, 상태, 주요 속성, 최근 진행 정보가 한 번에 보이도록 구성했습니다. 단순 조회형 리스트가 아니라, 바로 상세 이동과 후속 액션으로 이어질 수 있는 운영형 화면입니다.
실제 업무에서는 "이 고객이 지금 어느 단계인지"를 빠르게 판단하는 것이 중요한데, 상태 정보와 최근 메모를 같은 축으로 보여주면 담당자 인수인계나 재응대 상황에서도 누락이 크게 줄어듭니다.
서버 코드에서도 목록/상세/연관 데이터 흐름을 분리해 조회 성능과 확장성을 고려했습니다. 이 구조 덕분에 화면 요소가 늘어나도 기능별 수정이 비교적 안전하게 가능합니다.
상세 상담 이력 및 타임라인
상세 화면은 기본정보 영역과 기록 타임라인 영역을 병렬 배치했습니다. 담당자는 고객의 정적 정보와 동적 이력을 동시에 확인하면서 상담 흐름을 이어갈 수 있습니다.
특히 기록이 누적되는 서비스에서는 "최신 정보가 어디 있는지"가 중요합니다. 타임라인 기반 구조를 적용하면 변경 이력과 담당자 행동이 자연스럽게 축적되어, 추후 검토와 품질 관리에도 유리합니다.
구현 측면에서는 고객 데이터와 기록 데이터의 처리 경계를 분리해, 특정 기능 수정 시 다른 모듈로 영향이 퍼지는 것을 줄였습니다.
기본정보와 항목형 컨텐츠 동시 편집
실무자가 자주 입력하는 항목은 대부분 반복적이면서도 문맥 의존적입니다. 그래서 기본정보와 항목형 컨텐츠를 한 화면에서 편집할 수 있게 해, 화면 왕복 없이 입력을 완료하도록 설계했습니다.
이 방식은 입력 속도뿐 아니라 정확도에도 영향을 줍니다. 사용자가 바로 앞에서 보고 있는 정보 기준으로 항목을 작성하므로 오기입 가능성이 낮아지고, 담당자별 작성 스타일 차이도 줄어듭니다.
결과적으로 고객정보 정합성과 상담 품질이 동시에 개선되며, 이후 보고서 생성이나 내부 공유 단계에서도 재가공 비용을 줄일 수 있습니다.
실행 중심 워크플로우
통합 상담메모와 우측 패널 연계
통합 상담메모 화면은 대량의 상담 이력을 빠르게 조회할 수 있도록 구성했고, 우측 패널에서는 현재 처리해야 할 항목을 즉시 확인할 수 있게 연결했습니다.
핵심은 "기록만 남고 실행이 안 되는" 병목을 줄이는 것입니다. 메모를 읽는 순간 바로 할일로 전환할 수 있어, 상담 후 후속조치가 끊기지 않는 운영 흐름을 만들 수 있습니다.
코드에서도 우측 패널 상태 저장, 리스트 조회/정렬, 완료 처리 로직을 별도 기능으로 구성해 화면 확장에 대비했습니다.
할일 리스트 기반 후속조치 관리
할일 리스트는 단순 체크박스가 아니라 우선순위와 완료 상태를 구조적으로 관리하는 실행 보드 역할을 합니다. 미완료와 완료를 분리해 운영해도 전체 흐름이 끊기지 않도록 설계했습니다.
사용자별 정렬/상태 저장이 가능해 개인 업무 스타일을 유지하면서도, 공통 운영 기준은 동일하게 가져갈 수 있습니다. 이 구조는 팀 단위 협업에서도 유효합니다.
서버 로직에서 할일 데이터 저장과 정렬 갱신을 분리한 덕분에, 기능 확장 시에도 기존 데이터를 안정적으로 유지할 수 있습니다.
메모지와 리치 노트 기반 협업
메모지와 노트를 분리한 이유는 기록의 목적이 다르기 때문입니다. 메모지는 빠른 임시 기록에 최적화하고, 노트는 문서형 정리에 집중하도록 역할을 명확히 했습니다.
또한 사이드바 항목 순서와 커스텀 분류를 조정할 수 있어, 팀 또는 사용자 성향에 맞춘 정보 구조화가 가능합니다. 즉 "같은 데이터"를 "다른 탐색 방식"으로 활용할 수 있습니다.
구현적으로는 노트 목록, 생성/수정/삭제, 정렬 변경, 미디어 참조 처리를 API 단위로 분리해, 협업 기능 추가 시 확장할 수 있는 구조를 확보했습니다.
자동화와 운영 관리
조건형 보고서 생성
보고서 생성 기능은 "현장에서 필요한 항목만 선택해서 뽑는다"는 운영 요구를 중심으로 설계했습니다. 사용자는 기간/항목 조건을 조합해 필요한 결과만 생성할 수 있습니다.
서버에서는 선택 항목 매핑과 결과 데이터 조합을 분리해 구현하고, 엑셀 내보내기 과정을 자동화해 반복 보고 업무 시간을 줄였습니다.
이 기능 덕분에 수작업 정리 비중이 줄고, 담당자 간 보고 포맷도 자연스럽게 표준화됩니다.
자료실 버전 운영과 월별 관리
자료실은 상시 사용하는 기준 자료와 월별 운영 자료를 나눠서 관리할 수 있도록 구성했습니다. 이렇게 분리하면 자료 검색 속도가 빨라지고, 최신본 기준도 명확해집니다.
다운로드, 파일 이동(이월), 메모 저장 같은 실무 동작을 기능별로 분리해 구현했기 때문에 운영 정책이 바뀌어도 특정 기능만 개별 수정할 수 있습니다.
파일 중심 업무에서 중요한 것은 "저장"이 아니라 "재사용 가능성"입니다. 이 자료실 구조는 재사용 가능한 지식 자산을 축적하는 데 초점을 둡니다.
템플릿/문구 설정 및 업무 표준화
설정 화면에서는 반복적으로 사용하는 안내 문구와 템플릿을 중앙에서 관리할 수 있도록 했습니다. 현장에서는 작은 문구 차이가 고객 경험과 업무 품질에 직접 영향을 주기 때문에, 표준화는 선택이 아니라 필수입니다.
공통 템플릿을 쓰면 신규 인원 온보딩이 빨라지고, 숙련도에 따라 결과 품질이 크게 흔들리지 않습니다. 운영자는 수정 이력을 관리하면서 빠르게 정책을 반영할 수 있습니다.
이 영역은 단순 설정 페이지가 아니라, 전체 서비스 품질을 안정적으로 유지하기 위한 운영 제어판 역할을 담당합니다.
템플릿 편집 팝업과 실시간 결과 확인
템플릿 편집 팝업에서는 항목 추가/삭제와 미리보기를 같은 맥락에서 확인할 수 있게 만들었습니다. 운영자는 결과를 즉시 확인하며 수정하므로 시행착오를 줄일 수 있습니다.
실제로 반복 메시지 품질은 "한 번 잘 만드는 것"보다 "빠르게 다듬을 수 있는 구조"가 더 중요합니다. 편집 UX를 개선하면 운영자가 개발 지원 없이도 상당 부분을 스스로 유지할 수 있습니다.
결과적으로 이 플랫폼은 고객관리 기능의 집합이 아니라, 데이터 입력부터 실행, 산출물 생성, 운영 표준화까지 이어지는 업무 실행 시스템으로 완성되었습니다.
프로젝트 정리
이번 구축에서 가장 중요하게 본 것은 "기능 추가"보다 "흐름 연결"이었습니다. 고객을 조회하고, 상담하고, 실행하고, 결과를 남기고, 다시 참고하는 선순환이 만들어져야 실제 생산성이 올라갑니다.
코드 레벨에서는 기능별 책임을 분리하고 운영 확장을 고려한 구조를 적용했으며, 화면 레벨에서는 담당자 행동 동선을 최소화하는 데 집중했습니다.
유사한 업무 시스템이 필요하다면, 기존 운영 프로세스 분석부터 데이터 구조화, 실행 중심 UI 설계, 자동화 기능 도입까지 프로젝트 목적에 맞춰 확장 가능한 방식으로 구현할 수 있습니다.