올리브영 테크블로그 포스팅 올리브영 결제 이야기 Part - 1
Order & Payment

올리브영 결제 이야기 Part - 1

커머스의 꽃 결제,, 하지만 꽃이 피기는 험난한 법입니다.

2022.04.20

안녕하세요! 올디브에서 주문/결제 Squad 에서 Back-end 업무를 맡고 있는 우뱅입니다!

많은 이커머스 사이트에서 상품을 보고 마음에 든다면 구매를 하게 되는데요. 혹시 여러분들은 커머스에서 주문/결제가 어떻게 이루어졌는지 아시나요?

실제 사용자들 눈에는 확연하게 보이지 않지만 안정적으로 결제 서비스를 제공하기 위해 뒤에서는 정말정말정말정말 많은 일들이 일어나고 있습니다!

오늘 글에서는 기존의 올리브영의 주문/결제가 어떻게 이루어졌는지 그리고 더욱 더 안정적인 서비스를 제공하기 위에 올리브영의 결제 처리 방식이 어떻게 변화 되었는지 설명해드리고자 합니다.

💐 🌺 🌻 커머스의 꽃 🌷 🌸 🌼 인 주문/결제에 대해 알아보러 가실까요?

그래서 어떻게 바뀌었다구?

결론적으로 말씀드리면 올리브영의 주문/결제 방식은 Async 에서 Sync 로 바뀌었습니다.

06
Async,,? Sync,,?

주문,결제만 해도 머리가 어지러운데,, Async, Sync 라니...! 눈 앞이 흐려지지만 아래에서 차근 차근 설명해보겠습니다!

이 포스팅에서는 Async, Sync 에 대한 설명은 따로 하지 않겠습니다!

Async 방식

올리브영은 오래 전부터 결제 처리에서 주문완료까지 비동기형태 구성 되어 있었습니다.
그렇다보니 여러가지 외부요인으로 인해서 주문이 정상 처리 되지 않기도 했고, 비동기를 정상적으로 처리하기 위해 많은 개발자분들의 고생한 흔적들이 남아 있었습니다.

그 이야기를 글로만 적기보다는 보다 쉽게 다이어그램으로 표현해보겠습니다.

1) 결제 인증까지의 일반적인 프로세스

01
위의 사진은 일반적인 커머스 내 결제 프로세스입니다.
그렇다면 올리브영의 기존 결제 프로세스는 어땠을까요?

2) 올리브영 과거 방식 (결제사에서 결제 인증직후 승인처리 & 결제 승인 결과 전송)


02

올리브영은 기존에 사용자 인증 후 바로 결제 승인까지 한번에 처리 되면서 고객님은 카드사로부터 0,000원이 결제 되었다는 알림을 받았습니다.
아직 올리브영은 주문완료 처리가 안되었는데 말이죠 ... ㅠㅠ

그리고 나서 위처럼 결제사에서 비동기 형태로 Back-end로 올리브영에 결제 결과를 전송합니다.

결제 결과를,, 받긴 받았는데요,,? 과연,, 매번 잘 받을까요,,?


2-1) 결제 결과 정상적으로 받은 케이스


03
  1. 결제사에서 받은 후 올리브영은 결제사에 정상 응답을 Response 하고, 비동기 형태로 주문 성립을 진행합니다.
  2. 올리브영에서는 주문처리를 하는 동안 결제사에서는 올리브영 결제 완료 화면으로 로딩화면에서 전환시켜줍니다.
  3. 올리브영은 백엔드로 받은 결과가 처리 되기까지 대기하다가 최종 주문 완료 화면을 보여줍니다.

⭐️ 한줄 요약 : 결제결과를 back-end 에서 받은 뒤 수신 응답하고, 주문처리를 하는 중에 Front-end 로 화면이 전환되는 비동기 형태

이번에는 결제 결과를 정상적으로 받았는데,, 혹시 못받은 경우는 케이스는 어떠할까요?

2-2) 결제 결과 못 받은 케이스


04
  1. 올리브영에서 결과 받을 때까지 결제사는 일정시간 동안 대기를 하게 됩니다.
  • 고객 눈물 포인트1 😭 - 빙빙도는 물레 아니 로딩창만을 하염없이 바라보고 계시죠.. 영원히 계속 될 것 처럼....
  1. 올리브영에서 받았다는 신호를 결제사에 응답하지 못하여, 결제사에서 자체 망취소를 하게 됩니다.
  • 고객 눈물 포인트2 😭 - 갑자기 다시 오는 결제 취소 문자..
07
그냥 돈 아낄게요.

