서비스

sitePing — 설치형 실시간 상담 서비스

웹사이트에 설치 코드를 추가하면 방문자 상담창을 제공하고, 관리자 상담함에서 문의와 답변을 실시간으로 주고받는 서비스입니다.

문제

웹사이트마다 상담 화면을 반복 제작하는 대신 공통 위젯을 설치하고, 상담원은 여러 문의를 오가며 답변·배정·고객 이력을 처리할 수 있어야 했습니다. 이 과정에서 사이트별 데이터 접근과 UI 상태 유지를 함께 설계했습니다.

관리자·방문자 위젯·Vanilla TypeScript loader·서버·공통 스키마를 npm workspaces로 분리하고, loader가 버튼과 iframe을 생성하도록 구성
Firebase UID와 siteId·멤버십을 구분하고 Cloud Functions 및 Firestore·Storage Rules에서 사이트 소속·역할·상담방 소유권을 확인
외부 페이지와 iframe 통신에서 정확한 origin·메시지를 보낸 window·nonce를 검증
대기 상담을 시작할 때 목록에서 빠져도 대화가 사라지지 않도록 선택한 상담 ID를 URL에 유지하고 목록 조회와 선택 상담 구독을 분리
상담별 초안을 현재 탭 메모리에 보관하고 계정 전환 시 분리·초기화하며, 재전송에는 같은 메시지 ID를 사용해 트랜잭션에서 중복 저장·사용량 중복 차감을 방지
첨부 업로드 권한과 용량을 서버에서 예약하고, 메시지 저장 시 실제 Storage 객체의 크기·형식·소유권을 다시 검증

원 프로젝트의 테스트와 운영 기록에서 상담 상태 전환·초안 유지·첨부 취소 및 재선택의 회귀 검증을 확인했습니다.
Firebase Emulator의 사이트 간 접근·권한 규칙 검증과 Playwright의 양방향 상담·반응형 화면 검증 기록을 남겼습니다.
운영 Chrome에서 관리자·방문자 첨부를 전송하고 다운로드한 파일의 크기·SHA-256을 원본과 대조한 기록이 있습니다.
2026-10-21 포트폴리오 등록 시 운영 관리자 상담함과 위젯 설정을 직접 캡처했습니다. 방문자 위젯은 같은 날의 운영 검증 캡처이며, 모든 화면은 테스트 상담 데이터를 사용합니다.

맞춤 도메인에서 관리자·방문자 위젯·설치용 loader를 제공하며 기능을 보완하고 있습니다. 관리자 이용에는 회원가입과 로그인이 필요합니다.

상담 요약·분류·답변 추천·고객 질문 응답을 위한 UI와 서버 인터페이스·API 어댑터는 준비했으며, 외부 AI 제공자를 연결한 운영 검증은 남아 있습니다.
현재 문서 검색은 키워드 기반입니다. 임베딩·벡터 검색은 구현 범위에 포함하지 않습니다.
답변 초안은 현재 탭의 메뉴 이동·전송 재시도 범위에서 유지하며, 새로고침 이후의 영구 보존은 제공하지 않습니다.