고객센터 완성 + 문의 스레드 + 관리자 모바일 UI 전면 개편
오늘은 "유나의 답장" 고객센터를 실전 투입 가능한 형태로 마무리한 날입니다. 문의 시스템을 단일 Q&A에서 대화 스레드로 확장하고, 관리자 모바일 UX를 처음부터 다시 디자인했습니다. 그 와중에 Claude Code를 두 번 죽였고(...), 결제 실연동 전환은 다음 세션으로 넘겼습니다.
오늘의 주요 작업 내용
🤖 AI 초안에 관리자 지시사항 입력 기능
기존 관리자 편집기는 페이지 진입 시 자동으로 Claude Sonnet 4를 호출해 초안을 생성했으나, 토큰 비용 발생 및 관리자의 의도 반영이 어렵다는 단점이 있었습니다.
- 자동 호출 제거: 명시적 "AI 초안 생성" 버튼 클릭 시에만 작동하도록 변경
- 지시사항 필드 추가: 관리자가 원하는 톤이나 보너스 제안 등 세부 지시를 내릴 수 있는 textarea 추가 (최대 2,000자)
- 프롬프트 최적화: 관리자 지시사항을 최우선 반영 블록으로 주입하되, 서비스 정책과 충돌 시 정책을 우선하도록 안전장치 마련
📱 관리자 화면 모바일 대응 (전면 개편)
베타 운영 중 모바일 관리 작업의 편의성을 위해 정보 위계를 재설계했습니다.
- 레이아웃 분리: 상단 로고 및 유저 정보와 네비게이션을 2단으로 분리하고, 네비게이션은 가로 스크롤을 적용해 접근성 개선
- 카드 UI 도입: 기존 테이블 방식을 버리고 모바일 카드뷰로 전환. 유저 정보 요약(크레딧/해석수 등)을 3그리드로 배치
- 유연한 편집기: 좁은 폭에서도 버튼들이 자연스럽게 줄바꿈되도록
flex-wrap적용
디자인 노트: 단순히 테이블 크기를 줄이는 것이 아니라, 모바일에서 무엇을 크게 보여주고 무엇을 생략할지 정보의 우선순위를 다시 정의하는 데 집중했습니다.
💬 고객 문의 스레드 시스템 구축
단발성 질문 답변에서 벗어나, 연속적인 대화가 가능한 스레드 방식으로 데이터베이스와 로직을 전면 개편했습니다.
1. DB 스키마 및 API 확장
inquiry_messages테이블 신설: 고객과 관리자의 메시지를 시간순으로 기록- 문의 닫힘 상태 관리를 위한
closed_at,closed_by컬럼 추가 - 추가 질문 등록, 문의 완료 처리, 관리자 후속 답장용 API 3종 개발
2. 스마트 자동 닫힘 (Lazy Calculation)
인프라 복잡도를 낮추기 위해 별도의 크론탭 없이 쿼리 시점 계산 방식을 도입했습니다.
- 마지막 관리자 활동 후 7일이 경과하고 고객의 추가 메시지가 없으면 자동 닫힘 처리
- 고객이 마지막에 메시지를 남긴 경우 7일이 지나도 "진행 중" 상태 유지 (핵심 로직)
🔧 기타 개선 및 버그 수정
- 캐릭터 톤앤매너 통일: 고객센터 내칭호를 "유나아씨"에서 "유나"로 변경하여 친근감 강화 (타 페이지는 세계관 유지를 위해 아씨 유지)
- 이미지 최적화: /chart 히어로 이미지를 가로형 3:2 비율로 크롭 및 교체하여 시각적 안정감 확보
- 상태 도출 로직 수정: "답변 완료"와 "추가 질문 대기"가 혼동되던 UI 버그를 복합 상태 도출 로직으로 해결
- 결제 내역 관리: 관리자 상세 페이지에 실제 PG 결제 트랜잭션(Portone, Lemon Squeezy) 확인 섹션 추가
📊 오늘의 수치 및 결과
- 커밋 수: 5개 (기능 구현 4, 버그 수정 1)
- 신규 테이블: 1개 (inquiry_messages)
- 신규 API: 3개
- 빌드 결과: 0 errors (안정적 배포 완료)
🔜 내일 할 일: 실결제 연동 전환
이제 고객센터 시스템이 완성되었으므로, 내일부터는 실제 매출이 발생하는 결제 시스템 실연동에 들어갑니다.
- 토스페이먼츠 사업자 심사 신청: 포트원을 통한 서류 접수 및 심사 대기
- Lemon Squeezy 실결제 전환: 테스트 모드 종료 및 Live 키 적용
- 환경변수 교체: Vercel 내 결제 관련 API 키 업데이트
- 스모크 테스트: 본인 카드를 이용한 결제 및 환불 프로세스 최종 점검
결제 실연동이 완료되면 "회원 전용 베타" 라벨을 떼고 정식 오픈 단계로 진입하게 됩니다. 내일은 더욱 신중하게 작업을 이어가겠습니다.