코토로는 웹페이지 위에서 어떻게 움직일까?

웹페이지는 원래 고양이가 걸어 다니도록 만들어진 공간이 아닙니다. 버튼, 이미지, 글상자처럼 크기와 위치가 계속 달라지는 요소가 있을 뿐이죠. 코토로는 이 화면을 작은 무대로 해석하고, 그 위에서 자연스럽게 행동할 수 있도록 만들어졌습니다.

이 글에서 다룰 내용

1. 01화면을 작은 물리 공간으로 해석하는 방법
2. 02행동 상태와 애니메이션을 연결하는 방법
3. 03웹페이지마다 다른 구조에 대응하는 방법
4. 04귀여움과 방해되지 않는 경험의 균형

화면을 하나의 작은 공간으로 보기

코토로에게 브라우저 화면은 좌표가 있는 공간입니다. 현재 위치, 이동 방향과 속도를 기준으로 다음 순간에 있을 곳을 계산합니다. 공중에 있다면 아래로 내려가고, 화면 아래쪽에 닿으면 더 이상 떨어지지 않도록 멈춥니다.

이 기본 규칙 위에 걷기와 점프 같은 행동을 연결합니다. 덕분에 고양이가 단순히 정해진 이미지를 반복하는 대신, 현재 위치와 상황에 맞춰 움직이는 것처럼 보입니다.

작은 움직임 실험실

버튼을 눌러 상태에 따른 움직임을 확인해보세요.

쉬기걷기점프

꼬리를 말고 잠시 쉬는 중

위 실험실은 실제 코토로의 모든 물리 규칙을 재현한 것은 아니지만, 하나의 상태가 위치 변화와 애니메이션으로 연결되는 방식을 간단하게 보여줍니다.

행동에는 각자의 상태가 있습니다

고양이가 걷다가 갑자기 점프하고, 바로 잠드는 식으로 무작위 이미지만 바뀌면 생명감보다 어색함이 먼저 느껴집니다. 그래서 코토로의 행동은 걷기, 점프, 쉬기, 그루밍, 대화처럼 구분된 상태로 관리됩니다.

각 상태는 다음 세 가지를 함께 결정합니다.

1. 화면에서 어떤 방향으로 움직일지
2. 어떤 애니메이션을 보여줄지
3. 다음 행동으로 언제 전환할지

예를 들어 대화 중에는 채팅에 어울리는 모습을 유지하고, 이동 중에는 걷는 방향과 이미지 방향이 서로 맞아야 합니다. 이런 작은 연결이 쌓일수록 사용자는 코토로를 화면 위에 붙은 그림보다 하나의 캐릭터로 느끼게 됩니다.

웹페이지는 계속 변합니다

뉴스 기사처럼 세로로 긴 페이지가 있는가 하면, 동영상 서비스처럼 화면 대부분을 플레이어가 차지하는 페이지도 있습니다. 사용자가 스크롤하거나 창 크기를 바꾸면 고양이가 움직일 수 있는 영역도 즉시 달라집니다.

따라서 코토로는 한 번 계산한 화면 크기를 계속 믿지 않습니다. 현재 보이는 영역과 고양이 위치를 다시 확인하고, 화면 밖으로 완전히 사라지지 않도록 위치를 조정합니다. 사용자가 직접 옮긴 위치도 저장해 다음 페이지에서 자연스럽게 이어갑니다.

가장 중요한 기준은 방해하지 않는 것

움직임이 많다고 항상 더 귀여운 것은 아닙니다. 글을 읽는데 고양이가 계속 본문을 가리거나, 중요한 버튼 위에서 멈추면 금방 불편해집니다.

그래서 움직임을 설계할 때는 다음 기준을 함께 봅니다.

• 시선을 끌되 작업 흐름을 끊지 않을 것
• 사용자가 직접 위치와 크기를 조절할 수 있을 것
• 대화가 필요하지 않을 때는 조용히 자기 행동을 할 것
• 움직임을 예측할 수 있을 정도의 일관성을 유지할 것

코토로가 브라우저에 오래 머물 수 있으려면 “많이 움직이는 캐릭터”보다 “함께 있어도 편한 캐릭터”가 되어야 한다고 생각합니다.