웹 사이트 기초 정리

이번 게시글은 부끄럽게도 너무 당연하게 생각한 웹 사이트 작동 원리와 브라우저에 대해 보다 명확하게 인지하고자 작성을 진행하게 되었습니다.

 

 

웹 사이트 작동 방식

사용자는 브라우저를 통해 통신 프로토콜이 포함된 주소를 입력하게 되면, 해당 주소에 맞는 서버에 최초 요청(Request)을 보내게 됩니다.

* 통신 프로토콜 : 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고받는 양식 및 규칙의 체계를 의미합니다. (HTTPS, HTTP, FTP, SSL 등)

 

최초의 요청이 서버에 보내지게 되면 요청이 들어온 사용자의 브라우저로 서버가 최초의 응답(Response)으로 HTML을 보내주게 됩니다.

* HTML : 웹 페이지의 구조를 담당합니다.

 

HTML을 응답으로 받은 사용자의 브라우저는 해당 HTML에 맞는 추가적으로 작성된 CSS, JavaScript, 이미지 파일을 서버에 추가적으로 요청을 보내게 되며, 서버는 요청에 대한 추가 응답으로 사용자의 브라우저에 CSS, JavaScript, 이미지 파일을 전송하게 됩니다.

 

 

 

웹 표준

웹 표준 (Web Standard)란 '웹에서 사용되는 표준 기술이나 규칙'을 의미하며, 대표적으로 HTML, CSS, JavaScript 3가지 기술이 표준 기술에 해당합니다.

 

위와 같은 표준을 W3C에서 의 표준화 제정을 하게 되며, 표준화 제정에는 다음과 같이 4가지 단계를 가지게 됩니다.

• 초안 (Working Draft, WD)
• 후보권고안(Candidate Recommendation, CR)
• 제안권고안(Proposed Recommendation, PR)
• 권고안(W3C Recommendation, REC) : 해당 기술이 표준 기술이라고 권고를 내는 단계

위의 표준화 제정 단계에서 권고안에 해당하는 기술만 웹 표준으로 정의할 수 있게 됩니다.

 

이러한 표준을 통해 제작된 웹 사이트는 브라우저에서 표준에 의거하여, 작성된 코드를 해석하게 해석된 결과로 브라우저를 구성하게 됩니다.

 

 

 

크로스 브라우징(Cross Browsing)

크로스 브라우징(Cross Browsing)이란 조금씩 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술입니다.

 

 

대표적인 8개의 브라우저가 있습니다. 위와 같은 브라우저를 만드는 구글, 모질라, 애플 등 다양한 회사들이 브라우저를 만들 때 앞서 정리한 웹 표준에 근거하여 브라우저를 만들게 되지만, 각각의 브라우저가 동작하는 환경은 조금씩 다르기 때문에 크로스 브라우징(Cross Browsing)이라는 개념이 나오게 되었습니다.

 

웹 개발자는 웹 사이트를 구축할 때 조금씩 다를 수 있는 브라우저에서 동일하게 보여지고 동작할 수 있도록 구축해야 하며, 이렇게 구축할 수 있는 방법이나 기술을 크로스 브라우징(Cross Browsing)이라고 합니다.

 

* 최근 크로스 브라우징 이슈가 많이 사라지는 추세이지만, 기본적으로 웹 개발자가 해당 이슈를 많이 잡아주어야 합니다.

 

 

 

뷰포트(Viewport)

뷰포트(Viewport)란 하나의 웹페이지가 렌더링되는 전체 영역을 의미합니다.

* 렌더링(Rendering)이란 브라우저의 뷰포트에 웹 사이트를 출력하는 행위를 말합니다.

 

구축한 웹사이트는 브라우저의 뷰포트라는 특정 영역에 HTML, CSS, JavaScript를 이용하여 출력하게 됩니다.

 

 

 

웹 이미지

웹에서 사용 가능한 이미지의 경우 크게 비트맵(Bitmap)과 벡터(Vactor)의 개념으로 나뉩니다.

 

비트맵(Bitmap) : 픽셀이 모여 만들어진 정보의 집합, 레스터(Raster)화된 이미지라고도 부름.

벡터(Vactor) : 점, 선, 면의 위치, 색상 등 수학적 정보의 형태로 이루어진 이미지

 

이렇게 비트맵과 벡터로 구분되는 이유는 각각 가지고 있는 장점과 단점이 있으며, 서로 보완이 가능하기 때문입니다.

 

[비트맵의 특징]

• 비트맵의 경우 정교하고 다양한 색상을 자연스럽게 표현할 수 있습니다.
• 확대 / 축소 시 계단 현상, 품질 저하가 발생합니다.
• png, jpg 등

 

 

 

[벡터의 특징]

• 정교한 이미지(인물, 풍경 사진 등)를 표현하기 어렵습니다.
• 확대 / 축소에서 자유롭고, 용량 변화가 없습니다.
• svg 등

 

둘 중 어떤 것이 좋은 이미지 포맷이라고 꼽을 수 없으며, 필요에 따라 어떠한 이지미 포맷을 선택하는지가 중요합니다.

 

