웹과 애플리케이션

웹(Web)

1. HTML, CSS, JavaScript로 이루어진 웹의 기본내용

HTML(Hyper Text Markup Language)은 운영체제와 상관없이 웹 브라우저만 있으면 PC, 스마트폰, 윈도우, 맥 모두 동일 정보를 볼 수 있게 해주었다.

CSS(Cascading Style Sheets)로 HTML에 디자인을 입힐 수 있었다. HTML 코드는 정보만 표현하고 CSS 코드는 디자인만 표현할 수 있어 깔끔해졌다.

HTML과 CSS를 합쳐 '퍼블리싱' 작업이라 표현했고, '퍼블리셔'라고 부른다.

[HTML, CSS, JavaScript] 더 알아보기

• HTML(Hyper Text Markup Language) : 내용, 구조
• CSS(Cascading Style Sheets) : 디자인
• JavaScript : 프로그래밍 언어
• 웹의 가장 큰 특징 중 하나는 HTML, CSS, JavaScript는 모두 서버에서 관리된다는 것이다.

 

2. 브라우저

전 세계적으로 가장 큰 점유율을 차지하는 브라우저는 크롬, 익스플로러, 파이어폭스, 오페라, 사파리이다.

각 브라우저는 서로 다른 애플리케이션(설치형)이며 브라우저의 종류와 버전에 따라 구현방식이 다르다.

웹 프론트 개발자는 소비자의 브라우저 버전과 종류에 맞춰 정상적으로 동작할 수 있도록, 추가 코드를 작성해야 한다.

이 문제를 '브라우저 버전의 파편화'라고 부르고, '파편화를 잡는다'고 표현한다.

caniuse.com에서  브라우저별 기술 사용 여부를 확인할 수 있다.

• 브라우저 종류 : 크롬, 익스플로러, 파이어폭스, 오페라, 사파리...
• 브라우저의 파편화를 잡기위해 타겟 국가의 '점유율'을 확인 필요

 

3. 반응형 웹

과거 모니터 사이즈가 비슷했을 때, 웹페이지는 양옆에 여백을 둔 상태로 디자인 되었다.

하지만 시간이 흘러 스마트폰, 태블릿이 등장했고, 네이버와 다음과 같은 회사들은 m.naver.com와 같은 모바일용 웹 페이지를 따로 만들었다. 

하지만 PC와 모바일 버전을 따로 만들어 출시하면, 서로 다른 CSS 파일을 수정해야 해서 불편하다.

이런 불편함을 해결하기 위해 반응형 웹이 나온다.

• 브라우저의 가로 넓이에 반응하여 구성요소가 변함
• PC와 모바일 버전의 CSS 파일을 따로 수정할 필요 없음
• 서로 다른 기기의 넓이에 따른 CSS를 추가 코딩해야 할 수 있음
• 반응형 웹으로 만드로 작업 시간이 오래 걸리고, 비용이 더 많이 들어갈 수 있음

 

4. 하이브리드 애플리케이션

iOS 프로그래밍 언어는 스위프트, Objective-C, 안드로이드 프로그래밍 언어는 자바, 코틀린이다.

운영체제별로 다른 프로그래밍 언어를 통해 개발한 애플리케이션을 '네이티브 애플리케이션'이라고 한다.

네이티브는 수정시 각각 심사를 신청해야 하며, 심사 신청 이후에도 사람들은 바뀐 애플리케이션으로 업데이트 해야 한다.

하지만 운영체제 안에 브라우저가 내장되자 새로운 방식으로 애플리케이션 개발이 가능해졌다.

• 웹과 애플리케이션이 혼합된 애플리케이션
• 애플리케이션의 특정 부분에 브라우저를 올리며, 서버원본(HTML, CSS, JavaScript)만 수정 후 반영 가능
• HTML 파일을 불러올 URL을 설정하면, 브라우저가 뜨고, 그 브라우저는 HTML과 HTML에 연결된 파일들을 불러옴

	웹	애플리케이션
설명	인터넷 브라우저를 통해 접근할 수 있는 웹사이트	컴퓨터나 모바일 기기에 설치해서 사용하는 소프트웨어 프로그램
차이점	1. 코드수정 2. 원본 파일을 수정된 파일로 교체 3. 변경완료	1. 코드수정 2. 모바일일 경우, 마켓 업로드(심사 필요)     PC일 경우, 서버에업로드 3. 사용자가 각 버전 업데이트 4. 변경완료
장점	수정이 용이함	네트워크의 영향을 조금만 받게 만들 수 있음
단점	네트워크가 느릴때 HTML, CSS, JavaScript 다운 시간 소요	버전 변경을 위해 업데이트 및 심사 필요