1. 모바일&클라우드

2. 시대를
준비하는

3. 개발자들을

4. 위한

5. 안내서
The

6. World

7. Wide

8. Web:

9. Past,

10. Present

11. and

12. Future
KT

13. Hitel

14. Corp.

15. /

16. 장동수

17. /

18. @iolothebard
1

19. WEB

20. 1.0
A

21. NEW

22. HOPE
2

23. Web

24. 1.0

25. -

26. Read

27. Only

28. Web
·HTML

29. ~3.x
·HTTP

30. ~1.0
·CGI
·극도로

31. 제한된

32. 자바“스크립트”
·사용자

33. 인터랙션

34. 거의

35. 없음
3

36. Web

37. 1.0

38. -

39. Read

40. Only

41. Web
4

42. Web

43. 1.0

44. -

45. Read

46. Only

47. Web
5

48. Web

49. 1.0

50. -

51. Read

52. Only

53. Web
6

54. WEB

55. 2.0
THE

56. ANONYMOUS

57. STRIKES

58.
BACK
7

59. Web

60. 2.0

61. -

62. Read/Write

63. Web
·HTML

64. 4.0~,

65. DHTML,

66. XHTML,

67. CSS
·HTTP

68. 1.1

69. with

70. “AJAX”
·“거시기”

71. 서버

72. 페이지
·여전히

73. 보조적인

74. “glue”

75. 자바스크립트
·제한된

76. 사용자

77. 인터랙션
8

78. Web

79. 2.0

80. -

81. Read/Write

82. Web
9

83. Web

84. 2.0

85. -

86. Read/Write

87. Web
10

88. POST
WEB

89. 2.0
RETURN

90. OF

91. THE

92. JOBS
11

93. 포스트

94. 웹2.0
Web

95. 2.0

96. is

97. a

98. marketing

99. term,

100. and

101. I

102. think

103.
you’ve

104. just

105. invented

106. Web

107. 3.0.

108. But

109. if

110. I

111. were

112.
to

113. guess

114. what

115. Web

116. 3.0

117. is,

118. I

119. would

120. tell

121. you

122.
that

123. it’s

124. a

125. different

126. way

127. of

128. building

129.
applications…⋯

130. My

131. prediction

132. would

133. be

134. that

135.
Web

136. 3.0

137. will

138. ultimately

139. be

140. seen

141. as

142.
applications

143. which

144. are

145. pieced

146. together.
There

147. are

148. a

149. number

150. of

151. characteristics:

152. the

153.
applications

154. are

155. relatively

156. small,

157. the

158. data

159. is

160.
in

161. the

162. cloud,

163. the

164. applications

165. can

166. run

167. on

168. any

169.
device,

170. PC

171. or

172. mobile

173. phone,

174. the

175.
applications

176. are

177. very

178. fast

179. and

180. they’re

181. very

182.
customizable.

183. Furthermore,

184. the

185. applications

186.
are

187. distributed

188. virally:

189. literally

190. by

191. social

192.
networks,

193. by

194. email.

195. You

196. won’t

197. go

198. to

199. the

200.
store

201. and

202. purchase

203. them…⋯

204. That’s

205. a

206. very

207.
different

208. application

209. model

210. than

211. we’ve

212. ever

213.
seen

214. in

215. computing.
Eric

216. Schmidt,

217. Seoul

218. Digital

219. Forum

220. 2007
http://blog.databanq.com/digital-media/what-is-web-30/
12

221. 포스트

222. 웹2.0
People

223. keep

224. asking

225. what

226. Web

227. 3.0

228. is.

229. I

230. think

231.
maybe

232. when

233. you’ve

234. got

235. an

236. overlay

237. of

238.
scalable

239. vector

240. graphics

241. ­–

242. everything

243. rippling

244.
and

245. folding

246. and

247. looking

248. misty

249. ­–

250. on

251. Web

252. 2.0

253.
and

254. access

255. to

256. a

257. semantic

258. Web

259. integrated

260.
across

261. a

262. huge

263. space

264. of

265. data,

266. you’ll

267. have

268.
access

269. to

270. an

271. unbelievable

272. data

273. resource.
Tim

274. Berners-Lee,

275. In

276. May

277. 2006
http://blog.databanq.com/digital-media/what-is-web-30/
13

278. 포스트

279. 웹2.0
Web

280. 2.0

281. is

282. well

283. documented

284. and

