Amazon Connect를 활용한 토스증권의 고객 센터 혁신 사례

들어가며

토스증권은 기술 기반의 투자 플랫폼으로, ‘투자의 힘을 모두에게’라는 슬로건 아래 개인투자자들을 위한 투자의 새로운 표준을 만들어가고 있습니다. 2021년 3월 MTS(Mobile Trading System)를 출시하며 대고객 서비스를 시작한 토스증권은, 쉽고 직관적인 사용자 인터페이스(UI)와 사용자 경험(UX)을 강점으로 빠르게 성장해 왔습니다. 현재는 모바일을 넘어 PC 기반의 WTS(Web Trading System)로 채널을 확장하고 있으며, 국내·해외주식에 이어 해외채권까지 투자 상품을 다각화하며 전국민 투자 플랫폼으로 발전해 가고 있습니다.

모든 서비스가 그러하듯, 토스증권 고객센터는 고객 응대의 시작이자 서비스 개선의 출발점입니다. 고객센터는 고객이 서비스를 이용하다 생긴 궁금증이나 문제가 있을 때 가장 먼저 찾는 곳으로, 빠른 해결을 지원하며, 금융 서비스에서 반드시 고려해야 하는 여러 금융 사고에 대해 신속하게 대응하여 고객의 자산을 보호해야 합니다. 또한, 고객의 목소리를 직접 듣는 창구로서, 다양한 요구사항 및 개선사항을 전달하여 서비스가 개선될 수 있도록 합니다. 이렇게 축적된 다양한 데이터는 소중한 자산이 되어 더 나은 서비스 설계와 기업 성장의 기반이 될 수 있습니다.

이러한 중요성에도 불구하고, 기존 패키지형 고객 센터 솔루션은 확장 및 유연함의 제약이 있었습니다. 먼저 서비스와 요구사항의 변화 속도에 맞춰 기능 추가 또는 워크플로우 변경이 필요하지만, 이러한 커스터마이징이 어렵습니다. 또한 전화 통화 및 화면 공유 등 다양한 형태로 인입되는 요청을 모두 처리하기 위해 특수한 장비와 구성 요구사항이 많아, 기존 IT 인프라팀이 전담하기 어려워, 고객 센터 개발팀에서 일부 인프라 관리도 수행해야 했습니다. 이는 개발 리소스의 부하 증가는 물론, 안정성 측면에서도 많은 제약이 되었습니다. 특히 이러한 부분은 토스증권의 개발자들의 특징인 도메인 혹은 솔루션에 종속되지 않는 유연한 개발 문화를 추구하는 것과 거리가 있습니다.
비용 또한 큰 문제가 될 수 있습니다. 고객센터는 서비스 구축에 있어 매우 중요한 요소이지만, 서비스 초기 수반되는 높은 초기 투자 비용과, 서비스의 발전에 따라 발생되는 추가 기능 개발 및 유지보수 비용은 시스템 확장을 더디게 만드는 요소가 되었습니다.

Amazon Connect 서비스

토스증권은 빠르게 성장하면서 고객센터에도 꾸준히 새로운 기능을 추가해 가고 있습니다. 그 과정에서 시스템 구조의 한계가 드러나는 경우가 있었고, 이를 해결하기 위해 Amazon Connect 기반의 클라우드 전환을 진행 중입니다. Amazon Connect는 라이선스 비용과 같은 큰 규모의 비용 투자 없이도 구축할 수 있는 완전 관리형 고객 센터 서비스입니다. 특히 음성, 채팅, 메일과 같은 다양한 채널을 통해 인입되는 고객의 요청을 별도 장비 없이도 처리할 수 있고, AWS의 다양한 서비스들과 통합 구성할 수 있어, 솔루션 전문 인력 구성없이 빠르게 고객센터의 혁신을 추구할 수 있습니다.

