너무 당연하게도 윈도우 QA를 하지 않았다
이전 글에서 이탈률 82%를 공유했습니다. 유저의 대부분이 8초 만에 떠나고 있었습니다.
랜딩 페이지를 뜯어고쳤습니다. 실제 앱 스크린샷 사례를 넣고, 첫 화면에서 "이걸로 뭘 만들 수 있는지" 바로 보이게 바꿨습니다.
며칠 뒤 GA4를 열어봤습니다.
활성 사용자 103명. 평균 참여 시간 19초. 이탈률 77.9%.
8초에서 19초. 82%에서 77.9%.
엄청난 변화였습니다. 방향은 맞았습니다.
신나는 마음으로 더 개선할 수 있는 부분이 없는지 체크해봤습니다.
그런데 큰 문제를 발견했습니다.
윈도우에서 한번도 열어보지 않았다
윈도우에서 열어봤습니다.
랜딩이나 생성 화면은 괜찮아 보였습니다.
하지만 에디터에서 문제가 터졌습니다.
왼쪽 업로드 패널이 찌그러져 있었습니다. 가운데 프리뷰 영역의 비율이 맞지 않았습니다. 폰트가 깨졌습니다. 다크모드 렌더링도 달랐습니다.
정작 사용자가 가장 오래 머무는 에디터에서 터진 겁니다.
모바일은 더 심했다
설마 하면서 모바일로도 열어봤습니다.
에디터 3컬럼 레이아웃이 모바일 화면에 그대로 들어가 있었습니다. 모바일에서 쓸 수 있는 상태가 아니었습니다.
랜딩 페이지의 데모 영역도 깨져있었습니다.
수치가 좋아지고 있어서 신났는데, 그 뒤에서 윈도우 유저와 모바일 유저는 버그 투성이 화면을 보고 있었습니다.
원인은 디자인 시스템이었다
바이브코딩으로 만들다 보면 디자인이 페이지마다 따로 놉니다. 통일성이 필요해서 Apple HIG(Human Interface Guidelines)를 디자인 시스템으로 적용했습니다.
맥에서는 깔끔했습니다. 하지만 Apple 기반 디자인 시스템이니까 윈도우와 모바일에서 최적화 이슈가 생기는 건 당연한 겁니다.
근데 그걸 한번도 확인하지 않았습니다.
나는 맥을 쓰니까. "당연히 되겠지" 하고 넘긴 겁니다. 그게 더 위험했습니다.
에디터에도 기능을 추가했다
깨진 레이아웃들을 고치면서 에디터에도 기능을 추가했습니다.
기존에는 스크린샷을 올리면 위치가 고정이었습니다. 그런데 타 서비스의 스크린샷을 보다보니 appkit처럼 정가운데가 아니었습니다.
그래서 좌우, 상하 위치를 직접 조정할 수 있는 슬라이더를 넣었습니다.
유저들을 위해 예시를 넣었던게 내 서비스의 발전을 이끌었습니다.
서비스를 개발할 때 놓치기 쉬운 것
만든 사람 환경에서만 확인하고 넘어갑니다. "돌아가니까 됐다"에서 멈춥니다.
저도 10년 가까이 일하면서 늘 조심했지만, 이번에 똑같은 실수를 반복했습니다.
이젠 더 많은 서비스를 만들어야하기에 만들었다고 끝이 아닌 사용자 입장에서 테스트를 여러번 하는 습관을 만들겠습니다.
자나깨나 버그조심, 맥에서 확인했으면, 윈도우에서도 열어보고, 모바일에서도 열어보자.