floors.js — 웹사이트를 하보 호텔(Habbo Hotel)처럼 바꿔보세요

floors.js란 무엇인가요?

floors.js는 단 하나의 JavaScript 스크립트 라인을 사용하여 실시간의 영구적인 소셜 상호작용을 기존 웹사이트에 직접 주입하는 혁신적인 스크립트입니다. 정적인 웹 페이지를 고전적인 소셜 게임인 하보 호텔(Habbo Hotel)을 연상시키는 탐색 가능한 아이소메트릭 3D 공간으로 변환합니다. 방문자는 콘텐츠를 수동적으로 소비하는 대신, 서로를 볼 수 있고 페이지(방) 사이를 이동하며 도메인 내에서 실시간 대화에 참여할 수 있는 실체적인 3D 아바타가 됩니다. 이는 웹사이트 참여 방식을 일방적인 방송에서 영구적인 공유 디지털 공간으로 근본적으로 변화시킵니다.

이 도구는 높은 이탈률과 포착되지 않은 방문자 의도라는 중요한 문제를 해결합니다. 사이트를 문서가 아닌 '장소'로 만듦으로써, floors.js는 사용자가 현장에 존재하고, 즉각적인 지원을 제공하며, 자발적인 피드백을 수집하고, 진정한 커뮤니티 분위기를 구축할 수 있도록 합니다. 백엔드 설정, SDK 통합 또는 복잡한 구성이 전혀 필요하지 않습니다. 스크립트 태그만 추가하면 사이트에 즉시 활기가 넘치게 됩니다.

주요 기능

• 즉각적인 3D 존재감: 방문자는 도착 즉시 무작위 이름표를 단 블록형 3D 아바타로 즉시 나타나 가입 마찰을 없앱니다. 다른 방문자를 실시간으로 볼 수 있습니다.
• 아이소메트릭 룸 매핑: 사이트의 모든 페이지는 바닥과 벽이 있는 고유한 탐색 가능한 아이소메트릭 룸 레이아웃으로 자동 매핑됩니다.
• 실시간 탐색: 아바타는 사용자가 클릭한 곳으로 바닥을 따라 이동합니다. 룸 전환은 원활하며, 탐색 변경(React, Next.js, Vue 등을 위한 SPA 지원)을 통해 자동으로 감지됩니다.
• 마찰 없는 채팅: 메시지는 아바타 위로 떠다니는 말풍선 형태로 나타납니다. 사용자가 콘텐츠를 적극적으로 탐색하는 동안 방문자와 직접 채팅할 수 있습니다.
• 제로 구성 설정: 스크립트는 탐색 구조(<nav>)를 자동으로 스캔하여 다른 페이지들을 별도의 채팅방으로 정의합니다. 정적 사이트, WordPress, Shopify 및 최신 JavaScript 프레임워크 전반에서 보편적으로 작동합니다.
• 개인 정보 보호 중심: 쿠키나 IP 로깅이 없으며 로컬에 저장되는 무작위 별명만 사용합니다. 기본적으로 GDPR을 준수하도록 설계되었습니다.
• 사용자 정의 옵션: 광범위한 데이터 속성을 통해 강조 색상, 표시 이름, 룸별 고정 환영 메시지 사용자 정의 및 소유자 아바타 지정을 할 수 있습니다.

floors.js 사용 방법

floors.js 시작은 매우 빠르고 간단하도록 설계되었으며, 기본 구현을 위해서는 단 한 단계만 필요합니다.

1. 키 받기: 가입하고 고유한 data-key를 검색합니다.
2. 스크립트 붙여넣기: 제공된 <script> 태그를 웹사이트 HTML, 일반적으로 닫는 </body> 태그 직전에 삽입합니다.

   <script src="https://floorsjs.com/embed.js" data-key="flr_..." ></script>
   

3. 자동 룸 생성: 스크립트는 사이트의 탐색 구조를 즉시 스캔하여 다른 페이지들을 별개의 채팅방으로 정의하기 시작합니다.
4. 참여: 로드되면 사용자와 방문자는 아바타가 나타나는 것을 볼 수 있습니다. 위젯 아이콘(일반적으로 오른쪽 하단)을 클릭하여 채팅 패널을 열고 동시에 사이트의 다른 부분을 탐색하는 사용자와 상호 작용을 시작할 수 있습니다.