토스증권은 특히 다음과 같은 부분에 주안점을 두고 고객 센터 전환을 진행하고 있습니다. 먼저 확장성입니다. 기존 시스템은 라이선스 수나 동시 콜 수 같은 물리적인 제약을 고려해 인프라를 설계해야 했습니다. 대부분의 시간엔 리소스가 남아돌지만, 트래픽이 급증할 경우를 대비해 여유 자원을 확보해 두어야 했습니다. Amazon Connect는 이러한 고민 없이, 필요할 때 필요한 만큼 자동으로 확장되는 구조를 제공합니다. 전환 이후 자원에 대한 고민 없이, 변화에 유연하게 대응할 수 있을 것으로 기대하고 있습니다.
두 번째는 유연성 확보입니다. 기존에는 시스템 간 연동을 위해 매번 별도 어댑터 개발이 필요했고, 새로운 인터페이스를 추가할 때마다 시간과 리소스가 많이 들었습니다. Amazon Connect를 이용하게 되면 AWS Lambda를 중심으로 연동 구조를 단순화할 수 있으며, 그 결과 다양한 시스템과의 연결이 훨씬 유연해질 수 있습니다. 기능 추가나 변경 요청도 이전보다 훨씬 빠르게 대응할 수 있을 것으로 기대하고 있습니다.
동시에 운영과 관리, 자원의 효율적 활용 측면에서도 큰 개선을 기대할 수 있습니다. 앞서 설명드린 바와 같이 고객센터는 단순히 전화를 받는 것을 넘어, 화면 녹화, 원격 지원, 영상 통화, STT, KMS 등 다양한 기능을 함께 운영해야 하는 복합적인 환경입니다. 이전에는 이러한 기능을 모두 직접 구축하고 유지보수해야 했지만, Amazon Connect로의 전환을 통해 AWS에서 제공하는 다양한 서비스를 활용해 더 가볍고 효율적인 운영 구조를 만들어 가고 있습니다. 운영 인력의 부담은 줄이고, 개발자는 서비스 개선에 집중할 수 있는 여건이 마련되고 있습니다. 동시에 클라우드 서비스의 특징인 자원 활용 전략과 사용량 기반 과금을 바탕으로 비용 및 자원을 효율적으로 사용하며 시스템을 확장해 나갈 것입니다.
이러한 목표를 가지고 토스증권은 Amazon Connect 기반의 고객 센터 전환을 수행하게 되었습니다. 하지만 단순히 Lift-and-shift와 같은 전환을 진행하기 보다, Amazon Connect의 기능들을 활용하여 더욱 다양한 고객 경험을 만들 수 있도록 많은 도전과제들을 수행했습니다.
이번 게시글에서는 특히 주요 도전과제 중 기존 증권 서비스와의 기능 연동, Speech-to-Text를 활용한 통화 후행 분석 구현, Amazon Connect의 CCP(Contact Control Panel)를 Fully Customize하는 과정을 다루고자 합니다.

증권 서비스와 IVR 시스템의 연동

기존 고객센터의 IVR(Interactive Voice Response) 시스템은 여러 가지 제약사항을 가지고 있었습니다. 시스템의 개발과 유지보수를 위해 솔루션에 대한 사전 지식 외에도 RESTful API를 활용한 서버 간 통신을 위해 별도의 프로그램이 필요하기도 합니다. 토스증권의 고객센터는 사용자들에게 가장 가까이 있는 서비스인 만큼 유연하고 확장성있는 기능 개발이 필요하기 때문에, 특정 솔루션에 의존성은 없애고 고객센터와 기존 증권 서비스간의 연동을 위해 Amazon Connect의 유연한 기능 연동을 활용하게 되었습니다.
특히, Amazon Connect에서 제공하는 직관적인 Flow Designer를 활용하여 IVR 개선 및 기존 증권 시스템과의 연동 환경을 구성할 수 있게 되었으며, 이는 특정 솔루션에 의존하지 않는 유연한 아키텍처를 구축하는 데 큰 도움이 되었습니다. 동시에 AWS Lambda를 활용한 확장도 지원되기 때문에, 토스증권의 데이터센터와 통신이 필요한 경우 아래와 같이 방화벽을 통한 보안 처리를 위한 점검 작업을 거친 후 데이터센터로 요청을 전송하게 되어 인증절차 등 높은 수준의 보안 처리가 필요한 요청들도 안전하게 다룰 수 있게 되었습니다.

그림1. 토스증권의 고객 센터 아키텍처

인증 및 매매에 대한 IVR Flow

이제 고객이 대표번호를 통해 상담 전화를 걸어오는 시나리오를 살펴보겠습니다. 전화를 통해 요청이 올 경우, 토스증권 데이터센터에 저장된 고객 원장 정보를 바탕으로 데이터를 조회하고, 이를 Connect의 Attribute에 저장할 필요가 있습니다. 먼저 Connect로 인입된 고객에 대한 인증 Flow가 진행됩니다. 이 Flow는 인증 과정을 거쳐, 필요한 고객 정보를 CRM을 통해 전달받아, 이를 이후 과정에서 사용할 수 있도록 Amazon Connect Attribute에 세팅합니다.

