내 웹 애플리케이션에 온라인 결제를 붙이려면 무엇이 필요할까요?

예약 서비스, 온라인 강의, 유료 자료, 작은 쇼핑몰을 만들다 보면 다음 단계로 결제 기능을 떠올립니다.

내 웹 애플리케이션에서
카드나 간편결제로 돈을 받고 싶어요.
무엇부터 해야 하나요?

AI에게 “결제 기능을 붙여줘”라고 하면 결제 버튼과 화면부터 만들 수도 있습니다. 하지만 화면에 결제 버튼이 생겼다고 실제 돈을 받을 준비까지 끝난 것은 아니에요.

온라인 결제를 시작하려면 크게 세 가지를 함께 준비해야 합니다.

서비스 준비
+ 결제 기능 개발
+ PG사 계약과 운영 준비

무엇을 어떤 순서로 준비하면 되는지 하나씩 살펴볼게요.

먼저 무엇을 어떻게 팔지 정해요

결제를 붙이기 전에 상품과 판매 방식을 먼저 정해야 합니다.

• 무엇을 판매하나요?
• 가격은 얼마인가요?
• 한 번만 결제하나요, 정기적으로 결제하나요?
• 회원만 살 수 있나요, 비회원도 살 수 있나요?
• 카드 외에 계좌이체나 가상계좌도 필요한가요?
• 구매자가 취소하거나 환불받을 수 있는 기준은 무엇인가요?

이 답에 따라 필요한 결제 방식과 개발 범위가 달라집니다. 한 번 결제하는 온라인 강의와 매달 돈을 받는 구독 서비스는 같은 결제 기능이 아니에요. 자동결제는 별도의 기능과 계약이 필요할 수 있습니다.

처음부터 모든 결제수단을 넣을 필요도 없습니다. 내 고객이 실제로 사용할 결제수단부터 시작하는 편이 좋아요.

PG사가 카드사와 내 웹 애플리케이션을 연결해요

온라인에서 카드 결제를 받으려면 카드사와 정보를 주고받아야 합니다. 하지만 작은 서비스가 여러 카드사와 하나씩 계약하고 서로 다른 결제 방식을 직접 개발하기는 어렵습니다.

이 사이를 연결하는 회사가 PG사(Payment Gateway)예요. 토스페이먼츠, KG이니시스, 나이스페이 같은 서비스를 PG사라고 부릅니다.

구매자
↕
내 웹 애플리케이션
↕
PG사
↕
카드사·은행·간편결제 서비스

PG사를 이용하면 카드와 간편결제 같은 여러 결제수단을 하나의 연동 방식으로 붙일 수 있습니다. PG사는 결제창과 개발 도구를 제공하고, 결제 승인과 취소 요청을 카드사나 은행에 전달해요.

내 서비스에 맞는 PG사를 선택해요

PG사를 고를 때는 이름이나 인지도만 볼 필요가 없습니다. 내 서비스에서 필요한 조건을 먼저 비교하세요.

• 필요한 결제수단을 제공하나요?
• 일반결제와 자동결제 중 필요한 방식을 지원하나요?
• 수수료와 정산 주기는 어떻게 되나요?
• 가입과 심사에 무엇이 필요한가요?
• 개발 문서와 예제가 충분한가요?
• 결제 내역과 취소를 관리할 화면이 있나요?
• 문제가 생겼을 때 도움받을 창구가 있나요?

바이브코딩으로 직접 연동한다면 개발 문서와 테스트 환경도 중요합니다. AI가 코드를 만들더라도 어떤 방식으로 연결하고 무엇을 확인해야 하는지는 PG사의 공식 문서를 기준으로 삼아야 해요.

테스트 결제로 먼저 연결해봐요

여러 PG사는 실제 돈이 오가지 않는 테스트 환경을 제공합니다. PG사에 따라 계약을 마치기 전에도 테스트 키로 결제창과 기본 흐름을 연결해볼 수 있어요.

테스트 결제
→ 실제 돈은 받지 않음
→ 결제 화면과 성공·실패 흐름을 확인

실제 결제
→ 고객의 결제수단으로 돈을 받음
→ 계약·심사와 운영용 설정이 필요

처음에는 테스트 환경에서 다음 과정을 확인합니다.

