2014년 7월 20일 일요일

[튜토리얼/한글화] 크롬 버전 35의 개발자도구 요약(DevTools Digest - Chrome 35)

HTML5Rocks에 +Umar Hansa의 '크롬 버전 35의 개발자도구 요약(DevTools Digest - Chrome 35)' 한글 튜토리얼이 업데이트되었습니다. :)

"크롬 개발자도구는 크롬에서 가장 빠르게 업데이트되는 항목 중의 하나입니다. 35 버전에서의 주요 업데이트는 양이 많지는 않지만 에디팅 기능, 네트워크 리소스에 대한 필터링, 이벤트 리스너 및 기타 편집 편의 기능들이 제공됩니다."



TL;DR;


본문의 내용이 길지 않으므로 이번 업데이트에 대한 요약은 전반적으로 추가된 기능에 대해서만 정리합니다.

> 네트워크 패널 필터링


도메인(Domain)과 같은 확실한 필드들을 통해 리소스들을 필터링할 수 있습니다. 또한 타이핑하고 있는 쿼리들에 대해 실시간의 유효한 필터 값들을 제안하는 자동완성 기능 역시 지원됩니다.

> Shadow DOM 컨텐츠 편집


개발자도구는 Element 패널 내에서 정규적인 HTML의 수정이 항상 가능했으며, 이러한 기능들은 이제 Shadow DOM의 엘리먼트 부분까지 확장되었습니다.

> CodeMirror 4.0으로의 업그레이드


자바스크립트 기반의 텍스트 에디터로써 Source 패널의 일부분으로 사용되고 있는 CodeMirror가 버전 4로 업그레이드되었습니다. 키보드 단축키를 포함한 많은 새로운 기능들이 추가되었습니다.

> CSS 속성의 빠른 검색


이제 Style 패널의 새로운 검색 상자에서 속성 이름들이나 룰 셀렉터들을 검색할 수 있습니다. 결과물은 여러분이 타이핑하고 있는 쿼리에 대해 실시간으로 강조처리됩니다.

> 콘솔 메세지에 대한 타임스탬프


로그 메세지들이 빠르고 연쇄적으로 발생하는 경우 메세지가 출력된 정확한 시간을 확인할 수 있는 것은 유용할 것입니다. (개발자도구 실험실 기능)

> 힙 스냅샷에 대한 통계적 메모리 명세


기록된 힙 스냅샷을 볼 때 자바스크립트의 관점에서 어떠한 부분이 대부분의 메모리를 소모하는지를 확인하기 위한 시각적이고 컬러화된 통계 파이 차트를 확인할 수 있습니다. 현재 실험실 기능이므로 “Heap snapshot statistics”의 활성화를 통해 확인할 수 있습니다.

> console.log의 Wrapping version이 아닌 원본 소스 보기


여러분은 아마도 console.log의 래퍼 함수(Wrapper function)을 가지고 있을 때 개발자도구는 원래 위치를 가지고 있습니다.

> 작지만 강력한 추가 기능들


  • Element 패널 내에서 Event Listeners 새로고침 후 이벤트 리스너의 추가/삭제 가능
  • Ctrl + ` 를 이용한 콘솔 입력에 포커스 설정
  • border- 스타일의 자동완성 지원
  • Restore defaults and reload(초기화 및 갱신) 버튼이 Setting 패널에 추가
  • dock to left(왼쪽으로 도킹하기)를 적용 가능(실험실 기능)
  • "Wheel"을 이벤트 리스너의 중단점(breakpoint)으로 추가


자세한 내용은 튜토리얼을 참조하시기 바랍니다.

번역 링크

[튜토리얼/한글화] 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는 특정한 몇가지 필드에 대한 포함을 요구하거나 인식 가능한 필드가 별도로 정의되어 있습니다. 자세한 내용은 튜토리얼을 참조하시기 바랍니다.

번역 링크