회사 사이트에 ‘체험형 콘텐츠’를 넣기 전에 정해 두어야 할 5가지: 3D ‘LEONIA 섬’을 만들며 알게 된 것

회사 소개 페이지는 읽히기 전에 닫혀 버리기도 합니다. 보고 만지며 이해하는 ‘체험형 콘텐츠’는 그 입구의 하나가 될 수 있습니다.

LEONIA는 10월, 자사 사이트에 3D 섬 ‘LEONIA 섬’을 공개했습니다. 로고의 사자를 본뜬 섬으로, 건물을 누르면 LEONIA의 7가지 사업을 소개합니다. 만드는 과정은 제작 노트에 정리했습니다. 이 글에서는 만들면서 정해 온 것들을, 도입을 검토하는 분들을 위해 5가지로 정리합니다.

1. 무엇을 ‘만져 보고’ 알게 하고 싶은지 한 문장으로 정한다

체험형 콘텐츠는 재미로만 끝나기 쉽습니다. 먼저 “본 사람이 무엇을 알게 되었으면 하는가”를 한 문장으로 정해 두면, 연출을 고르는 기준이 흔들리지 않습니다.

LEONIA 섬의 한 문장은 “7가지 사업을, 읽기 전에 만져 보며 알게 한다”였습니다. 그래서 섬의 주요 건물을 7가지 사업과 연결하고, 누르면 설명이 열리며 그대로 사업 페이지로 이동할 수 있게 했습니다. 섬에 숨긴 3개의 코인도 처음에는 사업 건물 근처에 두어, 찾으면서 건물을 눌러 보게 했습니다.

반대로, 이 한 문장과 이어지지 않는 연출은 넣지 않았습니다. 정해야 할 것은 ‘넣을 것’보다 ‘넣지 않을 것’입니다.

2. 검색에서 읽히는 글은 3D와 따로 준비한다

Google은 페이지의 JavaScript를 실행하고, 표시된 후의 HTML을 사용해 내용을 색인합니다. 또한 Google이 따라갈 수 있는 링크는 href 속성이 있는 <a> 요소로 쓰인 것뿐입니다. 3D 화면 안에 그린 글자나 버튼은 그대로는 글이나 링크로 읽히기 어렵다고 생각해 두는 것이 안전합니다.

LEONIA 섬은 섬에 대한 설명을 메인 페이지의 제목과 본문에, 사업 내용을 각 사업 페이지에, 만드는 과정을 제작 노트에 각각 글로 썼습니다. 섬은 ‘입구’, 글은 ‘내용’이라는 역할 분담입니다.

• 체험형 콘텐츠가 있는 페이지에도 제목과 설명문을 둔다
• 콘텐츠 안에서 소개하는 내용은 다른 페이지에도 글로 싣는다
• 콘텐츠 안에서 다른 페이지로 가는 링크는 일반 링크로 한다

3. 무겁지 않게: 불러오기·움직이기·멈추기를 정한다

3D는 메인 페이지를 무겁게 만드는 원인이 되기 쉽습니다. Google 기준으로는 페이지의 주요 내용이 표시되기까지(LCP)가 2.5초 미만이면 ‘좋음’으로 봅니다.

LEONIA 섬은 메인 페이지에서 처음 보여 주는 것을 정지 이미지(약 70~90KB)로만 했습니다. 3D 부품(3D 표시 프로그램만 약 600KB)은 섬이 화면에 가까워졌을 때 비로소 불러옵니다. 또한 섬이 30% 이상 보일 때만 움직이고, 화면 밖으로 나가거나 브라우저에서 다른 탭을 볼 때는 멈춥니다.

• 처음 보여 주는 것(정지 이미지 등)을 가볍게 한다
• 무거운 부품은 필요할 때 불러온다
• 보이지 않을 때는 움직이지 않는다

4. 누구나 쓸 수 있도록 세 가지 보기 방식을 준비한다

기기의 설정이나 성능에 따라 3D가 맞지 않는 사람도 있습니다. 많은 스마트폰과 컴퓨터에는 움직임을 줄이는 설정이 있습니다. 애니메이션 때문에 집중하기 어렵거나 어지럼증·메스꺼움을 느끼는 사람이 있기 때문입니다.

LEONIA 섬은 보는 사람의 환경에 맞춰 표시를 자동으로 바꿉니다.

• 3D가 작동하는 기기: 3D 섬
• 데이터 절약 설정을 한 기기, 회선이 매우 느린 기기, 메모리가 적은 기기, 3D 표시를 지원하지 않는 기기: 짧은 반복 동영상(약 0.4~0.5MB)
• ‘동작 줄이기’ 설정의 기기: 정지 이미지

언어는 일본어·영어·한국어를 지원합니다. 공개 후에는 섬의 거리에도 손을 더했습니다. 점자 블록, 흰 지팡이를 쓰며 걷는 사람과 안내견, 소리로 알려 주는 보행자 신호, 수어로 대화하는 사람, 여행 가방을 든 사람, 여러 언어의 인사를 더했습니다. 화면 속 거리도 ‘누구나 오가는 거리’에 가깝게 만들고 싶었습니다.

5. 공개 후 ‘효과가 있었는지’ 측정할 수 있게 해 둔다

체험형 콘텐츠는 만들고 끝내면, 계속할지 판단할 수 없습니다. 공개 전에 무엇을 측정할지 정해 둡니다.

LEONIA 섬은 다음 세 가지를 기록하고 있습니다.

• 메인 페이지에서 섬이 표시되었는지, 3D를 불러왔는지, 전체 화면의 섬으로 이동했는지(Google 애널리틱스 이벤트)
• SNS의 어느 매체에서 왔는지(매체마다 측정용 링크를 따로 사용)
• 문의 양식의 ‘LEONIA를 알게 된 계기’에 ‘LEONIA 섬’ 선택지를 추가

숫자가 쌓이면 이 칼럼에서 결과도 전해 드릴 예정입니다.

마치며

체험형 콘텐츠는 대규모 3D가 아니어도 시작할 수 있습니다. LEONIA는 섬에 이어, 따 보면 사업을 알 수 있는 바나나 등 작은 시제품을 장난감 상자에 두고 있습니다. 중요한 것은 “무엇을 전하고 싶은가”를 정하고, 검색·무게·누구나 쓸 수 있는 배려·측정까지 함께 설계하는 것입니다.

LEONIA는 홈페이지의 기획부터 제작, 공개 후 개선까지 함께 진행합니다. 아직 구상 단계라도 괜찮습니다. 편하게 상담해 주세요.

본문의 LEONIA 섬에 관한 수치(파일 크기·표시 전환 조건)는 2026년 10월 시점 공개 중인 사이트의 것입니다.

출처：Google 검색 센터 「JavaScript SEO 기본사항 이해하기」／web.dev 「Largest Contentful Paint (LCP)」／web.dev 「prefers-reduced-motion」