Image
Image

2. 웹 개발 3요소에 대해 이해하기

2. 웹 개발 3요소에 대해 이해하기: 50분

본격적인 웹 개발 이야기에 앞서 웹이란 용어에 대한 이해를 가볍게 진행하고 시작하도록 하겠습니다.
여러분들도 웹이란 말을 많이 들어보고 알게 모르게 많이들 사용하고 계실 텐데요. 
여러분들은 웹이 무엇인지를 다른 분들에게 설명하실 수 있나요?


저는 오프라인 강의를 진행하면 항상 수강생 분들 중 몇몇 분들에게 꼭 이 질문부터 하고 시작합니다. ^^; 
웹이란 무엇인가요? 웹이 무엇이라고 생각하시나요?
웹은 일반적으로 World Wide Web, WWW, W3 라고도 표현하죠.

위키에 등록된 웹의 정의를 한번 살펴볼까요?

"월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 간단히 웹(Web)이라 부르는 경우가 많다. 
이 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다. 
웹은 전자 메일과 같이 인터넷 상에서 동작하는 하나의 서비스일 뿐이다. 
그러나 1993년 이래로 웹은 인터넷 구조의 절대적 위치를 차지하고 있다.
인터넷에서 HTTP 프로토콜, 하이퍼텍스트, HTML형식 등을 사용하여 그림과 문자를 교환하는 전송방식을 말하기도 한다."

가끔 인터넷이라고 칭하기도 하지만 웹은 인터넷 통신망에서  사용자 컴퓨터(PC,태블릿,스마트폰,TV) 가 인터넷망을 통해 각종 웹 기반 서비스들을 (웹사이트,메일,문자,음성채팅,화상통화,웹 기반 정보관리시스템)
어딘가로 부터 제공받는 환경 및 서비스들을 통칭해서 말 하는 것 입니다.
어딘가로 부터라는 표현을 했는데요. 그곳은 보통 서버 컴퓨터라고 하는  PC보다 가성비가 좋은 서비스 전용 컴퓨터 시스템을 통해서 특정형식을 갖춰 특정양식으로 인터넷망을 통해 각종 서비스를 제공받는 것을 말합니다.

인터넷은 통신망(Network)이라고 표현하는 것이 적절하며 웹은 인터넷 통신망을 통해 사용할 수 있는 
대표적은 서비스 중에 하나일 뿐입니다.

과거의 웹은 기껏해야 (웹)서버에서 제공되는 웹사이트(웹페이지)를 통해  사용자가 요청한 HTML 페이지를 전달해주는 정도였지만 현대적인 웹은 개발기술(HTML5)과 통신기술의 발달과 표준화로 인해 단순히 텍스트와 이미지만 제공되는 서비스가 아닌 실시간 양 방향 음성,화상,메시지(채팅),게임,대용량 데이터처리까지 모든 것이 가능해 졌다고 해도 무리는 아닐 듯합니다.

이와 같이 웹은 어느 순간 개발 세상의 중심이 되어 있으며 대부분의 현대적 정보관리시스템들은 웹 기술 기반으로 구축되어 있으며  지금도 무수하고 다양한 웹 개발 기술들을 이용해 웹 기반 서비스들이 개발되어지고 인터넷 통신망을 통해 서비스 되어지고 있습니다. 

웹을 구성하는 3대 기술요소는 아래와 같습니다.


 

HTTP(HyperText Transfer Protocol): 웹 상에 존재하는 자원을 요청하는 주체와 해당 요청에 응답하는 주체간 통신할 때 준수 해야 하는 약속(통신규약)
URI(Unified Resource Indicator or Locator): 요청 자원의 위치를 나타내기 위한 표기법 또는 위치 지정자
HTML(HyerText Markup Language): 하이퍼텍스트를 표시 하기 위한 언어

1)HTTP(HyperText Transfer Protocl)

HTTP를 직관적을 풀어보면 HyperText를 전송할 때 지켜야하는 통신 규칙 이란 뜻이며 여기서 HyperText란 HTML 웹페이지라고 하는 인터넷망에 존재하는 자원을 말합니다.
HTTP란 인터넷 통신망에서 HTML 웹페이지 자원(리소스)를 요청하고 응답(제공)할 때 준수해야하는 통신규칙(규약)(Protocol)을 말합니다.