285. talked

286.
about.

287. The

288. power

289. of

290. the

291. Net

292. reached

293. a

294.
critical

295. mass,

296. with

297. capabilities

298. that

299. can

300. be

301.
done

302. on

303. a

304. network

305. level.

306. We

307. are

308. also

309. seeing

310.
richer

311. devices

312. over

313. last

314. four

315. years

316. and

317. richer

318.
ways

319. of

320. interacting

321. with

322. the

323. network,

324. not

325.
only

326. in

327. hardware

328. like

329. game

330. consoles

331. and

332.
mobile

333. devices,

334. but

335. also

336. in

337. the

338. software

339.
layer.

340. You

341. don’t

342. have

343. to

344. be

345. a

346. computer

347.
scientist

348. to

349. create

350. a

351. program.

352. We

353. are

354. seeing

355.
that

356. manifest

357. in

358. Web

359. 2.0

360. and

361. 3.0

362. will

363. be

364. a

365.
great

366. extension

367. of

368. that,

369. a

370. true

371. communal

372.
medium…⋯

373. the

374. distinction

375. between

376.
professional,

377. semi-professional

378. and

379.
consumers

380. will

381. get

382. blurred,

383. creating

384. a

385.
network

386. effect

387. of

388. business

389. and

390. applications.
Jerry

391. Yang,

392. Technet

393. Summit

394. in

395. November

396. 2006
http://blog.databanq.com/digital-media/what-is-web-30/
14

397. 포스트

398. 웹2.0
Web

399. 1.0

400. was

401. dial-up,

402. 50K

403. average

404.
bandwidth,

405. Web

406. 2.0

407. is

408. an

409. average

410. 1

411.
megabit

412. of

413. bandwidth

414. and

415. Web

416. 3.0

417. will

418. be

419.
10

420. megabits

421. of

422. bandwidth

423. all

424. the

425. time,

426.
which

427. will

428. be

429. the

430. full

431. video

432. Web,

433. and

434. that

435.
will

436. feel

437. like

438. Web

439. 3.0.
Reed

440. Hastings,

441. Technet

442. Summit

443. in

444. November

445. 2006
http://blog.databanq.com/digital-media/what-is-web-30/
15

446. 포스트

447. 웹2.0
With

448. more

449. users

450. and

451. sensors

452. feeding

453. more

454.
appli-

455. cations

456. and

457. platforms,

458. developers

459. are

460.
able

461. to

462. tackle

463. serious

464. real-world

465. problems.

466.
As

467. a

468. result,

469. the

470. Web

471. opportunity

472. is

473. no

474.
longer

475. growing

476. arithmetically;

477. it’s

478. growing

479.
exponentially.

480. Hence

481. our

482. theme

483. for

484. this

485.
year:

486. Web

487. Squared.

488. 1990­–2004

489. was

490. the

491.
match

492. being

493. struck;

494. 2005­–2009

495. was

496. the

497.
fuse;

498. and

499. 2010

500. will

501. be

502. the

503. explosion.
Ever

504. since

505. we

506. first

507. introduced

508. the

509. term

510.
“Web

511. 2.0,”

512. people

513. have

514. been

515. asking,

516.
“What’s

517. next?”

518. Assuming

519. that

520. Web

521. 2.0

522. was

523.
meant

524. to

525. be

526. a

527. kind

528. of

529. software

530. version

531.
number

532. (rather

533. than

534. a

535. statement

536. about

537. the

538.
second

539. coming

540. of

541. the

542. Web

543. after

544. the

545.
dotcom

546. bust),

547. we’re

548. constantly

549. asked

550. about

551.
“Web

552. 3.0.”

553. Is

554. it

555. the

556. semantic

557. web?

558. The

559.
sentient

560. web?

561. Is

562. it

563. the

564. social

565. web?

566. The

567.
mobile

568. web?

569. Is

570. it

571. some

572. form

573. of

574. virtual

575.
reality?

576. It

577. is

578. all

579. of

580. those,

581. and

582. more.
Tim

583. O’Reilly

584. /

585. Web

586. 2.0

587. Summit

588. 2009
http://www.web2summit.com/web2009/public/schedule/detail/10194
16

589. 포스트

590. 웹2.0
Simon

591. says...
·Web

592. as

593. a

594. Platform
·Semantic

595. Web
·Ubiquitous

596. Web
·Real-time

597. Web
·Web

