[초보 웹개발] Web 개발의 개념 정리 (웹사이트, 웹앱, 인터넷, HTTP/HTTPS, 웹 개발 종류... )

# 딴짓으로 시작하는 오늘의 의식의 흐름 공부

대뜸 아이폰으로 생산성 도구들을 자동화하려고 하다가 Google의 AppScripts라는 기능을 발견했고, 이걸 통해서 웹앱을 개발할 수 있다는 것도 알게 되었다. 그래서 생산성 도구를 웹앱으로 만든다면, 아이폰 단축어 기능으로 웹앱에 접속하여 빠르게 생산성 도구에 접근할 수 있지 않을까 하는 생각에 일단 (클로드가) 만들어보기 시작했다. 그러나 기대와 달리 바로 실행이 되지 않았고... 화나서 자꾸 클로드에게 이유를 묻다가 알 수 없는 말들이 계속되어 개념이라도 먼저 공부하기로 했다.

 

그래서 시작된 오늘의 공부... 바로 웹개발 개념 정리! 

웹개발의 개념 정리

---

Web과 관련된 개념 정리

웹앱이란 웹 브라우저에서 실행되는 애플리케이션으로 인터넷 주소 (url)로 접속해서 사용할 수 있는 프로그램을 의미한다. 대표적으로 우리가 알고 있는 웹 앱으로는 mail.naver.com, drive.google.com, youtube.com 등이 있다.

 

그렇다. 우리는 웹사이트(WebSite)라고 부르고 있는 것들이 사실은 웹앱(WebApp)과 혼재되어 사용되고 있는 개념이었다. 

웹사이트는 정보를 보여주는 것이 주 목적인 것으로 읽기 위주라면, 웹앱은 기능을 수행하는 것이 주목적으로 상호작용하고 작업을 처리하기 위함이라고 할 수 있다. 예를 들어, 유튜브는 영상을 보여주는 정보보여주는 웹사이트이자, 영상을 업로드하고 댓글을 다는 기능을 수행할 수 있는 웹앱이기도 하다. 

 

그렇다면 웹페이지(WebPage)는 무엇인가? 

웹페이지는 웹사이트/웹앱의 가장 작은 단위로, 브라우저를 켰을 때 보이는 한 화면 자체를 웹페이지라고 한다. 

대표적으로 네이버 메인화면이나 티스토리 메인화면이 될 수 있을 것이다. 

 

가장 근본적인 질문이다. 웹(Web)이란 그러면 무엇일까? 

웹의 정식 명칭은 WWW, 즉 World Wide Web, 전 세계적인 거미줄이라는 뜻이다. 

인터넷을 통해서 연결된 문서들의 거대한 네트워크를 웹이라고 한다. 

네트워크의 일종인 인터넷(Internet)은 물리적으로 컴퓨터들끼리 연결해주는 도로망과 같은 것이라고 한다면, 웹은 그 도로 위를 다니는 자동차와 같은 정보와 서비스들을 의미한다. 

 

