# 6장. 웹(Web) - 비전공자를 위한 이해할 수 있는 IT 지식

1. 웹은 어떻게 이루어져 있고, 어떻게 동작할까?

• 1-1. HTML(Hyper Text Markup Language)?

  • 운영체제나 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하기 위해서 개발

• ex) 윈도우 사용자와 맥 사용자가 각각의 운영체제(OS)에서만 호완되는 파일을 주고받아서 서로 파일을 열지 못해 생기는 문제를 해결하기 위해

• 결과적으로 HTML문서는 운영체제에 상과없이 브라우저만 있으면 모두 웹사이트에 접속하여 동일한 정보를 볼 수 있다.

1-2. CSS(Cascading Style Sheets)?

• HTML에 디자인을 입힐 수 있는 코드
• 도형을 만들거나 정렬을 맞추는 등의 디자인적 요소를 입히기 위해 사용

HTML과 CSS를 합쳐서 "퍼블리싱" 작업이라고 표현하고, 이 작업을 하는 사람을 "퍼블리셔"라고 부름

1-3. JavaScript?

• HTML과 CSS로는 쓰기 힘든 기능들을 적용하기 위한 프로그래밍 언어

ex) "검색창에 'a'를 입력하여 'a'에 해당하는 실시간 검색어들을 불러와서 홈페이지에 노출"

1. 사용자가 'a'를 입력
2. JavaScript가 'a'를 감지
3. 'a'아 관련된 검색어 조회하는 API요청을 서버에 보냄(GET요청)
4. 서버는 'a'와 관련된 검색 목록을 정리해서 응답(JSON형식)
5. JavaScript는 응답을 열어서 HTML로 바꿈
6. 응답한 내용이 홈페이지에 노출되어 우리가 'a'와 관련된 실시간 검색어를 볼 수 있음

1-4. 웹과 애플리케이션의 차이

< 애플리케이션 >

운영체제 위에서 돌아가는 프로그램이므로 반드시 업데이트를 해야만 수정된 내용을 확인 가능

< 웹 >

서버에 저장되어 있기 때문에 저장된 내용을 서버에 올렸다면, "새로고침"만으로도 모든 유저들이 변경된 내용을 확인 가능

단, 웹은 네트워크에 예민해서 너무 많은 사용자가 접속하면 속도가 매우 느려짐

2. 웹 개발하다가 못 해 먹겠다고 말하는 이유

• 각 브라우저는 서로 다른 애플리케이션이기 때문에 브라우저에 따라 안의 구현 방식이 다름

• 따라서, 모든 브라우저가 변화하는 웹 언어를 전부 이해하지 못할 수 있기 때문에 브라우저별로 개발 대응이 필요한 상황이 생김

• 보통 "점유율" 기준으로 많이 쓰이는 브라우저 중심으로 개발 대응을 함
  - 점유율이 높은 브라우저를 타겟팅해서 개발

3. 반응형으로 코딩하면 더 비싸나요?

• 반응형 웹

  • 다양한 기기의 가로넓이에 대응하여 구성요소가 변하는 기술

• 웹페이지의 크기(비율)가 사용자의 기기에 맞추어 자동으로 변형
  ex) bootstrap

4. 애플리케이션 이야기를 하는데, 왜 자꾸 웹 개발자에게 말하라는 거죠?

• 4-1. 네이티브 애플리케이션

  • 원래 정해놓은 언어들을 사용해 운영체제 자체의 기능을 사용

  • iOS 개발언어(스위프트, Objective-C) / 안드로이드 개발언어(자바, 코틀린)

  • 성능이 가장 좋지만, 플랫폼에 한정적

• 4-2. 하이브리드 애플리케이션

  • 네이티브앱에 웹 뷰(web view)를 띄우는 방식
  • 앱안에 일부 '브라우저'를 내장한 애플리케이션
  • 한번의 개발로 다수의 플랫폼에 적용이 가능

• 4-3. 모바일 웹 앱

  • 모바일에서 데스크탑 브라우저에서 실행되는 기능을 모바일에 맞춤
  • 설치하거나 심사를 받을 필요없이 새로고침할 때 반영