웹엔진 코아 기술 해부_AMP(Accelerated Mobile Pages), HTTP/2 후기
ononffix에서 AMP와 HTTP/2에 대한 좋은 세미나가 있어서 6월 15일에 참여하게 되었습니다.
그 내용이 너무 좋아서 내용도 남길 겸 후기를 쓰게로 하였습니다.
해당 모임은 AMP와 HTTP2에 대한 내용이였습니다.
세션은 3개였고, 하나는 Building a new AMP Component를 진행하고 다음엔 HTTP/2를 만난 HTML5 를 마지막에는 패널토의 세션을 통해서 사람들끼리 자유롭게 이야기를 할수있는 세션이였습니다.
세션당 1시간씩 진행 되었습니다.
Building a new AMP component 세션에서는 AMP란 무엇이고 AMP를 어떻게 사용하는지, AMP에 필요한 component를 어떻게 만들고, 적용할수 있는지에 대한 이야기였습니다.
AMP란? (Accelerated mobile pages)
모바일에서 페이지를 보는 사용자가 늘어나면서, 그것을 최적으로 보여주기 위해서 사용하는 기술.
새로운 기술이 아닌 기존에 나와있는 기술을 잘 정제하고 조합해서 보다 빠른 모바일 페이지를 제공하기 위한 기술이고 Google에서 진행중입니다.
AMP의 장점은 두가지가 있는 것 같습니다. 첫번째는 사용자가 모바일 페이지를 최적의 환경에서 가장 빠르게 볼수 있다. 두번째는 AMP 페이지에 대해서 구글이 검색 상단에 노출 시켜줘서 페이지에 좀더 많이 접속할수 있도록 해준다. 인 것 같습니다. 역시 속도 적인 이슈를 해결 시켜주는 것이 가장큰 장점인것 같습니다.
AMP의 단점은 사용자가 직접 사용한 자바스크립트를 사용할수 없다는 것입니다. 현대와 같은 시대에 직접 사용한 자바스크립트를 사용할수 없다는 것이 말도 안되지만, 모바일 속도에 최적화 된 환경에서 직접 사용한 자바스크립트의 속도를 가늠할수 없기 때문에 이런 제한이 생긴것이라고 생각합니다.
그러면 기본적으로 사용하는 TAB과 같은 기능은 에전엔 자바스크립트를 통해 구현되었는데, 이것에 대한 구현은 어떻게 사용할수 있을까?? 이건 기본적으로 AMP component라고 해서, 범용적으로 사용되고 있는 component에 대해서는 제공 하고 있습니다. e.g) amp-tabs
그리고 한국에서 modal이라고 사용하는것에 정식 명청은 lightbox 라고 하네요.
처음 알았던 내용..
발표자가 AMP opensource에서 어떻게 amp component를 만들고 적용했는지, 방법과 노하우에 대해서 공유하였습니다.
AMP를 만들기 위해서는 https://github.com/ampproject/amphtml 페이지에서 자세히 설명하고 있고, 질문 사항에 대해서는 https://amphtml.slack.com 슬랙을 통해서 자유롭게 이야기 되고 있습니다. 발표자도 slack에서 이슈를 이야기하다가 component를 만들게 되고 적용하게 되었다고 하네요.
그리고 Google codelab도 제공해서 따라서 하기만 해도 나만의 amp componnet를 쉽게 만들어 볼수 있다고 합니다.
그리고 해외의 경우에는 다양한 컨텐츠를 빠르게 보여줘야 하는 언론사나, 항공사에서 사용하고 있고, 국내에 경우에도 언론사가 사용하고 있다고 합니다.
그리고 질문 세션에서는 왜 AMP가 한국에는 적용이 잘 안되고 있는지에 대한 이야기가 나왔는데 , 한국과 같은 경우에는 네트워크가 워낙 빨라서 네트워크에 대한 이슈가 중요하지 않고, amp로 이동할때 결국엔 모바일 페이지를 새로 만들어야 하는데 만드는것에 대한 코스트가 들어서 라는 2가지의 이유가 나왔습니다.
첫번째 세션을 듣고 있는데, 의문점이 들었습니다. 결국 이미지나 소스코드의 경우에는 해당 서버에서 내려주는건데, AMP는 어떻게 빠르게 한다는건가? 결국엔 Client 코드에 대한 성능 이슈만 잡아준다는건가?? 근데 이런 의문에 대한 해답은 은 2번째 세션 HTTP/2를 만난 HTML5에서 찾을수 있었습니다.
두번째 세션은 HTTP/2가 어떻게 구성되어있고, HTTP/1과 비교해서 어떤게 달라졌는지, PWA(progress web app)가 무엇이고, 이것은 AMP와 어떠한 관계가 있는지에 대한 내용이였습니다. HTTP/2에 대해서는 기본적으로 관심이 있어서 한번 봤던 내용이라 내용이 그렇게 어렵지는 않았습니다.
HTTP/2에 특징은 많이 있지만, 설명할수 있는 내용은 3가지 정도 입니다. (사실 알아들은 내용이 3가지.. 이것도 정확히는 아니고 대충..)
* 바이너리기반 프로토콜
* 헤더압축
* 멀티플렉스 스트림
이것에 대한 내용은 너무 빨리 지나가서?? 잘몰라서? 이해를 잘 못했습니다. 다시 한번 찾아봐야 할 것 같습니다. 다소 틀린 내용 이더라도 이해해주세요. 아니면 적어주시면 수정하겠습니다.
바이너리 기반 프로토콜
* 기존에 HTTP/1에서 평소문이나 중복된 데이터의 송신으로 올수 있는 속도 이슈를 해결하기 위해서 보내는 데이터를 바이너리 파일로 변경해서 서버에 보내는 바이너리 기반 프로토콜을 사용하였습니다.
헤더압축
* 헤더의 경우에는 static header와 dynamic header로 table을 나눠서 encoded된 형태로 데이터를 전송하는 방식을 사용하였습니다. 그리고 헤더와 data를 따로 전송하는 방식을 사용하였습니다.
멀티플렉스 스트림
* 이건 기존에 js, css, html에 대해서 서버에 통신을 3번 보내고 기다리는 방식에서 html, js+css를 한번에 요청해서 connection을 줄이는 노력을 하였습니다. 이건 HTTP/2 가 TCP 방식의 connection을 유지해서 가능한 이야기입니다.
그리고 HTML5에 대한 설명과 함께 PWA가 나오고 AMP가 어떻게 모바일에 최적화 된 페이지를 제공할수 있는지 구조에 대해서 이야기가 나오네요.
AMP가 어떻게 동작하는지에 대해서만 이야기하고 HTML5의 내용과 PWA에 대한 내용은 간단히 설명하도록 하고 마무리 하도록 하겠습니다.
AMP의 경우에는 AMP service를 중간에 두고 유저가 요청한 정보에 대해서 해상도에 맞는 이미지를 제공하고 HTTP/2 방식의 통신을 통해서 요청수를 줄여서 좀 더 빠른 서비스를 제공합니다.
이것만 하게 되면 AMP를 사용안하고, 해상도에 맞는 이미지를 요청하고 HTTP/2 프로토콜만 사용하면 AMP와 같은 속도를 낼수 있지 않을까?
생각을 했는데, AMP service에서는 이것 이외에도 속도를 줄이기 위해서 webp 변환, jpeg 압축 등.. 많은 기술 적용을 통해서 보다 빠른 페이지를 제공하고 있다고 하네요.
그리고 일단 AMP 페이지와 유저 사이의 트래픽에 대해서 구글이 공짜로 제공하고 있다고 하니, 안 쓸 이유는 없을 것 같습니다.
PWA의 경우에는 service worker와 locale storage + hard storage를 통해서 웹 페이지 내에서 서버를 만들어서 서버의 통신을 최소환으로 줄이는 작업을 통해 보다 빠른 앱 환경을 제공하는 기술입니다. (너무 짧은가...... 요약하면 작은 AMP 서비스로 이해를 했습니다.)
이상으로 웹엔진 코아 기술 해부AMP(Accelerated Mobile Pages), HTTP/2 에 대한 후기를 마치도록 하겠습니다.
두서없이 생각나는대로 적어서 무슨 말인지 저도 담에 봤을때, 이해할수 있을지 모르겠는데... 담엔 더 글을 잘 쓰는걸로.
그리고 담번엔 AMP와 PWA에 대한 공부를 해서 그 후기를 적도록 하겠습니다.
댓글 없음:
댓글 쓰기