SM PAY · 써치엠 · 2025.04 ~ 재직중
핀테크 광고 플랫폼의 배포 구조를 다시 설계하다
모노레포 전환 — 코드 중복을 구조로 해결하다
배경 — 서비스 앱과 어드민 앱을 별도 레포로 운영하며 시작했지만, 기능이 늘어날수록 컴포넌트·타입·API 인터셉터가 두 레포에 중복되기 시작했습니다.
판단 — pnpm + Turborepo 기반 모노레포로 구조를 전환하고, 공유해야 할 것과 앱별로 남겨야 할 것을 먼저 구분했습니다.
트레이드오프 — 전환 후 CI/CD가 각각 독립 빌드되며 이중 빌드 문제가 새로 생겨, Remote Cache와 git diff 기반 Selective Build로 해결했습니다.
⚠ 재현 다이어그램 — 실제 레포 구조·패키지명은 예시로 재구성
모바일 ARS 인증 실패 — 폴링을 서버로 이관하다
배경 — Galaxy 등 일부 모바일 기기에서 전화 앱으로 전환하면 JS 실행이 정지되어 클라이언트 측 폴링이 끊기고, 인증 결과를 받지 못해 실패율 100%가 발생했습니다.
해결 — Next.js API Route 프록시를 도입해 서버가 백엔드 ARS API를 대신 호출하고 결과를 저장하도록 구조를 변경했습니다. 클라이언트는 앱 복귀 후 attemptId로 결과만 조회하면 되도록 만들어, 폴링 자체를 서버로 이관했습니다.
⚠ 재현 다이어그램 — 실제 코드·화면 미사용
프론트엔드 모니터링 체계 — 단계적으로 고도화하다
배경 — FE 로그 관리가 없어 오류 발생 시 원인 파악이 어려웠고, Slack 알림 연동 후에도 메시지가 시간이 지나면 소실됐습니다.
해결 — CloudWatch → Slack → Sentry 순으로 단계적으로 개선했습니다. 이벤트 한도를 고려해 GET을 제외한 POST/PUT/PATCH/DELETE와 FE 에러만 선별 수집하고, 발생 페이지·사용자 정보·Request/Response까지 노출되도록 커스터마이징했습니다.
⚠ 재현 목업 — 실제 데이터·화면 아님
관리자 UI — LLM 기반 자연어 인터페이스 진행 중
배경 — SM Pay 관리자 페이지는 다양한 기능을 제공하지만, 그만큼 UI가 복잡하고 페이지마다 이벤트 핸들러가 많아 사용자가 원하는 작업을 하기까지 여러 단계의 조작이 필요했습니다. 클릭, 폼 입력, 필터링 등 반복적인 UI 조작이 사용자의 작업 효율을 떨어뜨리는 지점이었습니다.
접근 — 각 페이지에는 이미 특정 기능을 수행하는 API가 구축되어 있다는 점에 착안해, UI 조작 대신 자연어 대화로 그 페이지의 작업을 수행할 수 있는 구조를 설계했습니다. Grok API를 활용해 사용자의 자연어 요청을 해석하고, 해당 페이지에 이미 존재하는 API를 호출하도록 연결하는 방식입니다. 기존 UI를 대체하는 것이 아니라, 복잡한 이벤트 핸들러 체인을 자연어라는 더 단순한 인터페이스로 우회하는 접근입니다.
현재 상태 — 일부 페이지에 프로토타입을 적용해 동작을 검증했으며, 프로덕션 반영 전 단계입니다. 페이지별로 API 스펙이 상이해, LLM이 각 페이지의 API 컨텍스트를 정확히 이해하고 적절한 파라미터로 호출하도록 만드는 것이 핵심 과제입니다.
목표 — 사용자가 UI를 조작하는 대신, 채팅창에 원하는 작업을 말하는 것만으로 페이지 내 작업을 완료할 수 있는 경험을 제공하는 것입니다.
최종 목표 — 유료 AI API를 활용하여 모든 작업을 AI로 대체할 수 있도록 하는 것입니다.
⚠ 재현 다이어그램 — 실제 API·페이지 구조는 예시로 재구성
💬 실제 프로토타입 대화 화면 — 테스트 데이터 사용
