월드 와이드 웹 (www)

강원대학교 컴퓨터과학전공 문양세

월드 와이드 웹 (WWW)

2

Contents

학습목표 웹의 개념을 이해한다 . 웹 브라우저의 종류와 사용법을 알아본다 . 다양한 웹 브라우저의 특징을 알아본다 . 웹을 이용한 각종 응용 서비스를 살펴본다 .

목차 웹 서비스 웹 브라우저 정보 검색

Web Programming & Prac-tice

by Yang-Sae Moon

웹의 출현

웹 출현 이전에 인터넷은 ?• ( 컴퓨터 ) 전문가들의 외부 컴퓨터에 접속 , 정보를 공유하는 수단

• 주로 telnet, ftp 등이 인터넷 서비스의 대표적 수단이었음

• 일반인이 인터넷을 사용하기에는 어려움이 많았음

Tim Berners-Lee ( 스위스 원자연구센터 CERN 의 연구원 )• 하이퍼링크 기반의 문서 구조를 제안

문서에서 링크를 통해 다른 링크로 연결하는 ( 당시에는 ) 혁신적 개념

• 하이퍼링크를 지원하는 HTTP(hypertext transfer protocol) 에 대한 RFC 제출

• 위키 : http://en.wikipedia.org/wiki/Tim_Berners-Lee

하이퍼링크와 HTTP 는 오늘날 웹이 있게 한 인터넷 역사에서 중요한

기술로 인정 받음

http://en.wikipedia.org/wiki/File:Tim_Berners-Lee.jpg

4

01_ 웹 서비스

웹의 개념과 발전

스위스의 입자물리연구소 (CERN) 에서 원거리의 연구자끼리 새로운 아이디어나 연구 결과

정보를 효과적으로 공유할 수 있는 수단을 찾는 데서부터 시작

1989 년 CERN 에 근무하고 있던 팀 버너스 리 (Tim Berners Lee) 는 하이퍼텍스트

프로젝트라고 명명된 정보 전달 방법을 제안

하이퍼텍스트 프로젝트의 최초 과제 : 물리학협회 회원 간의 정보 교환과 의사 소통을

위해 네트워크로 정보들을 연결해 주는 시스템 구축

1992 년 11 월에 모자익 (Mosaic) 웹 브라우저를

개발하여 사용자에게 무료로 배포

5

01_ 웹 서비스

웹의 개념과 발전 하이퍼텍스트 문서

문서 간 연결이 존재하는 문서

하이퍼미디어

단순히 텍스트 간의 연결뿐만 아니라 음성 , 이미지 , 동영상과 같은 다양한 매체가 서로 결합한 문서 형태


by Yang-Sae Moon

WWW 관련 용어 (1/5)

하이퍼텍스트 (hypertext)• 어떤 자료를 가지고 있으면서 , 다른 문서로의 링크 (hyperlink) 를 가지고 있는 문서

• 인터넷 언어인 HTML 로 만들어짐

• 확장자는 *.HTML 혹은 *.HTM 임

하이퍼미디어 (hypermedia)• 텍스트 이외에 오디오 , 그림 또는 동영상 등의 다양한 멀티미디어 정보를 말함

• 하이퍼텍스트와 마찬가지로 하이퍼링크를 통해 다른 문서로의 연결고리를 가짐

하이퍼링크 (hyperlink)• 문서간의 이동이나 한 문서 내에서의 이동을 위해 사용되는 링크


by Yang-Sae Moon


하이퍼텍스트 ( 하이퍼미디어 ) 와 하이퍼링크


by Yang-Sae Moon


HTML (HyperText Markup Language)• WWW 에서 사용하는 표준 문서 양식

• 하이퍼텍스트를 만드는 수단 / 언어

• 사용자에게 보여줄 문서의 표현 형식을 문서 내부에 지정

• ( 소스 보기를 통해 웹 사이트의 HTML 문서를 볼 수 있음 , 아래는 동아일보 소스 보기 )


by Yang-Sae Moon