다음으로 각 이미지 포맷에 따른 확장자에 대해 알아보도록 하겠습니다.

 

JPG(JPEG) - 비트맵

• JPG는 Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용됩니다.
• JPG의 경우 손실 압축 방식을 사용합니다. (압축 시 이미지의 픽셀 정보가 손실되면서 압축이 되기 때문에 용량을 크게 줄일 수 있습니다.)
• JPG의 경우 표현 색상도를 24비트(약 1600만 색상 표현 가능)를 사용합니다.
• 자주 접하는 이미지 환경이기 때문에 다룰 수 있는 프로그램이 다양하여 품질 및 용량을 쉽게 조절할 수 있습니다.

 

PNG - 비트맵

• PNG는 Gif의 대체 포맷으로 개발되었습니다.
• PNG의 경우 비손실 압축 방식을 사용합니다. (PNG로 저장 될 경우 이미지 픽셀에 대한 정보가 손실되지 않습니다.)
• PNG의 경우 8비트(256개의 색상)과 24비트(약 1600만 색상)를 동시에 지원합니다.
• Alpha Channel(이미지의 투명도)을 지원합니다.
• W3C 권장 포맷입니다.

* 아이콘 같이 주변 배경을 투명하게 하고 싶은 경우 PNG 파일을 사용하고, 이미지의 투명한 영역이 존재하지 않다면 JPG 파일 사용이 적합합니다.

 

 

GIF - 비트맵

• GIF는 이미지 파일 내에 또 다른 이미지 및 문자열 같은 정보들을 저장합니다. (하나의 이미지 파일 내에 여러 개의 이미지 정보를 저장하여 흔히 말하는 움짤이나 애니메이션을 구현할 수 있습니다.)
• GIF의 경우 8비트(256개의 색상) 색상만 지원합니다. (다얀한 색상 표현에는 적합하지 않습니다.)

* GIF 이미지 포맷은 다양한 색상 표현을 할 수 없지만 움짤, 애니메이션이 지원되는 한 장의 이미지 파일 사용에 적합합니다.

 

 

 

WEBP - 비트맵

• JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷입니다.
• 완벽한 손실 / 비손실 압축 방식이 가능합니다.
• 애니메이션 기능을 지원합니다.
• Alpha Channel을 지원합니다.
• 비교적 최근 나온 이미지 포맷이기 때문에 브라우저 하위호환성을 확인하고 사용하여야 합니다. (IE 지원 불가)

 

SVG - 벡터

• SVG는 마크업 언어(HTML/XML) 기반의 벡터 그래픽을 표현하는 포맷입니다.
• 해상도의 영향에서 자유롭습니다.
• CSS와 JavaScript로 제어가 가능합니다.
• 파일 및 코드 삽입이 가능합니다.

* SVG 이미지 포맷을 다양한 해상도를 지원해야하는 웹페이지에서 가장 많이 사용하는 이미지 포맷입니다.

 

 

 

특수 문자 용어

• Backtick, Grave : ` (~에 위치)
• Tilde : ~
• Exclamation mark : !
• At sign : @
• Sharp, Number sign : #
• Dollar sign : $
• Percent sign : %
• Caret : ^
• Ampersand : &
• Asterisk : *
• Hyphen, Dash : -
• Underscore, Low dash : _
• Equals sign : =
• Quotation mark : "
• Apostrophe : '
• Clone : :
• Semicolon : ;
• Comma : ,
• Period, Dot : .
• Question mark : ?
• Slash : /
• Vertical bar : |
• Backslash : \
• Parenthesis : ()
• Brace : {}
• Bracket : []
• Angle Bracket : <>

 

 

 

오픈 소스 라이선스

오픈 소스란 어떤 제품을 개발하는 과정에 필요한 소스 코드나 설계도를, 누구나 접근해서 열람할 수 있도록 공개한 것을 의미합니다.

 

물론 공개되어 있어 누구나 사용이 가능한 것은 맞지만 저작권이 있기때문에 오픈 소스 사용시 저작권을 제대로 확인하지 않고 사용시 생각지 못 한 피해를 입을 수 있습니다. (ex. 개인 사용 가능, 상업적 사용 가능)

 

오픈 소스 라이선스의 경우 상용 방식이 다음과 같은 여러 가지 사용 방식이 있습니다.

 

[Apache License]

• 아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스 입니다.
• 개인적 / 상업적 이용, 배포, 수정, 특허 신청이 가능합니다.

[MIT License]

• 메사추세츠공과대학(MIT)에서 솦트웨어 학생들을 위해 개발한 라이선스 입니다.
• 개인 소스에 해당 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없습니다.

[BSD License]

• BSD는 버클리 캘리포니아대학에서 개발한 라이선스 입니다.
• 조건은 MIT와 동일 합니다.

[Beerware]

• 오픈 소스 개발자에게 맥주를 사줘야 하는 재미있는 라이선스입니다.(만날 수 있는 경우!)