1. 구매자가 상품과 가격을 확인합니다.
2. 내 웹 애플리케이션이 주문을 만듭니다.
3. 구매자가 PG사의 결제창에서 결제수단을 선택합니다.
4. 내 서버가 주문번호와 금액을 확인합니다.
5. 내 서버가 PG사에 결제 승인을 요청합니다.
6. 내 웹 애플리케이션이 결제 결과를 저장합니다.
7. 구매자에게 성공 또는 실패 화면을 보여줍니다.

결제창보다 먼저 주문을 기록해요

결제 기능을 만들 때는 결제 버튼만큼 주문 기록이 중요합니다.

구매자가 결제 버튼을 누르면 내 웹 애플리케이션은 먼저 이런 정보를 기록해야 해요.

무엇을 사는지
얼마를 결제할지
누가 주문했는지
주문번호가 무엇인지
현재 주문 상태가 무엇인지

결제를 마치면 결제 식별값, 결제수단, 승인 시각, 결제 상태 같은 정보도 저장합니다. 그래야 나중에 고객 문의가 왔을 때 결제 내역을 찾고, 취소나 환불도 처리할 수 있어요.

주문과 결제는 서로 연결하지만 같은 기록은 아닙니다.

주문
→ 무엇을 얼마에 사려는지 기록

결제
→ 실제로 돈을 받았는지 기록

주문이 생겼지만 구매자가 결제창을 닫을 수도 있고, 결제에 실패할 수도 있습니다. 반대로 결제는 성공했는데 내 웹 애플리케이션이 결과를 저장하지 못하는 상황도 고려해야 해요.

화면에 입력한 정보를 왜 별도로 저장해야 하는지 낯설다면 내 웹앱의 데이터는 어디에 저장될까요?를 먼저 읽어도 좋습니다.

결제 금액은 서버에서 다시 확인해요

브라우저 화면에 보이는 가격만 믿고 결제를 승인하면 안 됩니다. 구매자가 브라우저에서 보내는 값은 바꿀 수 있기 때문이에요.

예를 들어 실제 가격이 50,000원인데 브라우저가 500원이라는 값을 보냈다고 해볼게요. 내 서버가 이 값을 그대로 믿으면 잘못된 금액으로 결제를 승인할 수 있습니다.

그래서 내 서버는 결제를 승인하기 전에 데이터베이스에 기록한 주문을 불러오고 금액이 일치하는지 확인해야 합니다.

브라우저가 보낸 주문번호와 금액
↕ 비교
내 서버가 저장한 주문번호와 금액

일치함
→ 결제 승인 요청

일치하지 않음
→ 결제 중단

결제창을 여는 일은 브라우저가 맡을 수 있지만, 금액 확인과 최종 승인처럼 중요한 일은 서버가 맡아야 해요. 화면·서버·데이터베이스의 역할은 웹 애플리케이션의 기본 구조에서 더 자세히 설명했습니다.

테스트 키와 실제 결제 키를 구분해요

PG사와 연결할 때는 API 키를 사용합니다. 보통 테스트용 키와 실제 결제용 키를 따로 제공해요.

테스트 키
→ 개발하면서 결제 흐름을 확인

실제 결제 키
→ 운영 중인 서비스에서 실제 결제를 처리

브라우저에서 결제창을 여는 클라이언트 키와 서버에서 승인 요청에 사용하는 시크릿 키도 역할이 다릅니다. 시크릿 키는 브라우저 코드나 GitHub에 올리면 안 됩니다. 서버의 환경변수에 보관해야 해요.

API 키와 환경변수가 낯설다면 API 키와 .env를 함께 읽어보세요. 개발용 값과 운영용 값을 나누는 이유는 개발·운영 환경변수와 데이터베이스를 나눠야 하는 이유에서 이어서 설명합니다.

실제 결제를 받으려면 계약과 심사도 준비해요

테스트 결제가 잘된다고 바로 고객의 돈을 받을 수 있는 것은 아닙니다. 실제 결제를 받으려면 보통 PG사와 계약하고 결제수단 이용 심사를 거쳐야 해요.

PG사와 카드사는 실제로 상품을 판매할 수 있는 웹사이트인지 확인합니다. 서비스와 업종에 따라 준비할 내용은 달라질 수 있지만, 보통 다음 정보가 필요합니다.

• 판매할 상품이나 서비스와 가격
• 구매자가 상품을 선택하고 결제할 수 있는 화면
• 사업자와 고객센터 정보
• 이용약관과 개인정보 처리방침
• 취소·환불 기준
• 정상적으로 열리는 결제창

