Rev. 2.73

Retina.js는 사용자 기기의 레티나 디스플레이 지원 여부를 구분하여 이에 맞는 고해상도 이미지가 있는지를 확인한 후 교체해주는 스크립트입니다. 레티나 디스플레이용 고해상도 이미지를 준비하는 규칙은 애플에서 사용하는 방법(@2x)과 같습니다. 예를 들어 아래와 같은 이미지 요소가 있다고 가정하면:

<img src="/images/my_image.png" />

같은 경로에서 같은 포맷을 가진 @2x 이미지를 찾고 존재하는 경우에만 자동으로 교체하는 것이죠.

<img src="/images/my_image@2x.png" />

Retina.js를 웹사이트에 적용하는 것은 간단합니다. 스크립트를 다운로드하고 페이지의 최하단(</body> 이전)에 아래와 같은 코드를 삽입합니다:

<script type="text/javascript" src="/scripts/retina.js"></script>


레티나 디스플레이 사용자는 이런 느낌을 받을겁니다. +_+:

settings.png

LESS CSS의 믹스인(Mixin) 기능을 이용하여 요소의 배경에도 고해상도 이미지를 적용할 수도 있습니다. 이 역시 기존에 사용하던 오리지널 배경 이미지와 고해상도 배경이미지(@2x)를 각각 준비하고 스타일시트에 레티나 디스플레이를 구분할 수 있는 미디어 쿼리와 background-size속성을 작성하여 개별 요소에 선택적으로 적용할 수 있습니다. 이 방법을 이용하려면 먼저 LESS CSS의 사용법을 숙지하는 것이 좋습니다.

LESS는 훨씬 적은 분량의 코드로 CSS를 작성할 수 있게 하는 메타-언어(예: CoffeeScript)입니다. 변수, 믹스인, 연산 그리고 함수같은 동적 구문을 사용할 수 있습니다. 그리고 클라이언트측(크롬, 사파리, 파이어폭스) 뿐만아니라 서버측(Node.js, Rhino)에서도 사용할 수 있습니다.

동봉된 retina.less 파일에 다음과 같이 코딩하면:

#logo {
  .at2x('/images/my_image.png', 200px, 100px);
}

요렇게 파싱되어 CSS에 적용되는 것이죠:

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

Comments

Chartbeat.png

최근 서버의 여러 상태와 쌓인 데이터를 실시간으로 시각화하는 업무가 물려 있어 이런저런 정보를 찾아보던 중에 Chartbeat이라는 아주 근사한 서비스를 발견했습니다. 등록된 웹사이트의 트래픽만을 실시간으로 분석하는 것에 그치지 않고 소셜 서비스들과 연계하여 보여주는 것이 특징입니다. 그들은 실제로 운영되는 다른 웹서비스인 someecards.com이 모니터링되는 모습을 담은 데모 페이지를 공개하여 당차게 마케팅 수단으로 이용하고 있었습니다. 그 데모를 직접 체험해 보니, "고갱님~ 걍, 돈 내고 이거 쓰세효~"라고 말하고 싶을 정도입니다.

외에도 아래와 같은 컨셉들을 찾을 수 있었는데, '의욕'이란 녀석은 이미 가출한 이후였던 것입니다.

Activity.png

Dashboard Activity section by saurabhj

Minimal.png

Minimal Dashboard by Alex Penn

Comments