[ 저자 서문 ]

만일 소프트웨어 애플리케이션을 만들어 가능성 있는 큰 시장에서 돈을 벌고 싶다면 윈도우 8 앱을 만드는 것은 최선의 방법이 될 수 있다.

마이크로소프트 윈도우는 전 세계에서 가장 인기 있는 운영체제며 전 세계 시장의 90%를 차지하고 있다. 2012년 6월 시점에서, 윈도우 7은 6억 카피 이상 판매됐다. 하지만 윈도우 마켓은 여타 다른 마켓(안드로이드나 아이폰 마켓)에 비해 아주 작은 수준이다.

사용자 모두가 이전 버전의 윈도우를 윈도우 8로 업그레이드하진 않겠지만, 상당히 많은 사용자들이 윈도우 8으로 옮겨갈 것으로 예측된다. 마이크로소프트 CEO 스티브 발머는 (물론, 약간 편파적인 예측이긴 하지만) 2013년 말에는 5억 명의 사용자들이 윈도우 8을 사용할 것이라고 전망했다.

나는 이 멋진 새로운 시장에서 돈을 벌어 멋진 전용 제트기를 사고 싶다. 이 책을 읽고 있는 많은 독자들도 나와 같은 생각일 것이며 나와 같은 목표를 가지고 있을 것이다. 따라서 우리의 목표를 이루기 위한 가장 바람직한 방법은 윈도우 8 앱을 만드는 것이다.

윈도우 8 앱은 윈도우 8 안에서 팔 수 있다. 윈도우 8은 윈도우 스토어를 내장하고 있으며 무료부터 999.99달러까지 가격책정을 할 수 있다. 또한 일정이나 연락처 관리 등을 하는 생산성 앱이나 앵그리 버드, 컷 더 로프 등의 게임 등 여러 종류의 앱을 만들 수 있다.

이 책은 윈도우 스토어 앱을 만들어 윈도우 스토어에서 판매하는 방법을 소개한다. 특히 이 HTML5와 자바스크립트를 사용하여 윈도우 스토어 앱을 만드는 방법을 배울 수 있다.

윈도우 앱은 C#이나 XAML, C++로도 만들 수 있지만, 이 책에서는 자바스크립트와 HTML5 등 웹 기술을 사용하여 윈도우 앱을 만드는 방법을 설명한다.

웹 사이트를 만들 때 사용하는 HTML5와 자바스크립트 그리고 CSS를 이미 알고 있다면 윈도우 스토어 앱을 만드는 것은 아주 쉽다.

이 책은 윈도우 스토어 앱을 만드는 모든 방법을 설명하며 특히 윈도우 자바스크립트(WinJS)를 사용하여 자바스크립트 앱을 만드는 방법을 설명한다. 그리고 WinJS로 평점, 메뉴, 리스트뷰 같은 컨트롤을 사용하는 방법을 알아본다.

또한 윈도우 런타임을 설명한다. 윈도우 런타임을 사용하면 순수한 웹 앱에서는 사용할 수 없는 기능들(비디오, 오디오 캡처 등)을 이용할 수 있다.

이 책의 끝 부분에서는 생산성 앱이나 게임 앱 같은 윈도우 스토어 앱을 만드는 방법을 알아본다. 예를 들어 7장과 8장에서는 리스트뷰 컨트롤을 사용하여 간단한 작업 리스트 앱을 만들며, 12장에서는 Brain Eaters라는 간단한 아케이드 게임을 만들어본다.

이 책을 읽고, 윈도우 스토어 앱을 만들어보자. 앱을 많이 팔면, 우리의 꿈인 전용 제트기도 살 수 있을 것이다.


[ 저자 소개 ]

