2014년 7월 20일 일요일

[튜토리얼/한글화] requestAutocomplete - take my money, not my time

HTML5Rocks에 +Jake Archibald의 'requestAutoComplete - 시간 빼았지 말고 돈이나 가져가시죠(requestAutocomplete - take my money, not my time)' 한글 튜토리얼이 업데이트되었습니다. 이번 번역은 박태근님께서 수고해주셨습니다. 진작 소개를 해드렸어야 하는데 이런저런 일로 바빠서 이제야 소갯글을 올리는군요. 이해해주시길 :)

"웹에서의 폼 입력의 많은 부분이 동일한 데이터를 반복적으로 입력하기를 요구합니다. 특히 쇼핑몰에서의 결제가 그렇습니다. 카드 번호를 입력하고, 배송될 주소를 입력하고 전화번호를 넣고, 다음 이용 시에도 그렇습니다. 이는 사용자 입장에서는 무척 짜증이 나는 일이죠. 물론 일부 사이트는 최근의 입력 데이터를 제공해주기도 하지만 이는 서버 측에서의 구현이 필요할 뿐만이 아니라 보안상의 취약점이 발생할 수 있는 부분이기도 합니다. 
requestAutoComplete()는 기존의 입력 데이터를 서버 혹은 보안상 취약한 형태로 자바스크립트에서 접근 가능한 브라우저의 웹 스토리지 내에 저장하지 않고 브라우저로부터 바로 채워서 전달할 수 있는 편리한 기능입니다. 만약 서버측의 구현 이슈나 보안 이슈가 있었다면 requestAutoComplete()를 이용해서 사용자에 편리한 환경을 제공해보는 것은 어떨까요?"



TL;DR;


모바일 웹에서 최대 97%의 확률로 카트를 다 채워놓고 결제를 포기하는 행위가 일어납니다. 당신이 웹상에서 경험할 수 있었던 행복한 결제 경험에 대해서 생각해보세요. 이것은 큰 문제입니다. 웹의 한계는 웹사이트들이 이미 사용자들이 계정을 가지고 로그인할 수 있는 특정 결제 대행사에 예속되게 하거나 대개 해당 플랫에 맞추어서 코딩하도록 강제되는 단일 플랫폼들, 가령 앱스토어에 종속되도록 하므로 이러한 경험은 고쳐져야만 합니다.

form.requestAutoComplete


이 API는 상세한 결제 정보를 브라우저에서 요청하고, 사용자 환경(여기서는 아마 브라우저)에 저장합니다. 크롬 버전의 requstAutocomplete()은 또한 미국 사용자에 한해서 (현재로써는) 구글 월렛과도 연동됩니다.

form 요소는 단 한가지의 새 메소드, 바로 requestAutocompltete를 가지며 그 기능은 브라우저에게 form을 채우도록 요청하는 것입니다. 브라우저는 사용자에게 허가와 어떤 정보들을 제공할것인지 묻는 대화창을 나타낼 것입니다.

당신이 이것을 원하는 때 언제나 불러올 수 있는 것은 아닙니다. 이 메소드는 특정한 인터랙션 이벤트들, 가령 마우스 업/다운, 클릭, 키보드 & 터치 이벤트들이 일어나는 도중 불러져야 합니다. 이것은 보안을 위해서 의도적으로 만들어진 제한사항입니다.

이제 name 항목을 변경하지 않고도 field에 채워질것으로 예상되는 항목을 정의할 수 있습니다. 그리고 이것이 바로 requestAutocomplete가 form을 사용자 데이터와 연결하기 위해서 사용하는 방법입니다.



규격 상으로, requestAutocomplte가 한 종류의 결제방식에 대해서만 동작하는 것은 아니지만 현재 Chrome에 구현된 것은 그렇게 구현되어 있는 상태입니다. 결제를 예로 들자면 일반적인 흐름은 다음과 같습니다.

requestAutoComplete()를 이용한 결제의 흐름

주의: 현재로써는 requestAutocomplete가 결제 기능에만 초점이 맞추어져 있기 때문에 <form>에 적어도 하나의 신용카드 관련 필드를 포함하는것이 필요하며, SSL로 암호화된 페이지들에 대해서만 동작합니다. 대신 개발 과정에서 크롬은 requestAutocomplete가 실패하는 정확한 이유를 개발자 콘솔에 로그로 나타내어줍니다.

현재 크롬에서 requestAutocomplete는 특정한 몇가지 필드에 대한 포함을 요구하거나 인식 가능한 필드가 별도로 정의되어 있습니다. 자세한 내용은 튜토리얼을 참조하시기 바랍니다.

번역 링크