브라우저 (or 클라이언트 프로그램 )• 웹에서 사용자 인터페이스를 제공해 주는 프로그램• HTML 문서를 보여 주며 , HTML 문서의 특정부분을 클릭하면 연결된 자료를 보여주는

하이퍼링크 기능을 가짐• 전에 찾았던 문서로의 이동 등을 처리• 대표적 예제 :MS Explorer, Google Chrome, Firefox, Apple Safari, Opera 등


by Yang-Sae Moon


HTTP (HyperText Transfer Protocol)• WWW 상에서 웹 서버와 웹 클라이언트가 HTML 문서를 송수신하기 위해서 사용하는

프로토콜 ( 통신규약 )

URL (Uniform Resource Locator)• 웹 서비스에서 제공되는 여러 가지 자료들에 대한 접근형식 , 존재하는 위치 및 자료의

이름을 표시하는 역할

• 인터넷 상의 모든 자료가 갖는 유일한 주소

접근 프로토콜 ://IP 주소 또는 도메인 이름 / 문서의 경로 / 문서이름

예 ) http://cs.kangwon.ac.kr/~ysmoon/courses.html

11

01_ 웹 서비스

웹의 특징 복잡한 정보를 빠르고 체계적으로 이용 가능함

예 1) 영어 소설을 읽다가 단어를 모를 경우 , 링크 연결 혹은 키워드 검색으로 신속히 해당

단어의 의미를 확인할 수 있음

예 2) 해외여행을 가기 전에 , 여행지 정보를 웹 검색을 통해 확인하고 , 숙박 , 교통편 등의

예약이 가능함

인간에게 친숙한 그래픽으로 구현됨

텍스트 , 그래픽 , 사운드 , 동영상 등을 동시에 표현할 수 있음

WYSWYG(What You See What You Get) 환경을 제공하여 남녀노소 인터넷 / 웹 사용이

편리함

12

01_ 웹 서비스

웹의 특징 인터넷을 통하여 정보를 제공하는 방법을 변화시킴

과거 : 특정 서버 ( 예 : 도서관 ) 에 정보와 데이터가 집중됨

현재 : 정보 및 데이터가 다양한 제공자 서버에 분산되어 관리됨

예 : 온라인 서점 – 저자 홈페이지 – 대학 도서관 – 도서 평가 사이트

인터넷을 통하여 제공되는 응용 서비스의 형태를 변화시킴

과거 : 이메일 , 퍼일 전송 (FTP), 뉴스 그룹 등이 별도

서버에서 별도 서비스로 제공됨

현재 : 하이퍼텍스트 , 하이퍼미디어 등을 통해

통합 관리가 가능함

13

01_ 웹 서비스

웹 서비스 동작 과정

① 사용자는 해당 서버에 접속하여 TCP/IP 연결 설정하고

② HTTP 를 통하여 문서를 요청 . 서버는 자신의 파일 시스템에서 요청한 문서를 찾아서

③ HTTP 를 통하여 클라이언트에 전송

④ 전송이 끝나면 TCP/IP 접속 해제


by Yang-Sae Moon

웹 서비스 (홈페이지 ) 작동 원리

INTERNET

① 웹 브라우저에서 URL 입력

웹서버

웹 브라우저 웹 브라우저

② 입력된 URL 주소의 웹서버에게 요청

③ 요청받은 객체 전송

④ 웹 브라우저에 표시


by Yang-Sae Moon

웹 호스트 서버의 작동 원리

호스트는 필요한 통신 프로토콜을 관리하고 , 웹 사이트를 생성하기 위한

페이지와 관련 소프트웨어를 가지고 있음

서버 소프트웨어는 호스트에 상주하면서 페이지를 지원하고 클라이언트

웹 브라우저로부터 오는 요구에 응함

서버 소프트웨어에는 데이터베이스 서버 , FTP 서버 , 네트워크 서버

등이 있음

일반적으로 , 유닉스 , 윈도우 NT, 리눅스 , 매킨토시 운영체제 등을