스티븐 월터 (Stephen Walther)
마이크로소프트에서 ASP.NET팀 시니어 프로그램 매니저, Ajax 라이브러리 팀장으로 근무했고, 현재 컨설팅과 교육 업무를 하는 회사인 슈퍼엑스퍼트(Superexpert, www.SuperexpertTraining.com)를 운영 중이다. 마이크로소프트 같은 기업 고객에게 자바스크립트, HTML5, ASP.NET MVC의 기술을 사용하여 애플리케이션을 만드는 방법을 가르치고 윈도우 스토어 앱 교육 트레이닝을 제공한다.
MIT에서 박사학위를 받고 MIT와 하버드에서 철학을 가르쳤다. 하지만 철학만으로는 돈을 벌 수 없음을 깨닫고 강의를 그만 둔 후, 두 곳의 인터넷 스타트업 창업을 도왔다. 먼저 그는 스탠포드, 하버드, MIT를 비롯한 200개 이상의 대학에서 사용된 온라인 대학 애플리케이션을 제공하는 칼리지스케이프(Collegescape)라는 웹사이트(이후 ETS에 매각됨)를 만들었다. 또한 초창기 대규모 온라인 경매 사이트 중 하나였던 시티옥션(CityAuction)을 창업했다(이후 CitySearch에 매각됨).


[ 옮긴이의 말 ]

최근 몇 년간 IT업계의 핫 키워드는 단연 HTML5라고 할 수 있다. HTML5는 대부분의 사람들이 기존 HTML과 차이를 못 느낄 정도의 생소한 분야였지만, 현재는 데스크탑, 모바일을 넘어 자동차 소프트웨어 업계까지 퍼져나가고 있으며 향후에는 HTML5가 쓰이지 않는 분야가 없을 것이라고 많은 전문가가 예측하고 있다. 그러나 아직까지는 HTML5로 멋지게 상용화에 성공한 모델을 찾기가 어려웠던 것도 사실이다.

이렇듯 말만 무성하고 빈 껍데기 같았던 웹 표준 시대에 마이크로소프트에서 윈도우 8을 발표했다.

본문에 자세히 나오지만, 윈도우 8은 애플리케이션을 만드는 데 기존 네이티브 기술에 웹 기술을 더했다. 즉 기존 방식대로 C#, XAML, C++로 앱을 만들 수도 있지만 HTML5와 자바스크립트로도 동일한 사용자 경험을 가진 앱을 만들 수 있다.

종전의 네이티브 기술로는 클라우드 연결, 사용자 인증, 유려한 UI를 만드는 데 수많은 코드가 필요했지만, 윈도우 8에서는 WinJS 자바스크립트 라이브러리의 그리 많지 않은 코드만으로 유려한 사용자 경험을 가진 앱을 만들어 낼 수 있다. 이는 어떻게 보면 가장 상용화에 성공한 HTML5 모델이라 할 수 있다.

저자의 말처럼, 독자 여러분도 이 책을 읽고 HTML5에 윈도우 8의 유려한 사용자 경험을 더해 윈도우 스토어에서 인기를 끄는 멋진 앱을 만들길 기원한다.


[ 옮긴이 소개 ]

김태원
2002년부터 프로그래머 생활을 시작했다. 그동안 윈도우 앱 개발을 시작으로 윈도우 모바일, 리눅스 등 여러 플랫폼에서 경력을 쌓았다. 2007년부터는 웹 브라우저 개발을 하였으며 지금은 모바일 웹 브라우저, 플랫폼 업체인 Obigo에서 연구 개발을 하고 있다. 현재는 자바스크립트와 HTML5의 여러 분야 중 멀티미디어 분야에 관심이 많아 웹 멀티미디어 표준을 연구 중이다. 번역서로는『WebGL 3D 프로그래밍』(에이콘출판, 2012)이 있다.

목차

• 1장 윈도우 스토어 앱 만들기
  • 윈도우 스토어 앱이란?
    • 마이크로소프트 디자인 스타일 원칙
    • 윈도우 스토어 앱의 공통 특징
  • 첫 번째 윈도우 스토어 앱 만들기
    • 비주얼 스튜디오 프로젝트 생성
    • 앱의 기능 선언
    • HTML 페이지 만들기
    • 스타일 시트 생성
    • 자바스크립트 파일 생성
    • 앱 실행
  • 윈도우 스토어 앱 요소
    • 자바스크립트
    • HTML5
    • CSS3
    • 윈도우 런타임
    • 윈도우 자바스크립트 라이브러리
    • 제이쿼리
  • 비주얼 스튜디오로 윈도우 스토어 앱 만들기
    • 윈도우 스토어 앱 프로젝트 템플릿
    • 윈도우 스토어 앱 실행
  • 윈도우 스토어 앱 디버깅
    • 비주얼 스튜디오 자바스크립트 콘솔 윈도우창
    • 브레이크포인트 설정
    • DOM 익스플로러
  • 윈도우 스토어로 앱 배포
    • 윈도우 개발자 등록
    • 앱 제출
    • 앱 인증 절차
  • 정리
    