PG사마다 계약 조건과 심사 기준이 다르고, 판매하는 상품에 따라 이용할 수 없는 결제수단도 있습니다. 개발을 모두 끝낸 뒤 확인하기보다 PG사를 고르는 단계에서 내 업종과 상품을 먼저 문의하는 편이 안전해요.

실제 신청 전에는 선택한 PG사의 최신 계약 안내를 확인하세요.

실제 결제와 취소까지 직접 확인해요

계약과 심사를 마치고 운영용 키를 연결했다면 적은 금액으로 직접 결제해보세요. 성공 화면만 보는 것으로 끝내지 말고 전체 흐름을 확인해야 합니다.

• 실제 카드나 간편결제로 결제할 수 있나요?
• 주문 금액과 실제 승인 금액이 같나요?
• 데이터베이스에 주문과 결제 결과가 남나요?
• 관리자 화면이나 PG사 화면에서 결제를 찾을 수 있나요?
• 결제를 취소하면 고객에게 금액이 정상적으로 돌아가나요?
• 결제에 실패하거나 구매자가 중간에 닫았을 때 알맞게 안내하나요?

고객이 돈을 낸 뒤부터는 결제 기능이 운영 업무가 됩니다. 고객 문의에 답하고, 결제 내역을 찾고, 취소와 환불을 처리할 방법까지 준비해야 실제 서비스로 사용할 수 있어요.

바이브코딩할 때는 전체 흐름부터 확인시켜요

AI에게 “토스 결제를 붙여줘”라고만 요청하면 결제창이나 성공 화면만 만들고 끝낼 수 있습니다. 먼저 현재 프로젝트와 필요한 기능을 확인하게 하세요.

내 웹 애플리케이션에서 온라인 결제를 받고 싶어.

코드를 바로 수정하지 말고 먼저 확인해줘.
- 무엇을 얼마에 판매하는지
- 한 번 결제인지 자동결제인지
- 회원과 비회원 중 누가 결제할 수 있는지
- 현재 주문과 결제 정보를 어디에 저장하는지
- 사용할 PG사와 테스트 환경이 준비됐는지
- 결제 승인과 금액 확인을 서버에서 처리하는지
- 취소와 환불을 어떻게 운영할지

확인한 내용을 바탕으로 필요한 작업과 진행 순서를 쉽게 설명해줘.
시크릿 키는 브라우저 코드나 GitHub에 넣지 마.

AI가 만든 코드를 바로 실제 결제에 연결하지 말고 테스트 결제, 주문 기록, 금액 확인, 실패 처리, 취소까지 차례로 확인하세요.

추천하는 진행 순서

처음 결제를 붙인다면 다음 순서로 진행하면 됩니다.

1. 상품·가격·환불 기준 정하기
2. 필요한 결제 방식 정하기
3. PG사 비교하고 계약 조건 확인하기
4. 주문과 결제 정보를 저장할 구조 만들기
5. 테스트 키로 결제 흐름 연결하기
6. 서비스 정보와 정책 페이지 준비하기
7. PG사 계약과 결제수단 심사 진행하기
8. 운영용 키 연결하기
9. 실제 결제와 취소 직접 확인하기
10. 결제 내역을 확인하고 고객 문의에 대응할 방법 준비하기

계약과 개발은 상황에 따라 함께 진행할 수도 있습니다. 중요한 것은 결제창 하나만 보고 준비가 끝났다고 판단하지 않는 거예요.

정리

• 온라인 결제를 받으려면 먼저 상품, 가격, 결제 방식과 환불 기준을 정해야 합니다.
• PG사는 내 웹 애플리케이션과 카드사·은행·간편결제 서비스를 연결합니다.
• 테스트 환경에서 결제창, 성공·실패, 주문 기록과 승인 흐름을 먼저 확인하세요.
• 주문과 결제 결과를 데이터베이스에 남겨야 내역 확인과 취소·환불을 처리할 수 있습니다.
• 결제 금액과 주문 정보는 서버에서 다시 확인해야 합니다.
• 시크릿 키는 서버의 환경변수에 보관해야 합니다.
• 실제 결제를 받으려면 PG사 계약과 결제수단 심사를 준비해야 합니다.
• 운영용 키를 연결한 뒤 실제 결제와 취소까지 직접 확인하세요.

가장 중요한 내용을 한 줄로 줄이면 이렇습니다.

결제 기능 완성
= 결제창
+ 주문 기록
+ 서버 승인
+ 계약과 심사
+ 취소·환불 운영

결제 버튼은 온라인 결제의 끝이 아니라 시작입니다.