CS 관리자 페이지 구축 소개
CS 응대를 더 효율적으로 하기 위해, 회사에서 사용하는 기존 채팅 도구를 그대로 쓰는 대신 우리 상황에 맞는 자체 CS 관리자 페이지를 만들어보는 작업을 진행했습니다.
기존에는 문의 확인, 고객 정보 정리, 담당자 확인 요청, 견적 문의 전달 등이 여러 도구에 흩어질 수 있어서 관리가 번거로웠습니다. 그래서 상담 화면, 고객 관리, 상세페이지, 견적 확인 같은 기능을 한 화면 흐름 안에서 볼 수 있는 웹 기반 관리자 페이지를 시도했습니다.
특히 데스크톱뿐 아니라 모바일에서도 확인할 수 있어야 실제 업무 중 빠르게 문의를 확인할 수 있을 것 같아, 모바일 반응형 화면까지 함께 테스트했습니다.
AI 코딩 에이전트를 활용한 진행 방법
사용 도구는 AI 코딩 에이전트와 Next.js 기반 웹 프로젝트였습니다.
AI에게 원하는 화면 구조와 수정사항을 자연어로 전달하면, AI가 코드를 수정하고 테스트/lint/build까지 확인하는 방식으로 진행했습니다.
주요 작업은 다음과 같습니다.
1. 관리자 로그인 화면 추가
- 첫 화면에서 관리자 비밀번호를 입력해야 상담 화면으로 들어가도록 구성
- 테스트용 관리자 비밀번호 설정
2. 상담 화면 구성
- 문의 목록
- 중앙 상담 채팅
- 오른쪽 고객 정보
- 고미(Hermes연동 CS봇) 메모/판단 영역
- 담당자 요청, 고객 Log 작성 버튼 - 노션페이지 작성
3. 고객 관리 화면 구성
- 고객 목록
- 문의유형별 통계
- 고객 상세 패널
- 고객별 문의목록 확인
4. 상세페이지 동작 변경
- 별도 페이지로 이동하지 않고, 현재 화면 위에서 오른쪽 상세 패널이 열리도록 수정
5. 모바일 반응형 적용
- 모바일에서는 왼쪽 사이드바 대신 상단 가로 탭 메뉴로 표시
- 상담 화면의 3열 구조를 세로 카드형으로 변경
- 고객관리 표는 가로 스크롤 가능하게 변경
- 상세 패널은 모바일에서 전체 화면 폭으로 열리게 수정
사용한 프롬프트 예시는 아래와 같습니다.
Open optionsauto
text
관리자페이지를 모바일에서도 볼 수 있도록 해줘.
상담화면은 모바일에서 3열 고정이 아니라 세로로 쌓이게 하고,
상단 메뉴는 모바일용 탭으로 보여줘.
고객관리 표는 모바일에서 깨지지 않게 가로 스크롤 가능하게 하고,
상세페이지 패널은 모바일에서 전체 화면으로 열리게 해줘.
수정 후 테스트, lint, build까지 확인해줘.결과와 배운 점
결과적으로 기본적인 CS 관리자 페이지 프로토타입을 만들 수 있었습니다.
상담 화면, 고객 관리 화면, 상세 패널, 모바일 화면까지 한 번에 확인 가능한 상태가 되었습니다.
이번 작업을 통해 흩어져 있던 문의 내용, 고객 정보, 담당자 확인 요청, 고객 Log 등을 한 곳에서 볼 수 있는 구조를 직접 만들어볼 수 있었습니다. 기존에 사용하던 프로그 램은 다른 회사에서 만든 서비스이다 보니, 우리가 원하는 기능을 바로 추가하거나 업무 방식에 맞게 바꾸는 데 한계가 있었습니다.
예전에는 “이런 기능이 있으면 좋겠다”라고 상상만 했던 것들을, AI 공부를 시작하면서 하나씩 실제 화면과 기능으로 만들어나가는 과정이 신기하고 재미있게 느껴졌습니다. 특히 단순히 정해진 도구를 사용하는 것이 아니라, 우리 업무 흐름에 맞춰 직접 관리자 페이지를 만들고 연동해볼 수 있다는 점이 인상 깊었습니다.
시행착오는 기술적인 연동 과정에서 있었습니다.
외부 서비스의 데이터를 가져오기 위해 API 연동을 확인해보니, 단순히 API Key만 입력하는 방식이 아니라 별도의 Secret Key를 이용해 인증 서명을 만들어야 호출할 수 있는 구조였습니다.
또 기존에 발급된 Key를 새로 갱신하면, 해당 Key가 이미 다른 자동화나 외부 연동에 사용 중일 경우 기존 연결이 끊길 수 있다는 점도 알게 되었습니다. 그래서 무작정 새 Key를 발급하기보다, 현재 사용 중인 연동이 있는지 먼저 확인한 뒤 안전하게 진행해야 한다는 것을 배웠습니다.
앞으로는 외부 서비스의 API와 웹훅 연동 방식을 확정한 뒤, 실제 문의 데이터가 자동으로 상담 화면과 고객관리 화면에 들어오도록 연결해보고 싶습니다.
최종적으로는 고객 문의 확인, 담당자 요청, 견적 문의 전달, 고객 기록 작성까지 한 곳에서 자연스럽게 이어지는 CS 플랫폼으로 발전시키는 것이 목표입니다.