실제 웹 기반 서비스 관점의 시나리오로 리얼하게 HTTP를 표현 하면  사용자 컴퓨터 내에 설치된 웹 브라우저란 클라이언트 S/W에  웹사이트의 주소와 웹 페이지를 요청하면  해당 주소와 웹 페이지 리소스(URI)를 기반으로 관련 서비스를 제공하는 서버 컴퓨터를 찾아 서버컴퓨터 내에 설치되어 있는 웹 서버 S/W와 그 안에 존재하는 다양한 웹 사이트 내에 있는 웹 페이지(html을 만들어내는 각종 웹 페이지)를 요청하고 그 응답의 결과물인 HTML결과물을 인터넷 망을 통해 응답 제공 할 때 준수 해야 하는 통신규칙(규약)을 말합니다. 

 


TIP)프로토콜(Protocol) 예시

컴퓨터란? 향후 본 강의에서 사용되는 컴퓨터란 용어는 단순 PC가 아닌 PC,노트북,태블릿,스마트폰,TV등 컴퓨터 운영체제가 설치된 모든 컴퓨터 관련 기기를 통칭하는 말로 사용 되는 것으로 여러분과 약속하고 사용하겠습니다.  이런 식으로 정보를 주고받는 상호간 약속을 통해 의미와 방법,규칙을 구체적으로 규정 하는 것을  프로토콜이라고 합니다.

2)URI(Uniform Resource Identifier)

웹 상에 존재하는 어떤 자원에 접근하기 위한 유일한 주소를 말하며 다른 자원의 주소들과 구분되는 유일한 주소 식별자를 말합니다. URL(Uniform Resource Locator)과 혼용해 사용하기도 합니다.
리소스,즉 자원(Resource)에 종류에는 웹페이지, 이미지,음악파일,동영상파일등 웹상에 존재하는 다양한 종류의 리소스를 통칭해 말합니다. 
이러한 각종 웹 리소스가 실제 위치하는 위치 주소를 URI 또는 URL이라고 합니다.
아래 링크주소들은 개발 블로깅 웹페이지 리소스의 위치 주소와 특정 이미지,게시글,특정 유튜브 동영상 서비스 위치 주소를 제공하는 URI 형식을 보여줍니다. 

http://mixedcode.com/
http://mixedcode.com/Content/img/logo2-retina.png
http://mixedcode.com/Article/Index?aidx=9649
https://www.youtube.com/watch?v=l14VtJjAXaU

URI는 웹상 에 존재하는 각종 자원들이 어디에 위치하고 있는지에 대해 기술하고 유일성을 보장받는 주소 식별 체계로 브라우저 주소 입력란을 통해 사용자가 직접 URI를 입력해 해당 자원을 요청할 수도 있고 웹 페이지내 리소스 링크를 통해 특정 리소스가 제공되어질 수도 있습니다.


3)HTML(Hypertext Markup Language)

아래와 같은 그림이 HTML의 실체입니다. 

무엇인가 복잡해 보이는 코드덩어리들로 보입니다.

 

웹 브라우저의 요청에 의해 웹 서버는 해당 웹사이트 내에 웹 페이지를 실행하며 그 결과물이 HTML코드로 웹 브라우저에 전달되고 전달된 HTML페이지의 코드들은 직접 사람이 보면 알아볼 수 없기에 브라우저가 코드를 해석해서(인터프리팅,번역) 사람이 보기 편한 레이아웃에 이해할 수 있는 글자,이미지 등으로 해석해 보여줍니다.

이 과정에서 알 수 있듯이 웹 브라우저 의 역할은 웹 상의 존재하는 웹 페이지 리소스를 요청하고 그 요청 결과물인 HTML 문서와 문서를 구성하는 각종 자원(이미지,스크립트,영상)들을 받아 해석하여 사람들이 이해할 수 있는 구조로 표현해주는 역할을 제공합니다. 
네이버 웹사이트를 브라우저로 오픈하고 오픈 된 브라우저에 오른쪽 마우스를 찍고 소스보기 메뉴를 클릭하시면 현재 보고 계시는 웹 페이지의 실제 HTML 소스를 확인 하실 수 있습니다.
HTML 은 Hyper Text Markup Language 로 Hyper Text란것을 표기(Markup)하는 프로그래밍 언어(Language)입니다.