• 2장 WinJS 이해
  • 네임스페이스, 모듈, 클래스
    • 네임스페이스 사용
    • 모듈 패턴 사용
    • 클래스 사용
  • 프라미스로 비동기 프로그래밍하기프로그래밍
    • 프라미스 사용
    • then()과 done()의 비교
    • 프라미스 만들기
    • 타임아웃 프라미스 생성
    • 프라미스 취소
    • 프라미스 구성
  • 제이쿼리 셀렉터로 DOM 엘리먼트 반환
    • WinJS.Utilities.query() 메소드로 쿼리 수행
    • WinJS.Utilities.id() 메소드로 엘리먼트 한 개 반환
    • WinJS.Utilities.children() 메소드 사용
    • QueryCollection 클래스로 작업
  • xhr 함수로 Ajax 호출 수행
    • 기타 응답 타입
    • XmlHttpRequest 객체 사용자 프로퍼티
  • 정리
    
• 3장 관찰자, 바인딩, 템플릿
  • 관찰자 소개
    • 관찰자 생성
    • 관찰자 리스너 생성
    • 통지 병합
    • 통지 생략
    • WinJS.Binding.List 객체 사용
    • 관찰자 콜렉션의 관찰자 만들기
  • 선언적 데이터 바인딩 이해
    • 선언적 데이터 바인딩과 관찰자
    • HTML 폼 내용 수집
    • 선언적 데이터 바인딩과 WinJS 컨트롤
    • 선언적 데이터 바인딩과 변환기 바인딩
  • 템플릿 이해
    • 명령적 템플릿 생성
    • 선언적 템플릿 생성
    • 쿼리 셀렉터로 템플릿 적용
    • 외부 템플릿 생성
  • 정리
    
• 4장 WinJS 컨트롤 사용
  • WinJS 컨트롤 소개
    • WinJS 컨트롤의 선언적 생성
    • 명령적 컨트롤 생성
    • 컨트롤 옵션 설정
    • HTML 문서에서 컨트롤 반환
  • Tooltip 컨트롤 사용
    • contentElement 프로퍼티 사용
    • 툴팁 스타일
  • ToggleSwitch 컨트롤 사용
    • ToggleSwitch 상태 지정
  • Rating 컨트롤 사용
    • 커스텀 평점
    • 평점 전송
  • DatePicker 컨트롤 사용
    • 연연도, 월, 일 형식
    • 연도, 월, 일 중 하나만 표시하기
    • 선택한 날짜 가져오기
  • TimePicker 컨트롤 사용
    • 현재 시간 설정과 수집
    • 시, 분, 오전/오후 형식
  • FlipView 컨트롤 사용
    • 페이지 숫자 표시
    • 커스텀 FlipView 버튼 생성
  • 정리
    
• 5장 폼 만들기
  • HTML5 폼 검증
    • required 속성
    • pattern 속성 사용
    • 커스텀 검증 수행
    • 커스텀 검증 에러 스타일
    • 폼 초기화
  • HTML5 입력 엘리먼트 사용
    • 폼 필드에 레이블 붙이기
    • 숫자 입력
    • 범위 안에서 값 입력
    • 이메일 주소, URL, 전화 번호, 검색 입력
    • 값 리스트에서 값 입력
    • 파일 선택
  • 리치 텍스트 에디터 만들기
  • 상태 표시
  • 정리
    
