개발 기술 · 더 알아보기 · 직접 체험형

장바구니 옵션·수량 변경, 앱과 서버는 금액을 어떻게 맞출까요?

선택값 검증부터 서버 가격 계산·저장·재조회까지 연결하는 개발 과정

선택값과 저장값 구분서버 기준 가격 계산저장 후 독립 조회
장바구니 옵션·수량 변경, 앱과 서버는 금액을 어떻게 맞출까요?. 장바구니 금액을 맞추는 과정. 옵션·수량 입력, 서버 조건 확인, 계산한 값 저장, 저장값 재조회를 연결합니다.

작동으로 살펴보는 개발 과정

선택을 바꾸면, 저장된 금액도 맞아야 합니다

옵션과 수량을 바꾼 뒤 저장해 보세요. 입력 중 예상 금액과 서버에서 다시 읽은 장바구니 금액을 나란히 확인할 수 있습니다.

기본 1개 → 대형 2개로 바꿔 보세요. 저장 후 상품 합계가 18,000원에서 48,000원으로 바뀝니다. 수량 6개 요청은 거절되고, 마지막 저장값은 유지되는지 확인합니다.
시연을 별도 화면으로 열기

단계별 개발 판단

앱의 선택과 서버의 계산을 연결합니다

장바구니에서 상품 크기를 바꾸고 수량을 늘리면 합계도 달라집니다. 앱 화면에서는 간단한 계산처럼 보이지만, 화면에 표시한 금액과 서버에 저장한 금액이 서로 다르면 다음에 장바구니를 열었을 때 다른 결과를 보게 됩니다. 화면에서 선택할 수 없던 옵션이나 수량을 서버에 직접 보내는 경우도 생각해야 합니다.

데브크래프트는 이런 기능을 만들 때 사용자가 바꾸는 선택값과 서버가 확정하는 가격·저장값을 나눠 연결합니다. 앱은 선택 중인 내용을 보여주고, 서버는 현재 상품 조건으로 계산한 결과를 저장합니다. 마지막에는 저장된 장바구니를 다시 읽어 화면과 같은지 확인합니다.

데스크매트의 기본형은 18,000원, 대형은 24,000원이고 수량은 1개부터 5개까지 선택하는 장바구니로 살펴보겠습니다. 기본형 1개를 대형 2개로 바꾸면 상품 합계는 48,000원입니다. 이 글은 이 한 항목의 옵션·수량 변경에 집중하며 쿠폰·포인트·배송비·주문·결제 처리는 포함하지 않습니다.

개발 단계 01

선택 중인 값과 저장된 결과를 나눕니다

처음 장바구니를 열면 서버에 저장된 ‘기본형 · 1개 · 18,000원’을 읽습니다. 이후 사용자가 대형과 2개를 선택하면 앱은 입력값을 바꿔 보여줍니다. 이 순간 선택 화면이 바뀌었다고 서버의 장바구니까지 바뀐 것은 아닙니다.

구현 판단

이 단계에서 정하는 것은 버튼 모양만이 아닙니다. 어느 값이 사용자의 현재 선택이고, 어느 값이 서버에서 마지막으로 확인한 결과인지 화면 상태부터 나눕니다. 이후 요청이 거절되거나 응답이 늦어져도 두 값을 혼동하지 않게 하는 기준입니다.

처리 기준 자세히 보기

그래서 화면에는 ‘변경할 옵션·수량’과 ‘저장된 장바구니’를 구분해 둡니다. 선택 중에는 저장 전이라는 사실을 알리고, 변경을 요청한 뒤에는 처리 중 상태를 표시합니다. 서버 결과를 받기 전에 ‘변경 완료’로 표시하지 않는 것입니다.

선택 화면에서 예상 금액을 계산해 보여줄 수도 있지만, 그 값은 저장 결과와 구분해야 합니다. 이번 흐름에서는 서버가 확인한 상품 합계를 저장 결과로 보여주도록 정합니다. 앱의 계산식과 서버의 계산식이 우연히 같다는 이유만으로 저장이 끝났다고 판단하지 않습니다.

개발 단계 02

서버는 옵션·수량과 상품 조건을 다시 확인합니다

변경 요청에는 장바구니 항목, 선택한 옵션의 식별값과 수량을 보냅니다. 서버는 요청자가 해당 장바구니 항목을 바꿀 수 있는지 확인하고, 선택한 옵션이 그 상품에 속하는지와 현재 선택 가능한 상태인지 검사하도록 구성합니다. 화면에 옵션 목록이 있다는 것만으로 요청값을 신뢰하지 않습니다.

구현 판단

이 단계의 결과는 ‘대형이면서 수량 2개인, 변경 가능한 요청’입니다. 존재하는 옵션인지 확인하는 것과 그 옵션이 이 상품에 적용되는지 확인하는 일도 함께 맞춥니다.

처리 기준 자세히 보기

수량도 숫자라는 사실만으로 충분하지 않습니다. 이번 규칙은 1부터 5까지의 정수입니다. 0개·6개·소수·문자열 같은 값은 허용하지 않습니다. 앱에서 잘못된 선택을 막아도 서버에서 같은 핵심 조건을 확인해야 화면을 거치지 않은 요청에도 규칙을 적용할 수 있습니다. OWASP 입력값 검증 안내도 서버에서 형식과 허용 범위, 값 사이의 의미를 확인하도록 설명합니다.

가격은 앱이 보낸 숫자로 확정하지 않습니다. 서버가 상품·옵션의 현재 가격을 읽어 대형의 단가가 24,000원인지 확인합니다. 이번 요청 형식에는 단가나 합계 필드를 두지 않고, 그런 값을 끼워 보낸 요청은 거절하도록 정합니다. 화면에서 가격 입력란을 숨기는 것보다 서버가 받아들일 값을 분명히 정하는 일이 먼저입니다.