사용

브라우저에 정보를 보내는 일 이외에 , JSP(Java Server Page), ASP(Active Server Page) 를 수행하기도 함


by Yang-Sae Moon

JSP, ASP, PHP?

17

Contents



18

02_ 웹 브라우저

인터넷 익스플로러 1995 년에 만들어져 운영 체제에 포함되어 배포 버전 2 에서 SSL 프로토콜을 , 버전 3 에서 ActiveX 를 구동할 수 있게 되면서 많은 사용자

확보 현재까지 지속적으로 버전업을 하여 기능을 개선 특징

ActiveX 컨트롤러 , 비주얼베이직 스크립트 , 확장 규약 , 자바 컴파일러 JIT( Just In Time), HTML 레이아웃 등

19


웹 브라우저 검색 공급자 선택 창에서 검색 공급자 [Naver] 를 선택한다 .

실습 5-1 사용자가 원하는 검색 공급자 추가하기

1

[ 그림 5-9] 인터넷 익스플로러 8 검색 공급자 추가 창

20


‘ 이 공급자를 기본 검색 공급자로 지정 (M)’ 을 체크하고 <추가 > 버튼을 선택한다 .2

[ 그림 5-10] 인터넷 익스플로러 8 검색 공급자 추가 확인 창

21


다음과 같이 [Naver] 가 사용자가 입력한 키워드를 검색할 기본 검색 공급자로 지정한다 .3

22


다른 검색 공급자를 이용하여 검색하려면 검색어 입력 창에서 다음과 같이 검색 공급자를 선택할 수 있다 .

4

23


오른쪽의 콤보 버튼을 클릭하면 검색 공급자에 대해 몇 가지 설정을 할 수 있다 . 먼저 검색 공급자 추가 방법을 알아보자 .

[추가 검색 공급자 찾기… ] 클릭

5

6

24


다음 화면에서 [Google] 을 추가 검색 공급자로 추가7

25


Google 검색이 추가된 것을 확인한다 .8

26


검색창의 오른쪽 콤보버튼을 클릭하여 [ 검색 공급자 관리 ] 를 선택한다 .

실습 5-2 검색 공급자 관리하기

1

27


검색 공급자 관리 화면이 나타난다 .2

[ 그림 5-19] 인터넷 익스플로러 8 기본 검색 공급자 변경 창 1

28


다음과 같이 Google 을 선택한 후 [ 기본값으로 설정 ] 을 클릭하면 기본 검색 공급자를 Google로 변경할 수 있다 .

3

[ 그림 5-20] 인터넷 익스플로러 8 기본 검색 공급자 변경 창 2

29


검색창의 오른쪽 콤보버튼을 클릭하여 [ 이 페이지에서 찾기… ] 를 선택한다 .

실습 5-3 현재 접속한 웹 페이지에서 키워드 검색하기

1

30


‘internet’ 이라는 키워드를 검색하고 [ 이 페이지에서 찾기… ] 를 선택한 결과 화면이다 .2

[ 그림 5-22] 인터넷 익스플로러 8 현재 페이지에서‘ internet ’ 키워드 검색 결과

31


다음은‘ you’ 라는 키워드를 검색한 결과이다 .3

[ 그림 5-23] 인터넷 익스플로러 8 현재 페이지에서‘ you’ 키워드 검색 결과

32


[즐겨찾기 ]-[즐겨찾기에 추가… ] 를 클릭한 후 [즐겨찾기 모음에 추가 ] 를 선택한다 .

실습 5-4 즐겨찾기 도구 모음에 추가 , 삭제하기

1

33


즐겨찾기 도구 모음에 현재 사이트가 등록된 것을 확인할 수 있다 .

추가된 즐겨찾기 도구는 [즐겨찾기 ]-[즐겨찾기 모음 ] 에서 마우스 오른쪽 버튼을 클릭하거나 해당 도구 모음에서 마우스 오른쪽 버튼을 클릭하여 삭제할 수 있다 .

