화상 창구 "화창"

🪄 프로젝트 소개

화창은 고객이 은행 창구를 직접 방문하지 않아도 비대면으로 상담과 업무를 진행할 수 있도록 만든 화상 창구 서비스예요.
단순 영상통화 기능에 그치지 않고, 실제 은행에서 고객과 행원 사이에 이루어지는 업무 프로세스를 분석해 온라인 환경에서도 비슷한 흐름으로 업무를 처리할 수 있도록 설계했어요.

P2P 기반 기술을 활용해 고객과 상담사가 실시간으로 연결되고, 상담 흐름 안에서 화면 공유와 문서 공유가 자연스럽게 이어지도록 구성했어요. 또한 금융 상품 가입 신청 과정까지 비대면으로 진행할 수 있도록 연결해, 상담이 단순 안내에 머무르지 않고 실제 업무 처리까지 이어질 수 있게 만들었어요.
이 프로젝트는 하나은행 주관 디지털 하나로 1차 프로젝트 과정에서 최우수상을 수상했어요.

🛠️ 기술 스택

✨ 주요 기능

• P2P 기반 고객-상담사 실시간 영상 및 음성 상담
• 화상 통화 중 화면 공유 기능
• 상품 신청 및 설명을 위한 문서 공유 시스템
• 금융 서비스 가입 신청 프로세스 지원
• 상담 내용 녹화 기능
• LLM 기반 상담 내역 요약 기능
• 개인 사용자와 행원 사용자에 따른 기능 분리

💼 담당한 일

저는 이 프로젝트에서 풀스택 개발에 참여했고, 팀장으로서 아키텍처 설계와 프로젝트 전반의 방향을 주도했어요.

• 실제 업무 프로세스를 분석하고, 개발 관점에서 요구사항을 재정의하며 사용자 유즈 케이스를 도출했어요.
• STOMP 프로토콜과 WebRTC 기반 실시간 상담 기능을 개발했어요.
• 브라우저 환경에서의 peer connection 관리와 스트림 데이터 처리 구조를 설계했어요.
• INFRA에서 co-turn 이미지를 활용한 컨테이너 기반 TURN 서버를 구축했어요.

🧩 해결했던 과제

이 프로젝트에서 가장 크게 해결해야 했던 과제는 단순히 화상 연결을 구현하는 것이 아니라, 실제 은행 창구의 상담 흐름을 온라인 환경에서도 끊김 없이 이어지게 만드는 것이었어요.

• 고객과 상담사가 동시에 같은 문맥을 공유할 수 있도록 실시간 통신과 상태 동기화 품질을 확보했어요.
• 화상 상담, 화면 공유, 문서 공유, 가입 신청 과정을 분절된 기능이 아니라 하나의 상담 흐름으로 연결했어요.
• 실제 창구 업무 프로세스를 분석해 서비스 흐름과 기능 설계에 반영했어요.
• 상담 종료 이후에도 활용할 수 있도록 녹화와 LLM 요약 기능을 같은 서비스 안에 통합했어요.

특히 실시간 연결 품질과 역할별 UX 구성이 서비스 신뢰도에 직접적인 영향을 주는 프로젝트였기 때문에, 통신 안정성과 흐름 설계를 함께 다뤄야 했어요.

📝 회고

이 프로젝트를 통해 실시간 통신 기능은 단순한 기술 구현보다도, 도메인 흐름 안에서 자연스럽게 동작하도록 설계하는 것이 더 중요하다는 점을 배웠어요.

기술 선택과 구조 설계에 대해 깊이 고민한 점은 좋은 평가로 이어져 최우수상을 수상했지만, 일부 기능을 혼자서 과도하게 담당하며 협업의 균형을 충분히 맞추지 못했던 아쉬움도 있었어요. 특히 대기열 시스템은 관련 지식과 설계 경험이 부족해 완성도 측면에서 한계를 느끼는 계기가 되었고, 이 경험은 이후 협업 방식과 역할 분담을 더 구조적으로 고민하게 만든 출발점이 되었어요.

또한 당시에는 클라이언트 컴포넌트를 과도하게 사용해 SSR 기반 웹 애플리케이션의 장점을 충분히 살리지 못한 아쉬움도 있었어요.
이 경험은 이후 Next.js 프로젝트에서 서버와 클라이언트 역할을 더 명확히 나누고, 렌더링 책임을 구조적으로 설계하는 데 큰 기준이 되었어요.