Rev. 2.73

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

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

Comments

tab_bar_icons_closeup.png

타이타니움을 이용하여 아이폰 또는 아이패드 애플리케이션을 구축하다 보면 탭바(탭 표시줄)에 표시될 아이콘 사용법에 대하여 의문이 생길 것입니다. 애플은 이러한 목적으로 사용할 수 있는 내장 시스템 아이콘 12개를 제공합니다. 이 시간에는 기본으로 제공되는 내장 시스템 아이콘의 사용법과 사용자가 지정한 이미지 아이콘을 탭바에 적용하는 방법에 대하여 알아봅니다.

아래 코드는 두개의 윈도를 탭으로 전환하는 유저 인터페이스를 간단하게 구성한 것입니다. 이 코드를 기반으로 탭바 아이콘 지정방법에 대하여 설명하도록 하겠습다.

var tabGroup = Ti.UI.createTabGroup();

var win1 = Ti.UI.createWindow({
  title: "Home Page"
});

var tab1 = Ti.UI.createTab({
  icon: "tabbaricons/light_home.png",
  title: "Home",
  window: win1
});

tabGroup.addTab(tab1);

var win2 = Ti.UI.createWindow({
  title: "Bookmarks Page"
});

var tab2 = Ti.UI.createTab({
  icon: Titanium.UI.iPhone.SystemIcon.BOOKMARKS,
  window: win2
});

tabGroup.addTab(tab2);

tabGroup.open();

사용자 지정 탭바 아이콘

위 코드에서 tab1에 정의된 탭은 사용자 지정 아이콘으로 만들어지는 탭바 버튼입니다. “Resources” 폴더에 "tabbaricons"라는 폴더를 만들고 "light_home.png"라는 이름의 이미지 경로를 지정하는 것으로 사용자 지정 아이콘을 사용할 수 있습니다. 여기에 사용할 수 있는 양질의 탭바 아이콘을 무료로 제공하는 사이트들을 몇몇 소개합니다.

아이폰 4이상에서 지원하는 레티나 디스플레이(Retina Display)를 위해서는 약간의 달러를 지불하고 @2x 버전을 구입할 수도 있습니다. 이 경우 동일한 위치에 "light_home@2x.png"파일이 위치하는 것 만으로 별도의 추가 작업 없이 서로다른 해상도에 대응할 수 있습니다. 멋지죠?

내장 시스템 탭바 아이콘

그리고 tab2에 정의된 탭은 애플에서 기본으로 제공하는 내장 시스템 아이콘을 이용하여 만들어진 탭바 버튼입니다. 모든 해상도에 대응하는 아이콘을 무료로 사용할 수 있지만 애플이 의도하는 목적으로만 사용할 수 있습니다. 예를 들면 '즐겨찾기' 아이콘을 사용하는 경우 레이블이 시스템에 설정된 언어에 따라 자동으로 기입되기 때문에 개발자기 이를 다른 것으로 대치할 수 없습니다. 때문에 이 경우라면 title속성을 작성하는 것은 무의미 합니다.

애플에서 기본으로 제공하는 12가지 내장 시스템 아이콘은 다음과 같습니다.

Icon Name Code
bookmarks tab bar icon Bookmarks Ti.UI.iPhone.SystemIcon.BOOKMARKS
contacts tab bar icon Contacts Ti.UI.iPhone.SystemIcon.CONTACTS
downloads tab bar icon Downloads Ti.UI.iPhone.SystemIcon.DOWNLOADS
favorites tab bar icon Favorites Ti.UI.iPhone.SystemIcon.FAVORITES
featured tab bar icon Featured Ti.UI.iPhone.SystemIcon.FEATURED
history tab bar icon History Ti.UI.iPhone.SystemIcon.HISTORY
more tab bar icon More Ti.UI.iPhone.SystemIcon.MORE
most recent tab bar icon Most Recent Ti.UI.iPhone.SystemIcon.MOST_RECENT
most viewed tab bar icon Most Viewed Ti.UI.iPhone.SystemIcon.MOST_VIEWED
recents tab bar icon Recents Ti.UI.iPhone.SystemIcon.RECENTS
search tab bar icon Search Ti.UI.iPhone.SystemIcon.SEARCH
tor rated tab bar icon Top Rated Ti.UI.iPhone.SystemIcon.TOP_RATED

Comments