SOHEE KIMWEB DEVELOPER

어떤 경험이 궁금하세요?

ENGINEERING / WEB-APP BRIDGE

ONE CONTRACT, TWO SIDES

05

기획을 규약으로 고정하고, 실패 코드가 다음 화면을 가르게 했습니다.

현대 푸드·SCO 결제 키오스크는 웹이 화면을 그리고 앱이 상품·결제 원장을 가집니다. 기획서를 기능 목록으로만 두지 않고 command, type, messageId 규약으로 정리해 앱 담당자와 맞췄습니다. 웹이 답을 기다리는 요청과 바코드처럼 앱이 먼저 보내는 이벤트를 나누고, result false의 messageCode가 등록 중단, 경고 후 진행, 직원 호출을 결정합니다.

  1. MY CONTRIBUTION
    01규약

    command · type

    기획을 요청 단위로 고정
  2. MY CONTRIBUTION
    02요청 · 푸시

    messageId

    기다릴 것과 앱이 먼저 보내는 것
  3. MY CONTRIBUTION
    03실패 코드

    popupType · messageCode

    같은 거절이어도 다음 화면이 다름
  4. MY CONTRIBUTION
    04화면 합계

    ItemPriceSum

    앱 리스트를 웹이 더해 표시

BEFORE

기능 설명이 화면과 앱에 각각 남아 있으면, 같은 실패도 다르게 보입니다.

바코드, 수기 조회, 장바구니 변경, 결제가 기획 문장으로만 있으면 요청 모양과 실패 처리가 담당자마다 갈립니다.

AFTER

같은 봉투로 보내고, 실패는 코드가 화면 분기를 맡습니다.

푸드와 SCO는 화면이 달라도 command.js 규약을 같이 씁니다. 웹은 팝업과 합계를 그리고, 상품 유효성과 가격은 앱 응답을 따릅니다.

01 / CONTRACT

기획을 요청 단위로 잘라, 앱과 같은 이름으로 부르게 했습니다.

PROBLEM

화면 흐름과 앱 API가 따로 적히면, 연동 중에 빈 칸이 생깁니다.

결제형 키오스크는 스캔, 수기 입력, 낱개(PLU) 담기, 수량 변경, 결제가 한 흐름입니다. 기획 화면만 보면 웹이 무엇을 보내고 앱이 무엇을 돌려줘야 하는지 담당자마다 다르게 읽습니다.

SOLUTION

기능마다 command와 type을 정해 문서와 코드를 같게 맞췄습니다.

상품은 product, 장바구니는 cart, 결제는 payment입니다. 수기는 manual, 낱개는 unit, 바코드 등록은 앱이 먼저 보내는 barcode입니다. 웹은 이 이름으로만 호출하고, 앱은 같은 이름으로 응답합니다.

02 / REQUEST OR PUSH

웹이 기다릴 요청과, 앱이 먼저 보내는 이벤트를 나눴습니다.

수기 조회나 장바구니 변경은 웹이 messageId를 붙이고 답을 기다립니다. 바코드 스캔과 결제 중 알림은 사용자가 웹 버튼을 누르지 않아도 앱이 메시지를 보냅니다. 수신 쪽에서 같은 ID가 대기 중이면 응답이고, 아니면 앱 이벤트입니다.

메시지 방향

구분코드동작
응답을 기다림setCallWebToAppWithResponsemessageId를 붙이고, 같은 ID가 오면 Promise를 끝냄
보내기만 함setCallWebToApp장바구니 초기화, 마감 확인 후 결제 진행처럼 답이 필요 없는 명령
앱이 먼저 보냄product / barcode, paymentcheck, web_exception대기 중인 ID가 없으면 앱 이벤트로 처리

03 / MESSAGE CODE

같은 거절이어도, 코드가 다음 화면을 다르게 엽니다.

PROBLEM

실패를 문구로만 받으면, 경고와 중단이 한 팝업으로 묶입니다.

미등록 상품은 담으면 안 되고, 마감 임박은 알리되 결제는 이어갈 수 있습니다. 품절은 주문 화면으로 돌아가야 하고, 유해 상품은 직원 확인이 필요합니다. 거절을 모두 같은 알림으로 처리하면 현장이 막히거나, 막혀야 할 등록이 통과합니다.

SOLUTION

result false를 거절하고, messageCode로 분기했습니다.

응답의 result가 false면 Promise를 거절합니다. 팝업 종류는 popupType, 문구와 다음 동작은 messageCode입니다. 코드는 language.json에서 문장과 TTS로 바뀌므로, 웹은 한글을 하드코딩하지 않습니다.

실패 코드와 다음 화면

messageCode분기동작
미등록상품등록 중단경고만 띄우고 상품은 넣지 않음. 수기는 13자리 미만이면 앱을 부르지 않음
마감경고경고 후 진행확인하면 푸드는 ordercheck confirm, SCO는 payment confirm
품절음식있음주문으로 복귀푸드. 결제로 넘기지 않고 주문 확인 화면으로 되돌림
청소년유해상품직원확인직원 확인SCO. result true면 유해 있음, false면 없거나 확인이 끝나 다음 단계

RESULT

화면과 앱이 같은 이름으로 말하고, 실패는 코드가 가리키게 되었습니다.

웹은 키오스크 화면과 접근성 안내를 맡고, 상품·결제 원장은 앱 응답을 따릅니다. 기획에서 정리한 규약이 요청 모양과 예외 분기를 고정해, 푸드와 SCO가 다른 화면이어도 같은 연동 규칙으로 붙습니다.

command · type wait or push messageCode