정말 중요한 업데이트인 HTML 5.2 에 관해 araboza

§

일단 간단한 Dialog 요소 부터 소개하겠습니다. (오래전 부터 크롬에서 이 Dialog 요소가 필요하다고 주장했는데 이번에 W3C 에서 이 Dialog 요소를 승인한 것 입니다.)

Dialog 은 대화창이라고 번역해야 하나요? 암튼 HTML 5.2 문서안에서 생성되는, HMTL 문서가 제공하는 모달창이라고 이해하시는게 가장 간단합니다.

모달창을 만들기 위해 css 로 모달창을 꾸미고, css 나 js 로 역동적인 부분을 스크립팅 할 필요 없이 HTML 5.2 가 제공하는 dialog 태그를 활용해 모달창을 만들 수 있습니다.

일단 html 마크업은,

버튼

<button type="button" class="open_btn">열기</button>

Dialog 모달창

<dialog class="html_modal"></dialog>

이런식으로 만 작성하면 됩니다.

물론 모달창 내에 컨텐츠를 넣어야 하고, 창닫기 버튼도 넣어줘야 하니까 실질적으로 이런 모습이 되겠죠?

<button type="button" class="open_btn">열기</button>
<dialog class="html_modal">
  <h2>HTML 모달창</h2>
  <button type="button" class="close_btn">닫기</button>
</dialog>

자스 (js) 를 아예 작성하지 않아도 되는 것 은 아닙니다. 제 기억에 처음 Dialog 이 나왔을때는 분명 아무런 자스 (js) 도 필요없이 Dialog 모달창이 작동되었던 걸로 기억을 하는데 (대략 4년전) 너무 오래전이라서, 또 딱 한번 보고 말았어서 확신할 수 는 없습니다. 어쩌면 제가 잘못 기억하고 있는걸지도. (혹시 만델라 이펙트? 아니면 제가 치매가 오는건지… ㄷㄷㄷ)

암튼 제가 어떻게 기억을 하고 있는게 중요한건 아니고, 이 Dialog 모달창 작동을 위해서는 .showModal() 이라는 메소드를 사용하셔야 합니다.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal

모질라의 예제가 너무 복잡해 보이실 수 있는데 좀더 간단하게 작성해 보자면 이런 모습이 되겠죠?

const dialog = document.querySelector('.html-dialog')
const openButton = document.querySelector('.open_btn')
const closeButton = document.querySelector('.close_btn')

openButton.addEventListener('click', () => {
  dialog.showModal()
})

closeButton.addEventListener('click', () => {
  dialog.close()
})

(const 나 let 이나, 이경우 별상관 없습니다. var 만 안쓰면 되죠 뭐. ㅋㅋㅋ)

아니 근데 슈발 진짜 골때리네요. 이거나 toggle 하는거나… 뭐가 다른거냐? 물론 자스 작성이 살짝 더 간단해지긴 하지만, 그렇다고 원래 모달창 자스작성이 어렵거나 그런거 절대 아니거든요. 너무 간단해서 이렇게 css 만으로도 띄울 수 있습니다.

https://hackya.com/kr/css-만으로-모달창-띄우기/

Dialog 모달창은 아예 자스 작성 없이도 모달창이 생성되는거라서 제가 매우 획기적 이라고 기억을 하고 있었던건데.. 참 이상하네요….

암튼 이게 Dialog 모달창 입니다. 뭐 front-end 개발자가 아닌 분들에게는 획기적인 요소가 생겨났다고 여겨질 수 도 있다 생각됩니다만…. C… 참 찜찜하다….. 개발자 입장에서는… css 와 자스 (js) 코드가 살짝 간결해 졌다 정도의 의미를 주시면 될 것 같습니다. ㅠㅠㅠㅠ


아!!! 이거 꼼수로 자스 (js) 없이 모달창 열고 닫고 하는 방법이 생각났습니다. 예전에 이 꼼수 방법이 떠올라서 이 Dialog 모달창이 획기적이라고 생각했던 것 같습니다.

Payment Request API

HTML 5.2 가 정말 중요한 업데이트인 이유는 + 이 글을 쓰는 이유는 Payment Request API 때문입니다.

Payment Request API 를 구글이 개발해 기여한 배경/이유

짧은 답변: 아마존이 무서워서

구글이 조사한 바에 의하면 소비자가 모바일기기에서 제품을 구매 할때 중도에 포기하는 비율이 PC 에서 구매를 포기하는 비율보다 무려 2배나 더 높다고 합니다.

