by
Nov 03. 2023
튜토리얼을 만들어 보자, 아케이드
툴을 사용해서 간단하게 서비스 튜토리얼 만들기
인트로
오랜만에 작성하는 툴 소개 글이다. 사실 예전부터 짬짬이 써오고 있던 툴인데, 소개를 한 번 하면 좋겠다는 생각이 들어서 작성하게 되었다.
툴의 이름은 아케이드 소프트웨어. 크롬 익스텐션 설치 후 브라우저 녹화 기능을 통해 빠르게 서비스 튜토리얼을 만들 수 있게 도와주는 툴이다.
비슷한 서비스는 이미 몇 개 존재하지만, 그중에서도 UXUI가 제일 심플하고, 사용하기 쉬워서 애정이 가는 툴. 요즘에는 한국의 스타트업들에서도 꽤나 사용하고 있는 것을 볼 수 있다.
최근에 또 재밌는 업데이트를 했다고 메일이 와서 다시 써보려고 각을 재는 중.
https://www.arcade.software/
서비스 가이드의 유형
튜토리얼은 사용자가 제품을 더 잘 사용하기 위한 가이드의 일종이다. 그러므로 가이드의 대표적인 유형을 먼저 알아보자.
정적인 가이드
네이버 웍스의 사용 가이드 ⓒ NAVER WORKS 헬프센터전통적으로 웹 서비스에서 사용자 온보딩 혹은 기능을 설명할 때는 글과 사진 같은 정적인 방법을 많이 사용한다.
위키피디아, 사전과 같은 것을 생각하면 이해하기 쉽다. 이러한 정적인 가이드에서는 기능 등 설명하고자 하는 영역별로 페이지를 가지고, 해당 페이지 내에서 글과 사진을 통해 내용을 설명한다.
사용자가 설명서를 찬찬히 뜯어보듯이, 혹은 궁금한 것이 있다면 두고두고 펼쳐보는 책처럼 상시 대비가 목적 중 하나다.
상호작용이 가능한 가이드
앤트 디자인의 Tour 컴포넌트 ⓒ Ant Design정적인 가이드의 단점은 단방향적 소통으로 인해 사용자의 기억에서 정보가 휘발되기 쉽다는 점이다. 이 때문에 니미 우리는 백번 듣는 것보다 한 번 체험해 보는 것이 기억에 더 남는다는 것을 알고 있다.
그래서 등장한 것이 서로 상호작용이 가능한 가이드이다. 보통 1) 서비스 자체에 코드로 구현하는 방법이나 2) 캡처한 사진을 이어 붙여 사용자가 클릭하면 다음 장으로 넘어가게 하는 형식으로 나뉜다.
서비스 자체에 코드로 구현하는 경우는 위의 앤트디자인의 Tour 컴포넌트를 참고하면 좋다. (위의 사진) 가이드를 주고 싶은 영역에 설명을 팝오버Popover로 제공하며 나머지 배경이 어둡게Dimmed 처리된다는 특징이 있다.
튜토리얼을 쉽게 만들어보자, 아케이드
아케이드 소프트웨어는 앞서 말한 가이드의 유형 중 상호작용이 가능한 가이드에 해당한다. 동작 원리는 툴을 통해 녹화한 화면을 마우스로 클릭하는 단위로 캡처하고, 이를 자연스럽게 이어 붙여 주는 것이다.
사용방법은 아래와 같다.
1. 아케이드 소프트웨어에 회원가입을 한다.
2. 크롬 익스텐션을 설치한다.
3. 설치한 아케이드를 활용해 화면을 녹화한다. (아케이드의 Record 기능)
ⓒ 327roy4. 녹화된 화면을 기준으로 튜토리얼을 편집하고 [Share] 버튼을 누르고, 튜토리얼을 배포Publish해준다.
ⓒ 327roy5. 튜토리얼을 확인한다. 화면에 보이는 포인트를 사용자가 클릭하면 다음 장표로 이동할 수 있고, 해당 포인트에 가이드 텍스틀글 입력할 수도 있다. 아래는 예시 GIF.
서비스 히트 포인트
이 서비스를 되게 잘 만들었다고 느끼는 포인트는 네 개다.
1. 서비스를 켜기만 해도 어떻게 사용해야 할지 알 수 있다. 그만큼 UXUI가 상당히 직관적이다. 정말로.
2. 튜토리얼의 공유 방식을 다양하다. 가령 요즘처럼 노션 페이지를 통해 서비스의 업데이트 이력을 공유하는 경우를 고려해 노션 혹은 컨플루언스에 임베드할 수 있도록 임베드 코드를 제공한다. 아래 사진은 노션 페이지에 아케이드로 만든 튜토리얼을 임베드한 것. 컨플루언스 등 요즘 대부분 지식베이스 툴에서는 임베드 기능을 제공하는 만큼 유연하게 사용할 수 있다.
ⓒ 327roy3. 그리고 편집이 아주 간편하다. 간편한 이유는 기능의 복잡도가 낮기 때문인 것 같다. 복잡도가 낮은 이유는 1) 정말 사용자들이 사용한다고 생각한 기능만 추가한 것과 2) 연혁이 오래되지 않았기 때문이 아닐까.
4. 튜토리얼에 대한 사용자 행동의 추적이 가능하다.
ⓒ Arcade Software