하이퍼 텍스트란 연결 가능한 텍스트란 뜻으로 HTML이란 연결 가능한 텍스트 방식인 링크를 통해 웹 상의 모든 리소스를 연결하여 표기할 수 있는 언어 란 뜻입니다.  
하이퍼 텍스트에서 중요한 키워드는 html문서간 연결(링크)를 통해 관련정보가 지속적으로 연결되어 표현되며 자유롭게 웹 페이지간 이동할 수 있다는 것입니다.

HTML은 링크란 방식을 통해 웹 상의 모든 리소스들의 연결이 가능하고 연결을 통해 무한한 정보를 웹을 통해 제공할 수 있다는 의미도 가지고 있습니다.
하이퍼텍스트(HTML)로 표기 할 수 있는 내용은 과거에는 텍스트,이미지정도에 국한되었지만 현재는 영상/음성/2D/3D/애니메이션 효과 등 다양한 형태들까지 표현이 가능해 졌습니다.
하이퍼 텍스트는 어떻게 표시되고 관리될까요?
하이퍼 텍스트의 표기는 다양한 종류의 HTML 태그라는 요소들을 통해 표기되고 이러한 태그 요소들의 집합을 하나의 문서로 형태로 관리합니다. 
이러한 문서를 HTML 문서(Document)라 하며 HTML문서는 정해진 국제 표준에 의해 문서형식 및 표준을 준수해서 작성되어야 웹 브라우저에 의해 정상적인 해석이 가능해집니다.  

HTML의 역사를 잠시 돌아보면 인터넷 업계에서는 1997년부터 W3C란 HTML 국제 표준화 기구를 통해 HTML의 표준화를 시도하였지만 브라우저 제작 업체들의 동참을 이끌어 내지 못하여 HTML의 표준화를 이끌어내지 못하여 브라우저 별로 다소 상이한 HTML 버전이 존재하다가 2008년 W3C의 HTML5 초안 발표를 시작으로 현재에는 HTML5 버전으로 HTML의 표준화가 이루어지어 표준화된 HTML5 기반에서 각종 브라우저들이 현재는 개발되어지고 표준 HTML이 사용 되어지고 있습니다. 


A.HTML TAG 구성요소
HTML문서는 다양한 종류의 HTML 요소(Element)들의 조합으로 구성되며 이러한 요소들은 태그(Tag)를 통해 표현됩니다.
태그는 HTML문서상에서 해당 요소의 시작 과 끝을 명확히 구분해주기 위해 시작태그 “<” 와 종료태그 “>” 를 통해 일반적으로 표현되며 시작 태그 내에는 해당 요소의 특성(attribute)을 표시하기 위해  특성명(attribute name) =특성 값(attribute value)의 쌍 형태로  여러 가지의 특성을 정의할 수 있습니다.

다음은 화면 내 영역 분할 위해 사용되는 요소인 Div 요소를 표현하는 태그의 형식 과 특성을 보여줍니다.

  

요소내에서 사용되는 특성(attribute)는 해당 요소의 부수적인 특성을 특성명=값 형태로 표기하여 요소의 특성을 추가적으로 표현할수 있으며 요소별로 요소의 용도에 맞는 다양한 특성이 제공됩니다.
일반적으로 하나의 요소를 표현하는 태그는 시작 과 종료태그가 쌍으로 존재하지만
 <meta>,<br>,<img> 태그와 같이 홀로 사용되는 홀태그도 존재합니다. 

이번에는 HTML 문서를 직접 하나 만들어 보면서 HTML 문서의 기본 구조에 대해 알아보겠습니다. 
전문 개발 툴을 설치하고 사용하기전까지 어느 PC에서나 설치 되어있는 메모장이란 편집 툴을 이용 HTML문서를 만들고 브라우저를 통해 확인해보도록 하겠습니다. 
시작>프로그램>보조프로그램>메모장을 클릭 여시고 아래 코드들을 타이핑 하신 후 파일메뉴의 저장메뉴를 클릭하여  hello.html 이라고 파일명을 특정 위치에 저장합니다.

 

모두 저장되었으면 파일탐색기로 저장위치로 이동 후 저장된 hello.html 파일 존재여부 확인 후 hello.html파일을 더블 클릭 해봅니다.
웹 브라우저가 뜨면서 브라우저 내용 화면에  hello~ mixedcode! 텍스트가 보여집니다.
웹사이트의 실체인 웹 페이지의 기본 문서형식인 .html페이지를 직접 만들고 그 안 에 html 코딩을 통해 로컬PC환경에서 브라우저를 통해 개발된 .HTML문서의  컨텐츠를 확인해보았습니다.