그림2. IVR을 통한 인증 Amazon Connect Flow

그림3. 인증 고객의 Attribute들을 CRM과 연동하는 Flow

화면과 같이 인증 및 정보 연동 모듈을 구성하면, 내부 CRM을 통해 계좌 번호 등 고객 정보를 조회하여 Amazon Connect Attribute에 세팅하게 됩니다. 고객의 인증 및 인가 과정이 완료되면, 앱에서 호출하는 것과 유사하게 고객센터를 통해 일부 기능들을 사용할 수 있습니다. 다음은 주식 매매 주문의 IVR Flow 입니다.

위의 과정을 거쳐 토스증권 원장계, CRM과 Amazon Connect 간의 연동이 완료되었습니다. MTS를 통해 시장가 및 지정가 주문을 하듯, IVR 내에서도 동일한 주식 매매 주문을 수행할 수 있습니다. 앞서 연결한 원장계 및 CRM 연동을 활용하면, 다음과 같이 시장가 및 지정가 주문을 접수받게 됩니다.

그림4. 매매주문 Flow

그림5. 시장가 및 매매주문 과정

이렇게 Amazon Connect는 손쉽게 기존 서비스와의 연동을 구성할 수 있습니다. 또한 인증과 같이 필요한 기능은 모듈화하여 재사용 할 수 있기 때문에, 재사용성 및 유지보수에 매우 용이한 것을 알 수 있습니다. 이렇게 추가적인 사용자 인증을 거친 요청에 대해 필요한 입력 정보 (종목코드, 가격)를 받은 뒤 주문에 대한 적합성 검토를 합니다.

그림6. IVR Flow를 활용한 기존 증권시스템 이용 과정

온프레미스 IVR에서 수행하기 힘들었던 인증 및 API 연동을 통해 손쉽게 기존 시스템과의 연동을 성공하였습니다. 이러한 개선을 통해 상담원 연결 프로세스를 줄여 고객에게 편의성을 제공함은 물론, 솔루션 기반 구성에 비해 직관성 및 개발 유연성이 뛰어나 효율적인 시스템 구축 및 확장에 대한 유연함 또한 갖추게 되었습니다.

위와 같은 중요 데이터의 전송과 처리를 위해, 민감정보를 안전하게 보호할 수 있는 방안이 필요합니다. Amazon Connect Secure IVR 솔루션은 고객센터에서 수집하는 민감한 개인정보를 안전하게 보호하기 위한 종합적인 암호화/복호화 시스템입니다. 이 솔루션은 통화 중 고객으로부터 수집된 중요 정보를 안전하게 관리하고, 필요한 경우에만 인가된 시스템에서 복호화하여 처리할 수 있도록 합니다. 예를 들어, 금융 서비스의 계좌 인증, 금융 거래 승인 등의 과정에 사용되는 인증 정보를 보호하는데 활용할 수 있습니다.
Amazon Connect Secure IVR 솔루션은 다음과 같은 AWS 서비스를 활용합니다:

Amazon Connect: 고객 센터 통화 흐름 관리 및 DTMF 입력 수집
AWS Lambda: 암호화/복호화 로직 처리
AWS Systems Manager Parameter Store: 암호화 키 안전한 저장
AWS KMS: 키 암호화 및 관리

이를 활용하면 보유하거나 생성한 X.509 인증서를 콘솔을 통해 등록하고, Connect Flow를 통해 특정 Attribute를 암호화 할 수 있습니다. 적용 과정은 다음과 같이 진행됩니다.

Amazon Connect 관리 콘솔에 로그인합니다.
해당 인스턴스의 “Contact Flows” 섹션으로 이동합니다.
“암호화” 탭에서 “X509 인증서 추가” 옵션을 선택합니다.
생성한 X.509 인증서(server.crt)를 업로드하고 원하는 키 ID를 지정합니다.
위의 과정을 거쳐 생성/등록한 인증서를 활용하면, 다음과 같이 Connect Flow 내에서 민감 데이터를 암호화 할 수 있습니다.
- Store customer input 블록에서 Encrypt entry (recommended) 활성화 하여 고객 데이터를 암호화합니다.
- 다음과 같이 CloudWatch Log를 통해 암호화된 내용을 확인할 수 있습니다.

