저는 얼마 전에 회사에서 운영하고 있던 Focus Keeper의 랜딩 페이지를 리뉴얼하는 작업을 진행했습니다.
단순 페이지 리뉴얼이라서 별 기대를 하지 않았었는데 단순 사용성만 수정했음에도 불구하고 놀라울 정도의 지표가 측정되어 공유드리고자 이 글을 작성했습니다.
Focus Keeper는 뽀모도로 기법을 차용하여 성인 ADHD 환자나 집중력이 낮은 사람들이 보다 높은 집중력을 오래 유지할 수 있도록 도와주는 서비스입니다.
이 서비스는 약 2년 전 부터 웹 서비스가 개발되어 한창 운영 중에 있었습니다.
그러나 이 때 당시에는 iOS에서 운영 되고 있는 앱으로 접속을 유도하는 형태의 단순한 랜딩만을 목적으로 두었기에 서비스의 여러 부분들이 다소 미흡하였고, 경쟁 프로덕트 대비 복잡한 UI로 인해 사용자가 집중해야 할 영역이 다소 모호했던 부분이 있었습니다.
그렇게 적당한 수준의 신규 유입과 리텐션만을 유지한 상태로 2년 정도 방치 되어왔던 프로덕트였는데, Focus Keeper 2.0 런칭을 예정하고 있어서 기존 랜딩 페이지도 전체적으로 손보게 되었습니다.
달라진 점
타이머
위: 예전 Focus Keeper, 아래: 현재 Focus Keeper
이번 랜딩 페이지 영역에서 가장 크게 달라진 부분이자, 시간이 흘러가는 시각적 효과가 재밌어서 개발하면서도 엄청 만족스럽게 작업했던 부분입니다.
기존에는 원형의 타이머가 시간이 흘러감에 따라 테두리의 색상이 줄어드는 단순한 효과였는데, 물결이 차오르고 줄어드는 애니메이션으로 변경되어 멍하니 보고 있어도 재밌는 타이머가 완성되지 않았나 싶습니다.
파도 애니메이션을 구현하기 위해 사용한 라이브러리는 React Wavify입니다.
파도의 파고, 진폭 등을 손쉽게 제어할 수 있어서 사용하긴 했는데 requestAnimateFrame API를 기반으로 SVG의 path를 설정하기 때문에 성능이 좋지 못하다는 점이 단점입니다.
한정 된 시간 안에 랜딩 페이지의 제작을 마무리 해야 해서 최적화를 하지 못한게 다소 아쉬움이 남습니다.
시간 제어
뽀모도로 타이머는 기본적으로 25 / 5 / 30 분의 시간이 기본 값이지만 사용자의 습관이나 취향에 따라 시간 조절을 할 필요도 분명히 존재합니다.
기존에는 시간을 조정하는 기능이 ‘Timer Option’ 내부에 배치되어 있어서 시간 조작이 다소 불편함이 있었는데, 타이머의 바로 아래에 배치함으로써 보다 직관적으로 시간 조정을 할 수 있게 되었습니다.
랜딩 애니메이션
개발한 Focus Keeper 페이지는 곧 런칭할 2.0 버전을 위해 신규 유저의 유입 및 리텐션을 증진 시키기 위함에 목적을 두고 있습니다.
이로 인해 리뉴얼 이전 화면보다는 더욱 시인성 있고 재미 있는 랜딩 페이지를 만들어 사용자로 하여금 이목을 집중 시켜야 합니다.
디자이너분과 긴밀한 협의 끝에, 스크롤 애니메이션을 통해 페이지를 보다 동적으로 제작하여 Focus Keeper를 사용하는 유저들에게 Benefits을 효과적으로 전달하고자 했습니다.
해당 애니메이션을 구현하기 위해 Framer Motion 이라는 라이브러리를 사용했습니다.
Framer Motion에는 애니메이션의 구현을 도와줄 컴포넌트와 유틸함수가 존재하는데, 스크롤 애니메이션을 구현하기 위해 useInView 라는 React Hook을 사용하였습니다.
Motion Framer를 사용한 이유
Motion Framer를 사용한 이유는 크게 세가지입니다.
첫번째로는 시간이 너무 부족해서 디자이너와 프론트엔드가 동시에 작업을 시작했어야 했고, 그렇다보니 애니메이션을 어떻게 구현할지 정확하게 정해지지 않아 애니메이션 효과를 직접 제작해보면서 적절한 작업 효율과 임팩트를 협의할 필요가 있었습니다.
이 과정에서 Framer Motion은 복잡한 수준의 애니메이션을 직접 제작할 수 있는 여러 편의기능을 지원하기 때문에 매우 용이하게 작업할 수 있었습니다.
두번째로는 웹 접근성입니다.
우리는 대부분의 경우 웹사이트에서 발생하는 역동적인 애니메이션 효과를 봤을 때 별다른 불편함을 느끼지 않습니다.
하지만 일부 유저의 경우 아주 자그마한 애니메이션에도 멀미를 심하게 느끼기도 합니다.
이런 유저들은 대부분 브라우저나 모바일 기기 설정에서 애니메이션 여부를 비활성화 하고 서비스를 이용하는데, 애니메이션을 자체적으로 제작한다면 이러한 기기 설정에 대한 예외 처리도 직접 해야합니다.
하지만 Framer Motion은 Accessibility 에 대한 설정값을 쉽게 제어할 수 있는 유틸함수를 제공합니다.
마지막으로는 선언적인 코드를 작성하기 위함입니다.
keyframes를 활용하여 CSS Animation 코드를 직접 작성하고 실행한다면 애니메이션의 구현부, 실행부가 서로 따로 놀게되어 추후 유지보수 작업을 진행할 때 코드를 읽기 매우 힘들어질 우려가 있습니다.
Framer Motion 라이브러리는 motion.div와 같은 애니메이션 컴포넌트를 지원하고, Variants를 통해 해당 Element에 적용 되는 애니메이션을 직접 제어할 수 있어서 선언적인 코드를 작성할 수 있습니다.
모바일 최적화
모바일 최적화
모바일 최적화는 원래 매우 촉박했던 개발 기간으로 인해 대응하지 않으려고 했으나, 기존 Focus Keeper를 모바일에서 사용하시던 유저분들의 비중이 약 40% 정도였기에 그 수치가 적지 않아 추가적인 작업을 진행하게 되었습니다.
기존 랜딩 페이지는 거대한 타이머를 Viewport 크기에 맞추어 적절한 크기로 변경한 수준이라 모바일에서 사용하면 버튼 터치나 시간 제어 측면에서 사용성이 그다지 좋지 못했습니다.
이러한 문제점을 모바일에 적합한 레이아웃을 새로 디자인하여 Device의 크기에 맞게 반응형으로 제작하였습니다.
반응형은 총 4Steps의 Break Points를 지정하고 개발하였습니다.
- 데스크탑: ~ 1366px
- 랩탑: 1365px ~ 960px
- 타블렛: 959px ~ 600px
- 모바일: 599px ~ 0px
이렇게 반응형의 규격을 명확하게 작성하게 되면 매우 어중간한 해상도의 경우에도 렌더링 결과를 예측할 수 있게 되고, Grid 레이아웃과 결합되면 별다른 추가 작업 없이도 반응형을 구현할 수가 있기 때문입니다.
회고
프로젝트를 진행하며 느낀 점
처음에는 많이 부족하지 않나 싶은 제작 기간이었으나 여러 타협과 고민을 통해 기간 내 제작이 이루어질 수 있었습니다.
특히 이전 까지는 ‘언제까지 무엇을 개발해라.’ 라는 과제가 주어지면 이를 있는 그대로 개발 하였기 때문에 만드는 과정도 힘들고 결과물도 좋게 나오지 않아 만족감이 덜한 경우가 종종 있었습니다.
하지만 이번 스프린트를 통해 이러한 기획이 탄생하게 된 배경을 근본적으로 이해하고, 기한 내에 할 수 있는 다른 옵션을 역제안 하는 방법을 터득하여 모두가 납득할 수 있는 결과물이 나오지 않았나 싶습니다.
매우 성공적인 성과
랜딩 페이지를 런칭하고 정확히 4일 뒤에 측정 된 성과 지표는 매우 성공적이었습니다.
- 신규회원 가입율: 6.5% -> 12% (85% 상승)
- 신규유저의 ‘포커스 시작’ 비율 지난 1년 기준 최고치 달성: 54%
- ‘포커스 시작’ 이후 ‘포커스 완료’ 비율: 28% -> 63% (125% 상승)
이 지표를 거머쥐었을 때 기쁨도 기쁨이지만 그것보다 더욱 크게 다가온 것은 놀라움이었습니다.
사실 이번 랜딩 페이지 리뉴얼 작업은 UI/UX를 중심으로 변경이 되었을 뿐이지 별도의 마케팅이나 검색 엔진 최적화를 진행한 것은 아니기 때문에 유저들의 유입 경로는 평소와 동일했을 것입니다.
그러나 신규 가입율, 사용율, 첫번째 업적 달성율이 모두 증가했다는 것은 단순히 UX 변경에 유저들이 호응하고 프로덕트를 이용할 동기를 얻었다는 뜻이 됩니다.
이러한 성과 지표를 보면서 재밌고 직관적인 UX는 사용자로 하여금 매우 빠른 반응을 얻어낼 수도 있다는 것을 깨닫게 되었습니다.