개발 단계 03

서버가 계산한 옵션·수량·금액을 함께 저장합니다

조건을 통과하면 서버가 확인한 단가 24,000원에 수량 2개를 곱해 상품 합계 48,000원을 계산합니다. OWASP 업무 로직 보안 안내는 가격과 합계를 클라이언트의 입력값에 맡기지 않고 서버의 기준 데이터로 계산하는 방식을 설명합니다.

구현 판단

여기서 저장하는 48,000원은 이번 변경을 처리하며 확인한 상품 합계입니다. 장바구니를 나중에 읽는 일과 가격을 새로 계산하는 일도 구분합니다. 이 값이 주문·결제 시점까지 고정되거나 재고를 확보했다는 뜻은 아니며, 그 시점의 확인은 별도 흐름에서 다룹니다.

처리 기준 자세히 보기

장바구니 항목에는 같은 변경에 속한 옵션·수량·단가·상품 합계를 함께 반영하도록 구성합니다. 옵션만 대형으로 바뀌고 합계는 기본형 1개의 18,000원으로 남는 중간 결과를 성공으로 제공해서는 안 됩니다. 저장이 확정된 뒤 변경 버전을 응답하고, 앱은 별도의 조회로 저장 결과를 읽습니다.

다른 화면에서 같은 항목을 먼저 바꾼 경우도 구분합니다. 앱은 마지막으로 읽은 변경 버전을 함께 보내고, 서버는 현재 버전과 맞는지 확인하도록 정합니다. 이미 다른 변경이 저장됐다면 오래된 선택으로 덮어쓰는 대신 충돌을 알리고 현재 장바구니를 다시 읽게 합니다. 버튼을 잠그는 것만으로 여러 화면의 변경까지 막았다고 보지 않는 이유입니다.

개발 단계 04

잘못된 변경과 결과를 확인하지 못한 상황을 구분합니다

대형 2개가 저장된 상태에서 수량 6개를 요청하면 서버는 허용 범위를 벗어났다는 이유로 거절하도록 만듭니다. 기존 장바구니는 대형 2개·48,000원을 유지합니다. 일부 항목부터 바꿔 놓고 나중에 오류를 돌려주는 방식으로 처리하지 않습니다.

구현 판단

오류 처리는 빨간 문구를 띄우는 작업으로 끝나지 않습니다. 입력을 고치면 되는지, 다른 변경을 먼저 읽어야 하는지, 저장 여부를 다시 확인해야 하는지를 나눠 다음 행동으로 연결합니다.

처리 기준 자세히 보기

앱은 수량 입력 옆에 ‘1개부터 5개까지 선택할 수 있습니다’라고 안내하고, 저장된 결과는 별도로 유지합니다. 사용자가 6개를 입력했다는 사실과 서버에 6개가 저장됐다는 사실은 다릅니다. 선택을 수정할 수 있게 하면서도 실패한 값을 저장 완료처럼 보여주지 않아야 합니다.

반면 변경 응답을 받지 못한 상황은 서버가 거절했다고 단정할 수 없습니다. 서버에 저장은 됐지만 응답만 도착하지 않았을 수 있기 때문입니다. 이때는 ‘변경 결과 확인 필요’로 안내하고 저장된 장바구니를 다시 조회하는 흐름을 둡니다. 이전 금액으로 즉시 되돌리거나 같은 변경을 무조건 반복하는 대신, 현재 확인할 수 있는 결과부터 읽는 것입니다.

개발 단계 05

저장된 장바구니를 별도 조회해 결과를 대조합니다

변경 응답을 받았으면 같은 장바구니 항목을 조회 API로 다시 읽습니다. 변경 요청에 보낸 값이나 앱 메모리에 남은 숫자를 그대로 결과 카드에 복사하지 않습니다. ‘대형 · 2개 · 단가 24,000원 · 상품 합계 48,000원’이 저장된 결과에서도 이어지는지 확인합니다.

개발 구조의 핵심

장바구니 변경 개발의 핵심은 곱셈 자체보다 선택값 검증 → 서버 기준 가격 계산 → 일관된 저장 → 독립 조회를 같은 항목으로 이어주는 데 있습니다. 화면이 보여주는 값에 어떤 근거가 있는지, 거절되거나 결과를 받지 못했을 때 무엇을 다시 확인할지까지 맞춰야 옵션·수량 변경을 하나의 기능으로 연결할 수 있습니다.

처리 기준 자세히 보기

검증에서는 정상 변경뿐 아니라 거절된 변경의 뒤도 봅니다. 수량 6개를 요청한 뒤 별도로 조회했을 때 기존 대형 2개·48,000원이 유지돼야 합니다. 존재하지 않는 옵션이나 금액 필드를 보낸 요청도 저장값을 바꾸지 않아야 합니다. 새로고침 후에도 같은 항목을 다시 읽어야 화면에만 남아 있던 숫자를 저장 결과로 오인하지 않습니다.

오래된 변경 버전으로 요청한 경우에는 충돌 응답과 현재 저장값을 함께 대조합니다. 정상 변경·입력 거절·변경 충돌을 각각 확인해야 한 번 성공한 화면만으로 모든 경로가 맞는다고 판단하지 않을 수 있습니다.

우리 서비스의 변경 기능을 함께 살펴보세요

사용자가 바꾸는 항목과 서버에서 확정해야 할 규칙을 알려주세요. 옵션·수량·금액처럼 연결된 값의 처리와 저장·확인 흐름을 30분 상담에서 함께 정리합니다.

30분 무료 상담 신청
앱이 만들어지는 방식으로 돌아가기