Speech-to-Text를 활용한 통화 후행 분석

기존 고객 센터 상담원들은 장시간의 민원 혹은 특수 상황에서 이루어진 상담의 내용을 요약하고 고객의 불편사항을 파악하기 위해 직접 장시간 녹취를 청취하며 정리해야 했습니다. 이로 인한 상담 요약, 고객 감정 흐름 파악, 품질 평가 등의 업무가 비효율적이고 반복적인 수작업에 의존하는 등의 불편함이 발생하였습니다. 이러한 수요에도 불구하고, 음성 녹취 내용을 활용한 분석 기능은 기존 솔루션에서는 많은 비용과 시간 투자가 필요하여 쉽게 도입하기 어려운 상황입니다. 특히 생성된 녹취 파일의 경우, 특수한 포맷으로 생성되어 전용 재생기가 필요하며, 분석 시스템과 물리적으로 분리되어 있어 손쉽게 분석 환경으로 전달하기 어려운 상황이었습니다. 이 문제의 해결을 위해, 통화 후행 분석 작업을 크게 데이터 마이그레이션, Speach-To-Text(이하 STT) 적용, STT 기반 상담 결과 분석의 3가지 단계로 나누어 접근하였습니다.

녹취 데이터 마이그레이션

기존 물리서버에 저장된 내용을 S3로 업로드하여, 이후 분석 환경에서 활용할 수 있도록 변환 및 전송하였습니다.

# 핵심 마이그레이션 로직 (온프레미스 → Amazon S3)
def process_migration():
    # 1. 마이그레이션 대상 녹취 파일 조회
    records = get_recording_list(work_date, custom_column)
 
    # 2. 각 녹취 파일 다운로드 및 메타데이터 업데이트
    for record in records:
        call_id = record.get("call_id")
        download_recording(source_path, call_id)
        update_record_status(work_date, call_id, f"{custom_column}='DONE'")
 
    # 3. S3 업로드 및 암호화 저장
    upload_to_s3(source_path, s3_bucket, endpoint_url, access_key, secret_key)

Speech-To-Text 적용

이제 S3에 업로드된 음성을 텍스트로 변환하여, 이후 분석에 사용할 수 있도록 제공합니다. 특정 Bucket에 음성파일이 업로드되면, 이벤트가 트리거되어 Amazon Transcribe(이하 Transcribe)를 실행합니다. Amazon Transcribe는 음성을 텍스트로 변환하는 AWS의 자동 음성 인식(ASR) 서비스입니다. 실시간 및 배치 처리, 한국어를 포함한 다국어 지원, 화자 구분 등의 기능을 제공합니다. 이번 과제와 같이 음성 상담 내역의 분석을 위한 Speech-to-Text 서비스로 이용할 수 있으며, 값 비싼 라이선스 비용 없이도 사용한 만큼만 비용을 지불하는 완전 관리형 서버리스 서비스입니다.

그림7. 토스증권의 STT 아키텍처

이렇게 Transcribe를 거친 결과는 S3에 업로드 되고, 앞서와 마찬가지로 이벤트가 Trigger가 되어 LLM Gateway를 호출하게 됩니다. 토스증권이 자체 구축한 LLM Gateway는 금융규제 준수를 위해 온프레미스의 데이터센터 내 위치합니다.
해당 구간의 데이터 전송은 개인정보 암호화 정책 및 금융보안원의 기준을 준수하기 위해 HTTPS 통신과 Direct Connect를 활용한 전용선 통신을 통해 수행됩니다.

// S3 녹취 파일 업로드 시 Lambda 트리거 핵심 로직
export const handler = async (event) => {
 try {
   // 1. S3 객체 정보 추출 및 URI 생성
   const bucketName = event.Records[0].s3.bucket.name;
   const objectKey = decodeURIComponent(event.Records[0].s3.object.key.replace(/\+/g, ' '));
   const s3uri = `s3://\${bucketName}/\${objectKey}`;
  
   // 2. Call ID 추출 (UUID 패턴)
   const callId = objectKey.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/)[0];
  
   // 3. 인증 헤더 설정
   const authHeader = `Basic \${Buffer.from(`\${process.env.AUTH_USERNAME}:\${process.env.AUTH_PASSWORD}`).toString('base64')}`;
  
   // 4. CRM 시스템에 녹취 정보 업데이트 요청
   const response = await axios.patch('\${callback-endpoint}',
     { callId, transcriptionUri: s3uri },
     { headers: { 'Authorization': authHeader } }
   );
  
   // 5. Ticket ID 추출 후 LLM 기반 상담 분석 요청 (Amazon Transcribe 결과 활용)
   const ticketId = response.data?.result?.[0]?.id;
   await axios.post('\${analysis-url}',
     {},
     { headers: { 'Authorization': authHeader }, params: { ticketId } }
   );
  
   return { statusCode: 200, body: JSON.stringify('처리 성공') };
 } catch (error) {
   return { statusCode: 500, body: JSON.stringify(`오류 발생: \${error.message}`) };
 }
};