2

3

34


임의의 기사 위에 마우스를 놓고 마우스의 휠을 누른다 . ( 오른쪽 버튼 후 새탭에서 열기 )

실습 5-5 새로운 탭에 링크 열기

1

[ 그림 5-40] 인터넷 익스플로러 8 링크 열기

35


원래의 문서 탭 바로 옆에 새로운 탭으로 연결된 기사를 보여 준다 .2

[ 그림 5-41] 인터넷 익스플로러 8 새 탭 연결 결과 화면

36


InPrivate 브라우징은 웹 서핑 과정에서의 방문 기록 , 쿠기 등을 남기지 않는 기법이다 . 공공장소에서 웹 브라우저를 사용할 때 , 프라이버시 보호를 위해 유용하다 .

실습 5-6 InPrivate 브라우징이란 ?

http://windows.microsoft.com/ko-kr/windows-vista/what-is-inprivate-browsing

37


[ 안전 ] 도구에서 [InPrivate 브라우징 ] 을 클릭한다 . (IE10 에서는 [ 도구 ] 에서 선택 )

실습 5-7 InPrivate 브라우징 열기

1

38


주소 표시줄 앞에 표시가 있는 브라우징 창이 새롭게 열린다 .

이 상태에서 브라우저를 이용하여 웹에 접속하면 사용자 정보를 저장하지 않는다 . InPrivate 브라우징 모드에서는 사용자가 사용 중인 외부 툴바도 사용을 중지한 상태로 실행된다 .

2

3

39


[Google 크롬 테마… ] 를 클릭한다 . ( 크롬 실행 후 , 우측상단 탭에서 [ 설정 ] 선택 )

실습 5-7 테마 변경하기

1

[ 그림 5-50] 테마 변경하기 1

40


주소 표시줄 앞에 표시가 있는 브라우징 창이 새롭게 열린다 .2


41


다음과 같이 테마가 변경된다 .3


42


주소 표시줄에 검색어‘파이어폭스’를 입력한다 .

실습 5-8 바로 검색하기

1

[ 그림 5-53] 구글 크롬 주소 표시줄에서 검색어 입력하기

43


‘ 파이어폭스’에 대한 검색 결과 페이지를 보여 준다 .2

[ 그림 5-54] 구글 크롬 주소 표시줄에 검색어를 입력한 결과

44


기본 검색엔진을 변경하려면 설정을 클릭하여 옵션을 선택한다 . ( 우측상단 – [ 설정 ])3

[ 그림 5-55] 기본 검색 엔진 변경 설정

45


기본 검색엔진에서 원하는 검색엔진을 선택한다 .4

[ 그림 5-56] 기본 검색엔진 선택 창

46

Contents



47

03_ 정보 검색

포털 사이트 인터넷에 있는 수많은 정보에 접속하기 위한 관문 역할을 하는 사이트 초기에는 정보 검색과 메일 위주의 서비스를 제공했으나 , 각각의 포털 사이트는 더 많은

접속자를 확보하기 위하여 뉴스 , 블로그 , 커뮤니티 , 사전 , 지도 등 다양한 서비스를 제공 가장 널리 이용되고 있는 사이트 : 구글 (Google), MSN, Yahoo 국내의 대표적인 포털 사이트 : NAVER, Daum, Nate

48

03_ 정보 검색

포털은 어떻게 돈을 벌까 ? 배너 등을 이용한 광고 수익

클릭 당 광고 수익

49

03_ 정보 검색

검색엔진 사용자가 인터넷에서 자신이 원하는 정보만을 빠른 시간에 찾기란 결코 쉬운 일이 아니기 때문에

웹 서비스를 통해 원하는 정보를 찾을 수 있는 수단이 필요해졌고 , 이를 해결하기 위한 도구로

검색엔진 (Search Engine) 이 사용

검색엔진이란 수많은 정보를 분류 , 정리하여 사용자에게 필요한 정보가 담긴 사이트를 찾아

주는 서비스를 말함

