페이지 형태의 웹북 뷰어를 지원하는 웹 클라이언트 개발에 대한 프리젠테이션.

1. AngularJs 기반
웹북 클라이언트 개발
강민수 minsu@netsco.kr

2. 웹북 기술 Stack
콘텐츠 Reading!
웹북 클라이언트
콘텐츠 Creation!
HTML 퍼블리셔

3. HTTP://BUK.IO
· 페이지 뷰 기술 프로토타입!
· Chrome/Safari/FireFox/IE 10+!
· 영어권 독자를 위한 웹서비스!
· 스와이프/가장자리 터치!
· 하단 양쪽에 메뉴버튼

4. 표현에 제한이 없어야 한다
새로운 시맨틱을 저자가 자유롭게 추가
Solution: AngularJS Directives
Bukle 붓글

5. 붓시맨틱 마크업 - Bukle
@1926.6.10{1926년 6월 10일}
# 6・10 만세 운동
![1926.6.10.jpg]{6・10 만세 운동}
!
[@용어:순종(조선)]{순종}의 인산일을 기해 일어난 학생중심의 만세운동이다. 3・1운동 이후 독립운동이 부진해지자 [@용어:순
종(조선)]{순종}의 장례행렬이 지나가는 종로에서 학생들이 만세시위를 벌였다. 비록 전국적인 만세운동으로 이어지지는 못했지
만, 이 사건을 계기로 침체되었던 민족운동이 다시 활기를 띄게 되었다.
!
## 경과
!
6・10 만세운동은 [@용어:1919.3.1(역사)]{3・1 운동}을 잇는 전국적・전민중적인 항일운동으로, 사전에 치밀하게 준비되었다.
그러나 일제는 3・1운동의 전철을 밟지 않기 위하여 철저한 경계 태세를 갖추었고, 경성부에는 7000여 명의 육・해군을 집결시켰
으며, 부산・인천에는 함대를 정박시켰다. 주동자는 사회주의계의 [@용어:권오설]{권오설}, [@용어:김단야]{김단야}, 이지탁, 인
쇄직공 민영식, 이민재, 연희전문의 이병립, 박하균, 중앙고보의 이광호, 경성대학의 이천진, 천도교의 박내원, 권동진 등으로, 이
들은 10만장에 달하는 격문을 준비하고, 오전 8시 30분경 순종의 상여가 종로를 지날 때 일제히 만세를 부르고 격문을 살포, 수
많은 사람들이 이에 호응했다.
!
격문의 내용은 “일본 제국주의 타도”, “토지는 농민에게”, “8시간 노동제 채택”, “우리의 교육은 우리들 손에” 등이었다. 6월 10일
순종의 인산에 참가한 학생은 2만 4000여 명이었다. 군중의 호응으로 시위가 확대되었으나 조직 사이의 유대 결여와 민족진영
의 조직약화, 노총계 사회주의계열의 사전체포 등으로 일본 경찰에 저지당하여 곧 실패하였다.
!
그러나 만세운동은 곧 전국으로 번져, 고창, 원산, 개성, 홍성, 평양, 강경, 대구, 공주 등지에서 대규모의 만세시위운동이 일어났
다.

6. 붓시맨틱 마크업 - Bukle
@1926.6.10{1926년 6월 10일}
# 6・10 만세 운동
![1926.6.10.jpg]{6・10 만세 운동}
!
[@용어:순종(조선)]{순종}의 인산일을 기해 일어난
학생중심의 만세운동이다. 3・1운동 이후 독립운동이
부진해지자 [@용어:순종(조선)]{순종}의 장례행렬이
지나가는 종로에서 학생들이 만세시위를 벌였다.

