모니프렌은 화면 속 캐릭터가 마우스 움직임에 반응하는 제품입니다. 만드는 과정에서 포인터 방향은 잘 따라가는데 움직임은 충분히 자연스럽게 느껴지지 않는 문제가 남았습니다. 입력을 부드럽게 만드는 일만으로 설명하기 어려운 어색함이었습니다. 현재 웹의 표현 방식을 기준으로 그 차이를 나누어 보고, 다음에 비교할 실험의 조건을 정리했습니다.
입력의 부드러움과 동작의 자연스러움을 따로 확인하기
따라가는 방향과 이어지는 자세
포인터가 어디에 있는지 알아내는 것과 캐릭터가 그쪽을 자연스럽게 바라보는 것은 서로 연결된 두 단계입니다. 첫 단계에서는 움직임을 읽고 적절한 방향을 선택합니다. 다음 단계에서는 선택한 방향을 이미지로 보여줍니다. 앞 단계가 안정적으로 작동해도 뒤 단계에서 자세가 크게 달라지면 사용자는 전환을 알아챌 수 있습니다.
그래서 어색함을 살펴볼 때는 어떤 순간에 문제가 드러나는지부터 나눌 필요가 있습니다. 포인터가 거의 멈춰 있는데 이미지가 계속 바뀐다면 방향 선택의 안정성을 볼 수 있습니다. 방향은 한 번만 바뀌었는데 얼굴이 갑자기 돌아간 느낌이 든다면 이미지 사이의 차이를 살펴봐야 합니다. 비슷하게 보이는 불편도 고쳐야 할 대상은 달라집니다.
현재 웹에서 다루고 있는 범위
웹 소개 화면은 정면을 포함한 9방향과 각 방향의 눈뜸·눈감음 이미지로 반응을 표현합니다. 포인터가 방향 경계 부근에서 조금씩 움직일 때 이미지가 빠르게 왕복하지 않도록 떨림을 줄입니다. 깜빡임은 같은 방향의 눈감음 이미지를 사용합니다. 이 방향 수와 표현 방식은 현재 웹 구현을 설명하는 기준입니다.
이 처리는 방향이 불필요하게 바뀌는 상황을 줄이는 데 초점이 있습니다. 정면과 옆모습 사이에 없는 자세를 새로 만들어주지는 않습니다. 두 이미지의 얼굴 위치나 실루엣 차이가 크면 방향 선택이 안정적이어도 바뀌는 순간은 여전히 눈에 띌 수 있습니다. 현재 동작을 설명할 때 입력의 안정성과 자세의 연속성을 따로 보는 이유입니다.
이미지 수를 늘리기 전에 볼 것
중간 자세를 더 넣는 방법을 생각할 수 있지만, 이미지 수만으로 자연스러움을 판단하기는 어렵습니다. 인접한 이미지에서 얼굴의 크기와 위치가 어떻게 이어지는지, 눈과 머리의 방향이 함께 읽히는지 확인해야 합니다. 중간 이미지가 추가돼도 형태의 연결이 일관되지 않으면 다른 종류의 튀는 느낌이 생길 수 있습니다. 이는 다음 제작과 비교에서 확인할 기준입니다.
반응의 타이밍도 별도로 봐야 합니다. 전환을 천천히 만들면 급격한 변화가 덜 보일 수 있지만 포인터를 따라오는 반응이 늦게 느껴질 수 있습니다. 빠르게 반응하는 정도와 편안하게 보이는 정도를 함께 확인해야 합니다. 어느 한쪽을 높였다는 이유로 전체 경험이 좋아졌다고 결론내리기 어렵습니다.
자주 보이는 좌우 전환에 표현을 집중하는 방향도 검토할 만합니다. 모든 방향을 같은 비중으로 늘리는 대신, 제한된 자세 안에서 형태를 더 일관되게 만드는 선택입니다. 다만 어느 방향을 자주 보게 되는지와 단순화했을 때의 느낌은 실제 사용 장면에서 확인해야 합니다.
같은 움직임으로 비교하기
다음 실험에서는 같은 캐릭터와 같은 포인터 경로를 사용해 현재 방식, 좌우 중심 방식, 중간 자세를 넣은 방식을 비교하려 합니다. 캐릭터와 움직임을 동시에 바꾸면 무엇 때문에 느낌이 달라졌는지 구분하기 어려우므로, 가능한 한 비교 조건을 맞추는 것이 중요합니다.
가상 비교 장면으로는 포인터가 왼쪽에서 오른쪽으로 이동하는 경우와 방향 경계 근처에 머무는 경우를 정할 수 있습니다. 앞의 장면에서는 자세가 이어지는 모습을, 뒤의 장면에서는 불필요한 왕복이 생기는지를 살펴볼 수 있습니다. 빠른 이동과 느린 이동도 따로 보면 반응 지연과 형태의 변화를 구분하기가 수월합니다. 이는 실험 구성의 예시이며 이미 얻은 비교 결과는 아닙니다.
관찰 항목은 형태가 튀는지, 반응이 늦는지, 작업을 방해하는지로 나누려 합니다. 자연스럽다는 하나의 평가만 남기면 다음 수정의 방향이 흐려질 수 있습니다. 어떤 전환에서 불편했는지까지 기록해야 이미지의 문제인지 타이밍의 문제인지 다시 살펴볼 수 있습니다. 한 장면에서 좋았던 선택이 다른 장면에서도 유지되는지 확인하면, 개선의 범위와 남은 제약을 함께 정리할 수 있습니다.
움직이지 않는 상태도 포함하기
캐릭터는 사용자가 계속 바라보는 대상만은 아닙니다. 다른 일을 하는 동안 화면 한쪽에 놓여 있는 장면도 고려해야 합니다. 포인터가 멈췄을 때의 표정과 동작을 함께 보는 이유입니다. 반응이 눈에 잘 들어오는지와 오래 곁에 두기 편한지는 다른 질문이므로, 비교에서도 두 상황을 나누어 살펴볼 필요가 있습니다.
현재 웹은 동작 줄이기·터치·데이터 절약 환경에서 정면을 유지합니다. 움직임을 줄여야 하거나 포인터 중심 반응을 그대로 적용하기 어려운 환경을 별도로 다루는 범위입니다. 새 방식을 비교할 때에도 움직이는 화면만 확인해서는 전체 동작을 설명할 수 없습니다.
아직 어떤 방식이 더 낫다는 비교 결과는 없습니다. 지금 남긴 기준은 입력의 부드러움, 자세의 연결, 반응의 타이밍을 나누어 확인하는 것입니다. 다음 선택은 방향이나 프레임의 개수보다 같은 조건에서 어떤 어색함이 줄고 무엇이 남는지를 근거로 정하려 합니다.