http://www.naver.com/

50

03_ 정보 검색

검색엔진 구분 : 주제별 , 키워드 , 메타 엔진 주제별 검색엔진

특정 주제별로 각 페이지를 분류하여 정리해 놓은 검색엔진 검색어를 잘 모르거나 정보를 광범위하게 찾을 때 이용 장점 : 찾고자 하는 것에 대해 아무런 지식이 없어도 원대분류 정도만 알아도 찾을 수 있음 단점 : 원하는 정보를 얻기까지 여러 단계를 거쳐야 하므로 중간에 길을 잘못 들어서면 엉뚱한

정보만 찾을 수도 있음 주제별 검색엔진의 예

네이트 : http://www.nate.com네이버 : http://www.naver.com

51

03_ 정보 검색

키워드 검색엔진 데이터베이스에 모든 URL 을 저장하고 특정 키워드 ( 주제어 또는 검색어 ) 를 입력함으로써

원하는 정보를 찾는 방법

키워드에 대한 검색 결과가 뛰어나기 때문에 정확한 검색어를 알고 있을 때 사용

많은 홈페이지의 URL 을 저장하고 특정 키워드를 입력해 원하는 정보를 찾는 방법

검색 결과에 키워드에 대한 가중치 (Weight score) 를 줄 수 있기 때문에 가중치가 높을수록

정확한 검색 결과

가중치 : 해당 검색 결과의 컴퓨터가 주는 신뢰 점수

장점 : 간단한 키워드를 통해 원하는 정보를 신속하게 찾을 수 있음

단점 : 선택한 키워드가 적절하지 않은 경우 , 원하는 정보를 찾지 못할 수도 있고 , 해당

검색엔진이 얼마나 많은 자료를 데이터베이스에 정확하게 유지하고 있는가도 중요함

52

03_ 정보 검색

키워드 검색엔진 키워드 검색엔진의 예

라이코스 : http://www.lycos.com 구글 : http://www.google.com 네이버 : http://www.naver.com

53

03_ 정보 검색

메타 (Meta) 검색엔진 많은 검색엔진을 한곳에 모아 검색하기 편하게 만든 검색엔진

여러 검색 사이트의 결과 데이터를 미리 수집하여 데이터베이스화해서 보여 줌

54

03_ 정보 검색

효율적인 검색 방법 각 검색엔진에서 질의 방법에 대한 문서 ( 설명서 ) 를 반드시 읽을 것 정말 ??? 가중치 (weight 또는 score, 해당 결과물에 대한 신뢰 점수 ) 를 믿지 말 것 무슨 말 ??? 적절한 검색엔진을 선택할 것

좋은 키워드를 선택할 것

주제별 검색 (카테고리 검색 ) 을 활용할 것


by Yang-Sae Moon

인터넷 검색엔진의 원리 (1/2)

① 각 검색엔진은 문서를 수집할 때 자신들만의 규칙으로 설정된 크롤러

(crawler) 또는 스파이더 (spider) 를 사용한다 .

② 스파이더들이 발견한 문서들과 URL 들로부터 소프트웨어 에이전트는

URL 들과 문서들을 얻고 , 인덱싱 소프트웨어에 정보를 보낸다 .

③ 인덱싱 소프트웨어는 에이전트로부터 문서와 URL 들을 받는다 .

④ 정보를 찾기 위해 인터넷을 검색하기 원할 때 찾기 원하는 정보를 표현할

수 있는 단어를 웹 페이지에 입력한다 .

⑤ 여러분이 설정한 특징들을 기초로 하여 데이터베이스를 검색한다 .

⑥ 각각의 검색엔진은 다양한 방법으로 결과를 보여준다 .


by Yang-Sae Moon

인터넷 검색엔진의 원리 (2/2)

WWW.CARS.COMlink link link

WWW.MONEY.COMlink link link

WWW.BOOKS.COMlink link link

서버

COMPUTERS

ARTS

SPORTS

ENTERTAINMENT

Database

스파이더

