[늅늅 시리즈] 정말 정말 쉬운 왕초보 웹 개발 - 1

안녕하세요.

 

 

제가 최근에 웹 개발에 관심이 생겨 웹 애플리케이션 개발 공부를 시작해 보려고 하는데요.

기왕 공부하는 김에 하나씩 하나씩 정리해가면서 공부하면 저도 머릿속이 정리되고,
이 글을 읽게 되시는 분들도 도움이 되지 않을까 하여 글을 작성하게 되었습니다~~😉

 

 

웹 개발을 다루는 전문적인 글이나 어느 정도 이해력이 좋으신 분들을 위한 글은 많은데,
생각보다 정말 왕초보들을 위한 글은 많지 않더라구요?
그래서 제가 이번 기회에 왕초보들을 위한 글을 한번 작성해 보려고 해요~~~

 

 

이 세상에서 존재하는 그 어떤 글보다 쉽게 써볼게요!!

 

 

웹 개발에 있어서는 저 역시 초보이기 때문에 오히려 전문가들보다 초보자분들의 관점에서 쉽게 이해할 수 있도록 글을 잘 작성할 수 있지 않을까요? 😁

 

 

그리고 초보자분들의 관점으로 글을 작성할 예정이기 때문에 각 용어들에 대해 세밀하게 다루기보다는 추상적인 관점에서 이해를 도울 수 있도록 최대한 쉽게 글을 작성해 볼 생각입니다. 또한 가급적 어려운 용어의 사용은 자제하고 새로운 개념이 등장한다면 적절한 예시를 들어 설명해 보도록 노력하겠습니다! 아무래도 최대한 쉽게 작성하려다 보면 불명확한 정보가 있을 수도 있는데요. 처음 방정식을 공부하는 아이에게 대수학에 대한 전체를 설명하는 것이 불필요하듯이 정말 정말 차근차근 이해하는 것에 중점을 두고 설명을 해볼까 합니다.

 

 

 

웹과 브라우저

웹 이란?

아마 이 글을 보고 계신 분들 중에 네이버, 구글, 티스토리를 한 번도 방문하지 않으신 분은 없으실 거라고 생각이 드는데요. 각 사이트를 방문하셨을 때 보게 되는 페이지들을 웹 페이지 또는 웹 사이트라고 생각하시면 되고요. 네이버, 구글, 티스토리는 '웹 서비스를 하는 회사'라고 생각하시면 될 것 같습니다. 그리고 우리가 네이버에 들어간다고 치면 주소 창에 www.naver.com 이나 네이버라고 검색을 하셨을텐데요? naver.com이나 www.stolencheese.com 과 같이 주소 창에 입력하는 것을 그 웹의 주소라고 생각하시면 됩니다! 

 

 

 

브라우저란?

우리가 컴퓨터에서나 핸드폰에서 네이버와 같은 웹 페이지에 접근하려고 할 때 어떤 프로그램을 실행시키죠? 크롬이나, 사파리, 인터넷 익스플로러, 마이크로소프트 Edge 등 웹 페이지들을 보여주는 '창' 또는 '화면' 같은 애들이요! 이런 애들을 브라우저 또는 웹 브라우저라고 부릅니다.

 

얘네들이 웹 브라우저예요!

 

 

다시 말해, 우리는 웹 브라우저를 통해 어떤 창을 키고 그 창을 통해 웹 페이지를 보는 것이죠!

 

 

클라이언트와 서버

서버란?

우리가 컴퓨터를 켜서 네이버에 접속한다고 생각해 볼게요. 가장 처음에 크롬이나, Edge 등 브라우저를 우리는 실행시켜야겠죠? 왜냐하면 우리는 웹 브라우저를 통해 창을 키도 그 창을 통해 웹 페이지를 봐야 하니깐요! 그리고 우리는 주소 창에 '네이버' 혹은 'www.naver.com'이라고 작성할 겁니다. 그리고 엔터를 탁 치면 우리는 네이버의 기본 페이지를 볼 수 있죠! 

 

 