598. [Web

599. Squared]
2
·...

600. or

601. something?
17

602. MOBILE

604.
SOCIAL
Social

605. +

606. Mobile
Appstore
N-Screen
Real-time

608. Big

609. Data
18

610. T.G.I.F
19

611. 소셜
20

612. 모바일
21

613. 앱스토어
22

614. N-스크린
App Book News
Voice Music Movie Game
절반이상의

615. 미국인이

616. 3개

617. 이상의

618. Device

619. 로

620. 같은

621. 컨텐츠를

622. 보고

623. 있다
Computer Smartphone Tablet Game

624. Console TV
Source:

626. A TT

627. Consumer

628. S urvey

629. (

630. conducted

631. b y

632. B urke,

633. D ec

634. 2010

635. )
23

636. 리얼타임

638. 빅데이터
24

639. CLOUD

640.
COMPUTING
SaaS
PaaS
IaaS
Hadoop

642. MapReduce
NoSQL
25

643. 클라우드

644. 컴퓨팅

645. 분류
제공 고객 Public

646. Cloud Private

647. Cloud
Software

648. as

649. a

650. Service(SaaS)
IBM,

651. HP,

652. Oracle/SUN,

653. Redhat,

654. EMC,

655. Dell,

656. ...
서비스 개인
Hadoop,

657. 3Tera,

658. Xen,

659. VMware,

660. NexR

661. VCC,

662.
Eucalyptus,

663. Enomaly,

664. ECP,

665. OpenNebula,

666. ...
클라우드

667. 서비스/애플리케이션
Cloud

668. Computing

669. Software
+ +
Apple

670. MobileMe,

671. Google

672. Apps,

673.
인프라 기업
Enterprise

674. Computing
Salesforce.com

675. Apps,

676. Nokia

677. Ovi,

678. ...
개발환경 Platform

679. as

680. a

681. Service(PaaS)
+ 기업 클라우드

682. 플랫폼
Google

683. App

684. Engine,

685. force.com,

686. MS

687. Azure,

688.
인프라 Facebook

689. F8,

690. OpenShift,

691. CloudFoundry,

692. ...
Infrastructure

693. as

694. a

695. Service(IaaS)
인프라 기업 클라우드

696. 인프라스트럭쳐
Amazon

697. S3EC2,

698. Joyent,

699. GoGrid,

700. ATT,

701. ...
출처: 한재선, Cloud Computing 개요 및 기술, NexR, 2009
26

702. Amazon

703. Web

704. Services(AWS)
사용자

705. 서비스/애플리케이션
모니터링 관리 도구 네트워킹
Amazon

706. Amazon

707. Management

708. AWS

709. Toolkit

710. for

711. Eclipse Virtual

712. Private

713. Cloud
CloudWatch Console AWS

714. SDK

715. for

716. Java,

717. PHP,

718. Route

719. 53(DNS)
Amazon

720. Elastic

721. Beanstalk Ruby,

722. Pythoh,

723. .NET Amazon

724. Elastic

725. IP
병렬처리 컨텐츠

726. 전송(CDN) 메세징
Amazon

727. Elastic

728. MapReduce Amazon

729. CloudFront Amazon

730. Simple

731. Queue

732. Service(SQS)
Amazon

733. Simple

734. Notification

735. Service(SNS)
Amazon

736. Simple

737. Email

738. Service(SES)
컴퓨팅 저장소 데이터베이스
Amazon

739. Elastic

740. Computing

741. Cloud(EC2) Amazon

742. Simple

743. Storage

744. Service(S3) Amazon

745. RDS
-

746. Elastic

747. Load

748. Balancing -

749. AWS

750. Import/Export Amazon

751. SimpleDB
-

752. Auto

753. Scaling Amazon

754. DynamoDB
Identity

755. and

756. Access

757. Management
Metering

758. and

759. Billing
27

760. Hadoop
Pig HIVE
Column-based

761. NoSQL

762. Database
Data

763. Flow SQL
HBASE
Map/Reduce
Distribute

764. Programming

765. Framework
Zookeeper
Management
Coordination
Ambari
HCatalog
Table

767. Schema

768. Management
HDFS
Distributed

769. File

770. System
28

771. NoSQL
29

772. WEB

773. as

774. a

775.
PLATFORM
HTML5
CSS3
JavaScript
Responsive

776. Web

777. Design
Web

778. App
Hybrid

779. App
30