STT 기반 상담 결과 분석

다음은 상담정보를 분석하는 Analysis Prompt 입니다. 텍스트로 저장된 상담 내용과 Prompt를 LLM Gateway에 전달하여 상담 요약, 감정 분석, 강한 민원 감지 등 원하는 결과를 생성해 냅니다.

You are an AI assistant trained to analyze customer service call transcripts. Your task is to evaluate the conversation and provide insights in **JSON format**.

Analyze the following conversation and extract key insights:
1. **Customer Inquiry**: Provide a brief summary of what the customer is asking about using keywords.
2. **Customer's Primary Issue**: Identify the main concern or problem mentioned by the customer.
3. **Customer consultant's Response Quality**: Evaluate the Customer consultant’s attitude, tone, and professionalism.
4. **Sentiment Analysis**: Assess the customer's emotions (e.g., frustration, confusion, satisfaction).
5. **Consultant Guidance**: Summarize the key points the consultant provided to the customer during the conversation.
6. **Strong Complaint Indicators**: Determine if any of the following strong complaint indicators are present:
 - **Compensation Request** (`compensationRequest`): The customer strongly demands monetary compensation, service extensions, or additional benefits.
 - **Legal Action or Media Escalation** (`legalOrMediaThreat`): The customer mentions reporting to consumer protection agencies, media, or taking legal action.
 - **Threatening Remarks** (`threateningBehavior`): The customer applies legal, physical, or social pressure, uses abusive language, or makes personal threats.
7. **Improvement Suggestions**: Provide constructive feedback for the agent to improve their response.

### Conversation:
{{conversation}}

### **Expected JSON Output Format**
{
 "customerInquiry": "e.g. investment account inquiry, withdrawal issue",
 "customerPrimaryIssue": "Summarize the main issue faced by the customer.",
 "consultantGuidance": "Summarize the key points the consultant provided to the customer.",
 "customerServiceResponseQuality": "Describe the Customer consultant’s attitude, e.g., polite, professional, rushed, impatient.",
 "sentimentAnalysis": "Describe the customer's emotions (e.g., frustrated, confused, neutral, satisfied).",
 "compensationRequest": true/false,
 "legalOrMediaThreat": true/false,
 "threateningBehavior": true/false,
 "improvementSuggestions": "Provide clear suggestions to improve the agent's response."
}

이렇게 처리된 내용은 다음과 같이 상담 티켓과 연동되며, 분석 결과와 민원 성격 플래그를 표현해 줍니다.
향후 상담내용을 활용하여 서비스 및 시장 이상 탐지 등의 요소로 확장할 수 있습니다.

이 과제를 통해 온프레미스 STT 개발 비용 대비 Transcribe 도입 비용이 80% 이상 절감되었습니다. 특히 초기 투자 비용 없이도, 사용량에 기반한 종량제 과금 구조로의 변경이 이루어졌습니다. 또한 민원 패턴에 대한 분석 결과를 CRM 연동과 결합하여 상담 데이터 활용을 극대화 하였고, 잠재 불만 예측 및 상담 프로세스 개선, 상담사의 응대 품질 향상 등 다양한 개선점들을 가져갈 수 있었습니다.

CCP Customization을 통한 CRM 연동

