정말 중요한 업데이트인 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: , , , , , , , ,

카테고리: , , ,

Ω