Medium 프론트 기술 분석

 API

Medium은 One-page Web Application으로 구성되어 있다.
HTML5 PushState (pjax 참고)를 이용하여
링크를 눌렀을 때 URL은 바뀌지만 처음부터 Request하지 않도록 했다.
추가로 불러와야할 DOM이 있는 경우엔 DOM 조각만 요청하여 넣는다.

각 페이지마다 3가지의 프론트 API가 존재한다.

  • 페이지를 처음 불러오는 경우
    ex) GET /top-100/april-2014
    Accept: text/html
브라우저는 웹페이지 요청시 기본적으로 Accept: text/html을 보내기 때문에
서버에서는 첫 요청이라는 것을 인식할 수 있다.
해당 API에서는 <html>로 시작하는 Fullpage DOM을 다 내려준다.
서버단 템플릿으로 완성된 DOM을 내려줌과 동시에,
자바스크립트 로직에서 데이터 동기화를 할 수 있도록 전역 Inline script에 JSON을 넣어주고 있다.
var GLOBALS={}에 JSON 데이터를 넣은 뒤 자바스크립트 로직에서 참조하고 있다.
medium-inline-json
  • DOM 조각의 일부만 갱신하면 되는 경우
    ex) GET /top-100/april-2014?format=fragment
    Accept: text/html

Fullpage를 불러온 뒤 링크 이동을 하는경우 타는 로직. 필요한 DOM 조각만 보내준다.

medium-fragment

  • JSON 데이터만 받고싶은 경우
    ex) GET /top-100/april-2014
    Accept: application/json
위와 마찬가지로 링크이동을 통해서 타는 로직. JSON 데이터만 보내준다.
요청시 Accept: application/json으로 AJAX Request 한다.
medium-json
이때 Response가 항상 ])}while(1);</x>로 시작하고 뒤에 JSON이 오는 형태이다.
이는 JSON Hijacking을 방지하기 위한 보안처리이다.
아래와 같은 JSON 데이터들은 데이터 성격에 따라 페이지 이동시마다 호출하여 가져온다.
https://medium.com/me/collections
https://medium.com/me/posts
https://medium.com/me/activity?minCount=100
https://medium.com/me/collections/viewed
https://medium.com/top-100/april-2014/load-more
https://medium.com/_/activity-status

CDN

자바스크립트, 이미지 파일같은 Static file들은 Amazon CloudFront를 이용하여 CDN 처리하고 있다.

통계

Google Analytics와 Google Analytics의 확장인 KISSmetrics를 이용하고 있다.
Google Analytics와 Kissmetrics는 주기적으로 통계 수집용 URL에
통계 데이터를 Query String으로 만들어서 GET Request한다.
Response는 1×1짜리 image가 나온다.
이렇게 Pseudo 이미지 파일을 GET Method로 호출하는 기법을 활용하면
Browser compatibility 문제도 없고 통계의 누락을 최소화할 수 있다.

폰트

adobe-typekit
고급 미디어 사이트답게 예쁜 Serif 폰트들을 온라인에서 사용하도록 하고 있는데,
Adobe Typekit을 이용하여 Opentype 폰트를 Web으로 제공하고 있다.
먼저 Typekit 자바스크립트 파일이 로딩되면
사용하는 폰트들의 CSS와, 폰트파일이 순차적으로 로딩된다.

브라우저 지원

IE 7으로 들어가면 아예 이미지가 깨지고, IE 10에서도 회원가입조차 안된다.
당당하게 IE지원을 버리고 크롬을 쓰라고 공지해놓고 있다.
  • Tier 1. 전체 경험 지원
    Chrome 26+, Safari 6+, Opera 15+, Firefox 19+
  • Tier 2. 글쓰기 기능을 제외하고 모두 지원
    Chrome 1+, IE 9+, Firefox 4+, Safari 3+, iOS 5+, Android 2+, Mobile Safari, Mobile Chrome
  • Tier 3. 미지원.

CSS

Base CSS / Sprite CSS / Typekit font CSS로 구분하고 있다.
Sprite CSS는 Image Sprite를 아래와 같이 CSS에 base64로 포함시켜서 넣고있다.
medium-sprite
이렇게 Data URI Scheme을 사용하는 경우 몇 가지 문제가 있다.
  • IE 6, 7 미지원
  • IE 8에서도 32k 까지만 지원
  • 이미지 Request 숫자를 줄여주지만 캐싱이 안됨.
  • Base64는 이미지 크기를 33% 증가시킴
그래서 Data URI Scheme을 이용한 Sprite는,
  • 작은 이미지만 사용
  • IE 지원을 신경안써도 될 때만 사용
  • 캐싱보다 Request를 줄이는게 더 중요할때 사용

일반적인 서비스 개발에서는,
Static file에 URL Versioning을 이용하여 수정시간을 기준으로 새로운 캐싱이 되게 하는 것이 좋다.