기존 고객 센터 상담원들은 고객의 전화를 받기 위해 별도의 장비(전화기, 콜 장비 등)가 필요했습니다. 이 장비는 솔루션 업체의 시스템으로 운영되다보니 유지보수를 위해 앞서 언급한 유연성 및 확장성 부족의 문제를 가지고 있었습니다. 특히 상담 애플리케이션의 프론트엔드 개발을 위해서도 시스템 및 장비의 구조를 학습하고 이해하는 데에 많은 시간이 소요되어 개발 생산성이 크게 저하되고 있었습니다.
Amazon Connect는 Connect Streams API를 활용하여, 완전히 커스터마이징된 상담 애플리케이션을 구축할 수 있습니다. 해당 API 라이브러리는 오픈소스로 공개되어 있으며, Github를 통해 활용할 수 있는 샘플 코드가 함께 제공됩니다. 특히 이벤트 기반으로 구성되어 상담 상태, 콜 상태 등을 실시간으로 제어할 수 있어 프론트엔드에서 유연하게 통합 및 제어를 할 수 있었습니다.
이를 활용하여 토스증권의 상담 애플리케이션을 토스의 기술 표준에 맞추어 재설계하였으며, React 기반의 UI 컴포넌트를 통해 상담원 상태, 전화 수신/종료, 발신, 음소거 등의 기능을 구현하고자 하였습니다. Amazon Connect는 amazon-connect-streams docs와 Fully Custom CCP 예제를 제공하며, 다양한 형태로 커스터마이즈를 할 수 있도록 문서를 제공하고 있습니다. 제공되는 CCP UI 샘플을 활용하면 통화 워크플로우를 경험해 볼 수 있어, 어떤 리스너가 호출되는지 파악해보면 좀 빠르게 프레임워크를 이해할 수 있습니다.

그림8. 제공되는 샘플 CCP UI

상담 애플리케이션의 구성은 메인과 소프트폰으로 나누어지며, 두 앱은 window.postMessage를 통해 상호 통신 할 수 있습니다. 각각은 다음과 같은 기능을 수행합니다.

메인: 상담 정보, 고객 CRM 데이터 등 업무 처리 중심
소프트폰: Amazon Connect 기반의 콜 제어 기능

두 애플리케이션 모두 필요에 따라 토스증권 서버(RESTful API) 및 Amazon Connect 서버(connect-streams-api)와 직접 요청을 주고받게 됩니다.

그림8. 메인과 소프트폰 화면

이러한 구성을 바탕으로, 토스증권의 UI 및 기술표준에 맞추어 메인 앱과 소프트폰을 커스터마이즈하기 위해 React 기반의 Next.js로 재구성하고자 하였습니다. 이 과정은 제공된 샘플 애플리케이션의 화면 및 기능을 하나씩 디버깅 하는 방식으로 상담 애플리케이션에 필요한 화면과 이벤트를 파악해 나갔습니다.
먼저 useBaseEventListener Hook을 선언하여 로깅과 같이 initCCP에 공통으로 정의되어야 할 동작을 선언하였습니다.

