WeCode 7기로 수업을 받고있는 슈퍼개발자,

춤추는망고입니다.

( 춤 안춥니다. )

- 이 글은 우리가 뭘 배웠는지, 돌아보는데에 좋은 글입니다.

( 쓸모있다고는 안했습... )

WeCode 1주차 간에 배운

HTML 과 CSS 에 대한 명확한 정리가 끝나고,

제가 여러분과 공유할 내용은 !

도대체, 우리는 무엇을 배운것일까?

웹서비스의 역사와 발전 입니다.

이번 글에선,

HTML 과 CSS 덕에 어깨 좀 펴고다니는 뉴비가

'HTML 이랑 CSS 는 누가 만들었어요?'

라는 질문을 받게되어 벙어리가 되어버렸을 때,
꿀단지를 뺏어버려줄 내용을 소개합니다.

레 ㅡ 츠기릿!

웹 서비스란 뭘까요?

웹 ( Web ) - 거미줄
서비스 ( Service ) - 무언가를 제공하다

잘 모르겠죠?

사실, 웹 서비스는

네트워크 상에서 컴퓨터 간의 상호작용을 하는 시스템

이랍니다.

처음보는 단어가 나왔네요?

네트워크

네트워크는 무엇일까요?

네트 ( Net ) - 그물
워크 ( Work ) - 일

네트워크는

이쪽 저쪽 이어진 선들이 그물처럼 보여지는
복잡한 상황에서 이루어지는 일

이라고 추측되네요.

선에는 양쪽 끝이 있죠?

그 양 끝은 어디에 이어져있는 걸까요, 그리고 왜 이렇게도 많은 걸까요?

웹 서비스는 네트워크 위에서 컴퓨터들이 하는 일이랬으니까,

선 끝에 있는 것들은 컴퓨터겠죠?

그리고 상호작용을 하려면 여러대의 컴퓨터들이 필요할 겁니다.

( 혼자서는 상호작용을 하지 못하니까요 ㅋ )

그렇다면,

컴퓨터 간에는 어떻게 상호작용을 할까요?

그리고 어떤 상호작용을 할까요?

사실, 처음에 컴퓨터는

공학자들이 계산하는 일을 시키기위해 만든 기계

였습니다.

공학자들은 "더 수준높은 계산" 을 "더 잘하기위해" 서,

이런 기계들을 연결하여 각 기계들이 할 일을 분담했답니다.

서로 계산할 내용을 "통신" 한 것이죠.

컴퓨터간의 상호작용이란 통신입니다.

( 이것 저것 주고 받는다는 얘깁니다. )

그럼 도대체 뭘 주고받으려고 했던걸까요?

아주 처음에는 위에서 말했듯, "계산할 내용"

즉, 정보를 주고받는 것이 목적이였습니다.

그래서 그 당시의 네트워크는 아주아주 단순했죠.

진짜 글 쭈우욱~ 써놓은 듯한 모양새였습니다.

보기가 정~말 불편했겠죠?

그러던 어느날, 1989년 3월

'팀 버너스리' 라는 소프트웨어 공학자가

WWW (World Wide Web)

의 개념을 정립하여,

네트워크에서 주고받는 자료에 대한 어떠한 틀이 정해졌고,

더 편리하고 좋아진 네트워크와 웹은 수많은 사용자들에게 보급되었으며,

1995년 즈음, 전세계에서 인터넷이 사용되기 시작합니다.

여기까지가!

1. 그냥 정보만 주고받았던 수준의 네트워크 사용에서,
   
   
   
   
   
   
2. 어느정도의 틀이 잡히게되어,
   
   
   
   
   
   
3. 다루기에 더 편리하고, 좋아진 정보를
   
   
   
   
   
   
4. 더 넓은 범위인 인터넷에서 사용하게된 상황입니다.

여기서 WWW 라는 개념은 어떤것들을 기반으로 정의되었는지 보시죠!

WWW 의 기반이 되는 요소들

1. HTTP ( HyperText Transfer Protocol )
2. HTML ( HyperText Markup Language )
3. 웹 브라우져 ( Web browser )

이렇게 세가지가 핵심인데요.

HTTP 는 뭘까요?

Hyper 대단한
Text 글들
Transfer 전달
Protocol 규칙

-> 대단한 글들을 전달하는 방식에 대한 규칙입니다!

그럼, HTML 는 뭘까요?

Hyper 대단한
Text 글들
Markup 표시
Language 언어

