웹사이트의 움직이는 마스코트는 브랜드의 캐릭터를 방문자에게 친근하게 소개할 수 있습니다. 방문자를 맞이하거나, 유용한 안내를 가리키거나, 창작 활동에 익숙한 얼굴을 더하는 식입니다.
중요한 것은 움직임을 넣기 전에 캐릭터가 방문자에게 어떤 도움을 줄지 정하는 것입니다. 역할이 분명하면 디자인과 연동 방식도 선택하기 쉬워집니다.
1. 마스코트의 역할을 하나 정하세요
방문자가 사이트에서 어떤 순간에 캐릭터를 만나면 좋을지 생각해 보세요. 제품 소개 페이지에서 인사하기, 이용 가이드로 시선을 이끌기, 창작 활동에 캐릭터를 등장시키기 등이 아이디어가 될 수 있습니다.
이는 활용 예시이며 자동으로 제공되는 동작을 뜻하지는 않습니다. 필요한 상호작용을 먼저 적고 선택한 환경에서 지원되는지 확인하세요.
2. 캐릭터 이미지를 준비하세요
직접 만들었거나 사용할 권한이 있는 그림을 사용합니다. 작은 화면에서도 윤곽과 특징이 알아보기 쉬운지 확인하고, 수정할 수 있는 원본은 따로 보관하세요. 브랜드 담당자가 있다면 움직이는 결과를 함께 검토하는 것도 좋습니다.
정지된 캐릭터는 이미지로 보여 줄 수 있습니다. 움직임이나 상호작용이 필요하다면 이를 지원하는 형식과 연동 방식이 필요합니다.
3. 반복 재생과 상호작용 중 목적을 고르세요
단순하게 반복되는 장식에는 움직이는 이미지가 적합할 수 있습니다. 방문자의 동작에 반응하는 캐릭터는 웹페이지와 캐릭터 동작을 연결하는 별도의 연동이 필요합니다.
Hasho의 웹사이트 작업 방식은 .yusha 캐릭터와 웹 SDK가 포함된 패키지를 제공합니다. 실제 연동과 이용 가능한 기능은 환경과 에디션에 따라 달라질 수 있으므로, 특정 동작을 기준으로 작업을 시작하기 전에 필요한 경험을 상담해 보세요. 웹사이트 마스코트 알아보기
4. 사이트에 연결하는 방법을 계획하세요
사이트를 관리하는 사람과 함께 캐릭터를 어느 페이지에 어떻게 표시할지 정하세요. 웹사이트 환경, 라이선스 조건, 필요한 동작을 확인한 뒤 중요한 고객 페이지에 적용하기 전에 테스트 페이지에서 먼저 살펴보는 것이 좋습니다.
음성이나 채팅처럼 정보를 다루는 경험을 계획한다면 어떤 정보가 수집되는지 서비스 제공자와 확인하세요. 검증하지 않은 개인정보 처리 결과를 방문자에게 약속하지 않는 것이 중요합니다.
5. 방문자의 화면에서 시험하세요
휴대폰과 데스크톱에서 캐릭터가 메뉴, 글, 양식이나 접근성 도구를 가리지 않는지 확인하세요. 상호작용이 있다면 조작 방법이 이해하기 쉬운지, 키보드로 접근할 수 있는지도 살펴봅니다.
움직임을 줄이고 싶은 방문자도 고려하세요. 구현 환경에서 지원한다면 동작을 줄일 방법을 제공하고, 중요한 정보는 일반 텍스트로도 전달합니다. 사용할 기기와 브라우저에서 로딩 및 대체 화면도 확인하세요.
6. 실제 페이지에서 다시 살펴보세요
테스트가 끝나면 실제 페이지에서 확인하고, 프로젝트를 잘 모르는 사람에게 캐릭터가 어떤 역할을 하는 것처럼 보이는지 물어보세요. 마스코트는 페이지의 목적을 돕고 방문자가 내용을 이해하는 데 기여할 때 더 유용합니다.
그림과 웹사이트가 준비되어 있나요? Hasho 팀에 프로젝트 상담하기