URL 주소를 입력하라고 하면 우리는 자연스럽게 웹페이지 주소 (https://www.naver.com) 같은 것을 입력한다. 여기서 URL은 무슨 의미일까? URL은 Uniform Resource Locator)로 인터넷 상에서 특정 자원의 위치를 나타낸다고 할 수 있다. 

---

그런데 여기서 url은 항상 http:// 나 https://로 시작된다. 이건 무엇일까? 이건 프로토콜(Protocol)의 종류이다. 

프로토콜이란 약속된 규칙이라는 뜻으로, HTTP와 HTTPS는 이런 여러 규칙 중의 한가지 방식이라고 할 수 있고, 특별히 웹 서비스용 프로토콜이라고 한다. 이외도 이메일 전송용 프로토콜에는 SMTP, 파일 다운로드에는 FTP, 원격접속용 프로토콜에는 SSH 등 수많은 프로토콜이 존재한다. 

 

그러면 크롬의 url 창에 http:// 외의 다른 프로토콜로 시작하는 주소를 입력해도 작동할까? 아니다! 웹브라우저는 HTTP/HTTPS 프로토콜만 이해할 수 있기 때문에 http://, https://로 죄다 시작하는 것이었다. 이외에도 file:// 프로토콜도 이해하기는 한다. 이건 로컬 파일 시스템 프로토콜로, 네트워크가 아닌 로컬(즉 나의) 컴퓨터의 파일에 접근하는 규칙이라고 한다. 

 

다시 돌아와서 HTTP란 HyperText Transfer Protocol로 기본 동작방식은 

클라이언트인 브라우저가 요청 (Request)를 서버에게 넣고 

서버가 응답 (Response)을 클라이언트인 브라우저에게 돌려주는 식이다. 

 

HTTP 요청 메서드들에는 크게 GET, POST, PUT, DELETE 등이 있다고 하고, 

각각 데이터 가져올 때, 데이터전송할 때, 데이터 수정할때, 데이터삭제할 때 쓴다고 한다. 

 

그리고 대망의 HTTP 상태 코드. 

가끔 인터넷 안되면 404 Not Found 에러가 뜨고 짜증나는 일이 생겼었는데 그것도 상태 코드 중 하나라고 한다. 

• 200 OK - 성공
• 201 Created - 생성 성공
• 204 No Content - 성공했지만 응답 내용 없음
• 301 Moved Permanently - 영구 이동
• 302 Found - 임시 이동
• 304 Not Modified - 변경되지 않음
• 400 Bad Request - 잘못된 요청
• 401 Unauthorized - 인증 필요
• 403 Forbidden - 접근 금지
• 404 Not Found - 페이지 없음
• 500 Internal Server Error - 서버 내부 오류
• 502 Bad Gateway - 게이트웨이 오류
• 503 Service Unavailable - 서비스 사용 불가

그렇다면 HTTPS란? 

HTTP는 url에 비밀번호 같은게 바로 들어날 수 있어서 보안 문제가 있어서, 여러 보안 대책들을 넣은 것이 HTTPS, S가 바로 Secure의 약자이다. url 클릭해보면 주소 옆에 자물쇠 표시되어 있는 경우 https 통신 방식이다. 어떤 기능들이 더 추가가 되었는지 궁금하지 아니하지 아니할 수 없다. 

 

바로 SSL / TLS 프로토콜 방식이 도입되었다. SSL(Secure Sockets Layer)과 TLS(Transport Layer Security)는 인터넷 상에서 데이터를 안전하게 전송하기 위한 암호화 프로토콜이다.

 

전송되는 정보를 제3자가 읽을 수 없도록 암호화(1) 를 하고, 데이터에 디지털 서명을 첨부해 전송 중 데이터 변조(2)가 안되도록 무결성을 보장하고, 통신하는 상대방(서버)가 실제로 본인이 맞는지 SSL 인증서를 부여해서 가짜사이트를 구별하고 확인하는 인증(3)하는 이 세가지 기능을 해낸다.

 

TLS이 SSL의 개선된 후속버전이다. 핵심 작동방식은 클라이언트와 서버가 연결될 때 "핸드셰이크(handshake)"라는 과정을 통해서 암호화 방식을 협상하고, 이후 모든 데이터를 암호화해서 주고받는다고 한다. 핸드셰이크를 대략적으로 설명한 것은 아래와 같다. 

# STEP1 : Hello
클라이언트: "HTTPS 연결하고 싶어요"
서버: "좋아요, 제 인증서입니다"

# STEP2 : 인증서 확인 
클라이언트: 인증서가 진짜인지 확인
→ CA(인증기관)에서 발급받은 것인지 검증

# STEP3 : 키 교환
클라이언트: 암호화 키 생성해서 공유
서버: 같은 키로 암호화 통신 시작

# STEP4 : 암호화 통신 
이후 모든 데이터는 암호화되어 전송

 

이제 여기에서 HTTP 요청 / 응답에 포함되는 부가 정보인 Header, 서버가 사용자의 웹브라우저에 보내는 작은 데이터 조각인 쿠키, 서버가 사용자 상태를 기억하는 방법인 세션(Session) 등의 개념이 등장한다. 이건 다시 알아보자... 피곤하다.

---

 

크롬, 사파리, 인터넷 익스플로러 같은 것으로 우리는 이런 웹페이지를 보통 들어간다. 이런것들은 웹브라우저 (Web Browser)라고 한다. 이것도 일종의 앱이라고 할 수 있다. 앱을 실행하는 앱... 이랄까. 웹페이지는 보통 HTML, CSS, JavaScript (후술하였다) 언어로 작성되어 있는데 이런 것들을 해석해서 화면에 표시해주는 것이라고 할 수 있다. 

 

그.래.서. 결국 정리하자면 이런 구조라고 할 수 있다.

 

인터넷 (물리적 네트워크) 

  ↳ 웹 (정보 서비스)

      ↳ 웹사이트 (사이트 단위)

          ↳ 웹페이지 (개별 문서)

              ↳ URL (문서 주소)

---

웹 개발 (Web Development)이란? 

웹개발(Web Development)은 이런 웹사이트나 웹앱을 만드는 일을 의미하며,  

대표적인 웹개발의 종류로 우리가 흔히 들어본 직종들이 나온다. 

프론트엔드(Front end) 개발, 백엔드(Back end) 개발, 그리고 둘다하는 풀스택(Full Stack) 개발이 그것이다.

 

프론트엔드 개발자는 사용자가 보는 부분을 만든다. 

이 때 사용하는 컴퓨터 언어가 HTML, CSS, JavaScript이다. 

웹페이지를 디자인하거나, 애니메이션을 만들거나 하는게 프론트엔드의 영역이다. 

 

백엔드 개발자는 앱의 기능인 서버나 데이터베이스 부분을 만든다. 

이 때 사용하는 언어는 Python, Java, Node.js 등을 사용한다. 

대표적으로 회원가입시스템을 만들고, 회원의 데이터를 저장해두는 것 등이 있다. 

 

 

---

이렇게 웹에 대한 개념 정리를 좀 해보았다. 늘 인터넷이라는 존재를 당연하게 생각해왔는데 참 뭐가 많다. 컴퓨터 태동기에 컴퓨터를 접한 사람들은 확실히 이런 것들을 잘 알 것 같기는 하다. 정말 당연하지 않은 것들을 당연하게 받아들이게 만든 수많은 개발자들도 새삼 참 대단한 것 같다. 이제 딴짓 그만하고 다시 도구를 만들어야겠다.