보이지 않는 프론트엔드: 제품을 살리는 작은 결정들
최고의 프론트엔드 작업은 데모에서 결코 드러나지 않습니다.
사람들은 그것을 스크린샷으로 찍지 않습니다. 하지만 이런 작업이 없다면 사용자는 제품을 떠나게 되고, 당신은 그 이유를 영원히 알 수 없습니다. 이 작업은 화면과 탭, 그리고 백엔드 사이의 간극에서 일어납니다.
큰 손실을 막아주는 작은 수정 사례 세 가지를 소개합니다.
- 로그인 오류 수정
예전에 프론트엔드는 로그인이 성공했는지 확인하기 위해
status필드를 체크했습니다. 백엔드에서 유효한 토큰을 보냈지만status값은null로 보냈습니다. 그 결과 사용자는 권한이 있음에도 불구하고 앱에서 거부되었습니다.
해결 방법은 간단했습니다. 이제 프론트엔드는 성공 여부를 확인하기 위해 토큰 자체를 체크합니다. 문서 내의 모호한 필드 하나가 사용자에게는 닫힌 문이 될 수 있습니다.
- 인증 링크 수정 사용자가 새 탭에서 링크를 클릭하면, 기존 탭은 인증되지 않은 상태로 남아 있습니다. 기존 탭은 서버에 업데이트를 요청할 수 없습니다.
저는 브라우저의 storage event를 사용했습니다. 한 탭이 localStorage에 값을 쓰면 다른 모든 탭이 즉시 이를 알 수 있습니다. 이는 탭 사이의 무료 메시지 버스(message bus) 역할을 합니다. 이를 통해 온보딩 과정에서의 막다른 길을 제거할 수 있습니다.
- 쿨다운 타이머 수정 앱 상태(app state)에 저장된 "30초 후 이메일 재전송" 타이머는 사용자가 페이지를 새로고침하면 초기화됩니다. 그러면 사용자들이 버튼을 계속해서 연타하게 되고, 이는 이메일 발송 비용 증가로 이어집니다.
해결 방법은 카운트다운 대신 마감 시한(deadline)을 저장하는 것이었습니다.
- 쿨다운이 종료되는 정확한 타임스탬프를 저장합니다.
- 새로고침할 때마다 남은 초를 다시 계산합니다. 이를 통해 어뷰징을 방지하고 예산을 보호할 수 있습니다.
창업자에게 이것이 중요한 이유:
• 로그인 수정은 사용자 활성화(activation)를 보호합니다. • 탭 간 신호 전달은 전환율(conversion rates)을 보호합니다. • 쿨다운은 마진을 보호하고 어뷰징을 방지합니다.
훌륭한 엔지니어링은 단순히 인터페이스를 보기 좋게 만드는 것이 아닙니다. 간극(gaps)에 집착하는 것입니다. 이 수정 사항들은 각각 50줄 미만의 코드로 이루어졌습니다. 가치는 문제를 발견하고 적절한 위치에서 해결하는 데서 나옵니다.
출처: https://dev.to/virendra2902/the-invisible-frontend-small-decisions-that-quietly-save-a-product-1pkl