그리고 우리는 알고 있습니다. 'www.naver.com'이라고 친 곳에 'www.google.com'이라고 치면 구글로 갈 것이고 stolencheese.com이라고 치면 StolenCheese 사이트에 갈 것이라는걸요! 이건 카카오나 인스타그램이나 유튜브나 지마켓이나 티스토리나 어떤 사이트든지 심지어 우리가 한 번도 가지 못한 사이트더라도 우리가 그곳에 가면 무언가를 볼 수 있다는 걸 알고 있습니다. 

 

 

우리는 그 사이트들을 어떻게 볼 수 있는 걸까요? 혹시 네이버를 설치했다는 말을 들어본 적 있으신가요? 혹은 우리가 구글을 컴퓨터에 설치했기 때문일까요? 아니면 크롬이나 Edge를 설치할 때 우리가 도달할 수 있는 잠재적인 모든 사이트를 한꺼번에 우리가 우리 컴퓨터에 설치해버린 것일까요?

 

 

한 가지 확실한 것은 우리가 구글이나 네이버에 들어가면 매일매일 새로운 내용으로 정보가 업데이트된다는 것, 그리고 전 세계에 그 무수한 정보들이 나의 작은 컴퓨터나 핸드폰에 다 들어올 수 없다는 것으로 미뤄보아 전 세계의 모든 웹 페이지들을 우리 핸드폰 또는 컴퓨터에 전부 소장하고 있는 것은 아닐 겁니다!

 

 

그렇다면... 우리가 구글이나 네이버라는 웹 사이트에 도착했을 때, 구글이나 네이버가 그때그때 최신의 정보를 우리에게 건네주는 것은 아닐까요?

 

 

네, 맞습니다!

 

 

우리가 google.com으로 간다면 구글이 직접 우리에게 구글의 페이지를, naver.com으로 간다면 네이버가 직접 우리에게 오늘날의 최신 정보들을 네이버 페이지에 넣어서 우리에게 전달해 주는 것이죠!

 

 

주소 창에 naver.com을 친다면 우리는 최신의 정보가 포함된 네이버 페이지를 볼 수 있죠!

 

우리가 웹 브라우저를 통해 여기저기 돌아다니고 있을 때 분명 어떤 무언가가 우리에게 웹 페이지를 볼 수 있도록 정보를 전달하고 있습니다...

 

 

그리고 그 정보를 주고 있는 무언가는 제 생각으로는 하나가 아니라고 생각해요.. 왜냐하면 구글과, 네이버와, 인스타그램이 다른 회사라는 것은 우리 모두가 알고 있는데 얘네들이 어떤 한 군데에 자신들의 중요한 정보들을 모아놓지 않을 테니까요! 

 

 

우리가 웹 브라우저에서 google.com으로 가면 반드시 구글 페이지가 나오고 naver.com으로 간다면 반드시 네이버 페이지가 나오겠죠? 그리고 구글과 네이버는 엄연히 다른 회사이구요! 분명 google.com으로 갔을 때 정보를 주는 무언가와 naver.com으로 갔을 때 정보를 주는 무언가는 서로 다른 것일 겁니다!

 

 

아! 근데 우리는 이미 힌트를 가지고 있었어요.

우리가 웹 브라우저의 위쪽에 "google.com"이나 "naver.com"을 입력하는 부분을 뭐라고 부르는지 아시죠? '주소 창'이라고 부르죠! 우리가 '여의도 더현대'의 주소를 따라 이동했는데 갑자기 판교 맥도날드가 나오지는 않겠죠? 아 물론 판교의 맥도날드가 도로명 주소와 지번 주소 (옛날 주소), 이렇게 2가지를 가지고 있듯이 구글도 2가지.. 아니 그 이상을 가지고 있을 수는 있어요! 이 블로그도 주소가 2개거든요!! 

 

 

