Firejune

클라우드9 IDE 0.7.x 업데이트와 애플리케이션 모드

2012-05-13T23:04:49-07:00

얼마 전(지난 오월 초) 웹 기반 IDE인 클라우드9(개인 사용자용)의 코드베이스의 아키텍처가 업그레이드되는 대대적인 마이너 업데이트가 있었습니다. 설치방법과 실행방법 그리고 소소하게 UI 등에 변동사항이 있어 주요한 내용을 기록합니다.

0.7.x부터는 자체적으로 빌드해서 사용해 오던 node-builds-v4를 더이상 사용하지 않습니다. 이것은 실행 환경에 문제가 발생하면 대처하기 어려운 부분을 해결한 것입니다. 그래서 Node.JS 0.6.15 이상, NPM 1.1.16 이상을 필요로 합니다. 그리고 sm(Sourcemint)를 이용하여 소스상태를 관리하고 설치 및 갱신 하도록 변경되었습니다. 참고로 Sourcemint는 테스트 및 배포를 이롭게 하기 위해 프로젝트를 빌드하는데 필요한 소스와 패키지를 자체적으로 관리하며, 소스 리포지토리에서 설치, 변동 사항 반영 등이 처음부터 끝까지 완전히 자동화된 소프트웨어 구축 환경을 제공합니다.(참 멋진 녀석이군요!)

다음과 같이 간단하게 설치할 수 있습니다:

# npm install -g sm
# sm clone --dev https://github.com/ajaxorg/cloud9/tree/master cloud9

또는

# git clone https://github.com/ajaxorg/cloud9.git cloud9
# cd cloud9
# sm install

그리고 실행합니다:

# cd cloud9
# bin/cloud9.sh

프로젝트 폴더를 지정할 수도 있습니다:

# bin/cloud9.sh -w ~/git/myproject

물론 포트를 변경할 수도 있습니다(기본 포트는 3131):

# bin/cloud9.sh -p 80

아쉽게도 호스트네임(Hostname)은 변경을 할 수 없게 되어있지만 configs/default.js 파일의 20라인부터 다음과 같이 수정해 주면 -h 옵션으로 호스트네임을 변경할 수 있습니다.

변경 전:

var projectDir = (argv.w && path.resolve(process.cwd(), argv.w)) || process.cwd();
var fsUrl = "/workspace";

var port = argv.p || process.env.PORT || 3131;

