모바일 사용자의 유입을 놓친 것 같다

홍보를 열심히 하고 있다. 정말 감사하게도, 최근 새로 가입한 분이 10명이나 됐다. 방문자와 페이지 조회수는 훨씬 높았다. 덕분에 난생 처음 느껴보는, 왠지 모를 감정들이 올라오기도 했었다.

'물 들어올 때 노 저어야지.' 이렇게 생각했다. 사용자가 글을 쓰고 싶은 상태에서, Sprinters를 이용해야하는 이유를 만들어야 했다. 강력한 유인 요소가 필요했고, 블로그 플랫폼에서 필요한 기본적인 기능들도 턱없이 부족하다 생각했다.

그런데 개선이 필요한 곳은 따로 있었다. 사용자 유입에 중요한 회원가입/로그인 페이지의 모바일 환경이 정말 별로였다는 것을 뒤늦게 발견했다.

데스크톱이 더 많긴 하지만, 방문자 수는 거의 5:5 비율로 모바일 또한 높다. 그런데 모바일에서 로그인이나 회원가입의 UX가 완전 💩이었던 것이다. 💩인 부분을 하나씩 보고, 어떻게 개선했는지 기록해본다.

모바일 환경에서 💩이었던 부분들

1. 이메일 회원가입 흐름 유실

이메일로 회원가입을 하려면, 해당 이메일 계정으로 인증을 해야한다. 이메일과 비밀번호를 입력한 뒤 인증 메일을 보냈다는 토스트 메시지와 함께 로그인 페이지로 리다이렉트를 시켰었다. 여기서 모바일은 토스트 UI가 작아 메시지를 놓치거나, 키보드에 가려져 못 보는 경우가 생긴다. 따라서, 회원가입은 된건지, 여기서 뭘 더 해야하는 건지 혼란이 생기고, 심지어 버그인 줄 알고 다시 회원가입 시도를 하는데 계속 실패가 떠서 회원가입을 포기했다는 피드백도 받았다.(로그인 페이지에서 가입 시도를 한 것이다.)

고민 끝에 내린 결정은 인증 메일 안내용 페이지를 따로 만드는 것이었다. 해당 이메일 계정에서 인증을 하면 바로 로그인 처리가 되기 때문에, 가입 후 인증 없이 로그인 페이지로 리다이렉트 시키는 것은 의미가 없었다. 또한 토스트 메시지는 데스크톱에서 오른쪽 하단에 위치했기 때문에, 데스크톱에서도 놓치기 쉬운 부분이라 생각해 아예 안내용 페이지를 제작했다.

그럼 사용자는 이메일과 비밀번호를 입력 후 제출 -> 안내용 페이지로 이동을 하고 -> 인증 메일 발송 메시지를 확인 -> 이메일 인증 -> 로그인 순서로 사용자 흐름이 개선된다.

2. 입력 필드 자동 확대

이번에 처음 알게된 사실인데, 모바일에서는 16px 미만의 input 에 포커스가 가면 자동으로 확대해서 글자를 키워주는 접근성 휴리스틱이 존재한다. 모바일 화면에서의 가독성이 나쁘지 않았고, 예상과 다른 동작 + 확대로 인한 화면 가림이 오히려 혼란을 줄 수 있다고 생각했다. 결국, 해당하는 input 의 폰트 사이즈만 16px로 수정했다.

3. 불필요한 스크롤

min-height: 100vh 는 데스크톱에서는 문제없지만, 모바일에서는 의도와 다른 경우가 생긴다. 모바일 브라우저에서 100vh 는 URL 바와 하단 툴바가 모두 숨겨졌을 때의 최대 뷰포트 높이를 기준으로 계산되기 때문에, 항상 스크롤이 생기는 문제가 있었다.

위와 같은 모바일 페이지에서 스크롤이 생긴다면 어떨까? 사소해보이지만, 실제로 콘텐츠의 높이가 짧은데 스크롤이 생기면 많이 이상하다. URL 바 노출 상태에 맞춰, 자연스럽게 동적(dynamic)으로 줄었다 늘었다 하도록 min-height: 100dvh 를 적용했다.

4. 유효성 검증 + 비밀번호 토글

유효성 검증도 보강했다. 클라이언트, 서버 모두 유효성 검증으로 클라이언트 우회를 막고, 클라이언트에서는 사용자가 입력 도중엔 에러 메시지를 표시하지 않고, 해당 칸을 떠난 뒤부터 검증하도록 개선했다. 이메일 중복의 경우 API 요청이 필요해서 디바운스를 적용했다.

비밀번호 표시 토글은 왜 이제야 추가를 했을까? 기본적인 부분인데 너무 늦게 적용했다. 특히 모바일에서는 직접 타이핑해야하는 경우가 많고, 화면이 작기 때문에 비밀번호를 잘 입력했는지 확인할 창구가 필요하다.

소 잃고 외양간 고치기

이번에는 소 잃고 외양간을 고친 느낌이다. 이미 소는 잃었지만, 다시 들어올 소들을 위해 외양간을 단단히 고쳐놔야겠다. 할 게 많아서 좋다. 요즘같이 시간이 쏜살같고, 바쁜 시기가 없었던 것 같다. 무언가를 만든다는 게 이렇게 재밌는 거였는데, 꽤 잊고 지냈었나 보다.