[KDT] 웹앱의 동작원리

웹앱(Web Application); 웹 페이지

 

주소창에 페이지 주소를 입력하는데, 이 때 주소 앞에 붙이는 HTTP, HTTPS 등은 통신프로토콜(Communication Protocol, 통신 규약)로 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미한다.

 

그 주소에 맞는 서버로 최초의 요청(Request)이 들어가게 된다.

서버는 요청이 들어온 사용자 브라우저(컴퓨터)로 최초의 응답(Response)을 보내게 된다.

이 때 응답되는 파일은 HTML이다.

이 HTML 파일에서 추가로 요청이 들어가면 서버는 이에 맞는 추가응답을 하게 된다. 

이 때 CSS, JS, PNG 등의 요청에 따른 응답에 맞는 정보들이 보내질 것이다.

 

웹 사이트를 개발할 나의 컴퓨터 환경을 로컬(Local) 개발 환경이라고 한다.

그렇게 개발된 웹 사이트를 사용자들이 자유롭게 접근할 수 있게 하기 위해 서버에 업로드하고 지정된 주소로 접근할 수 있게 하는 것이다.

 

 

웹 표준(Web Standard)이란 '웹에서 사용되는 표준 기술이나 규칙'을 의미하며, W3C의 표준화 제정 단계 중 권고안(REC)에 해당하는 기술을 말한다.

이렇게 제작한 웹 사이트는 웹 브라우저에서 동작할텐데 브라우저 벤더에 따라 조금씩 다르게 구동될 것이다.

이로 인한 문제가 생기지 않도록 여러 브라우저에서 동일한 사용자 경험을 할 수 있도록 제작하는 기술이나 방법을 크로스 브라우징(Cross Browsing)이라고 한다.

 

 

 

 

웹 이미지

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

                                정교하고 다양한 색상을 자연스럽게 표현하지만,

                                확대/ 축소 시 계단 현상이 나타나는 품질이 저하되기도 한다.

                                ex) jpge, gif, png

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

                           인물과 풍경 사진 등의 정교한 이미지를 표현하기 어려운 부분이 있지만,

                           확대/ 축소시 큰 차이가 없고 용량 변화가 없음.

                           ex) svg

 

 

㉮ JPG(JPEG, Joint Photographic coding Experts Group)

    : Full-color와 Gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서 많이 사용된다.

      이미지가 손실되면서 압축되는 손실 압축방식을 사용하여 용량이 획기적으로 줄어드는 것이 장점이나,

      여러 번 이런 방식으로 저장되면 이미지가 많이 훼손될 수 있다.

      24비트로 약 1600만 개의 색상을 나타낼 수 있어 표현 색상도가 뛰어나다.

      사용할 수 있는 환경이 다양하고 프로그램이 많아, 이미지의 품질과 용량을 쉽게 조절할 수 있는 장점이 있다.

      즉, 가장 널리 쓰이는 이미지 포맷이다.

 

 

㉯ PNG(Portable Network Graphics)

    : Gif의 대체 포맷으로 개발되었고, 이미지가 손실되지 않는 비손실 압축방식을 사용하여, 이미지의 품질을 유지한다.

      8비트(256 색상)과 24비트(약 1600만 색상) 컬러 이미지 처리를 동시에 지원한다.

      더불어, 투명한 부분을 나타낼 수 있는 Alpha Channel을 지원한다. => 원하는 이미지 부분만 정확하게 나타낼 수 있음

      W3C 권장 포맷이다.

      

 

㉰ GIF(Graphics Interchange Format)

    : 이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장할 수 있어, 일명 짤의 형태를 띄는 것을 지칭한다.

      비손실 압축방식을 사용하며, 여러 장의 이미지를 한 개의 파일에 담을 수 있다.(움짤, 애니메이션)

      8비트 색상만 지원하여 다양한 색상 표현에는 적합하지 않다.

 

 

㉱ WEBP

    : JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷이다.

      손실 압축과 비손실 압축을 동시에 지원하고, 애니메이션, Alpha Channel을 손실이나 비손실 모두에 지원한다.

      다만, IE에서는 이 포맷을 지원하지 않아 사용할 수 없다.

 

 

 

㉲ SVG(Scalable Vector Graphics)

    : 마크업 언어 기반의 벡터 그래픽을 표현하는 포맷이다.

      점, 선, 면 등의 수학적 정보로 구성된 이미지이므로 해상도의 영향에서 자유롭다.

      코드로 되어 있어 CSS와 JS로 제어 가능하고, 파일 및 코드로 만들어 따로 삽입하는 것이 가능하다 !

      다만, SVG 이미지의 복잡한 코드를 CSS와 JS로 디테일하게 제어하기는 매우 어려워,

      색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용하는 것이 좋다.