만약에 해당 상품이 선착순 상품이거나, 한정상품일 때 고객님의 분노는 더 커지겠지요..더 이상의 자세한 설명은 생략하겠습니다.... 😭


그러면 왜 바꾸었나요?

기존의 주문/결제 방으로는 평상시에는 큰 문제가 없었습니다.

그러나,, 작년 4번의 올영세일 기간에 온라인몰 매출은 매번 기네스를 찍는 기염을 토했는데요. 나날로 높아지는 올리브영 온라인몰의 인기와 증가하는 구매 트래픽으로 인해 Async로 결제 결과를 전달 받을 때 간헐적으로 정상 수신이 되지 않는 경우가 많아졌습니다.

결국 결제 미매칭건들이 조금씩 늘어나고 사용자들의 불편함과 더불어 매출에 영향이 가기 시작했습니다.

09
돈이 있는데 왜 사지를 못하냐구요

이를 개선하기 위해 많은 고민을 하였고 최종적으로는 결제 상태 불일치를 개선하기 위한 방법으로 Sync 형태의 인증/승인 분리구조로 변경하였습니다.

그럼 이제 변화된 방식을 보실까요??

Sync 방식

비동기에서 동기를 통한 인증/승인 분리


05
  1. 사용자가 인증한 결과를 결제사에서 올리브영 페이지로 전환하면서 전달합니다.
  • 이제부터는 올리브영의 결제 진행화면입니다. (결제사하고 올리브영하고 로딩 화면 디자인이 똑같아서 구별은 되지 않습니다)
  1. 올리브영에서는 주문처리를 위한 사전 처리(결제사 응답오면 바로 최대한 빨리 화면 보여주려고)를 추가로 하고, 결제사에 최종 승인을 요청합니다.
  • 이때에는 페이지 전환이 아니라 Back-end로 통신합니다.
  1. 결제사에서는 최종 승인 처리를 하고 승인결과를 응답합니다.
  • 올리브영에서 요청한 통신 커넥션에 응답하는 형태입니다.
  1. 여기서 응답이 잘오면 주문완료 화면으로 GoGo~!
  • 만약 응답이 오지 않는다면 일정시간 대기했다가 결제 실패 화면으로 전환한다.

무엇이 좋아졌나요?

Async 에서 Sync 로 바꾸는 과정은 험난했으나 변경을 하고 나니 많은 변화가 있었는데요! 무슨 변화가 있었는지 알아볼까요?

1. 결제 모니터링 세분화 및 강화

인증/승인을 분리하다 보니 결제 단계별 정보가 수집되어 각 단계별로 모니터링을 할 수 있습니다.
08

Datadog으로 진행하는 모니터링

이를 통해 어떤 단계에서 트래픽이 몰리는지 장애는 어디서 발생했는지를 구체적으로 알 수 있어서 즉각적인 대응이 가능했습니다.
비록, 단계별 호출 구성 및 모니터링 등 해야 할일이 많아졌지만요..!

2.소스 직관적 구성 가능

비동기 형태의 구성을 위해 복잡하게 구성된 Transaction 및 화면의 대기 형태의 구성 없이 순차 처리 형태로 구성하여 소스 난이도가 기존보다 쉬워졌습니다.

3.결제 미매칭률 감소

동기식 처리로 올리브영에서 결제를 최종 요청을 해야 최종 승인이 되는 구조로 바뀌다보니 결제 미매칭 되는 건이 최근에는 없었습니다.
실제로 2022년 3월 올영세일때 엄청난 트래픽이 있었음에도 불구하고 결제 미매칭 건이 0건을 기록하며 서비스의 안정도를 높였습니다!


마무리

여전히 주문/결제는 복잡하고 사용자들이 빠르고 편리하게 결제를 하기 위해 개선해야할 포인트들이 많습니다! 이를 위해 주문/결제 Squad에서 열심히 개선 작업을 수행하고 있습니다.

또한 개선 작업을 수행하고 문제는 없는지 수정해야할 사항이 있는지 등을 파악을 해야하는데요! 이를 위해 위에서 잠깐 말씀드린 Datadog 을 통해 결제 모니터링을 진행하고 있습니다.

Datadog 은 무엇인지, 또 결제 모니터링은 어떻게 하는지에 대해서는 다음 포스팅에서 자세히 설명드리도록 하겠습니다. 그때 또 만나요! 💚💚

orderpayment성능개선
올리브영 테크 블로그 작성 올리브영 결제 이야기 Part - 1
🍻
우뱅 |
Back-end Engineer
치맥은 진리! 올디브도 진리!