• 6장 메뉴와 플라이아웃
  • Flyout 컨트롤
  • Menu 컨트롤
  • AppBar 컨트롤
    • 간단한 앱바 생성
    • 앱바 명령
    • 상황 명령
  • 앱 설정
    • 앱 정보 설정 만들기
    • 개인 설정 만들기
  • 윈도우 대화창
  • 정리
    
• 7장 ListView 컨트롤
  • ListView 컨트롤 소개
    • 리스트 레이아웃과 그리드 레이아웃
    • ListView 아이템 겹치지 않게 하기
  • ListView 컨트롤에서의 아이템 선택
    • 마스터/상세 뷰 생성
    • 복수 아이템 선택
  • ListView 컨트롤 아이템 정렬
  • ListView 컨트롤 아이템 필터링
  • ListView 컨트롤 아이템 그룹화
  • 시맨틱 줌으로 뷰 전환
  • ListView 동적 템플릿 전환
  • ListView 아이템 증분 로딩
  • 정리
    
• 8장 데이터 소스 사용법
  • 커스텀 데이터 소스 만들기
    • 데이터 소스 클래스 만들기
    • 데이터 어댑터 만들기
    • getCount() 메소드
    • itemsFromIndex() 메소드
    • insertAtEnd() 메소드
    • remove() 메소드
    • change() 메소드
    • 에러 핸들링
    • setNotificationHandler() 메소드
  • 파일 데이터 소스 만들기
    • 파일 데이터 소스 사용
  • 웹 서비스 데이터 소스 만들기
    • 데이터 소스 만들기
    • 웹 서비스 만들기
    • 웹 서비스 데이터 소스 사용
  • IndexedDB 데이터 소스 만들기
    • IndexedDB 소개
    • IndexedDB 데이터 소스 사용
  • 정리
    
• 9장 앱 이벤트와 상태
  • 앱 이벤트
    • 활성화 이벤트 처리
    • 에러 이벤트 처리
    • 프라미스로 이벤트 연기
    • 커스텀 이벤트 만들기
  • 일시 중단,정지/종료, 다시 시작
    • 앱이 일시 중단정지 상태인지 종료 상태인지 알아내는 방법
    • 이전 실행 상태 알아내는 방법
    • 비주얼 스튜디오로 애플리케이션 상태 테스트
    • 세션 상태로 상태 저장하기
  • 애플리케이션 뷰 상태
    • 사이드, 채우기, 세로 그리고 가로 모드
    • 미디어 쿼리 사용
    • 자바스크립트 matchMedia 메소드 사용
    • 뷰포트 정의
  • 정리
    
• 10장 페이지 요소와 내비게이션
  • HtmlControl 컨트롤 사용
  • 페이지 컨트롤 만들기
  • 멀티 페이지 앱 만들기
    • 내비게이션 앱 만들기
    • 내비게이션 앱 default.html 페이지 이해
    • 내비게이션 앱에 새로운 페이지 컨트롤 추가
    • 다른 페이지로 내비게이션
    • 내비게이션 API 이해
    • PageControlNavigator 컨트롤 이해
    • 내비게이션 상태 이해
  • 정리
    
• 11장 라이브 커넥트 API 사용
  • 라이브 SDK 설치
    • 라이브 SDK에 참조 추가
    • 앱 등록
    • 라이브 커넥트 SDK 초기화
    • 다른 스코프 구성
  • 사용자 인증
    • WL.login() 사용
    • SignIn 컨트롤 사용
    • 이벤트 인증
  • 웹 서비스로 인증 토큰 전달
    • 윈도우 스토어 앱에서 인증 토큰 보내기
    • 웹 서비스에서 인증 토큰 확인
    • 사용자 ID 반환
  • 기본 사용자 정보 반환
  • 스카이드라이브로부터 파일 업로드 및 다운로드
    • 스카이드라이브 폴더와 파일 리스트
    • 스카이드라이브로부터 파일 다운로드
    • 스카이드라이브에 파일 업로드
  • 정리
    
• 12장 그래픽과 게임
  • 게임 개요
  • 게임 타일 만들기
  • 게임 사운드 재생
  • 게임 캔버스 만들기
  • 사용자 동작 캡처하기
  • 업데이트 루프 만들기
  • 렌더 루프 만들기