곰집사

제품 내 FAQ·가이드 창 기획과 직접 제작

곰앤컴퍼니 PC 제품 내 FAQ·가이드 창을 기획했습니다.
또한 Claude를 활용해 HTML·JS까지 직접 제작했습니다.

8개 제품적용 제품

직접 제작기획 + HTML·JS (Claude)

01배경

곰앤컴퍼니 제품군이 재생, 편집, 캡처, 녹음으로 확장되면서 사용법을 안내할 공통 채널이 필요했습니다.

이를 위해 처음 사용하는 편집·AI 기능과 자주 묻는 내용을 제품 안에서 바로 안내하는 FAQ·가이드 창을 기획하고, Claude를 활용해 HTML·JS까지 직접 제작했습니다.

더불어 곰앤컴퍼니 PC 제품 8개에 공통으로 적용했습니다.

모든 화면에서 헤더 아이콘이나 플로팅 버튼으로 실행합니다. 기존 작업 화면은 유지됩니다.

재생 화면, 타임라인, 캔버스, 주요 버튼, 트랙 스크롤·드래그 동선을 피해 배치했습니다.

진입점 위치와 레이아웃은 모든 제품에 동일하게 적용하고, 제품별 시스템 컬러만 변경했습니다.

자주 묻는 내용을 제품 내에서 안내해 반복되는 단순 문의를 줄이고자 했습니다.

미니 데모

플로팅 버튼이나 상단 ? 아이콘으로 곰집사를 열고, 내리기·닫기를 눌러 보세요. 누를 때마다 Splunk 이벤트 수가 올라갑니다.

gommix10

Splunk 수집 이벤트

유입 경로(헤더·플로팅)와 이탈 규모(내리기·닫기)를 나눠 봅니다.

실제 화면을 단순화한 데모입니다. 안내 항목은 예시입니다.

유입 경로를 구분하기 위해 헤더 아이콘 클릭과 플로팅 버튼 클릭을 별도 이벤트로 나눴습니다.

더불어 팝업 '내리기'·'닫기'와 플로팅 버튼 닫기로 이탈 규모를 측정합니다.

'내리기'는 팝업을 닫지 않고 버튼 형태로 유지하는 동작입니다.