Tag Clouds



Clog 버전 0.1.2 업데이트 릴리즈

PDF
머리털나고 처음으로 배포했던 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를 애용해 주시는 모든 여러분들께 감사드립니다.


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

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



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


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

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

아이폰의 화면 치수

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

Portrait - 세웠을 때

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

iphone_portrait_dimensions.jpg
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

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

Landscape - 눕혔을 때

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

iphone_landscape_dimensions.jpg
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

iphone_landscape_keyboard_sizes.jpg

아이패드의 화면 치수

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

Portrait - 세웠을 때

ipad_portrait_dimensions.jpg
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

ipad_portrait_keyboard_sizes.jpg

Landscape - 눕혔을 때

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

ipad_landscape_dimensions.jpg
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

ipad_landscape_keyboard_sizes.jpg