브라우저의 오른쪽 마우스 클릭> 소스보기를 클릭하시면 여러분이 직접 코딩 한 소스를 확인할 수 있으며 코딩 내용 중  HTML Tag코드는 보이지 않고 전달코 자 하는 컨텐츠 인  hello~ mixedcode! 만 보여진다는 것을 재 확인할 수 있습니다. 
즉 웹 브라우저가 .html 페이지내의 html 요소와 태그를 해석(인터프리팅)하여 코더의 의도대로 내용을 보여준 것입니다.


B.웹 페이지 형식들

실제 웹사이트를 구성하는 주요 구성요소는 웹 페이지란 것입니다. 
일반적으로는 웹 페이지의 묶음이 하나의 웹사이트로 구성됩니다.
웹 페이지는 각종 HTML 요소들이 저장 되어있는 다양한 파일형식들을 통칭해 말하며 해당 웹페이지들은 각종 프로그래밍 방식을 통해 원본 웹 페이지의 HTML 요소의 변조가 기본적으로 가능합니다. 

오피스 문서는 텍스트와 이미지 등 을 이용해 특정정보를 전달하기 위해 문서를 작성하며 그 종류에는 워드문서,엑셀문서,PPT문서,HWP문서등 용도는 같지만 다양한 포맷이 존재 하는 것처럼 웹 페이지도 유사합니다.

HTML을 표현하고 HTML을 저장하거나 만들 수 있는 웹 페이지 종류 또한 다양합니다. 
웹 페이지의 기본파일 형식은 .htm 또는 .html  확장자 형식의 문서파일로  이 문서안에는 html 코드소스 및 자바스크립트나,스타일시트 관련 웹 페이지를 표현하는데 필요한 리소스 코드도 포함될 수 있습니다.
이외에 개발 및 기술환경 (개발플랫폼)에 따라 다양한 웹 페이지 파일형식이 존재합니다.
자바언어 기반의 .jsp PHP 기반의 .php  Microsoft 기반 웹 기술 환경에서는  .asp , .aspx 등 다양한 웹 페이지 종류가 있지만 이 모든 웹 페이지의 목적은 브라우저에게 전달할 html 소스를 제공하는 일을 합니다.

C.웹페이지 유형

주로 웹 페이지는 서버상에서 html 소스를 변경 없이 원본형태로 가지고 있다가 브라우저에 전달만 하거나 프로그래밍 기술을 통해 서버나 브라우저에서 동적으로 html소스가 변조되어집니다.   
서버상에서 제공되는 원본 웹 페이지의 변조유무에 따라 정적 웹 페이지 문서와 동적 웹 페이지 문서 

크게 두 가지 유형의 웹페이지가 존재합니다.
정적 웹 페이지 문서는 서버상에 존재하는 html 작성원본이 아무런 변경 없이 바로 사용자 브라우저에게 제공되어 실행 해석되어지는 형태의 웹 페이지를 말합니다.
주로 회사소개 페이지 ,대표 인사말 페이지, 회사 홈 페이지 등 한번 만들어진 웹페이지의 내용이 변경되지 않고 브라우저에 전달되어 해석되어지는 웹페이지들이 이에 해당됩니다.

동적 웹 페이지 문서는 보통 웹 서버상이나 웹 브라우저에서 각종 백엔드,프론트엔드 개발기술을 이용해 원본 HTML소스 내용을 변경하여 변경된 웹 페이지가 브라우저에서 해석 실행되는 웹페이지를 말합니다.
주로 웹 프로그래밍 기술을 이용해 원본 HTML의 소스를 동적으로 변경하여 브라우저에서 해석되어지는 웹페이지를 말하며 주로 쇼핑몰,블로깅 등 데이터 기반으로 HTML소스가 동적으로 변경되는 각종 데이터 기반 웹페이지들이 이에 해당됩니다.

정적과 동적의 차이가 이해되시나요?
웹 페이지 문서의 종류나 확장자는 중요치 않습니다. 

서버상에 업로드 된 원본 HTML 소스 자체가 브라우저에 전달되고 실행 해석될 때 서버상에 저장된 원본 자체가  변경(추가/변경/삭제)된 상태로 또는 원본 그대로의 상태로 브라우저에 해석 되느냐 에 따라 동적 웹페이지,정적 웹페이지로 구분합니다. 

Image

댓글목록

Image