-> 대단한 글들에 대한 표시를 해주는 언어입니다!

마지막으로, 웹 브라우져는 여러분이 잘 알고계신

• Internet Explorer
• Safari
• Chrome
• Firefox
• Opera
  등등...

처럼 인터넷의 내용을 보여주는 프로그램이죠?

이제 우린 " WWW 라는 것이 어떠한 표준인가" 에 대해 알고있는겁니다.

대단하쥬~?

자... 다시 돌아와서

우리는 웹 서비스에 대해서 알아보기로 했습니다.

웹 서비스는 정보가 표시되어 우리가 볼 수 있는 것이 핵심이죠?

그 핵심 중에서, HTML 은 그냥 글만 화면에 나왔던 이전의 상황을

이 곳, 저 곳에 정보들을 띄워줘 정보를 더 보기 쉽게 만들어줬습니다.

하지만 사람의 욕심은 끝이 없죠...

글씨에 색이 없으니까 너무 안이쁜겁니다!

원하는 내용을 강조할 방법도 없구요!

그러한 불ㅡ편함 에서 생겨난 친구를 소개하겠습니다.

흑백이던 HTML 의 세상에, 색과 모양이란 선물을 가져온!

CSS 라는 친구입니다!

CSS 라는건,

제 시리즈에서 보셨듯,

어디 위치에 어떤 내용을 표시할지, 어떻게 보여지게할지

를 정해주는 것이였죠?

색을 넣을수도 있고, 강조할 수도 있고, 심지어는 Flex~ 까지 해버릴 수 있다는 것!

이제, 흑백에 못생겼던 웹 서비스의 모습에서 벗어난 겁니다.

마치 새로운 세상이 찾아온 것과 같죠!

이렇게,

사용자들이 늘어나면서,
각자가 욕심을 갖고,
원하는 것을 추구하면서

웹 서비스는 한번 더! 발전했습니다.

하지만...

사람들은 이쁘고, 강조도 잘 되는데...

뭔가 움직이는걸 보여주고싶어!

라는 생각(욕심) 을 갖게 됩니다...

( 저어어엉~말 욕심쟁이쥬? ㅋㅋㅋ )

그렇게... 웹 서비스에

시간이라는 것이 생겨납니다...

바로

시간, 순서대로 기능을 실행하는

프로그래밍 언어

덕분이죠!

사람들은 순서대로 동작하는 프로그래밍 언어를 이용해,

움직이는 ( 시간, 순서에 따라 다르게 보이는 ) 것들을 만들어냈습니다!

( 참고로, 요즘은 주로 JavaScript ( 자바스크립트! ) 라는 언어를 씁니다. )

이런 일들이 있었던 덕분에,

지금 우리는,

움직이고, 보기 좋고, 이쁘고, 알록달록한 웹 사이트를 볼 수 있게 된 겁니다.

여기서 진짜 마지막으로,

웹 서비스라는 것이 결국은

웹 사이트에서 기능들을 제공하는 것이기 때문에,

웹사이트의 기능에 대해서도 아주 조금은 알아야 합니다.

하지만, 기능들에 대한 역사나 원리는 설명을 하려면,
너무 멀리 돌아가야 하기 때문에,
다음에 기회가 된다면, 제대로 다뤄보도록 하겠습니다.

저렇게 이뻐진 웹사이트에도 각자마다 기능이 있다!

정도로만 이해해주시기 바랍니다.

자. 지금까지의 글 내용을 통해,

여러분은 자주 들어본 두 단어에 대해서 이해할 수 있게됩니다.

움직이고, 보기 좋고, 이쁘고, 알록달록한 웹 사이트를 표현하는 사람

프론트엔드

그 이쁜 페이지에서 기능들이 동작할 수 있도록

보이지 않는 부분에 대해서 뚝딱뚝딱 하는 사람

백엔드

( 아직 설명하지 않은 부분입니다. 물론, 파고드는 구글링은 환영입니다 ㅎ )

여기까지!

웹 서비스라는 것이 어쩌다가 이지경까지 온것인가...

에 대해 여러분은 알게되신겁니다.

앞으로 갈길은 머시겠지만요.

하지만, 우리에겐 언제나 가야할 길이 있습니다.

지금까지 어떤 길이 있었는지 알고나서, 갈 길을 정하는 것도 좋다는 말입니다.

고생하셨습니다.

감사합니다. ( _ _)