하나, https://stolencheese.tistory.com/

StolenCheese

 

 

둘!, https://blog.stolencheese.com/ 

StolenCheese

 

 

하지만 확실한 한 가지는 실제로 그 주소가 같은 목적지를 가리키고 있다면 그 주소로 이동했을 때 도착하는 장소는 반드시 한 군데!!!라는 겁니다!

 

 

그리고 그 장소에 도착했을 때 우리가 기대하는 정보를 주는 그 무언가가 바로!! 서버!!입니다!

우리가 맥도날드 주소를 따라간다는 것은 맛있는 햄버거를 기대하기 때문이겠죠?🍔🍟

맥도날드에서 맛있는 햄버거를 주시는 그분이 바로 서버!!입니다!

 

 

 

정리하면 이래요!

• naver.com, google.com과 같은 것은 경기 성남시 분당구 대왕판교로606번길 58 푸르지오월드마크 (판교 맥도날드) 랑 똑같다!! (저런게 웹을 돌아다닐 때 사용하는 주소다!!)
• 하나의 장소에 여러개의 주소가 있을 수 있다!! (삼평동 741 푸르지오월드마크, 13525로 찾아가도 판교 맥도날드가 나온다!!), 그리고 하나의 주소로 두 개의 장소에 도달할 수 없다!!!
• 주소를 따라 도착 장소에 갔을 때 그 장소에서 기대하는 정보들 (햄버거랑 감튀 🍔🍟)을 주는 주체가 서버다!! 

 

 

(google.com으로 갔는데 네이버 페이지가 나오셨다구요? 그렇다면 host 파일이 변조되는 해킹을 당하신 겁니다! 👏👏)

 

 

식당에서 사람들에게 음식을 전달하는 것을 '서빙한다'라고 하죠?

 

 

네, 맞아요! 그 '서빙'과 위의 '서버'는 같은 'serve'에요!

그럼 '서빙'을 받는 대상.. 그러니까 햄버거랑 감튀를 요청하는 사람들을 뭐라고 할까요?

 

 

클라이언트란?

서버를 설명하는 와중에 이미 다 눈치채셨겠지만, 햄버거랑 감튀 달라고 한 당신이 바로 클라이언트입니다!!

클라이언트 역시 '고객'을 뜻하는 바로 그 'client'가 맞습니다!

 

 

이를 맥도날드의 햄버거 서비스에 대입해서 다시 말하면

서버 : 햄버거랑 감튀를 제공해 주는 사람

클라이언트 : 햄버거랑 감튀를 요청하는 사람

 

 

 

이를 다시 웹 서비스에 대입해서 말하면

서버 : 웹 페이지를 제공하는 사람

클라이언트 : 웹 페이지를 요청하는 사람

입니다!

 

 

 

간단하죠?

 

 

 

아 당연히 서버는 클라이언트의 요청이 있을 때만 서비스를 제공합니다!!

햄버거와 감튀를 주문하지 않았는데 제공을 해주는 경우는 없겠죠?

 

 

 

아 그래서 서버가 뭔데..?

"

아 그래서 웹 브라우저에서 naver.com이라고 주소 창에 넣고 엔터 치면, 네이버에서 근무하고 있는 어떤 사람이 실시간으로 웹 페이지를 전송해 주는 건 아닐 거 아니야!

도대체 서버가 뭔데!!

"

 

 

 

네, 확실히 사람은 아니구요.

 

 

 

당연히 컴퓨터가 그 업무를 자동으로 처리하겠죠?

 

 

 

웹 서비스의 '서버'는 
웹 서비스에 대한 '클라이언트'의 요청이 있을 때
기대하는 '웹 페이지'를 제공하는 '프로그램' 또는 그런 프로그램을 제공하는 컴퓨터를 지칭합니다!

 

 

웹 페이지를 제공하는 '프로그램'이라는 것은 지금 설명하긴 너무 이르고 나중에 뒤에 언젠가 작성할 글에서 설명을 드릴게요.

 

 