TV- ENTER.html 요청

검색된 TV- ENTER 페이지

URL, 문서

URL, 문서

URL, 문서

WWW.CARS.COMlink link link

WWW.MONEY.COMlink link link

WWW.BOOKS.COMlink link link

서버

COMPUTERS

ARTS

SPORTS

ENTERTAINMENT

Database

스파이더

TV- ENTER.html 요청

검색된 TV- ENTER 페이지

URL, 문서

URL, 문서

URL, 문서

57

03_ 정보 검색

대표적 검색엔진 – 구글 1998 년 스탠포드대학교의 학생이었던 래리 페이지와 세르게이 브린이 만듦

현재 전 세계에서 가장 널리 사용되는 검색엔진 중 하나

Google 은 10100 을 뜻하는 구골 (Googol) 에서 유래되었는데 , 방대한 정보를 담겠다는 의미

처음부터 가장 빠르고 쉬운 정보 검색이 가능한 검색엔진을 만들고자 했으며 , 독자적인 검색

알고리즘을 이용하여 비교적 정확하고 세밀한 정보를 찾아 줌

58

03_ 정보 검색

구글 초기 화면 및 검색 결과

59

03_ 정보 검색

구글의 특징 상업적 목적에 치우치지 않음 : 첫 페이지에 광고가 없고 , 기업 모토가 “ Don’t be evil” (

사악해지지 말라 ) 인 만큼 상업적인 이미지를 배재한 정책을 고수

PageRank 방식의 검색 결과 : 검색된 페이지의 링크를 분석하여 다른 서버에서 현재 검색된

페이지로 많이 연결될수록 더 좋은 문서로 판단하여 결과를 보여 줌

다양한 서비스 제공 : 정보 검색 서비스 외에 메일 (Gmail), 지도 (Google Map), 메신저

(Google Talk), 사진 관리 (Picasa) 등 다양한 서비스 제공

기본 검색 : 입력한 키워드를 기본적으로 AND 논리연산으로 처리하여 키워드가 모두 있는

문서를 검색하여 결과 표시

고급 검색 : 정확한 키워드 ( 혹은 문장 ) 검색하기 , 검색 식 이용 검색하기 , 특정 키워드

제외하기 , 검색할 대상 언어 지정하기 , 검색할 파일 형식 지정하기 등의 세밀한 옵션을

지정하여 검색 가능

60

03_ 정보 검색

네이버 1999 년부터 서비스를 시작했고 2002 년 지식 iN 서비스를 시작하면서 국내에서 가장

대표적인 포털 사이트로 발전

주제별 검색 , 키워드 검색 , 지역 정보 검색 , 지도 검색 , 이미지 검색 등 다양한 분야를

통합해서 검색해 주는 통합검색을 제공

포털 사이트로서의 기능을 다하기 위해 사전 , 길 안내 , 책 , 뉴스 , 쇼핑 , 커뮤니티 등도 함께

제공

다양한 서비스를 제공하고 검색 데이터가 충분한 지식 iN 제공 국내 최대 사용자 확보

61

03_ 정보 검색

네이버 지식 iN: 네이버 검색의 가장 큰 특징으로 궁금한 것이나 특정 정보를 질문 형태로 묻고 , 그에

대한 답을 회원 간의 답변으로 만들어진 데이터베이스에서 검색하여 표시해 주는 서비스

통합검색

검색 키워드를 입력하면 사이트뿐만 아니라 뉴스 , 지식 iN, 블로그 , 카페 , 이미지 , 동영상 , 사전 등을 대상으로 검색한 결과를 나타냄

상단에는 검색 시 노출을 위해 비용을 지불한 사이트들이 먼저 나열되고 이후에 사전 , 쇼핑 , 지식 , 블로그 , 카페 , 지도 , 뉴스 , 책 , 이미지 , 영화 , 음악 , 카테고리 등의 검색 내용을

나열함

강원대학교 컴퓨터과학전공 문양세

월드 와이드 웹 (www)

Documents