이전 입력값 패널 추가로 재방문 마찰 제거

사용자가 다시 방문했을 때 이전에 입력했던 값을 빠르게 재사용할 수 있도록 로컬스토리지 기반 히스토리 패널을 추가했다. 재방문율을 높이고 입력 과정의 마찰을 줄이려는 의도다.

왜 이 기능이 필요했나

Retention을 개선하려는 목표를 잡았을 때, 우리가 직면한 현실은 이랬다. 사용자가 첫 방문에선 입력 페이지를 쉽게 통과하지만, 재방문할 때는 같은 형태의 입력을 다시 처음부터 타이핑해야 한다는 게 생각보다 큰 불편함이었다. 특히 모바일 사용자들은 더욱 그렇다.

우리가 한 설문이나 사용성 테스트에서도 "이전에 입력한 것처럼 빠르게 하고 싶다"는 피드백이 여러 번 나왔다. 이걸 해결하는 게 간단해 보이지만, 실제로는 몇 가지 고민할 거리들이 있었다. 서버에 저장할 것인가, 브라우저 로컬에만 저장할 것인가. 개인정보로 분류되는 입력값을 어떻게 다룰 것인가. 히스토리가 쌓일수록 느려지진 않을까.

결국 우린 로컬스토리지로 결정했다. 첫 번째 이유는 빠르다는 거다. 서버 왕복 없이 브라우저에서 즉시 렌더링되니까. 두 번째는 프라이버시다. 민감한 입력값을 서버에 저장하지 않으면 보안/개인정보 관리 리스크가 훨씬 낮아진다. 세 번째는 비용이다. 별도 데이터베이스 공간이나 API 엔드포인트를 관리할 필요가 없다.

구현 전략: 로컬스토리지 + UI 패널

Astro 페이지에 localStorage를 활용한 히스토리 패널을 구현했다. 기본 흐름은 단순하다. 사용자가 입력값을 제출할 때마다 그 값을 로컬스토리지에 저장하고, 페이지를 로드할 때 저장된 히스토리를 읽어서 사이드 패널이나 드롭다운으로 노출한다. 사용자가 히스토리에서 하나를 선택하면 입력 폼에 자동으로 채워진다.

이 경우에는 로컬스토리지가 딱 맞았다. 재방문 편의성이 목표고, 한 기기에서의 빠른 재사용이 핵심이니까.

설계 시 생각했던 것들

히스토리 개수와 용량 관리

로컬스토리지는 용량 제한이 있으므로, 무한정 히스토리를 쌓을 순 없다. 보통 최근 10개 정도만 유지하고, 초과분은 자동으로 제거하는 방식을 썼다. 이렇게 하면 스토리지 부담을 줄이면서도 사용자 입장에선 충분한 편의성을 제공한다.

개인정보 취급

입력 폼에 따라 민감도가 다르다. 공개해도 되는 값(예: 검색어, 카테고리)과 민감한 값(예: 비번, 결제 정보)이 섞여 있을 수 있다. 그래서 우린 히스토리 패널 자체에 "이 데이터는 로컬에만 저장되며 언제든 삭제할 수 있습니다"라는 명시적인 안내를 넣었고, 사용자가 한 번에 전체 히스토리를 지우는 버튼도 제공했다.

디버깅과 테스트

로컬스토리지는 개발자 도구에서 보이므로, 테스트할 때는 쉽지만 제품 배포 후에는 사용자 브라우저에 저장되는 데이터를 제어할 수 없다. 그래서 충분한 로컬 테스트와 스테이징 환경에서의 검증이 중요했다. 특히 다양한 브라우저에서 localStorage 동작이 동일한지 확인해야 했다.

회고와 배운 점

이번 작업을 통해 다시 한 번 깨달은 게 있다. 때론 거대한 인프라 투자보다 작은 UX 개선이 사용자 만족도를 크게 높일 수 있다는 거다. 로컬스토리지를 활용한 이 기능은 코드 라인도 많지 않고, 배포도 간단하지만, 사용자 입장에선 "아, 이게 왜 없었지?"라고 느낄 정도의 편의성을 제공한다.

또 한 가지는 팀 내에서 retention과 개발 우선순위를 논의할 때다. 때론 우리는 큰 기능부터 만들고 싶어 한다. 새로운 페이지, 새로운 API, 대대적인 리팩토링. 하지만 현실의 retention 문제는 종종 이런 작은 마찰 지점에서 비롯된다. 그 마찰을 해소하는 게 결국 사용자를 붙잡는 길이다.

다음 번에는 유사한 입력 패턴들의 히스토리를 통합 관리하거나, 다기기 동기화를 고려해볼 만할 것 같다. 물론 그 땐 서버 스토리지로의 전환과 개인정보 정책 검토가 필수겠지만.

🛒 이 글과 어울리는 추천 상품

• 사무의자 쿠팡에서 보기 →
• 모니터암 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.