구매·선물·쿠폰 전 결제 흐름에 본인 재확인 팝업 일관 적용

구매와 선물 흐름 전반에 걸쳐 본인 재확인 팝업을 추가했다. 단순히 기능을 더한 게 아니라, 어느 지점에, 어떻게 일관되게 배치할지가 생각보다 복잡한 작업이었다.

왜 본인 재확인인가

이커머스 플랫폼에서 결제나 거래 실행 직전에 "정말 본인이 맞나요?" 확인하는 절차가 중요해진 이유는 몇 가지다.

먼저 부정거래 방지. 누군가 내 계정에 접근했거나, 세션이 탈취된 상황에서 결제까지 이어지면 피해가 크다. 본인 재확인 팝업은 이런 상황을 한 단계 지연시켜 사용자가 "어? 나 지금 뭐 하는 거지?" 하며 의심할 수 있는 기회를 준다. 특히 선물 흐름에선 결제자와 수령자가 다르므로, 실수 거래가 일어날 확률도 높다.

둘째, 사용자 보호. 휴대폰 하나 놓고 나간 잠깐의 순간, 실수로 터치한 버튼, 또는 의도하지 않은 중복 클릭. 이런 "어?"라는 순간을 잡아줄 수 있다. 이건 보안만 아니라 UX의 신뢰도에도 영향을 준다. "이 플랫폼은 내 실수도 지켜주네" 하는 느낌.

어디에 추가했나

변경한 파일들을 보면 구매와 선물, 쿠폰에 걸친 여러 진입점이 있었다.

이 5개 파일을 수정한다는 건 사실 "같은 팝업을 5곳에 일관되게 넣는다"는 뜻이다. 언뜻 단순해 보이지만, 각 페이지의 레이아웃, 상태 관리, 버튼 배치가 다르다면 골칫거리가 된다.

다중 페이지 변경, 생각해야 할 것들

이런 작업을 할 때 몇 가지 고민했던 지점들:

일관성 vs. 페이지별 최적화
팝업의 외형, 메시지, 동작을 모두 통일할지, 아니면 페이지별로 조정할지. 나는 모양과 메시지는 통일하되, 트리거 타이밍(언제 띄울지)은 각 페이지의 로직에 맡기기로 했다. 예를 들어 checkout에선 "결제하기" 클릭 시, gift에선 "선물 주기 확인" 클릭 시처럼. 사용자 입장에선 서로 다른 페이지지만, 같은 "재확인" 메커니즘이 뒤에 있다는 느낌을 주려고.

테스트 전략
5개 페이지에서 모두 정상 동작하는지 확인하려면? 단위 테스트도 중요하지만, 실제로 장바구니 → 결제, 선물 주기 흐름 같은 엔드-투-엔드 시나리오를 수동으로라도 한 번씩 거쳐야 한다. "cart에만 팝업을 넣고 gift는 빠뜨렸다" 같은 실수를 막으려면. 팀에 알려줄 때도 "체크리스트: 각 5개 흐름 다 시도해봤는지" 정도는 코멘트에 남겨둔다.

레이아웃 충돌
혹시 모달 팝업이 기존 버튼이나 UI 요소와 겹치지 않나? 특히 쿠폰 관련 페이지들은 이미 복잡한 UI를 가지고 있을 수 있다. 그래서 팝업 위치, z-index, 배경 어둡기 같은 것도 한 번 더 검토했다.

배운 것, 다음 때 생각할 것

이런 류 작업을 하고 나면 느끼는 게, 공통 컴포넌트 추상화의 중요성이다. 만약 재확인 팝업이 앞으로 3개, 5개 페이지가 더 필요하다면? 그땐 그냥 JSP의 include 태그로 공통 팝업을 만들거나, 자바스크립트 유틸로 "confirm 재확인" 함수를 만들어두고 호출하는 식이 낫다.

지금 이 작업은 한 번에 여러 페이지를 만져야 했기에, PR 리뷰할 때 "어디가 바뀌었나" 파악하기도 좀 번거로울 수 있겠다. 다음번엔 변경 사항을 설명할 때 "동일한 재확인 팝업 로직을 추가했고, 이 5개 흐름에만 적용"이라고 명확히 정리해두면, 리뷰어들이 수정된 부분과 그 의도를 더 쉽게 이해할 것 같다.

결국 "본인 재확인 팝업"이라는 한 줄 요구사항이 실제로는 여러 결제 진입점을 고려한 일관된 보안 정책 구현이었다. 작은 feature지만, 그 뒤에 있는 사용자 시나리오와 시스템 일관성을 생각하는 게 개발자의 몫이라고 본다.

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

• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →

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