여기서 제가 '웹 서비스'를 앞에 붙였다는 것은, 세상에 존재하는 서비스가 웹만 있는 것이 아니라서 그래요!!

'햄버거와 감튀 서비스'일 수도 있는 거고, '온라인 게임 서비스'일 수도 있는 거잖아요!

 

 

 

맞아요, 서비스를 제공하는 모든 것은 다 서버에요!!

 

 

 

웹 서비스를 제공하면 웹 서버!

메일 서비스를 제공하면 메일 서버!

햄버거 서비스를 제공하면 햄버거 서버!

 

 

 

그래서 '웹 서버'는 웹 페이지를 제공하는 프로그램 또는 그런 프로그램을 제공하는 컴퓨터인거예요!

 

 

 

"

프로그램의 의미는 나중에 설명하기로 했으니깐 우선은 넘어가고...

컴퓨터는 뭐지? 웹 서비스를 제공하는 컴퓨터는 뭐 우리 집 컴퓨터랑 좀 다르게 생겼나?

영화에 나오는 것처럼 엄청 거대한 거 아니야?

"

 

 

 

물론, 네이버나 구글과 같이 어마어마한 사용자에게 서비스를 해줘야 한다면 보통의 컴퓨터로는 안될 거예요...

하루에 손님이 10명만 오는 식당과 1,000명이 오는 식당의 규모가 다른 것처럼요.

 

 

이런 느낌을 예상했겠지만...

 

 

바로 위의 사진이 바로 그 영화에 나오는 그런 느낌의 서버가 맞구요. 실제로 네이버나 구글 같은 데에서는 저것 혹은 저것 이상의 성능을 가진 서버를 사용할 거예요!

 

 

 

하지만 '서버'의 정의에 "햄버거와 감튀를 한 시간에 100개 이상 전달할 수 있어야 한다!"라는 조건은 없어요.

다시 말해서 우리 집 컴퓨터에서도 '웹 페이지'를 제공할 수만 있다면 그게 바로 '웹 서버'인 거죠!

 

 

 

'웹 페이지'를 제공하는 것은 어렵지 않아요! 아까 위에서 얘기한 것과 마찬가지로 '웹 페이지'를 제공할 수 있는 '프로그램'만 설치하면 되거든요! 또한 '웹 서버'를 운용하는데 엄청난 성능의 컴퓨터는 필요하지 않답니다~~ 웹 서비스를 제공해야 할 유저 수가 아주 많지 않다면 지금 이 글을 보고 있는 컴퓨터로도 분명 충분할 거예요!

 

 

 

정리하기

본 글에서는 웹과 브라우저가 무엇인지, 그리고 서버와 클라이언트가 무엇인지 다뤄보았어요~~~

다시 한번 각 용어들을 정리해 볼까요?

 

 

 

• 웹 : naver.com이나 google.com으로 들어갔을 때 보이는 화면, 또는 여러 정보들
• 브라우저 : 웹에 들어가기 위해 우리가 사용하는 창이나 화면, 또는 프로그램 (크롬, 사파리, Edge, 인터넷 익스플로러, 파이어 폭스 등)
• 서버 : 클라이언트가 요청하면 그에 맞는 서비스를 제공해 주는 프로그램, 또는 이 프로그램이 설치된 컴퓨터
• 클라이언트 : 서버한테 서비스를 요청하는 주체 (사람, 웹 브라우저, 핸드폰 등)

 

 

 

다음 글에서는 naver.com이나 google.com과 같이 웹에 접근했을 때 보이는 화면이나 정보들이 어떻게 만들어지고 어떤 방식으로 우리에게 전달되는지 설명해볼게요~

 

 

 

최대한 쉽게 설명해보았지만 혹시나 어려운 부분이 있다면 편하게 댓글로 남겨주세요~😊

 

 

 

그럼 다음 글에서 만나요! 

 

 

 

블로그 후원하기

Stolen Cheese