이 글은 Ian Maffett와 Jason Weathersby이 쓴 App Framework and Firefox OS의 한국어 번역본입니다.

인텔의 App Framework은 MIT 라이선스를 따르는 오픈소스/크로스플랫폼/HTML5 프레임워크이며, 모바일 앱을 만들기 위해 사용합니다. App Framework는 GitHub를 통해 호스팅되고 있어 당신도 프로젝트에 기여할 수 있습니다. 특히 Firefox OS 테마(theme)에 기여할 분을 찾고 있습니다.

App Framework은 3개 영역으로 구성되어 있습니다.

쿼리 셀렉터(Query selector) 라이브러리
UI/UX 라이브러리
플러그인(Plugins)

쿼리 셀렉터 라이브러리는 jQuery*가 제공하는 API의 일부와 모바일 환경을 위해 추가한 API를 구현한 라이브러리입니다. UI/UX 라이브러리는 다양한 단말 위에서 최고의 성능을 보장하는 라이브러리입니다. UI/UX 라이브러리는 폰(phone)과 태블릿(tablet)을 위한 반응형 디자인(responsive design) 개념을 제공합니다. 플러그인은 App Framework UI의 핵심 아키텍처입니다. 플러그인 아키텍처 덕분에 App Framework를 이용하는 개발자들은 어플리케이션을 위해 만든 코드를 쉽게 공유할 수 있습니다.

Firefox OS 지원

App Framework 2.1 공개와 더불어, 이제 App Framework은 공식적으로 Firefox OS를 지원하게 되었습니다. 파이어폭스가 CSS 트랜스폼(transform) 같은 고급 CSS 기능을 벤더 중립적인 접두어를 통해 제공하고 있기 때문에, App Framework은 Firefox OS를 쉽게 지원할 수 있었습니다. 우리는 곧 공식적인 Firefox OS 테마(theme)를 추가 발표할 것입니다.

코드 얻기

프레임워크가 제공하는 모든 것을 알아보려면 App Framework 웹사이트를 살펴보세요. 거기서 퀵스타트 가이드, API 문서, UI 콤포넌트 미리보기 등을 볼 수 있습니다. GitHub에서 소스 코드를 클론할 수도 있습니다.

GitHub에서 zip 파일을 다운로드해서 압축을 풀어보세요. index.html을 통해 키친싱크(역자주: 프레임워크 사용법을 보여주는 샘플 프로젝트) 코드와 API 사용 예제 코드를 볼 수 있습니다. 그리고 App Framework UI를 테스트할 수 있고, 플러그인 데모도 볼 수 있습니다.

처음 앱 만들기

이제 App Framework를 이용해서 헬로 월드 샘플 앱을 만들어봅시다. 새로운 폴더를 만들고 키친싱크 프로젝트에서 아래 파일들을 복사하세요.

build/ui/appframework.ui.min.js
build/css/af.ui.base.css
build/css/icons.css

다음으로 index.html 파일, manifest.webapp 파일, app.js 파일을 만드세요. MDN의 manifest.webapp 문서에서 manifest.webapp 파일 만드는 법을 참고할 수 있습니다. 이 프로젝트의 폴더 구조를 다음과 같이 만듭니다.

__folder__
    index.html
    manifest.webapp
    ui
        appframework.ui.min.js
    css
        af.ui.base.css
        icons.css

당신이 좋아하는 에디터로 index.html 파일을 열고, 아래의 ‘헬로 월드’ 코드를 복사해 넣으세요.

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <!-- 메인 컨테이너 div. 이런 방식으로, 당신 앱의 UI를 한 곳에 몰아 놓을 수 있음 -->
            <!-- 화면 상단에 표시되는 header div -->
            <div id="header">
            </div>
            <!-- content는 당신의 panel들을 위치시키는 곳이며 스크롤되는 영역임 -->
            <div id="content">
                <!-- 당신의 panel들을 여기에 위치시킴 -->
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
            </div>
            <!-- 화면 하단의 navbar. 또다른 탭을 여기에 추가함 -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
            </div>
        </div>
    </body>
 