7. [# … ]{} 새로운 타입
[@ …]{} 크로스 레퍼런스
@01-01{1
[#today]
1917: [@
1962:
1993: [@ko:
1988: [@ko:
1983: [@ko:
1964: [@
1911: [@ko:105
1900: [@
1895: [@
1905: [@
1971:
1935: 새로운 문구 타입 지정
새로운 블록타입 지정
원하는 형식으로 작성

8. Buk Object Model!
각 요소별 AngularJs Directive 이용!
- buk = { item } + meta data
- item = { block } + meta data
- block = { line }
- line = { inline }
!
<buk-block data-format=“today”>
<buk-line type=“text”>을미개혁, 태양력을 처음으로 쓰기 시작</buk-line>
…
<buk-line type=“text”>
<buk-phrase data-format=“birth”>
<buk-link data-bid=“kr” data-iid=“이휘소”>
과학자 이휘소
</buk-link>
</buk-phrase>
</buk-line>
</buk-block>

9. AngularJs Directive!
!
// directive: kup-page
//-------------------------------------------------------------------
.directive('kupPage', ['$log', '$timeout', 'bu.$service',
function($log, $timeout, $bu) {
!
function reflow(element, attrs) {
var height = 0;
var count = 0;
var avg;
var check = function(elem) {
return elem.hasClass('kup-block') && !elem.attr('data-position');
};
!
angular.forEach(element.children(), function(child) {
/*
* (Attention)
* use outerHeight(true) which includes margines
* in calculating the total consumption
*/
var elem = angular.element(child);
height = height + Math.ceil(elem.outerHeight(true));
if (check(elem)) count = count + 1;
});

10. AngularJs Directive (continued)!
!
/* distribute the space evenly */
angular.forEach(element.children(), function(child) {
var elem = angular.element(child);
if (check(elem)) {
elem.css('height', (elem.height() + avg) + 'px');
}
});
}
!
function linker(scope, element, attrs) {
$log.debug('buk-page - linking ...');
reflow(element, attrs);
}
!
return {
restrict: 'C',
link : linker,
};
}
])

11. @1926.6.10{1926년 6월 10일}
# 6・10 만세 운동
![1926.6.10.jpg]{6・10 만세 운동}
!
[@용어:순종(조선)]{순종}의 인산일을 기해 일어난 학생중심의 만
세운동이다. 3・1운동 이후 독립운동이 부진해지자 [@용어:순종(조
선)]{순종}의 장례행렬이 지나가는 종로에서 학생들이 만세시위를
벌였다. 비록 전국적인 만세운동으로 이어지지는 못했지만, 이 사건
을 계기로 침체되었던 민족운동이 다시 활기를 띄게 되었다.
!
## 경과
!
6・10 만세운동은 [@용어:1919.3.1(역사)]{3・1 운동}을 잇는 전
국적・전민중적인 항일운동으로, 사전에 치밀하게 준비되었다. 그러
나 일제는 3・1운동의 전철을 밟지 않기 위하여 철저한 경계 태세를
갖추었고, 경성부에는 7000여 명의 육・해군을 집결시켰으며, 부산・
인천에는 함대를 정박시켰다. 주동자는 사회주의계의 [@용어:권오
설]{권오설}, [@용어:김단야]{김단야}, 이지탁, 인쇄직공 민영식, 이
민재, 연희전문의 이병립, 박하균, 중앙고보의 이광호, 경성대학의
이천진, 천도교의 박내원, 권동진 등으로, 이들은 10만장에 달하는
격문을 준비하고, 오전 8시 30분경 순종의 상여가 종로를 지날 때
일제히 만세를 부르고 격문을 살포, 수많은 사람들이 이에 호응했다.
!
격문의 내용은 “일본 제국주의 타도”, “토지는 농민에게”, “8시간 노
동제 채택”, “우리의 교육은 우리들 손에” 등이었다. 6월 10일 순종
의 인산에 참가한 학생은 2만 4000여 명이었다. 군중의 호응으로
시위가 확대되었으나 조직 사이의 유대 결여와 민족진영의 조직약
화, 노총계 사회주의계열의 사전체포 등으로 일본 경찰에 저지당하
여 곧 실패하였다.
!
그러나 만세운동은 곧 전국으로 번져, 고창, 원산, 개성, 홍성, 평양,
강경, 대구, 공주 등지에서 대규모의 만세시위운동이 일어났다.

12. HTML5 콘텐츠 디자인!
CSS2/CSS3/JavaScript!
디자인과 콘텐츠의 분리
KUB

13. Writer Designer
HTML 기반의 전자책 플랫폼
콘텐츠 작성자와 !
디자이너 간의 !
실시간 작업연동
HTML5 전자책
간단한 시맨틱 문법을 !
이용하여 콘텐츠 작성.
HTML 문법을 이용하여 !
콘텐츠 디자인 구성.

14. Credits
・ Python ! ! ! ! ! ! python.org!
・ Google AppEngine appengine.google.com!
・ Grunt !! ! ! ! gruntjs.com!
・ NodeJS! ! ! ! ! nodejs.org!
・ Semantic UI ! ! ! semantic-ui.com!
・ AngularJS! ! ! ! ! angularjs.org
Buk Cover Design by Jina Lee <bluebery12@hanmail.net>

15. 독도 인터넷 독본!
http://dokdobook.com!
!
북이오!
http://buk.io!
!
타임라인 한국사!
https://itunes.apple.com/us/app/timeline-
u.s.-history
DEMO / QA