구매를 포기하는 사용자가 높은 이유는 신용카드 번호 입력이나 주소작성이 상대적으로 모바일 기기에서 더 어렵기 때문이라고 합니다.

이 구매과정이 예외적으로 간편한 곳이 한군데 있는데 바로 구글페이 입니다. 저도 몇번 사용해 봤는데 구글페이는 정말 간편합니다. 신용카드 입력이고 주소입력이고 크롬에 저장되어 있는 제 개인정보가 알아서 자동으로 입력되는, 매우 편리하면서도 신기한 경험이었습니다.

HTML 5.2 의 Payment Request API 는 이런 구글페이의 간편함을 어떤 쇼핑몰이던지 모두가 동일하게 경험 할 수 있게 해주려는 배려와 시도 입니다. 구글입장에서는 돈도 안되는 이런 기술을 왜 개발하냐구요? 아마존이 무섭기 때문 입니다.

https://hackya.com/kr/구글-워드프레스-생태계-개발에-힘쏟는-중/

구글은 아마존이 인터넷 상거래를 독점하는게 무섭기 때문에, 조그만 온라인 쇼핑몰도 이런 결제과정을 아마존 결제과정 수준보다도 더 간편하게 끌어 올려놓으려는게 구글의 의도 입니다.

PG 와 연결되는 스크립팅만 해주면, 브라우저가 알아서 결제정보를 PG 사에 넘겨주는 기술이 이 Payment Request API 의 핵심입니다.

결제 스크립팅 예제 보기

실제 작동되는 예제보기: https://stripe.com/docs/payment-request-api

결제하기 버튼 (Pay now) 만 누르면, 아래 그림처럼 제 신용카드 정도가 자동으로 적용됩니다. 구매자가 자신의 정보를 입력하지 않아도 자동입력되는 기술이라고 보셔도 됩니다.

브라우져에 입력되어 있는 저의 기본배송 주소도 자동적용 됩니다. 결제버튼 하나만 누르면 거의 AI 수준으로 결제가 되고 제품이 저에게 배송되는 것 입니다.

물론 워드프레스 사이트 운영자분들은 이거 플러그인 있어요? 라는 질문을 가장 우선적으로, 자동적으로 하시게 될텐데, 일단 이 기술은 PG 사에서 지원을 해야 사용가능해 집니다. 구글, 워드프레스의 우커머스, 그리고 Stripe PG 사는 모든 워드프레스 사이트들이 이 기술을 간편하게 사용할 수 있게 하기 위해서, 우커머스 Stripe Payment Gateway 플러그인에 이 기술을 적용했습니다.

https://wordpress.org/plugins/woocommerce-gateway-stripe/

아래그림처럼 구매하기 (Buy now) 버튼을 누르면 결제와 배송에 필요한 모든 정보가 자동 입력되고, 구매과정이 완료됩니다.

작동되는 예제 보기 : https://woocommerce.paymentrequest.show/

다른 PG 사들도 이 기술을 지원할 예정이라고 합니다. 그런데 PG사들의 기술지원 보다는 모든 브라우져들이 이 기술을 지원해 줘야 하는데 현재 IE 와 파폭, 그리고 사파리 브라우저가 이 기술을 지원해 주지 못하고 있는게 더 큰 문제 입니다.

https://caniuse.com/#feat=payment-request

아, 한국의 경우는 구조적인, 차원이 다른 문제가 존재하네요. 액티브X / exe 인증. OTL

한국에서도 구글페이 와 같은 간편한 결제를 제공함으로서 매출을 증대시키고 싶으신 분들은 연락주세요.

hackya.com 앳 gmail.com 입니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , , , , , ,

카테고리: , , ,

Ω

