AI 서비스의 로딩 페이지

AI 서비스는 대체로 로딩이 많이 필요합니다. 그렇지만 사용자는 이를 기다려주지 않죠. 구글 리서치 자료에 따르면, 인내심의 한계는 3초라고 합니다. AI로 무언가가 생성되기에는 턱 없이 부족한 시간입니다.

 물론, 빠르게 결과가 나온다면 좋지만, 경량화된 모델을 사용하더라도 아직은 생성되는 기술이 사람의 인내심을 따라잡기는 부족한 상황입니다.

 특히 제가 이번에 하는 프로젝트는 음악 생성 프로젝트이기 때문에 더 오래걸린다는 특성도 가지고 있습니다.

 

그렇다면 로딩페이지는 어떻게 구성할 수 있을까요?

1. 충분한 정보 제공

우리가 흔히 보는 로딩 페이지 종류 중 하나입니다. 얼마나 기다려야하는지, 기다렸는지 보여주며 사용자가 납득할만한 정보를 제공하는 것입니다.

 

스니퍼 로딩

 

프로그래스바 로딩

 

 

2. 속임수

기다림은 심리학의 지배를 받는다 라는 말이 있습니다.

유명한 일화를 하나 소개하고자 합니다. 한 아파트 회사는 엘리베이터의 대기시간이 길다는 아파트 주민들의 불만을 해결하기 위해 엘리베이터를 재설치하는 것이 아닌, 엘리베이터 앞에 거울을 두는 방법으로 이를 해결했습니다. 

 이처럼 심리적으로 '덜 기다린다' 라고만 느끼게 하면 됩니다. 보통 사용자들은 정적인 것보다 동적인 것, 빠른 애니메이션이 있을 때 체감속도가 더 빠르다고 느낍니다.

색이 변하며 역동적으로 표현

이는 유튜브나 인스타그램에서도 적용되는 로딩 화면입니다. 빠르게 다양한 색을 보여주며, 빠르게 진행되고 있다고 느낄 수 있게 합니다.

3. 기억에 남을 긍정적 경험 느끼게 하기

브런치나 사운드 클라우드 등의 사이트는 기존의 스니퍼, 프로그레스 바 등 전통적인 방식을 탈피하고, 새로운 로딩 방식을 선보입니다. 책을 넘기는 애니메이션을 보여주는 브런치 서비스는 아이덴티티를 정확하게 사용자에게 각인할 수 있게 합니다. 이렇게 로딩 화면을 또 다른 어필 요소로 사용하기도 합니다.

사운드클라우드 로딩 화면

 

 

실제 프로젝트 적용

이렇게 다양한 방법이 있지만, 이번 크로플 프로젝트는 음악 생성 웹사이트인만큼 그 특성을 살리고 재미있는 로딩 페이지를 만들고 싶었습니다.

 그리고 AI가 생성되는 동안 프론트단에서의 부담은 적기 때문에 사용자와 상호작용하는 단순한 로딩페이지가 있을까?
라는 고민을 하였습니다. 

 

우리가 흔히 크롬을 사용 중에 인터넷이 연결이 안될 때 '공룡 게임' 이 나오곤 합니다.

크롬 공룡 게임

 

10초 이상을 기다려야 하는 상황이라면 화면만 바라보고 있기에는 지루합니다. 이 공룡게임에서 착안해서 크로플 서비스에서는 음악이 생성되는 것을 기다리는 동안, 사용자가 키보드 피아노를 칠 수 있게 합니다. 사용자가 키보드를 클릭하면 이에 따른 애니메이션과 소리가 제공되는 형태입니다. 크로플 서비스는 타겟이 20-30대인 만큼, 이들의 흥미를 잃지 않게 하고, '나만의 음악을 만들 수 있다'라는 크로플의 이미지를 강화할 수 있는 요소를 넣어보고자 했습니다.

로딩 페이지 프로토타입

 

이번 프로젝트는 팀원들과 사용자가 모두 '흥미'를 잃지 않는 것이 목표이기 때문에 하나의 재미 요소를 이렇게 또 추가해 보았습니다. 여기까지 로딩 페이지까지 어느정도 구성을 마쳤습니다. AI 모델 경량화, 프론트엔드 애니메이션 고도화를 거쳐서 최종 결과물이 만들어질 것 같습니다.

 

 팀 구성이 기획자, AI, 백엔드, 프론트로 구성되어 있다보니 아무래도 디자인적으로도 어떻게 구성해야할지 고민하게 되는 것 같습니다. 어려운 부분도 있지만 하나씩 찾아가며 처음 서비스를 사용하는 사용자에게도 이질감 없이 편리한 서비스를 제공하고, 우리 서비스에 대한 각인을 주기 위해 노력중입니다. 다음주에는 또 프로젝트를 진행하며 어떤 고민을 하고 있고, 어떤 해결책을 만들었는지에 대해 이야기해볼까 합니다.

 

 글 읽어주셔서 감사합니다!

 

레퍼런스

https://brunch.co.kr/@rightbrain/61

긴 로딩으로 인한 사용자 이탈막기