IT도서 : 비전공자를 위한 이해할 수 있는 IT지식(6) : 웹(Web)

웹(Web)

 

HTML(Hyper Text MarkUp Language) 의 탄생 배경

- HTML 의 시작은 유럽 입자 물리 연구소(CERN)

- '팀 버너스리' 라는 직원은 연구소 사람들이 서로 다른 OS, 어플리케이션을 사용하고 있다는 문제점을 발견

- OS나 프로그램에 상관없이 일정한 형식이 동일하게 보이도록 하는 새로운 개념이 필요

- 그래서 '팀 버너스리' 는 HTML라는 형식을 개발

 

★ 팀 버너스리는 웹의 아버지 라고도 불린다고 합니다.

 

HTML의 태그

HTML에는 정보를 체계화 하는 코드들이 존재

<h> : Header (큰 제목)

<p> : Paragraph (문단)

<ol> : Ordered List (순서 있는 목록)

<ul> : Unordered List (순서 없는 목록)

<a> : 다른 HTML 문서로 이동(링크 개념)

이러한 코드들을 Tag(태그) 라고 지칭

 

★ HTML은 프로그래밍 언어가 아님

=> 컴퓨터에게 일을 시킬 수 있는 언어가 아닌 단지 브러우저가 볼 수 있는 문서를 적는 언어

 

CSS(Cascading Style Sheets)의 탄생 배경

- HTML이 정보전달에만 초점을 맞추다보니 디자인 기능이 부족

- 이탤릭체, 볼드체 같은 기능들이 주를 이룸 (도형, 정렬 등의 디자인적 요소를 입히기 어려움)

- 정보전달 : HTML / 디자인 : CSS 로 코드를 분리

 

★  HTML과 CSS를 합쳐 '퍼블리싱' 작업이라고 표현

 

마크업(Markup)

- HTML 작업을 마크업 작업이라고 부름 / HTML 작업자를 마크업 개발자 라 부름

 

JavaScript (js)의 탄생 배경

- 웹이 널리 쓰이게 되면서 HTML/CSS로는 힘든 또 다른 기능들이 필요해짐

- 새로운 프로그래밍 언어가 탄생

★  JavaScript와 Java는 아무 상관이 없습니다!

 

 

웹과 애플리케이션의 차이

 

웹 Web 

- 수정 용이 (원본만 수정하면 유저가 업데이트 하지 않아도 새로 고침하면 반영) => 빠르게 적용

- 새로 고침 시 매번 HTML, CSS, JavaScript 다운로드 해야함 (네트워크 느린 곳 : 불편)

=> 네트워크의 영향을 많이 받음

 

애플리케이션 Application

- 수정 시 적용까지 오래 걸림

- 웹보다 효율적으로 네트워크의 영향을 적게 받음

(ex. 카카오톡 : 대화내역을 기기에 저장 / 새로운 대화만 네트워크를 통해 불러옴)

(ex. 에버노트 : 오프라인으로도 작성이 가능 / 온라인 상태가 되면 동기화)

 

★ 데이터를 수정할 때 애플리케이션과 웹의 과정 차이

애플리케이션	웹
1. 코드를 수정 2. 모바일 : 마켓에 업로드 후 심사    데스크톱 : 서버에 업로드 3. 사용자들이 다운로드 받은 애플리케이션을 각자 버전 업데이트 4. 변경 완료	1. 코드 수정 2. 원본 파일을 수정된 파일로 교체 3. 변경 완료

 

웹개발이 힘든 이유

- 각 브라우저는 서로 다른 애플리케이션 => 브라우저에 따라 구현 방식이 다름

- HTML, CSS, JavaScript의 특정 기능이 버전별로, 브라우저 별로 작동할 수도 있음

=> 웹 프론트 개발자는 소비자의 브라우저 버전과 종류에 맞춰 추가 코드를 작성해야함

==> 브라우저 버전의 파편화

 

참고할만한 사이트 : caniuse.com

- CSS의 사용 가능 여부를 찾아볼 수 있는 서비스

- CSS의 기술 별로 사용가능한 브라우저를 확인할 수 있다.

 

모두를 만족시킬 필요는 없다!

=> 점유율이 높은 브라우저를 타케팅해서 개발하자.

 

반응형 웹 이란?

브라우저의 가로 넓이에 반응하여 구성요소가 자동으로 변경하는 기술

 

반응형 웹의 탄생 배경

- 스마트폰으로 PC버젼을 보면 화면이 잘려보이거나 불편하게 확인해야함

=> 회사들은 m.naver.com  / m.daum.net과  과 같은 '모바일용 웹 페이지' 를 제작

==> 하지만! 모바일과 PC버전 웹 페이지를 따로 출시하는 것은 불편(서로 다른 CSS 수정, 작업이 2배!)

- 이에 반응형 웹이 등장

 

반응형 기술을 활용 시, 공통으로 사용할 CSS 코드들은 두고 레이아웃 위주로 나눠 작업 / 각 기기의 디자인을 구현 가능

=> 웹 페이지의 크기(비율)이 사용자의 기기에 맞춰 자동으로 변형됨

 

하지만 서로 다른 기기마다 넓이에 따른 CSS를 추가로 코딩 필요

=> 하나의 넓이로 작업하는 것보다 더 많은 코드 필요

- 반응형으로 웹을 만들 시 더 많은 시간과 비용 소모!

 

네이티브 어플리케이션 / 하이브리드 어플리케이션 / 모바일 웹 앱

iOS 개발 언어 : 스위프트, Objective-C

안드로이드 개발 언어 : 자바, 코틀린

 

네이티브 어플리케이션 : 위의 언어들로 개발한 어플리케이션

=> 원래 정해 놓은 언어들을 사용해 OS 자체의 기능을 사용

- 성능이 가장 좋다.

- 하지만 플랫폼에 한정적

 

하이브리드 어플리케이션 :  네이티브앱에 웹 뷰(web view)를 띄우는 방식

- OS 안에 브라우저가 내장되기 시작(iOS 속 사파리, 윈도우의 인터넷 익스플로러)하면서 애플리케이션의 특정 부분에 '브라우저'를 올리는 방식의 개발이 탄생

- 한번의 개발로 다수 플랫폼에 적용 가능

 

모바일 웹 : 모바일에서 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞추어 표현한 사이트

모바일 웹앱

- 따로 설치할 필요 없음

- 네트워크 연결만 있으면 모든 기기와 브라우저에서 접근 가능