7 Comments

  • bastcode says:

    최신 스펙 = 헬조선 제외
    크흡.

    어차피 PG사 애들이 저거 연동해서 만들어줄것 같지도 않네요.
    일 해라 PG사 개발자 들아!!

    만들다 만 짬뽕 소스를 계속 배포중이고 정리할 생각도 없으니 뭐 말 다했죠.
    가끔 가다 소스 정리해서 만들다가 이상한 부분과 불필요한 부분찾아서 제거하고 문의해주고…
    슈발 이걸 거면 나한테 돈 주든가!
    공짜로 보수해주고 있네요 ㅋㅋㅋ

    결과적으로 해외결제 수단을 써야 한다는 건데… 해외 결제 수단은 헬조선에서 신청 안됩니다 ㅋㅋㅋ
    페이팔은 되는데… 한글 지원 안 해줍니다.
    이니머시깽이 애들이 페이팔이랑 협력하고 있어서 한글 페이팔은 이니머시깽하고 계약해야 합니다.
    당연히 수수료 더 비쌉니다!!

    스트라이프, 알리, 아마존 등등은 일단 헬조선에서 신청 불가능.

    웹 상태에서 구글페이가 시장에 유입되어서 직접 계약 될수 있다면 환영입니다 ㅎㅎㅎ
    구글페이 달아준다고 하고 용돈벌이나 할까 생각도 드네요 ㅋㅋ

    • Matthew says:

      “결과적으로 해외결제 수단을 써야 한다는 건데… 해외 결제 수단은 헬조선에서 신청 안됩니다. /스트라이프, 알리, 아마존 등등은 일단 헬조선에서 신청 불가능.” – 생각을 조금 틀면 가능한 방법이 생깁니다. 물론 제 영업기밀임으로 추가설명은 생략합니다. ㅋㅋㅋ

    • Won Dae Shin says:

      2checkout 혹은 stripes 모두 한국에서 기능합니다.
      영어리딩 능력과 약간의 돌파구를 향한 집념?만 있다면 가능합니다..ㅋㅋㅋㅋ

      • Matthew says:

        오.. 그런가요? 저는 법적이고 (jurisdictional) 로지스틱적 (logistical) 한 방식으로 해결책을 제시해드리고 있는데, 기술적만으로 해결방법이 존재한다니 희소식 입니다.

        저에게는 손해지만, (제 잠재고객분들이 사라지는거니. ㅎㅎㅎ) 방법을 공유해 주시면 수 많은 한국 쇼핑몰 운영자 분들께 큰 도움이 될 것 같습니다.

        사실 PG 는 상당히 중요합니다. 최근에 어느 쇼핑몰 운영자 사장님을 설득해서 페이팔 결제를 달아드렸는데 한달도 안되어서 매출금액이 30% 가까이 늘어났거든요.

        • Won Dae Shin says:

          이런! 여기 오시는 분들 개발자분들이 꽤 있으실텐데 제가 그 부분을 미처 참고하지 못한 글로 오해의 여지가 있었습니다. (- -) (_ _)

          저는 비개발자로 스타럽 웹 구축에 애를 먹고 있는 사람으로,
          개발을 못하므로 이미 서비스중인 해외 e-solution을 찾는 것을 늘 선행하는 1인입니다.
          개발이라고도 뭐한, paypal에서 제공하는 코드 가져다가 여기다 붙이는 거구나~ 수준입니다.

          그리고 해외결제 탑재하는 방법은 아마도 Matthew 님의 방법과 동일하지 않을까 생각듭니다.
          몇몇 페이퍼 작업이 좀 필요하죠? ㅋㅋㅋ
          물론 저는 그나마도 integrate 하는 플랫폼을 이용해야 하는 처지고요.
          mathew님의 경우에는 그냥 갖다붙이시겠네요 ㅠㅠ 부럽습니다.

          • Matthew says:

            “몇몇 페이퍼 작업이 좀 필요하죠? 맞나요? ㅋㅋㅋ”

            맞습니다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

            그런데 Payoneer 라는 서비스, 상당히 매력적이네요. 저야 쓸일이 평생 없겠지만, 한국에 계신 분들에게는 매우 유용한 서비스가 될 수 있을 것 같습니다.

            물론 한국같은 선진국에서 대기업PG 사들의 내밥그릇 지키기 (LG 만 욕하는거 아닙니다.) 때문에 이런 서비스를 써야한다는 것 자체가 웃프긴 합니다.

            좋은 정보를 공유해 주셔서 감사합니다.

          • Won Dae Shin says:

            아닙니다. 사실상 정보라고 할 순 없고, 가능성만 제시한 것 뿐이네요. ^^;
            최근 이곳을 발견하고 너무나 좋은 글들이 많은데다(물론 화가 나기도 합니다. anyway 난 한국에 있으니깐…ㅠ) 가능한 모든 포스팅을 읽어보면서 많은 정보를 얻고 있습니다.

            덕분에 ruby 라는 삽을 들었답니다 !….
            좋은 정보 감사드립니다.

Leave a Reply to Won Dae Shin Cancel reply

Your email address will not be published. Required fields are marked *