</html>

테스트

이제 만들어진 앱을 Firefox OS 시뮬레이터나 단말에서 테스트할 수 있습니다. 앱의 헤더 타이틀이 “Firefox OS” 인 것과, 콘텐츠 영역의 타이틀이 “Hello World” 인 것, 그리고 하단 푸터(footer) 영역의 아이콘이 한 개인 것을 확인하세요. 우리가 추가한 판넬(pannel)이 별로 없기 때문에 앱으로 할 수 있는 일도 별로 없습니다. 이제 코드를 수정해서 더 많은 것을 추가해봅시다. 에디터로 index.html 파일을 열고 아래와 같이 수정하세요.

<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
 
    <head>
        <title>FF OS sample</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/af.ui.base.css" />
        <script type="text/javascript" charset="utf-8" src="ui/appframework.ui.min.js"></script>
        </head>
 
    <body>
        <div id="afui">
            <div id="header">
            </div>
            <div id="content">
                <div data-title='Firefox OS' id="main" class="panel" selected="true">
                    Hello World
                </div>
                <div data-title='Page 2' id="page2" class="panel">
                    <ul class='list'>
                        <li>
                            <a href='#page2'>Item 1</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 2</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 3</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 4</a>
                        </li>
                        <li class='divider'>
                            Divider
                        </li>
                        <li>
                            <a href='#page2'>Item 5</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 6</a>
                        </li>
                        <li>
                            <a href='#page2'>Item 7</a>
                        </li>                                       
                    </ul>
                </div>
 
            </div>
            <!-- 화면 하단의 navbar. 또다른 탭을 여기에 추가함 -->
            <div id="navbar">
                <a href="#main" id='navbar_home' class='icon home'>home</a>
                <a href="#page2" id='navbar_home' class='icon paper'>Page 2</a>
            </div>
        </div>
    </body>
 
</html>

새로운 코드 보기

수정한 코드를 시뮬레이터나 단말에서 다시 실행시켜 보세요. 화면 하단의 탭바(tab bar)에서 2개의 아이템을 볼 수 있을 것입니다. 그 중 하나는 “Page 2” 링크입니다. Page 2로 이동할 때 슬라이드 효과가 표시되는 것을 확인하세요. 이어서 스타일리쉬한 리스트 목록이 표시됩니다. 리스트 목록을 스크롤하면 내장된 자바스크립트 스크롤러(scroller)가 동작합니다. 상단의 뒤로가기 버튼을 누르면 히스토리 스택 상의 이전 페이지로 이동합니다.

다음은?

시작하기 위한 템플릿을 내려받아서 당신의 어플리케이션을 만들어보세요! App Framework 웹 사이트에 있는 더 많은 문서와 팁을 확인하세요.

우리는 Firefox OS 테마를 만들고 있습니다. 우리가 만든 결과물을 확인해 보세요. 우리는 피드백 받기를 좋아합니다. 그리고 버그를 발견하면 기꺼이 수정할 것입니다. GitHub에 들려서 이슈 리스트에 버그를 등록해주세요. 만약 앱을 좀 더 확장하고 싶다면 플러그인을 만드세요. 그리고 그 플러그인을 다른 개발자들과 공유하세요.

스크린샷

아래는 Intel® XDK App Preview 어플리케이션을 실행시켜 얻은 스크린샷입니다. 이 앱은 App Framework을 기반으로 만든 크로스플랫폼 어플리케이션입니다. 그래서 폰에서도, 태블릿에서도 실행됩니다.

*기타 이름 및 브랜드는 다른 회사의 자산일 수 있습니다.

"누구에게나 평등하고 자유로운 웹"에 공감하는 직장인.

ingeeKim가 작성한 문서들…

Hacks-웹기술블로그

App Framework과 Firefox OS

작성자: ingeeKim