고급 제어를 위해 강조 색상을 브랜드에 맞게 조정하는 data-accent나 룸별 공지 사항을 설정하는 data-pinned-message와 같은 선택적 속성을 스크립트 태그에 추가할 수 있습니다.

사용 사례

1. 전자상거래 지원 및 판매: 정적인 라이브 채팅 팝업에 의존하는 대신, 영업 직원이 '제품 페이지 룸'을 돌아다니며 머무는 쇼핑객에게 적극적으로 인사하고 즉각적이고 상황에 맞는 조언이나 상향 판매 기회를 제공할 수 있습니다.
2. SaaS/소프트웨어 문서 허브: 기술 작가 및 지원 담당자는 문서 페이지를 모니터링할 수 있습니다. 사용자가 복잡한 가이드에서 막힐 때, 전문가 아바타가 즉시 옆에 나타나 설명을 제공하여 지원 티켓을 줄일 수 있습니다.
3. 가상 이벤트 및 컨퍼런스: 표준 웹사이트에서 호스팅되는 가상 이벤트의 로비 공간이나 분과실을 만드는 데 floors.js를 사용하여 참석자들이 예정된 세션 사이에 시각적으로 어울리고 네트워킹할 수 있도록 합니다.
4. 블로그/포럼 커뮤니티 구축: 트래픽이 많은 블로그 게시물을 실시간으로 기사 내용을 토론할 수 있는 영구적인 만남의 장소로 변환하여 콘텐츠 주변에 더 강력한 커뮤니티 의식을 조성합니다.
5. 실시간 피드백 수집: 새로운 기능이나 랜딩 페이지를 출시하고 방문자가 3D로 상호 작용하는 것을 지켜보세요. 사용자가 새로운 디자인이나 기능을 처음 경험할 때 채팅하여 즉각적이고 질적인 피드백을 수집할 수 있습니다.

FAQ

Q: 동시 접속 방문자란 정확히 무엇을 의미하나요? A: 동시 접속 방문자는 동일한 순간에 사이트에 활발하게 연결된 모든 사람을 의미합니다. 방문자가 탭을 닫거나 도메인에서 완전히 벗어나 탐색하면 해당 슬롯이 해제됩니다. 평생 이용권은 사이트당 최대 100명의 동시 접속 방문자를 지원합니다.

Q: Next.js나 Shopify와 같은 최신 프레임워크에 복잡한 통합이 필요한가요? A: 아닙니다. Shopify 및 정적 사이트의 경우 테마 바닥글에 스크립트 태그를 붙여넣기만 하면 됩니다. Next.js, Vue 또는 Astro와 같은 단일 페이지 애플리케이션(SPA)의 경우 floors.js가 라우팅 시스템(pushState/popstate)을 자동으로 후킹하여 사용자가 내부적으로 탐색할 때 룸 변경이 원활하게 이루어지도록 합니다.

Q: 동시 방문자 한도를 초과하면 어떻게 되나요? A: 새로운 방문자는 대기열에 배치됩니다. 기존 방문자가 떠나는 즉시 자동으로 3D 공간에 참여하게 되므로 이미 접속해 있는 사용자는 연결이 끊기지 않습니다.

Q: GDPR을 준수하나요? A: 예, floors.js는 개인 정보 보호 우선으로 설계되었습니다. 쿠키를 사용하지 않고, IP 주소를 기록하지 않으며, 로컬 스토리지에 임시적인 무작위 별명만 저장합니다. 기본 기능을 위해 명시적인 동의 프롬프트가 필요하지 않습니다.

Q: 제품이 내 요구 사항에 맞지 않을 경우 보증은 무엇인가요? A: floors.js는 7일 환불 보장을 제공합니다. 서비스를 사용한 첫 주 이내에 만족하지 못하는 경우 팀에 이메일을 보내 전액 환불을 받을 수 있습니다.