// Amazon Connect Streams API의 이벤트를 처리하는 기본 Hook
export function useBaseCCPEventListener({ agentCallbacks, contactCallbacks, coreCallbacks }) {
  useEffect(() => {
    // Connect API가 로드되었는지 확인 후 초기화
    const setupConnectListeners = () => {
      if (!window.connect || !window.connect.agent) return false;
      try {
        // CCP 초기화 (오픈소스 Connect Streams API 활용)
        initCCP('ccp-container');
        // 핵심 이벤트 리스너 연결
        connect.core.onInitialized(() => {
          console.log('소프트폰 초기화 완료');
          coreCallbacks?.onInitialized?.();
        });
        // 상담원 이벤트 구독 (상태 변경, 통화 관련 이벤트 등)
        connect.agent((agent) => {
          agentCallbacks?.onAgentEvent(agent);
        });
        // 고객 통화 이벤트 구독 (통화 시작, 종료, 대기 등)
        connect.contact((contact) => {
          contactCallbacks?.onContactEvent(contact);
        });
        return true;
      } catch (error) {
        console.error('초기화 오류:', error);
        return false;
      }
    };
}

코드에서 살펴볼 수 있듯, 다양한 상담사 이벤트들을 Catch하여 핸들링하는 방식으로 메인 애플리케이션과 소프트폰을 구성할 수 있었습니다. 동시에 각 화면(메인, 소프트폰)에 필요한 이벤트 리스너 또한 작성하였습니다. 다음은 그 중 소프트폰 화면을 위한 이벤트 리스너(useCCPEventListenerInSoftPhone)입니다.

// 소프트폰 화면에서 필요한 Connect 이벤트를 React 상태와 연결
export function useCCPEventListenerInSoftPhone() {
   // Jotai를 통한 상태 관리 (오픈소스 상태 관리 라이브러리)
   const [agentState, setAgentState] = useAtom(agentStateAtom);
   const [, setCallState] = useAtom(callStateAtom);
   useBaseCCPEventListener({
     agentCallbacks: {
       onAgentEvent: (agent) => {
         // 상담원 정보와 상태 저장 (로그인 상태, 이용 가능 상태 등)
         setAgentState((prev) => ({ ...prev, agent, isLoggedIn: true }));
         // 상담원 상태 변경 감지
         agent.onStateChange((change) => {
           setAgentState((prev) => ({ ...prev, status: change.newState }));
         });
       }
     },
     contactCallbacks: {
       onContactEvent: (contact) => {
         // 통화 기본 정보 설정 (발신/수신, 전화번호 등)
         const isInbound = contact.isInbound();
         const phoneNumber = contact.getActiveInitialConnection()?.getEndpoint().phoneNumber;
        
         // 통화 상태 업데이트
         setCallState({
           status: isInbound ? CallStatus['수신 중'] : CallStatus['발신 중'],
           contact, contactId: contact.getContactId(),
           callerNumber: phoneNumber,
           // 기타 필요한 통화 상태...
         });        
         // 주요 통화 상태 변화 감지 및 UI 업데이트
         contact.onConnected(() => setCallState(prev => ({ ...prev, status: CallStatus['통화 중'] })));
         contact.onEnded(() => setCallState(prev => ({ ...prev, status: CallStatus['종료됨'] })));
       }
     }
   });
 }

이렇게 EventListener를 작성하여 상담 과정에서 일어나는 이벤트들을 필요한 화면에 적절히 노출시킬 수 있게 되었습니다.
이어서 상담 고객의 정보를 상담메인에 동기화 시키기 위해 전역 상태를 사용했습니다. 전역 상태를 사용한 이유는 고객의 많은 정보를 상담메인의 여러 UI에 쉽게 동기화 시킬 수 있기 때문에 전역 상태를 사용했고, 라이브러리는 Jotai를 사용했습니다.

// Jotai를 활용한 상태 관리 (최소한의 코드로 전역 상태 관리)
import { atom } from 'jotai';

// 상담원 상태 정의
export const agentStateAtom = atom({
    agent: null, // Connect Agent 객체
    isLoggedIn: false, // 로그인 상태
    status: null, // 상담원 상태 (접속가능, 통화중 등)
    stateList: null, // 설정 가능한 상태 목록
    isMuted: false, // 음소거 여부
});

// 통화 상태 정의
export const callStateAtom = atom({
    status: CallStatus['대기 중'], // 현재 통화 상태
    contact: null, // Connect Contact 객체
    contactId: null, // 통화 ID
    callerNumber: null, // 발신자 번호
    isOnHold: false, // 통화 대기 여부
    queueTimestamp: null, // 큐 진입 시간
});

메인 화면과 소프트폰을 위와 같이 연동하여, 다음과 같은 완전히 커스터마이즈된 고객센터를 구성할 수 있게 되었습니다.

이렇게 제공된 API와 문서를 바탕으로, 토스증권에 맞는 고객 센터 상담 애플리케이션을 구성할 수 있었습니다. 단순히 새로운 기능의 도입을 넘어, 기존 토스증권 고객센터와 호환되도록 브라우저 기반으로 오픈소스 및 기술 표준을 활용하여 개발된 만큼 토스증권 내 프론트엔드 개발자 누구나 소프트폰 기능을 수정하거나 확장할 수 있는 구조로 완성하였습니다.

마치며

지금까지 Amazon Connect를 기반으로 다양한 도전과제를 해결한 토스증권의 고객 센터 전환 여정을 살펴보았습니다. 토스증권은 Amazon Connect를 통해 예측 중심에서 수요 기반 확장 구조로의 변화를 꾀할 수 있게 되었습니다. 특히 본문에서 강조한 것과 같이 기존 솔루션 개발 경험 없이도, AWS Native 서비스들과 오픈소스 프레임워크를 활용하여 보다 개발자 친화적인 고객 센터를 구축하게 되었습니다. 이는 보다 유연한 기능 확장, 비용 최적화를 위한 구조적 전환 등을 위한 초석이 되는 의미있는 변화라 할 수 있습니다.

AWS 기술 블로그