780. HTML5
HTML5*
Web

781. Development

782. to

783. the

784. next

785. level
*

786. 웹기술만으로

787. 네이티브

788. 애플리케이션

789. 수준의

790. 웹

791. 애플리케이션을

792. 개발
*

793. 과거

794. HTML

795. 호환성을

796. 유지하면서

797. 실제

798. 개발

799. 시

800. 어려웠던

801. 문제들을

802. 해결
HTML5 ~= HTML + CSS + JS API
31

803. HTML5
Offline Device 3D , 2D Performance
Semantics Multi Media Connectivity CSS3
Storage Access Graphics Effects Integration
32

804. HTML5
•HTML5

805. 스펙

806. 너무

807. 어려워요!

808. 게다가

809. 영어!
✓

810. 한글

811. HTML5

812. 스펙

814. ➠

816. http://j.mp/html5ko

817. by

818. ClearBoth.org
•그래도

819. 내용이

820. 너무

821. 많은

822. 데요

823. ?
✓

824. 웹

825. 개발자를

826. 위한

827. 최소스펙

828. ➠

830. http://j.mp/html5devel
•튜토리얼

832. 프리젠테이션

833. 은

834. 없나요

835. ?
✓

836. Google

837. 의

838. 선물

839. ➠

841. http://www.html5rocks.com/
•그

842. 외에

843. 꼭

844. 추천해주실

845. 사이트는

846. ?
✓실전

847. HTML5

848. 가이드

849. (

850. 한글

851. PDF

852. )

853. ➠

855. http://j.mp/html5guide_ko
✓Dive

856. Into

857. HTML5

859. ➠

861. http://diveintohtml5.org/
33

862. Responsive

863. Web

864. Design
• http://www.alistapart.com/articles/responsive-web-design/
• Screen Size / Platform / Orientation 에 반응
• CSS3 Media Query , Flexible Grid Layout
• Guideline for R-W-D : http://j.mp/eWEYIJ
Phone Tablet Netbook / Tablet Desktop
34

865. 웹

866. 앱
•

867. 웹

868. 브라우저에서

869. 실행
•

870. Reading

871. ➠

878. Interaction

879. with

880. Audio/Video/Animation
•

881. 데스크탑

882. 소프트웨어

883. 수준의

884. 사용자

885. 경험

886. (UX)
•

887. 서버에서

888. 제공되므로

889. 신속한

890. 업데이트

891. *
•

892. 다양한

893. 디바이스

894. 동시

895. 지원

896. ➠

897. 모바일
35

898. Mobile Device Server Online Web Application
✓ 기존 모바일 웹페이지 포함한 웹 앱
✓ HTML5,CSS3 등을 통한 UI 향상
Web App UI
Web Database ✓ GeoLocation 이용
Server Resources
Mobile Device Server Offline Enabled Web App
✓ 오프라인에서도 사용이 가능한 웹 앱
Web ✓ 처음 접속시 주요데이타를 캐쉬
App UI Local Web Database ✓ 재접속시에 서버의 데이타와 싱크
Data Server Resources
Mobile Device Server Offline Web App
✓ 계속 오프라인으로 사용가능한 앱
Web ✓ 서버와의 동기화를 필요로 하지 않음
App UI Local Web ✓ 게임, 유틸리티, 개인정보 앱, EBook
Data Server
Mobile Device Server Hybrid Web App
App Web ✓ Native + Web 형태의 앱
Store App Web Database
✓ 앱스토어를 통한 다운로드 가능
UI Local
Data
Server Resources ✓ Native 수준의 다양한 앱 작성 가능
36

899. 하이브리드

900. 앱
•Native

901. App

902. +

903. Web

904. App Device OS
Hybrid framework
하나의

905. 웹소스로

906. 모든

907. 디바이스

908. 동시지원 Web Browser
Web

909. 으로는

910. 불가능한

911. Device

912. 기능

913. 지원
Web Application
앱

914. 스토어를

915. 통한

916. 앱

917. 판매

918. 가능 css/js/html
•Hybrid

919. Frameworks
Phonegap
Appspresso
Titanium

920. Mobile
37

921. 하이브리드의

922. 범위
Native Hybrid Web
Native

923. 내에서

924. 서버

925. 접속해서

926.
WebView

927. 활용 Hybrid

928. Frameworks 웹앱

929. 실행
Appspresso

930. /

931. Phonegap

932. /