var config = {
    name: "Cloud9",
    tmpdir: __dirname + "/../.architect",
    basePath: __dirname + "/../plugins-server",
    containers: {
        master: {
            title: "Cloud9",
            plugins: [{
                packagePath: "./cloud9.connect",
                port: port,
                host: "localhost"
            }, {
                packagePath: "./cloud9.sourcemint",

변경후:

var projectDir = (argv.w && path.resolve(process.cwd(), argv.w)) || process.cwd();
var fsUrl = "/workspace";

var port = argv.p || process.env.PORT || 3131;
var host = argv.h || process.env.HOST || "localhost";

var config = {
    name: "Cloud9",
    tmpdir: __dirname + "/../.architect",
    basePath: __dirname + "/../plugins-server",
    containers: {
        master: {
            title: "Cloud9",
            plugins: [{
                packagePath: "./cloud9.connect",
                port: port,
                host: host
            }, {
                packagePath: "./cloud9.sourcemint",

이제 호스트네임 옵션이 활성화 되었습니다:

# bin/cloud9.sh -h firejune.io

업데이트는 더욱 간단합니다:

# git pull
# sm update

만약 npm에서 디펜던시(Dependency)가 발생하면 이렇게 해결합니다:

# sm install

아래 보이는 화면은 크롬에서 애플리케이션 모드로 작동하는 Cloud9의 모습입니다. 내비게이션 사이드바가 사라진 대신 상단의 도구영역이 활성화되었으며, 메뉴를 자동 숨김 하는 기능 등이 추가되었습니다.

이번 회사 프로젝트에는 GitHub와 Cloud9 IDE을 도입해서 협업하기로 결정했습니다. Cloud9을 맥OS에 로컬로 설치한 후 백그라운드에서 실행합니다. 그리고 크롬의 애플리케이션 바로가기 기능을 이용해서 Dock에 등록하고 실행하면 브라우저 UI가 모두 사라져 마치 레알(?) 애플리케이션을 실행하는 느낌으로 사용할 수 있습니다. 하지만 아쉽게도 맥OS용 크롬에는 이 기능이 비활성화되어 있기 때문에 Mait Vilbiks씨가 만든 createGcApp.dmg를 이용하여 바로 가기를 생성할 수 있습니다. :)

덧 2012-5-17:

맥OSX에서 탭/윈도 닫기의 단축키는 Command + W 이고 컨벤션인데 클라우드9의 "커런트 탭 클로즈" 단축키는 Option(alt) + W로 되어있어 실제 윈도를 닫아버리는 실수를 자주 합니다. 이 단축키를 변경하려면 plugins-client/ext.tabbehaviors/tabbehaviors.js 파일을 열고 35라인을 아래와 같이 수정하면 Command + W 키를 이용하여 현재 탭을 닫을 수 있습니다. 물론 다른 단축키들도 입맛에 맛게 고칠 수 있습니다.

변경 전:

        ["closetab", "Option-W", "Ctrl-W", "close the tab that is currently active", "Closing active tab.", function(){ return ide.onLine && tabEditors.activepage; }],
        ["closealltabs", "Option-Shift-W", "Ctrl-Shift-W", "close all opened tabs", "Closing all tabs.", function(){ return ide.onLine && tabEditors.activepage; }],
        ["closeallbutme", "Option-Ctrl-W", "Ctrl-Alt-W", "close all opened tabs, but the tab that is currently active", "Closing tabs.", function(){ return ide.onLine && tabEditors.length > 1 }],

변경 후:

        ["closetab", "Command-W", "Ctrl-W", "close the tab that is currently active", "Closing active tab.", function(){ return ide.onLine && tabEditors.activepage; }],
        ["closealltabs", "Command-Shift-W", "Ctrl-Shift-W", "close all opened tabs", "Closing all tabs.", function(){ return ide.onLine && tabEditors.activepage; }],
        ["closeallbutme", "Command-Ctrl-W", "Ctrl-Alt-W", "close all opened tabs, but the tab that is currently active", "Closing tabs.", function(){ return ide.onLine && tabEditors.length > 1 }],

Comments(2) | Hits(1934)

데스크탑 업그레이드 - 12번째 에디션

2012-05-07T20:05:02-07:00

희망사양(2,802,170원):

CPU : 인텔 코어i7-2세대 3820 (샌디브릿지-E) 쿼드코어/3.6~8 GHz - 365,490원
GPU : 이엠텍 HV 지포스 GTX680 Prime Edition D5 2GB x 2(SLI) - 1,429,520원
Motherboard : ASUS P9X79 PRO STCOM 인텔소켓 2011 / X79 - 425,900원
Memory : G.SKILL DDR3 4G PC3-17000 CL9 RIPJAWS ZH 2,133MHz x4 - 264,560원
HDD : KINGMAX SMP35 Client (120GB) x 2(RAID 0) - 272,820원
Power: Skydigital PowerStation2 PS2-500CR - 43,880원

절충사양(2,087,410원):

CPU : 인텔 코어i7-2세대 3820 (샌디브릿지-E) 쿼드코어/3.6~8 GHz - 365,490원
GPU : 이엠텍 HV 지포스 GTX680 Prime Edition D5 2GB - 714,760원
Motherboard : ASUS P9X79 PRO STCOM 인텔소켓 2011 / X79 - 425,900원
Memory : G.SKILL DDR3 4G PC3-17000 CL9 RIPJAWS ZH 2,133MHz x4 - 264,560원
HDD : KINGMAX SMP35 Client (120GB) x 2(RAID 0) - 272,820원
Power: Skydigital PowerStation2 PS2-500CR - 43,880원

타협사양(1,934,350원):

CPU : 인텔 코어i7-3세대 3770K (아이비브릿지) 쿼드코어/3.5~9 GHz/650 MHz GPU - 424,210원
GPU : GIGABYTE 지포스 GTX560 Ti UDV+ Super-Over Edition V2 D5 1GB x 2 (SLI) - 560,000원
Motherboard : ASUS P8Z77-V DELUXE STCOM 인텔 소켓1155 / Z77 - 368,880원
Memory : G.SKILL DDR3 4G PC3-17000 CL9 RIPJAWS ZH 2,133MHz x4 - 264,560원
HDD : KINGMAX SMP35 Client (120GB) x 2(RAID 0) - 272,820원
Power: Skydigital PowerStation2 PS2-500CR - 43,880원

업그레이드(1,685,440원):

CPU: 인텔 코어2익스트림 QX9770 (요크필드) 쿼드/ 4쓰레드/3.2GHz/6MB x2 - 611,100원
GPU : GIGABYTE 지포스 GTX560 Ti UDV+ Super-Over Edition V2 D5 1GB x 2 (SLI) - 560,000원
Memory: G.SKILL DDR3 8GB PC3-12800 CL7 RIPJAWS 2Gx4 - 130,080원
HDD : Axxen Axid 100 series (120GB) x 2(RAID 0) - 276,280원(가이드 포함)
Power: Skydigital PowerStation2 PS2-500CR - 43,880원
Cooler: 잘만 CNPS9900 MAX 블루 - 64,100원

거사(?)를 앞두고 데스크탑 시스템을 업그레이드했습니다. 위 목록은 최고 희망 사양부터 기존 시스템 업그레이드까지 두루 검토하였고 결국 가장 저렴하게 성능을 끌어올리는 방법을 택했습니다. 예전 같았으면 여지없이 최고 사양으로 질렀을 텐데 한참을 고심하는 자신이 못내 아쉽더군요. 이번 업그레이드의 테마는 3D Vision입니다. 아직 n당의 3D Vision을 완벽하게 지원하는 디스플레이를 국내에서 구할 수가 없어서 출시를 기다리고 있습니다. CPU와 메모리를 교체하여 FSB 1600 MHz 전송속도를 가지게 했고 GTX560 Ti 그래픽 카드를 SLI로 묶었습니다. CPU는 775소켓의 전설급인 코어2익스트림 QX9770으로 오버클럭이 용이한 녀석입니다. 4년전에 출시된 CPU입니다만 i시리즈 CPU와 견줄만한 성능을 갖추었습니다. 그리고 요즘 SDD 가격이 너무 착해서 120GB 짜리를 두개를 RAID 0으로 구성했고요. 보드만 버텨준다면 앞으로 한 3-4년은 무난하지 않을까 생각합니다.

Comments(10) | Hits(4730)

CSS 3D Transform 기반의 작은 3D 엔진 - Sprite3D.js

2012-04-26T00:26:55-07:00

Sprite3D.js는 CSS 3D Transforms 속성을 이용하여 3D를 구현하는 작은 자바스크립트 3D 엔진 라이브러리입니다. 체이닝 형식의 섹시한 구문을 사용하여 HTML 요소(<div>)를 간단하게 3D 객체로 래핑할 수 있습니다. CSS 3D Transforms 속성은 태생부터가 하드웨어-엑셀레이션(hardware-acceleration)을 염두에 두어 만들어졌기 때문에 WebGL에 버금가는 성능을 보여줍니다.

다음과 같은 문법으로 3D 객체를 생성합니다.:

new Sprite3D()
	.setPosition(x,y,z)
	.setRotation(rx,ry,rz)
	.setClassName('class')
	.update();

정말 간단한 3D 메소드들:

	setPosition(x,y,z) setX(x) setY(y) setZ(z) 
	move(x,y,z) moveX(x) moveY(y) moveZ(z) 
	setRotation(x,y,z) setRotationX(x) setRotationY(y) setRotationZ(z)
	rotate(x,y,z) rotateX(x) rotateY(y) rotateZ(z)
	setScale(x,y,z) setScaleX(x) setScaleY(y) setScaleZ(z)

WebGL(OpenGL ES 2.0의 자바스크립트 바인딩) 스팩이 오징어로 보이네요 :)

재미있는 점은 모바일 브라우저에서도 하드웨어 가속이 되는 3D를 구현할 수 있게 된다는 사실입니다.(아직 모바일 브라우저에서는 WebGL이 지원되지 않고 있습니다.) WebGL이 활성화된 <canvas>요소를 필요로하지 않는다는 얘기죠. 또한, HTML 요소를 그대로 이용하기 때문에 시멘티컬한 웹 페이지를 제공할 수 있게 된다는 것입니다. 검색도 되면서 CSS로 스타일링 할 수 있는 3D 컨텐츠는 좀 매력적이지 않나요? 아래는 Sprite3D.js로 작성된 예제인 Carton Box입니다.

Sprite3D.js는 특정 자바스크립트 라이브러리에 종속적이지 않습니다. 따라서 어떠한 환경에서든지 사용할 수 있으며 MIT Licence이고 WebKit 계열(Chrome, Safari, iOS, Android 4, BlackBerry), Firefox 10 그리고 Internet Explorer 10에서 정상적으로 사용할 수 있습니다.

Comments | Hits(10395)

HTML5 History/State API를 이용한 Ajax 히스토리 구현

2012-04-24T04:09:25-07:00

HTML5의 History/State API를 이용하여 브라우저의 히스토리를 조작하는 방법에 대해 알아보겠습니다. 그동안 location.hash로 꾸리 하게 밖에 구현할 수 없었던 브라우저 히스토리를 대체할 수 있는 명세로서, Ajax로 호출한 컨텐츠가 드로잉 된 페이지를 조회한 후 브라우저에서 "뒤로 가기" 버튼을 눌러 다시금 이전 위치로 이동하고 해당 컨텐트를 조회할 수 있게 하는 목적으로 사용할 수 있습니다. 알다시피, 이와 같은 뒤치다꺼리를 하지 않으면 방문객은 우리의 웹 사이트를 무심결에 떠나 버리는 불상사가 발생할 수 있지요. 얼마 전에 소개한 Customized JS Bin에 이 명세를 적극적(대부분의 요청에 사용)으로 반영하면서 알아낸 몇 가지 사실들에 대하여 정리해보겠습니다.

비동기(동적으)로 컨텐츠를 갱신할 때 매번 마음 한구석에 남는 응어리는 바로 시멘틱 웹입니다. Ajax로 불러들여 진 컨텐츠가 정적이어(검색되어)야 할 필요성 가장 먼저 판단해야 합니다. 왜냐하면, 이에 따른 추가작업이 필요하거나 구조가 달라지기 때문이죠. 만약 시멘티컬한 환경을 고려한다면 서버-사이드에서 하나의 URL을 각기다른 형식의 데이터로 응답할 필요가 있습니다. 비동기 요청에는 레이아웃을 제외한 갱신영역이나 내용만을 담은 작은 HTML 조각 혹은 JSON과 같은 응답형태를 가지고, 일반적인 요청에는 레이아웃을 포함한 완벽하게 파싱된 정적인 HTML 컨텐트를 응답하는 두 가지를 모두 준비하는 것이 좋습니다.

A 요소에 href 속성에는 페이지가 갱신될 주소를 반드시 기입해서 웹 크롤러들이 컨텐츠를 샅샅이 긁어갈 수 있게 하고 클릭을 자바스크립트로 제어하여 Ajax로 요청 및 갱신하는 것이 일반적인 패턴입니다. 하나의 주소에서 응답형태가 다른 컨텐트를 제공하는 것이 마음에 안들지도 모릅니다. 물론 개별적으로 응답형태에 따른 주소를 제공하거나 파라미터를 이용할 수도 있겠지만, 개인적으로 선호하지 않는 방법이기 때문에 개별 주소를 사용하는 방법에 대해서는 생략하겠습니다. 대부분의 서버-사이드 언어는 Ajax 요청인지를 구분할 수 있으며, PHP는 다음과 같은 방법으로 알아냅니다.

<?php
  $ajax = isset($_SERVER['HTTP_X_REQUESTED_WITH'])
      || (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['REQUEST_METHOD'] == 'GET');

  if ($ajax) {
    header("Content-Type: application/json; charset=utf-8");
?>
{
  "title": "Fire JS Bin",
  "url": "http://jsbin.firejune.com",
  "text": "Collaborative playground for web developers."
}
<?php
  } else {
    header('Content-type: text/html; charset=utf-8');
?>
<html>
  <head>
    <title>Fire JS Bin</title>
  </head>
  <body>
    <div id="content">Collaborative playground for web developers.</div>
  </body>
</html>
<?php
}
?>

JS Bin의 컨텐츠는 코드이기 때문에 검색으로 접근될 확률이 낮습니다만, 기본 설계가 정적인 컨텐츠를 제공하는 형태로 만들어져 있기 때문에 시멘틱한 모습으로 방향을 잡았습니다. History API를 지원하는 브라우저에서는 동일한 주소에서 JSON형식의 데이터만 수신하고 그렇지 않으면 주소창의 주소가 변경되면서 이동합니다. 이제 브라우저 히스토리를 조작해 봅시다.

  function drawHTML(data, state) {
    if (state) history.pushState(data, data.title, data.url);
    $('#content').html(data.text);
  }

  function requestError(req, state) {
    alert('WTF? ' + state);
    //location.href = this.url;
  }

  $('a').click(function() {
    if (history.pushState) {
      $.getJSON(this.href).success(drawHTML).error(requestError);
      return false;
    }
    return true;
  });

범국민 라이브러리인 jQuery를 이용한 간단한 예입니다. A 요소의 클릭을 감시하는 함수는 지원 여부를 구분하여 href에 명시된 주소로 JSON 요청을 날린후 이벤트 진행을 중단하며 그렇지 않은 경우 A 요소가 정상적으로 클릭 되어 일반적인 주소 이동이 발생하도록 내버려 둡니다. drawHTML 함수에는 패이지가 갱신될 코드와 history.pushState 메서드를 호출하는 코드로 구성되어 있습니다. 이 메서드는 3개의 인자를 받는데, 해당 페이지의 상태를 보존하기 위한 데이터와 문서 제목 그리고 해당 페이지의 URL입니다. drawHTML 함수의 두 번째 state 인자가 유효한 때에만 실행되며 호출되는 즉시 브라우저의 주소창이 바뀌고 히스토리 스택이 쌓입니다. 여기까지는 쌓기만 한 것입니다. 이제 히스토리가 변경되면 발생하는 이벤트인 window.onpopstate를 작성해 봅시다.

  $(window).bind("popstate", function(event) {
    var data = event.originalEvent.state;
    if (data) drawHTML(data, false);
  });

이때 보존해 두었던 데이터를 그대로 캐시처럼 활용함으로써 두 번 다시 서버를 힘들게 하지 않아도 되는 장점이 있습니다. 그리고 drawHTML의 두번째 인자를 false로 넘겨 주는 것은 히스토리를 더이상 쌓지 않게 하기 위함입니다. 이미 쌓여있는 녀석을 또 쌓을 필요는 없으니까요. 이외에도 history.replaceState라는 메서드가 있는데, 해당 주소의 컨텐트가 갱신된 경우에 사용하는 것입니다. 이게 전부에요. 간단하죠? 해시가 아닌 URL이 변경되는 레알 히스토리이면서 Ajax로 신규 컨텐트만 갱신하고 캐시효과도 누릴수 있기 때문에 매우 빠릅니다. 우리가 잘 알고있는 GitHub에서도 슬라이드 효과를 동반한 소스코드 살펴보기 그리고 개시물을 조회하는 곳곳에 이 API를 사용하고 있습니다.

음... History/State API를 지원하지 않는 브라우저에서는 종전과 같이 location.hash트릭으로 비스무리한 기능을 부가적으로 제공할 수 있습니다. HTML5 History/State API를 모든 브라우저에서 사용 가능하게 하는 History.js도 좋은 대안이 될 수 있을 것아서 적용했다가, JS Bin은 이미 이 해시를 이용하여 에디터의 뷰 활성 상태를 관리하기 때문에 충돌이 발생했고 또한 다소 무거운 느낌이 들어서 바로 제거했습니다. jsbin.firejune.com으로 이동해서 컨텐츠와 주소창이 변경되는 모습을 직접 확인해보세요. 참 그리고 커스터마이즈한 JS Bin도 많이 진척되었습니다. 관심 있으신 분들은 릴리즈 노트도 함께 봐주세요. 소개글 이후 자세한 변동내역이 모두 기록되어 있습니다.

Comments | Hits(9907)

JSBin 2.9.8 커스토마이즈

2012-03-14T09:42:33-07:00

그동한 소스분석 용도로 잘 사용해 오던 JSBin을 새로운 버전으로 업데이트 하려다가 커스토마이즈 하는 기쁨에 쉼취해 회사일도 마다하고 최근 3주간 불꽃 코딩을 작렬했습니다. 애용중인 맥용 소스코드 편집기인 Panic사의 코다에 영감을 얻어 웹기반으로 연출하려고 소스를 재작성한 것입니다. 이제 얼추 모습을 갖추어 그동안의 커스토마이즈 내역을 기록하고자 합니다. 기존 JSBin에 새로운 피쳐들을 여럿 추가했습니다. 레이아웃 리프레시, 편집, 보기, 저장소 도구를 상호작용 컨텍스트 메뉴로 리그룹, 저장소 이름 설정, 트위터 인증을 통한 저장소 관리 및 협업, 히스토리를 지원하는 Ajax 데이터 CRUD, CSS 편집 지원, 편집기(CodeMirror2) 환경 설정 및 테마 설정, 단축키 지원 확대, CSS3 기반(애니메이션, 웹폰트 아이콘 사용 노 이미지), 상태바, 문자열 찾기 및 찾아 바꾸기, Minifier 및 Beautifier‎ 내장 및 북마클릿 생성 도구, Closure Compiler 도구 제공, 매치 하이라이터, 커서위치 표시기, 씬 스크롤러, 패널별 단축 메뉴, 저장소 문자열 검색 및 패널 보임/숨김, 모든 상황을 로컬 스토리지에 보존 등이 주요한 내용입니다. WebKit 계열 브라우저를 중심으로 작업했기 때문에 타 브라우저에서는 오작동이 발생할 수 있으며, 일부 기능(다이얼로그(Apprise), 서체 크기 조정, 코드 폴딩, 자동 완성, 코드 힌트, SNS 공유, 커밋 및 포크 추적, Diff 도구 등)은 아직 미구현 상태입니다. jsbin.firejune.com에서 직접 경험해 보세요.

Comments(4) | Hits(24043)

HTML5 Canvas 기반 이미지 비교 - JS-ImageDiff

2012-02-27T13:41:24-08:00

얼마 전 Flotr2를 배포한 Humble software development에서 만든 JS-ImageDiff는 HTML5 Canvas 요소를 이용하여 이미지의 변동사항을 비교할 수 있게 하는 자바스크립트로 작성된 작은 유틸리티입니다. Node.JS용으로도 배포되었으며 사용법과 실행 결과는 다음과 같습니다.

var a = new Image()
  , b = new Image()
  , count = 0
  , canvas, context, c;

a.onload = b.onload = function () {
  count++;
  
  // Both images have loaded.
  if (count >= 2) {
    canvas = imagediff.createCanvas();
    canvas.width = 200;
    canvas.height = 200;
    context = canvas.getContext('2d');
    c = imagediff.diff(a, b);
    context.putImageData(c, 0, 0);
    document.body.appendChild(canvas);
  }
};

a.src = '/image/a.jpg';
b.src = '/image/b.jpg';

document.body.appendChild(a);
document.body.appendChild(b);

Comments | Hits(26376)

IE 버전에 따른 하위 호환성을 HTML만으로 구분

2012-02-25T02:26:31-08:00

하위 버전 의존도가 높은 IE에서 호환성을 유지하기 위해 다양한 방법의 트릭들으로 스타일을 유지해 왔습니다. IE 관련 스타일 이슈들이 디펙되어 가는 모습은 마치 개임속의 몹을 잡는듯한 희열을 안겨주지만, 스파게티가 되어가는 코드들을 짜고 앉아 있자니 마음 한구석이 짠해지는 경험을 이 바닥에 있는 분이라면 다들 경험해 보셨을 거란 생각을 합니다. 기획자분이 불현듯 출현해 졸라 미안한 표정으로 "IE6 하위 호환성은 이제 우리도 포기한대요."라는 대사를 칠까 봐 두렵기까지 합니다. 시맨틱이고 나발이고 밑바닥부터 다시 재작성해야 할 공산이 크니까요. 이러한 상황에 대응하기 적합한 새로운 트릭이 있어 여기에 공유합니다. 바로 조건부 주석을 십분 활용하는 것이죠.

<!--[if lt IE 7 ]><body class="source ie ie6"><![endif]--> 
<!--[if lt IE 8 ]><body class="source ie ie7"><![endif]--> 
<!--[if gte IE 8 ]><body class="source ie"><![endif]--> 
<!--[if !IE]><!--><body class="source"><!--<![endif]-->

이 코드는 body 요소에 IE 버전을 구분할 수 있는 클래스 이름을 지정하여 CSS 핵으로 떡칠이 되어있는 스타일 시트를 이제 클래스 이름만으로 깔끔하게 구분할 수 있게 되었습니다. 하지만 IE 계열 브라우저에서만 사용되는 코드들 때문에 불필요한 로딩지연으로 선량한 브라우저들이 피해를 받는다고요?

<link rel="stylesheet" href="/css/style.css" type="text/css" />
<!--[if lt IE 7 ]><link rel="stylesheet" href="/css/ie6.css" type="text/css" /><![endif]--> 
<!--[if lt IE 8 ]><link rel="stylesheet" href="/css/ie7.css" type="text/css" /><![endif]--> 
<!--[if gte IE 8 ]><link rel="stylesheet" href="/css/ie8.css" type="text/css" /><![endif]-->

요렇게 하면 아예 버전별로 스타일을 구분하여 로드할 수 있습니다. IE6 호환성을 해제하려면 ie6.css만 제거하는 것으로 간단하게 해결되지요. 물론, 더 응용하면 하위 IE가 아니거나 하위 버전에서만 필요로 하는 자바스크립트 컴포넌트나 모듈을 구분하여 작성하고 위와 같이 로드할 수도 있겠습니다.

Comments(1) | Hits(25862)

Dropbox 무료계정 용량 늘리기 대행 - 라이프해커 2.0

2012-02-23T08:24:39-08:00

라이프해커 2.0에서 제공하는 서비스:

1) Dropbox 무료계정: 무료 계정은 현재 용량이 얼마인지와 상관없이 가장 빠른 시간내에 최종 용량을 미니멈 18GB까지 확장시켜 드립니다. 오다가 접수된후 용량이 18GB까지 늘어나는데 소요되는 시간은 일반적으로 48시간을 초과하지 않습니다. 드롭박스의 기타 이벤트와 베타 테스트에 미리 참여하셨던 일부 고객분들은, 저희 서비스를 이용하셔서 최종 용량을 20GB ~ 24GB(무료 계정)로 만드셨습니다. 아무튼, 저희는 여러분들의 현재 용량/이벤트 참여여부와 상관없이, Dropbox에서 주는 16GB의 보너스용량 미만부분을 모두 채워 드립니다.

2) Dropbox Pro 계정: 유료 서비스 사용자는 저희를 통해, 최고로 32GB의 용량을 별도로 얻으실 수 있으며, 나중에 유료 서비스를 해제하실 경우에도 32GB의 용량을 계속 무료로 사용하실 수 있게 되십니다. 유료계정의 서비스는 별도의 채널을 통해서 진행되기에, 이 곳에서 미리 선결재를 하지 마시고 lifehacker3.0+Pro@gmail.com으로 이메일을 보내셔서 요구되는 자료와 가격 및 결재방법을 확인하신후 진행 부탁드립니다.

내용이 긴 싱글 페이지의 멋진 전환효과 - Curtain.js

2012-02-14T09:01:03-08:00

Victor Coulon씨가 작성한 Curtain.js는 긴 내용을 다루는 싱글 페이지로 구성된 웹 페이지에 멋진 전환 효과를 부여하는 jQuery 플러그인입니다. 문서의 섹션을 패널들로 화면에 고정하고 해당 패널을 스크롤 하면 마치 커튼이 타고 올라가는 듯한 페이지 전환효과가 발생합니다. 스크롤 바나 마우스 휠 또는 키보드를 이용하는 종전의 관습을 그대로 따르기 때문에 사용자에게 혼란을 일으키지 않으면서 마치 상호작용이 발생하는 듯 한 전환 효과를 만들어낼 수 있습니다. 기본적인 사용방법은 다음과 같아요.

$(function () {
    $('.curtains').curtain({
        scrollSpeed: 600,
        menu: $('.menu')
    });
});

Victor Coulon씨는 Edits Quarterly와 interviewmagazine.com, madebygrave.com 등의 사이트에서 영감을 얻었다고 말했으며 이 소스를 누구나 사용할 수 있도록 소스를 GitHub에 공개했습니다. 트렌디하면서 인터랙티브한 컨텐츠를 제공하는 느낌을 아주 쉽게 날로 먹을 수 있겠군요.

Comments(1) | Hits(10830)

EVE 온라인 - WebGL 모델 뷰어 서비스 시작

2012-02-10T10:26:39-08:00

EVE 온라인의 제작자인 CCP 게임은 WebGL을 이용하여 그들의 게임에 등장하는 우주선과 지형 등을 3D로 관찰할 수 있고 관련 정보를 제공하는 웹페이지를 서비스하기 시작했습니다. 이제 WebGL을 실제 서비스에 적용하는 사례가 나타나는군요. 아주 훌륭한 쇼케이스입니다.

Comments | Hits(12581)

파비콘을 이용하여 새소식을 알리는 - Tinycon

2012-02-07T21:28:44-08:00

Tinycon은 현재 웹사이트에서 사용 중인 파비콘에 작은 번호를 동적으로 표시되도록 조작하여 사용자에게 새 소식을 알리는 작은 라이브러리입니다. HTML5 캔버스 요소를 지원하는 브라우저에서만 작동합니다.

구글 지메일, 리더 등과 같은 서비스에서는 새 소식을 알리는 카운트를 동적으로 타이틀 텍스트에 출력하여 사용자에게 확인이 필요함을 시각적으로 알리고 있습니다만 구글의 "탭 고정"이나 파이어폭스에서 "앱 탭" 기능을 사용하면 페이지의 타이틀이 숨고 파비콘만 남게 되어 무용지물입니다. 이러한 경우라면 웹사이트에서 발생한 이벤트를 전달할 때 아주 효과적으로 사용할 수 있는 기막힌 아이디어입니다.

기본적인 사용방법은 다음과 같습니다.

Tinycon.setBubble(6);

다음과 같은 옵션을 이용하여 사용자화 할 수 있습니다.

Tinycon.setOptions({
    width: 7, // the width of the alert bubble
    height: 9, // the height of the alert bubble
    font: '10px arial', // a css string to use for the fontface (recommended to leave this)
    colour: '#ffffff', // the foreground font colour
    background: '#549A2F', // the alert bubble background colour
    fallback: true // should we fallback to a number in brackets for browsers that don't support canvas/dynamic favicons
});

~~1초마다 1씩 카운트가 증가하도록 이곳에 적용했습니다. 보이나요?~~
이 사이트를 사용 중인 접속자(활성 사용자) 카운트로 변경했습니다.

Comments(2) | Hits(11693)

한 문서를 실시간으로 여럿이 동시에 편집하는 - ShareJS

2012-02-03T14:30:23-08:00

Joseph Gentle씨는 Operational Transform(운영변환) 알고리즘을 구현한 Node.JS용 모듈인 ShareJS를 배포했습니다. 이 모듈은 여러명의 사용자가 웹브라우저에서 하나의 문서를 실시간으로 동시에 편집 할 수 있는 애플리케이션을 쉽게 구축할 수 있도록 돕는 것이 목적입니다. 그는 운영변환 알고리즘을 제대로 구현하는 것은 아주 어렵고 오랜 시간이 소요된다고 토로했습니다. 이 알고리즘의 핵심은 하나의 문서를 여럿이 동시에 편집해도 충돌이 일어나지 않게하는 구조를 가진다는 것입니다. 그리고 자신을 Google Wave 팀의 엔지니어로 일하면서 2년동안 연구한 결과를 ShareJS로 다시 작성한 것이라 밝혔습니다. 이제 여러분도 Etherpad와 같은 문서 편집 도구를 쉽사리 만들어 낼 수 있게 된 것입니다.

sharejs.open('blag', 'text', function(error, doc) {
  var elem = document.getElementById('pad');
  doc.attach_textarea(elem);
});

이봐봐... 정말이에요! 단 4줄로 Etherpad 같은 앱을 구현해 버리잖아요.

위 데모는 ShareJS의 예제 중 하나인 실시간 협업 코드 편집기입니다. 당신이 지금 편집하고 있는 상황은 이 웹페이지에 접속한 모든 사용자에게 실시간으로 방송됩니다. 물론 동시에 편집하는 것도 가능합니다. 이것은 웹상에서 코드를 편집하기 위한 라이브러리인 Ace(Cloud9 IDE에서 사용됨)와 실시간 통신을 위한 Socket.IO, 그리고 Redis 데이터베이스를 이용하여 마지막 편집 데이터를 영구 보존하도록 만들어졌습니다.

Comments | Hits(11305)

D3.js 기반 실시간 시계열 데이터 그래프 - Rickshaw

2012-02-01T23:05:28-08:00

사진 서비스인 Shutterstock에서 만든 Rickshaw는 시계열(Time-Series) 데이터를 웹페이지에 그래프로 그려주는 도구입니다. 히스토리컬 한 정적인 데이터 셋을 실시간으로 지속해서 갱신해 줍니다. 커브, 바, 라인, 퍼센트, 스트림 등의 다양한 그래프를 지원하며 그래프의 특정 구간을 확대하거나 곡선을 단순화 하거나 옵셋을 변경하거나 특정 타임셋에 이벤트를 발생시키고 정보를 조회하는 등의 상호작용이 실시간으로 반영되도록 설계되었습니다.

Rickshaw는 Mike Bostock씨의 D3.js를 래핑하는 형식으로 구축되었으며, D3.js는 데이터 기반 문서(Data-Driven Documents)의 작성을 돕기위한 목적으로 만들어진 작은 라이브러리입니다. 상호작용이 용이하고 데이터의 흐름을 부드러운 애니메이션으로 처리할 수 있도록하여 실시간 데이터를 다루는데 제격입니다. 백번 말하는것보다 한번 보는게 낫겠죠. 이 인터랙티브 슬라이드를 죽 훓터보세요.

아래 데모는 커스터마이즈 된 것으로 기존 데모의 버그를 수정하고 jQuery 의존성을 제거했으며 스택이 150건이 쌓이면 오래된 순서로 타임셋이 드랍되도록 했습니다. 때마침 시계열 데이터 그래프에서 특정 타임셋에 발생하는 이벤트를 효율적으로 표시할 수 있는 수단을 찾고 있었는데 잘 나와주었네요. 개인적으로 운영하는 firejune.io의 실시간 서버 상황에 에 우선적으로 적용해 볼 예정입니다.

Comments | Hits(36856)

HTML5 제대로 알고 씁시다! - html5please.us

2012-01-31T09:28:23-08:00

HTML5의 현재 상황을 제대로 알고 사용하자는 취지로 만들어진 웹사이트인 html5please.us는 HTML5와 CSS3 등에서 지원하는 기능들을 찾고, 그것이 사용할 준비가 되어 있는지 알고, 대략적인 개념을 설명하고 있으며, 꼭 필요한 것인지를 판별하고, 필요로 하는 작업을 확정/폴리필(polyfill)/예비로 구분하여 정의하고 있습니다. 추천하는 떔빵(?) 라이브러리 정보도 제공하고 있네요. 그리고 이 웹사이트에 개제된 정보가 잘못되었다고 판단되면 직접 수정하거나 GitHub로 Pull 요청을 할 수 있습니다.

여기에는 듣보잡 단어인 polyfill(폴리필)이라는 신조어가 나오는데 뭔 개소리냐며 지나치다가 하도 눈에 자주 밟혀서 이제야 조사해 보았습니다. "polyfill"이란 최신 브라우저에서는 작동하지만 오래된 브라우저에서는 HTML5 API를 모방하는 자바스크립트 라이브러리 따위의 도움을 받아 정상적으로 작동하도록 대안으로 기능을 구현하는 행위를 의미합니다. 폴리필에 대한 더 자세한 내용은 Remy Sharp씨가 작성한 "What is a Polyfill?" 포스트를 참고 하세요.

그리고 폴리필하기 위한 라이브러리들의 이름에서 자주 등장하는 단어가 shim(쉠?)인데 "틈 메우는 쐐기, 나무, 쇠, 돌"이란 뜻이 있습니다. 직역하자면 구린 브라우저(또는 브라우저 벤더 지들 끼리 쳐 싸우느라 사용방법이 다르거나 없음)에서 지원하지 않는 어떠한 기능을 땜빵하려는 목적 정도로 이해할 수 있겠네요. Modernizr에서 작성한 HTML5 Cross Browser Polyfills 위키 문서에는 폴리필하기 위한 각종 땜질용 라이브러리들이 일목요연하게 정리되어 있으니 이 또한 참고하세요.

Comments(2) | Hits(52824)

자바스크립트가 비활성화 되었다면 리디렉션

2012-01-31T01:23:17-08:00

이제는 좀처럼 자바스크립트가 없는 웹페이지를 찾아보기 힘들 정도로 자바스크립트는 대중화되었습니다. 그러나 웹브라우저에는 자바스크립트를 비활성화하는 기능이 존재하기 때문에 모든 사용자가 자바스크립트를 사용할 수 있는 환경이라 판단하는 것은 옳지 않습니다.(그딴 사용자는 무시하자고 하는 분이 계시면 마음의 벽을 쌓으시길...) 이런 경우 사용자에게 자바스크립트를 활성화 할 것을 권고하는 등으로 사용하는 요소가 바로 noscript 요소인데 요녀석을 대체 컨텐츠로 리디렉션하는 트릭이 있어 공유합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <noscript>
      <meta http-equiv="refresh" content="0; url=noscript.html">
    </noscript>
    <title>Redirect to a Page for Print if JavaScript is disabled</title>
  </head>
  <body>
    <header>
      <h1>Redirect to a Page for Print if JavaScript is disabled</h1>
    </header>
    <section>
      <p>JavaScript is <em>enabled</em>.</p>
    </section>
  </body>
</html>

noscript 요소를 head 요소에서 사용하고 meta 요소에 http-equiv속성을 refresh로 설정했습니다. 지정된 시간이 지나면 특정 주소로 이동하는 meta 요소입니다. 위 코드는 자바스크립트를 사용할 수 없는 환경의 사용자를 구분하여 noscript.html로 리디렉션합니다. 이를 응용하면 link 요소와 style 요소등을 응용하여 스타일의 변화를 꾀할 수도 있을 것입니다.(HTML4에서도 작동하는지는 확인하지 못했어요;)

마땅히 리디렉션 시킬 곳이 없다거나 대체 컨텐츠를 만들기 귀찮다면 enable-javascript.com으로 연결하는 것을 권장합니다. 크로아티아 친구들이 서비스하는 이 웹사이트는 방문객이 자바스크립트의 필요성과 활성화하는 방법을 상세히 설명하는 내용을 다루고 있습니다.(한국어가 없길래 날로 번역해서 넘겨줬더니 발빠르게 페이지를 추가해 주더군요. 리소스 작업을 구글닥에서 실시간으로 협업한 Toni씨 반가웠고, 번역에 도움주신 여친님 고마워요. ㅎㅎ)

Comments | Hits(23426)

인상적인 오디오 신디사이저 - Morning Star Synth

2012-01-30T12:37:04-08:00

Cristiano Belloni씨는 순수 HTML5만을 이용하여 스텝 시퀸서에 의해 제어되는 Monophonic Bassline 신디사이저인 Morning Star를 만들었습니다. 모질라가 밀고있는 Audio Data API와 구글이 밀고있는 Web Audio API를 모두 지원하는 KievII 라이브러리를 사용했습니다. 이 라이브러리 역시 Cristiano Belloni씨가 배포한 것으로, 오디오 DSP 뿐만 아니라 다양한 GUI 요소들까지도 포함하고 있습니다. 손잡이(knobs), 슬라이더 등은 캔버스 요소로 만들어 졌으며, 전체 UI가 하나의 캔버스 요소입니다.

신디사이저 자체에는 스탭 편집, 피아노 롤, 페턴 제어, 녹음 및 재생, 다양한 효과들 등, 아주 많은 기능을 포함하고 있습니다. 사용자의 마지막 변동 사항을 자동으로 localStorage에 저장하여 편집 도중 브라우저를 닫았다 열어도 계속해서 작업을 이어나갈 수 있습니다. 또한 자신이 작업한 음악을 URL로 내보낼수 있어 친구와 협업하는 것도 가능하다고 합니다. 보다 자세한 정보는 Cristiano Belloni씨의 블로그에 작성되어 있으며, 소스코드는 Github에 공개했습니다.

Comments | Hits(17133)

WebRTC 데모 - 포토부스 스타일 라이브 비디오 이펙츠

2012-01-29T12:38:37-08:00

애플의 기본 프로그램인 포토부스의 멋진 그래픽 필터 효과들을 사용해 본 경험이 있으세요? Paul Neave씨는 브라우저만으로 이와 유사한 기능을 제공하는 HTML5 비디오 이펙츠 데모를 선보였습니다. 아쉽게도, 지금 출시된 브라우저들은 플래시를 이용하지 않는 한 웹캠을 사용할 수 있는 방법이 없지만, 최근 구글 크롬은 차기 버전(코드네임 카나리아)에 들어갈 핵심기능인 WebRTC(Web Real-Time Communications) API의 getUserMedia를 이용하여 이 데모를 정상적으로 수행해 볼 수 있습니다. 카나리아를 구하는 방법과 설정하는 방법은 조금있다가 살펴 보기로 하고요. 이 데모에 포함된 비디오에 실시간으로 반영되는 효과들은 자바스크립트와 WebGL을 이용한 것입니다. 대략 살펴 보면, HTML5의 비디오 요소에서 얻어낸 아웃풋 데이터를 캔버스 요소로 불러와서 WebGL의 쉐이더 효과를 입힌 것입니다. 포토부스와 유사한 카운트가 나타나면서 스냅샷을 찍을 수 있고 찍은 사진을 소셜 네트워크에 공유하거나 다운로드 할 수 있습니다. 정말 멋지지 않아요?

만약 getUserMedia가 활성 되지 않은 경우 별도로 준비된 동영상이 나타나며 여러 그래픽 효과들만 실험해 볼 수 있습니다. 웹캠과 연동하여 태스트하려면 조금 복잡한 과정을 거쳐야 합니다. 앞서 말씀드린 크롬의 카나리아 버전을 설치한 후에 실행 옵션을 주어야 하는데, 윈도 버전은 속성창을 열어 대상란의 쌍따옴표(")뒤에 "--enable-media-stream" 이라고 작성해 주어야 하고 맥용은 다음과 같이 실행합니다.

open -a "/Applications/Google Chrome Canary.app" --args --enable-media-stream

그리고 주소창에 "chrome://flags"를 입력하여 나타난 옵션 패널에서 "Media Stream Flag"를 활성시키고 재시작 합니다. 보다 자세한 사용법은 이 곳에 있으니 참고하세요. 최대 100fps까지 확보되며 안정적으로 작동하는 것을 확인하였습니다. 페이스타임과 같은 웹앱이 나오는 것도 이제 시간문제로군요. 떨거지들이 어영부영 만든 블라블라 API의 웃는 얼굴에 침이라도 뱉듯이 종지부를 찍어버리는 구글은 참 무섭습니다.

Comments | Hits(39093)

Clog 버전 0.1.2 업데이트 릴리즈

2012-01-16T00:30:03-08:00

머리털나고 처음으로 배포했던 Node.JS용 모듈인 Clog를 0.1.2 버전으로 업데이트했습니다. 이 마이너 업데이트는 종전과 로그 출력방법이 동일하며 새롭게 configure 메서드가 추가되었습니다. 이 메서드를 이용하면 콘솔의 유형 단위로 로그를 필터링 할 수 있습니다. 사용 방법은 다음과 같습니다.

var clog = require('clog');

// display level configration:
clog.configure({'log level': 2});
//=> {'log': true, 'info': true, 'warn': false, 'error': false, 'debug': false}

// custom display level configration:
clog.configure({
  'log level': {
    'log': true,
    'info': true,
    'warn': false,
    'error': true,
    'debug': false
  }
});
//=> {'log': true, 'info': true, 'warn': false, 'error': true, 'debug': false}

configure 메서드는 객체를 인자로 받으며 'log level' 속성에 정의된 디스플레이 래밸의 숫자 또는 커스텀 래밸 플래그들로 구성된 객체를 인식하도록 만들었습니다. 래밸의 수는 log, info, warn, error, debug순으로 허용할 단계를 의미합니다. 즉 2를 기입하면 log와 info만 출력하게 되는 것이죠. 만약 당신이 모든 로그를 제외한 경고만 출력하고 싶다면 다음처럼 작성하면 됩니다.

clog.configure({
  'log level': {
    'log': false,
    'info': false,
    'warn': true,
    'error': false,
    'debug': false
  }
});

// or

clog.configure({'log level': 0});
clog.configure({'log level': {'warn': true}});

또한 configure 메서드는 나중에 다시 정의해도 문제되지 않으며, 커스텀 레이블도 필터링 할 수도 있도록 처리되었습니다. 커스텀 레이블을 사용중이라면 다음과 같이 필터링 할 수 있습니다.

clog('server', 'start listening on port 3000');  // custom head
clog.configure({'log level': {'server': false}});

이 옵션들을 잘 이용하면 운영과 개발 모드를 구분하여 자동으로 필터링하거나 어떤 상황에서 특정 메시지만 출력하도록 하는 동적인 구현도 가능할 거예요. 다음 업데이트에는 사용자 지정 색상을 지원하도록 할 예정입니다만, 언제 실행에 옮길지는 저도 잘 모르겠습니다; 끝으로 GitHub를 통해 이 아이디어를 주신 Antoine Musso씨와 여로모로 전파에 힘써주신 A.J님, Outsider님 그리고 Clog를 애용해 주시는 모든 여러분들께 감사드립니다.

Comments | Hits(246175)

CSS3와 자바스크립트를 이용한 프리젠테이션 impress.js

2012-01-13T00:39:56-08:00

사내 개발자가 아닌 분들을 대상으로 하는 HTML5 발표가 있어서 자료를 조사하던 중 Bartek Szopka씨가 만든 impress.js를 발견하고 소개했습니다. 보시던 분들의 반응이 아주 좋더군요. impress.js는 CSS3와 자바스크립트를 이용하여 인상깊은 프리젠테이션을 웹기반으로 만들어 줍니다. 화면 전환에는 다양한 CSS transition과 3D transform이 사용되었습니다.

HTML5의 스펙들 중 classList와 dataset API를 사용하기 때문에 이를 지원하지 않는 브라우저에서는 정상적으로 작동하지 않는다고 합니다. impress.js가 제대로 작동하는 브라우저는 현재 크롬과 사파리밖에 없습니다. 위 데모를 작동시키려면 프레임 영역을 클릭하고 방향키를 눌러보세요.

Comments(6) | Hits(106702)

iOS 디바이스별 화면 구성요소 치수들

2012-01-12T22:37:53-08:00

iOS 기기용 웹앱이나 네이티브앱 개발시 유용하게 사용될 수 있는 치수들입니다. 특히, 모든 iOS 기기를 지원하는(유니버셜) 앱을 개발할 때 자주 찾게 되는 자료중 하나입니다. 스테이터스 바, 네비게이션 바, 탭 바, 키보드 등의 사이즈를 세웠을 때와 눕혔을 때로 구분하여 측정했습니다.

아이폰의 화면 치수

아이폰에서 해상도를 계산할 때 굳이 레티나 디스플레이의 해상도(640 x 960)를 의식하여 계산할 필요는 없습니다. 단순히 이미지가 사용되는 곳에 더블픽셀(@x2)의 고해상도 이미지를 한 셋트 더 준비하면 된다는 사실만 기억하세요.

Portrait - 세웠을 때

앱 시작시 나타나는 오프닝 이미지는 기본으로 320 x 367 픽셀의 "filename.png"로 설정하고 레티나용으로 표시될 이미지는 640 x 734 픽셀의 "filename@2x.png"로 설정하면 됩니다.

iPhone Portrait Width: 320px
iPhone Portrait Height: 480px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 367px
Tab Bar Height: 49px

Keyboard Height: 216px

키보드가 나타난 상황에서는 메인 스크린의 일부와 탭바를 가립니다. 키보드 크기를 제외한 나머지 영역의 크기를 계산할 때 참고하세요.

Landscape - 눕혔을 때

아이폰을 눕혔을 때 나타나는 변화는 메인 컨텐츠 영역의 높이가 480에서 219픽셀로 줄어드는 것이고 네비게이션 바의 높이가 44에서 32픽셀로 줄어든다는 것입니다. 오프닝 이미지는 기본으로 480 x 219 픽셀 그리고 레티나용(@2x)은 960 x 438 픽셀입니다. 참고로 아이폰의 앱 시작 이미지는 세로와 가로 모두 준비할 필요가 없습니다. 자신의 앱이 가로와 세로 중 어디에 최적화 되어있는지를 판단하여 한가지만 준비하면 됩니다.

iPhone Landscape Width: 480px
iPhone Landscape Height: 320px

Status Bar Height: 20px
Nav Bar Height: 32px
Main Content Area Height: 219px
Tab Bar Height: 49px

Keyboard Height: 162px

아이패드의 화면 치수

아이패드는 아직 레티나 디스플레이를 지원하지 않기 때문에 더블픽셀(@2x) 이미지를 준비할 필요가 없습니다.

Portrait - 세웠을 때

iPad Portrait Width: 768px
iPad Portrait Height: 1024px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 911px
Tab Bar Height: 49px

Keyboard Height: 264px

Landscape - 눕혔을 때

아이폰과 달리 아이패드는 화면을 눕혔을 때 네비게이션 바의 높이에는 변화가 없습니다.

iPad Landscape Width: 1024px
iPad Landscape Height: 768px

Status Bar Height: 20px
Nav Bar Height: 44px
Main Content Area Height: 655px
Tab Bar Height: 49px

Keyboard Height: 352px

Firejune

클라우드9 IDE 0.7.x 업데이트와 애플리케이션 모드

덧 2012-5-17:

데스크탑 업그레이드 - 12번째 에디션

희망사양(2,802,170원):

절충사양(2,087,410원):

타협사양(1,934,350원):

업그레이드(1,685,440원):

CSS 3D Transform 기반의 작은 3D 엔진 - Sprite3D.js

HTML5 History/State API를 이용한 Ajax 히스토리 구현

JSBin 2.9.8 커스토마이즈

HTML5 Canvas 기반 이미지 비교 - JS-ImageDiff

IE 버전에 따른 하위 호환성을 HTML만으로 구분

Dropbox 무료계정 용량 늘리기 대행 - 라이프해커 2.0

라이프해커 2.0에서 제공하는 서비스:

관련 참고 링크:

내용이 긴 싱글 페이지의 멋진 전환효과 - Curtain.js

EVE 온라인 - WebGL 모델 뷰어 서비스 시작

파비콘을 이용하여 새소식을 알리는 - Tinycon

한 문서를 실시간으로 여럿이 동시에 편집하는 - ShareJS

D3.js 기반 실시간 시계열 데이터 그래프 - Rickshaw

HTML5 제대로 알고 씁시다! - html5please.us

자바스크립트가 비활성화 되었다면 리디렉션

인상적인 오디오 신디사이저 - Morning Star Synth

WebRTC 데모 - 포토부스 스타일 라이브 비디오 이펙츠

Clog 버전 0.1.2 업데이트 릴리즈

CSS3와 자바스크립트를 이용한 프리젠테이션 impress.js

iOS 디바이스별 화면 구성요소 치수들

아이폰의 화면 치수

Portrait - 세웠을 때

Landscape - 눕혔을 때

아이패드의 화면 치수

Portrait - 세웠을 때

Landscape - 눕혔을 때