웹사이트 만들기: 저장 버튼을 두 번 누르면
바이브코딩으로 웹사이트를 만들고 신청서를 하나 보냈습니다. 화면이 잠깐 멈춰 있어서 버튼을 한 번 더 눌렀는데, 관리자 목록에는 같은 신청이 두 개 생겼네요. 사용자는 한 번 신청하려고 했는데 서비스는 두 번으로 받아들인 겁니다.
버튼을 잠깐 막는 것부터 시작합니다
저장 중에는 버튼을 다시 누를 수 없게 하고, “신청을 보내고 있어요”처럼 현재 상태를 보여줄 수 있습니다. 성공하면 접수 결과를 안내하고요. 사용자가 기다리는 이유를 알면 같은 버튼을 계속 누를 일이 줄어듭니다.
다만 버튼만 막아서는 부족합니다. 인터넷이 끊겼다가 다시 연결되거나, 응답이 늦어 사용자가 새로 시도할 수도 있으니까요. 화면에서 막는 일과 저장할 때 중복을 막는 일을 나눠봅니다.
같은 시도인지 구분할 기준이 필요해요
신청을 보낼 때 그 시도를 구분하는 요청 번호를 하나 만들고, 응답을 못 받아 재시도할 때는 같은 번호를 사용하도록 정할 수 있습니다. 서버는 같은 번호의 신청이 다시 와도 기록을 새로 만들지 않고, 이미 처리한 결과를 알려주는 방식입니다.
중복 여부를 조회한 뒤 저장하는 것만으로 끝내지는 않습니다. 두 요청이 동시에 들어올 수 있어서, 같은 번호의 신청은 저장하는 순간에도 한 번만 받아들이도록 막는 처리가 필요해요. 구현 방식은 현재 사용하는 DB와 서버 구성에 맞춥니다.
확인할 장면은 세 가지입니다
버튼을 빠르게 두 번 눌러봅니다. 응답이 늦는 상황에서 다시 눌러보고요. 저장은 되었지만 성공 안내를 받지 못한 상황도 시험합니다. 세 경우 모두 신청 한 건과 그 결과를 확인할 수 있어야 합니다.
사용자가 새 내용을 작성해 실제로 두 번째 신청을 하는 일은 막으면 안 됩니다. 같은 요청의 재시도와 새로운 신청을 구분하는 이유입니다.
이런 신청 기능을 AI와 직접 만들어보고 싶다면 컴윗에서 시작해볼 수 있어요. “버튼을 두 번 눌러도 같은 신청은 한 번만 저장하고, 재시도 때는 기존 접수 결과를 보여줘”처럼 사용할 장면부터 설명해보세요.
