안녕하세요. 평판 조회 플랫폼 스펙터의 대문을 담당하고 있는 Frontend 개발자 Matthew입니다.
여느 플랫폼이 그렇듯, 서비스를 처음 사용하는 사용자에게 더 친절하고 싶고 많이 알려주고 싶은 게 구성원들의 욕구입니다.
잘 만든 기능들, 퍼즐처럼 잘 맞춰져 있는 기능들을 조금이라도 친숙하고 쉽게 제공하는 게 중요한 미션 중 하나죠.
스펙터는 굉장히 체계적인 플로우를 가지고 있는 서비스입니다.
크게 이런 플로우를 가지고 지원자, 평판 작성자, 평판 조회자가 조화롭게 플랫폼을 투어하게 되는데요.
이번에는 “평판 조회자”가 서비스를 좀 더 쉽게 이해하고 사용할 수 있게 도와주는 튜토리얼을 개발하게 되었습니다!
실제 개발기간은 이틀이 걸리지 않았고 디자이너와 소통하면서 디테일을 챙기는 과정들을 어떻게 풀었을지 살펴보겠습니다.
미션 시작
이번 미션을 요약하자면 “조회자에게 더 나은 첫 조회 경험을 제공하자!” 입니다.
이에 맞게 우리의 짱짱 기획자와 디자이너들은 전체적인 조회 프로세스를 보여주고 싶어 했습니다.
이런 니즈에 따른 초점으로 보았을 때 제어의 유연성과 커스터마이징에 초점을 두고, 일반적으로 튜토리얼에 사용되는 가이드 투어 방식과 서비스를 소개하는 팝업들을 보여주는 방식을 혼합해 사용했습니다. 따라서 기존에 나와 있는 투어 가이드 라이브러리를 사용하지 않고 직접 구현하게 되었습니다.
사용자 행동 플로우 순서에 맞는 컴포넌트 랜더링
사용자 동작 순서를 지켜서 콘텐츠를 보여주는 방식은 흔히 사용하는 방식입니다. 토스가 제공하는 Slash 라이브러리에도 useFunnel 과 같이 퍼널 순서에 맞게 동작할 수 있게 편의를 제공하는 라이브러리가 이미 있는데요. 스펙터에서는 사용자 퍼널에 맞는 회면들도 있지만 사용자 status에 따라서 달라지는 화면들도 많기 때문에 vue의 slot, template 과 같은 역할을 해주는 유틸을 원했습니다.
스펙터에서 사용 중인 useSlot hook의 간소화된 버전입니다. 이런 식으로 어떤 컴포넌트를 렌더링시켜 줄 것 인지는 외부 코드에 위임하고, 해당 hook에서는 활성화된 컴포넌트를 안정적으로 렌더링할 수 있도록 초점을 맞췄습니다.
한글 자음 모음 타이핑 애니메이션
평판을 조회하는 화면에는 이름과 전화번호를 입력하는 Input이 있는데, “실제 동작하는 input처럼” 사용자에게 예시 화면을 보여줘야 했습니다.
정해진 한글 이름과 전화번호로 사용자에게 보여줄 때, 한글 자음과 모음을 하나씩 분리하고 결합하는 게 필요했습니다.
한글은 유니코드 기반으로 보았을 때 (x, y, z) 형식의 표로 나타낼 수 있습니다.
한글 인코딩의 이해 2편: 유니코드와 Java를 이용한 한글 처리
이렇게 초성, 중성, 종성에 따라 유니코드로 표현할 수 있는데 “가-힣” 까지 모두 코드로 매핑 되어 있습니다.
”장”은 “ㅈ”, “ㅏ”, “ㅇ”로 이뤄져 있고 유니코드 표를 이용해서 각 음절을 분리해야 합니다.
우리는 아래 과정을 거쳐서 음절을 나눌 수 있습니다.
“장”을 유니코드 코드 포인트로 변환
유니코드는 모든 문자에 대한 고유한 숫자를 부여하는 국제 표준입니다.
"장"은 "C815" 유니코드 포인트로 표현됩니다.
“장”과 “가” 사이 거리 계산
"가"라는 한글 문자는 한글 음절 표에서 모든 음절의 기준점입니다.
"가"의 유니코드 코드 포인트는 "AC00"입니다. 따라서 "가"부터의 거리를 계산합니다.“장”과 “가” 사이의 거리를 계산합니다.
초성, 중성, 종성 분리
얻은 거리를 이용하여 초성, 중성, 종성을 계산합니다.
종성: 거리를 28로 나눈 나머지
거리 기반으로 보았을 때, 마지막 28개가 종성이기 때문에 28로 나눈 나머지를 사용합니다.
중성: 거리를 (21x28) 로 나눈 나머지를 28로 나눈 몫
거리를 (21x28) 로 나눈 나머지 → 위 표에서 몇 번째 초성 묶음에 위치했는지 알 수 있습니다.
해당 나머지를 28로 나눈 몫 → 선택된 묶음에서 몇 번째 중성 인덱스에 위치했는지 알 수 있습니다.
초성: 거리를 (21x28)로 나눈 몫
위 표에서 몇 번째 초성 묶음에 위치했는지 알 수 있고, 이는 초성의 인덱스를 가르킵니다.
이런 과정을 거쳐서 우리는 각 음절의 위치를 구할 수 있고, 해당 값으로 초성, 중성, 종성을 나눌 수 있습니다.
나눠진 음절을 실제 사람이 타이핑하는 것 처럼 input에 보여줘야 합니다.
실제 코드를 조금 심플하게 변경한 코드입니다.
차례로 진행되는 애니메이션을 구현하기 위해 yield 를 사용해 동기처리로 하나씩 타이핑이 되는 것 처럼 보여줍니다.
한글을 다시 재조합 하는 과정은 hangul-js를 참고해서 구현했습니다.
어떤가요? 실제 타이핑하는 과정을 자연스럽게 연출하기 위해서 디테일을 챙기는 과정이 흥미로웠습니다.
UI 애니메이션
Frontend에서 애니메이션을 구현할때는 모바일 기기의 성능도 고려해야합니다. GPU가속이나 requestAnimationFrame + 모니터 주사율의 연관성, 각 브라우저 렌더링 엔진(blink, webkit 등)들의 특성 등을 고려해서 reflow가 일어나지 않게 애니메이션을 구현한다면 css only한 애니메이션보다 더 부드럽고 효과적인 애니메이션을 구현할 수 있습니다.
출처: dev.to, Understanding Reflow and Repaint in the browser
이런 부분들을 이미 고려해서 널리 사용되고 있는 Framer를 사용해서 애니메이션을 구현했는데, 애니메이션에 관련된 부분들 보다 비스니스 로직에 좀 더 집중할 수 있어서 좋았습니다. 무조건 모든걸 직접 구현하기 보다 이미 잘 만들어진걸 활용하는건 우리의 시간을 아껴줄 수 있는 방법중 하나입니다.
후기
실제 개발 기간으로 2일 정도 소요되었던 튜토리얼 프로젝트는 기업 관리자들의 사용자 경험 향상과 함께 사용자 초기 이탈률을 낮추고 서비스에 좀 더 집중할 수 있게 도와주기 위한 프로젝트였습니다.
실제 릴리즈 후 전환율에 긍정적인 신호를 주었고 디자이너와 개발자의 좋은 협업 사례였다고 생각합니다. 스타트업에서 애자일하게 일할 수 있는 출발점은 빠른 피드백과 반영이라고 볼 수 있는데요! 이번 프로젝트는 짧은 기간이었지만 높은 개발 자유도와 빠른 디자인 피드백이 좋은 결과를 낼 수 있는 기반이었던 것 같습니다! 😄