HTML/CSS/JavaScript의 기초

프런트엔드로서의 길을 가기 위해 약 한 달 동안을 전전긍긍했다.

 

해보고 싶은 것도 해보았고, 심지어 타입스크립트도 사용하지 않는 리액트 + 자바스크립트 버전으로 회원가입 및 로그인을 구현해 보았다. 꼴에 백엔드까지 진행해 보려고 JWT까지 구축하여 Spring Boot 서버 개설과 이를 미들웨어 화하였고, 이것을 MySql DB에 저장하여 accessToken과 RefreshToken까지 발급하였다.

 

이는 To do List를 만들어가는 과정이었다.

 

와중에 나는 문득 생각이 났다.

앞으로 이런 내용들은 죽도록 할 것이다.

하지만 기본적인 어쩌면 가장 놓치기 쉬운 것은 무엇일까..
이렇게 앞으로 나아간다면 취업, 어쩌면 개발자로서의 올바른 방향인 걸까?

 

때문에 하던 모든 프로젝트를 내려두고 다시 처음으로 돌아왔다.

 

확실한 건 프로젝트를 진행함에 있어서 처음으로 돌아가는 건 절대적으로 틀린 건 아니라는 것이다.

그것이 프로젝트의 기준이더라도, 더욱 어쩌면 기본적인 배움의 타임테이블이라도 처음이 부족하다면 언제든 갈아엎고 다시 처음부터 해야 할 준비를 해야 한다.

 

---

다시 시작된 웹이란 무엇인가?

웹(WEB)은 '월드 와이드 웹(World Wide Web)'의 줄임말로, 인터넷에 연결된 전 세계의 사람들이 정보를 공유할 수 있는 시스템이다.

다른 말로 WWW 또는 W3라고 부른다. 이러한 Web은 인터넷상에서 텍스트, 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공합니다.

 

현재 우리가 사용하는 텍스트, 사진, 그림, 음악, 영상 파일들과 이와 상호작용 할 수 있는 것들이 모두 합쳐진 것을 포함하는 것을 웹페이지라고 칭하며 이러한 여러 가지 페이지를 합친 것이 웹 사이트라고 칭할 수 있다. 그리고 이러한 무수한 웹 사이트들이 서로 얽히고설켜서 만들어진 것이 우리가 현재 이용하고 있는 웹 생태계이다.

 

너무나도 무한하다. 하지만  이러한 웹 또한 하나의 인터넷의 서비스 중 하나이다.

---

그 말은 정말 웹의 내부에 있는 모든 데이터를 하나의 데이터 베이스에 담아서 관리를 하게 된다면 인터넷의 서비스 중에 웹이라는 서비스를 데이터베이스를 통해서 관리가 가능하다는 것이다.

 

하지만 이론적으로 불가능하고 이를 AI에게 물어보아도 답은 나오지 않는다.

두 번, 세 번 물어보아도 절대로 불가능하다는 답만 도출한다. 사람은 이러한 불가능의 영역에서 도전하고 성공하는 것이 사람이다.

이것이 AI와 사람의 결론적인 차이라고 생각했다.

(왜 갑자기 웹이란 무엇인가에서 이런 방향으로 생각이 흘렀느냐? AI의 시대에서 사람이 할 수 있는 영역과 AI가 할 수 있는 영역은 구분해야 한다고 생각한다. 그러기 위해선 가장 먼저 기본에서부터 이를 가능한 영역과 불가능한 영역을 나누어야 한다고 생각했다.)

---

웹은 왜 탄생하였는가?

1989년 CERN의 팀 버너스 리가 정보 공유를 위해 월드 와이드 웹(WWW)을 제안하고 개발하면서 시작되었으며, 1990년 최초의 웹 서버와 브라우저를 만들고 1993년 기술을 공개하며 확산되어 넷스케이프, 익스플로러 등 브라우저 전쟁을 거쳐 현재의 모습으로 발전했다.

 

여기서 우리가 알아야 하는 내용은 웹은 이렇게 탄생했다 보다 왜 이걸 만들었는가를 보는 것이 중요하다.

당시에 CERN이라는 유럽에서 가장 큰 입자 물리연구소에서 팀 버너스리가 제작을 건의했고 이를 완성했다.

 

사실 위와 같은 내용들은 구글링을 하면 바로 찾을 수 있다.

때문에 나는 정말로 이걸 왜 만들었는가 무슨 목적을 위해라는 의문을 품었다.

 

• 팀 버너스-리는 웹 기술을 특허로 보호하지 않고, 누구나 자유롭게 사용할 수 있도록 공개했다.
• "This is for everyone" 이것은 모두를 위한 것이다.
• 협업과 공동 창조를 위해서 만들었다

이로 추측해 보았을 때, 팀 버너스리는 세상의 모든 사람들은 다 함께 협동, 커뮤니케이션을 진행하며 정보를 공유해야 한다고 생각한 것 같다.

 

얼마 전 일론 머스크 또한 트위터(현재 X)를 인수한 이유가 모든 사람들은 하나로 통합되어 다 함께 정보를 공유하고 발전해야 한다고 주장한 바와 같다.

 이 말은 세상의 모든 정보는 공유될수록 강력하고 사람들의 지식 또한 혼자 성장할 수 없기 때문에 모두가 함께 다른 방향이라도 공유하고 정보를 채용하는 시대임이 AI를 통해 더더욱 강조되었다고 생각한다.

 

이 정보를 찾아보는데 AI의 도움을 통해서 찾아보는 동안 GPT가 팀 버너스리는 "계급 없이 누구나 동등하게 정보를 볼 수 있는 세상을 만들고 싶었다." 등과 같은 본인만의 주관적인 내용을 인용하여 사용함으로써 나는 정말로 팀 버너스리가 계급 없이 공평함을 존중하는 세상에 대한 사회적 운동가쯤 되는 줄 알았다. 하지만 이는 GPT가 만들어낸 하나의 객체일 뿐 실상은 팀 버너스리는 이런 말을 한 적이 없었다.

 

때문에 더더욱 AI의 시대에 AI가 가진 정보를 덜컥 믿으며 생각하게 된다면 모두가 같은 생각을 하게 될 것이고 이는 역사를 거스르는 행동이라고 생각한다. 꾸준히 생각을 도출해 내며 방법을 찾고 창의적으로 생각하는 연습을 해야 할 것 같다. 

---

초기의 웹페이지는 어떤 형태였는가?

초기의 웹페이지는 아주 유명한 사이트가 존재한다.

 

https://info.cern.ch/hypertext/WWW/TheProject.html

The World Wide Web project

위 사이트는 CERN에서 제작한 웹페이지이다.

그 어떤 CSS도 JavaScript도 들어가 있지 않은 HTML 형태의 사이트이다.

어찌 보면 정말 사전과도 같다. 인터넷으로 보고 시시각각 내용이 수정이 가능한 책인 셈이다.

 

즉, 정보를 제공하기 위해서 제작되었다고 보기에 너무나도 충분하다.

관리자 콘솔(F12)을 눌러보면 더욱 명확하게 확인할 수가 있다. 이렇게 우린 과거에 제작된 이러한 역사를 직접 가지 않고도 인터넷으로 확인이 가능하다는 점에서 인터넷이 매우 놀라운 것이라고 생각한다.

---

HTML은?

Hyper Text Markup Language

사실 이를 언어라고 칭했지만 우리에게 익숙한 건 C언어, Java언어, 코틀린 언어 등이 있다.

 

HTML은 언어가 아니다?

엄밀히 말하자면 언어는 맞다.

Markup Language는 문서를 표현하기 위한 언어이다.

 

반면에 C언어, Java언어 등등의 언어들은 프로그래밍 언어이다. 동작 또는 로직을 만드는 언어들이 이에 해당된다.

 

그렇다면 Hyper Text는 뭐야?

Hypertext는 링크를 통해 다른 문서로 이동할 수 있는 텍스트를 뜻한다.

보통의 책이나 문서는 위에서부터 아래로 쭉 읽는 방식일 것이다. 지금 이 글을 읽고 있는 당신도 아마 위에서부터 읽든 안 읽든 간에 여기까지 스크롤을 진행했기에 이걸 볼 수 있는 것처럼 위에서부터 아래로 내려 읽는 방식이다.

이에 반해 하이퍼텍스트는 나무위키 같은 곳에서 색이 다른 글씨를 클릭했을 때 그 글씨를 설명하는 위치로 링크되는 것을 볼 수가 있다. 이를 하이퍼텍스트라고 말한다.

---

CSS는 왜 등장했는가?

위에서 보았듯이 HTML은 디자인과 표현을 목적으로 개발된 것이 아닌 문서 구조를 우선하는 간단한 언어로 설계가 되었기 때문에 디자인적 요소가 포함되지 않았다.

당시에 HTML 자체로는 색상, 폰트, 들여 쓰기, 여백 같은 스타일 제어가 부족했고 이를 해결하기 위해서 웹 문서를 제작하는 제작사에선 텍스트 대신 이미지를 붙여서 쓸 정도로 보완의 필요가 있었다.

때문에 CSS1이 개발되기 시작하였고 그렇게 HTML의 옷의 역할을 하는 CSS가 탄생하게 되었다. 

---

JS는 왜 등장했는가?

1994 ~ 1995년 웹이 폭발적으로 성장하게 되었고, 이로 인해 동적 기능이 필요해졌다.

• 버튼 클릭시 페이지 일부만 바꾸기
• 메뉴/탭/간단한 애니메이션 같은 UI 기능 필요
• Java로 도입을 검토했으나 너무 무거웠음
• NetScape vs MicroSoft의 대결 간에 브라우저 일관성을 위해 ECMA 표준화가 필요

동적 기능이 필요했고 이를 위해서 초창기 Mocha를 제시되었고 이를 LiveScipt를 지나 JavaScript로 발전되었다.

 

---

결론

당연히 알고 있는 사실이긴 하지만 마지막에 AI에게 다시 한번 물어보았다.

 

"너는 스스로 CSS와 JavaScirpt 같은것을 생각해서 만들 능력이 있는가?"

 

"없다. 기술적 설계 보조는 가능하다"

 

하지만 나는 생각한다. 세상에 존재하지 않는 것을 늘 탐구하고 만들어내는 개발자는 설계 또한 하나의 창의력의 영역이다.

AI가 개발자를 대체한다고 다들 생각하고 있지만 이는 사회적인 현상이 맞아떨어진 것이고, 대체되는 것이 개발자부터인 것이 정말 맞는 판단인가? 지금 그저 군중심리에 빠져 그렇게 믿고 싶은 것은 아닌가?

 

사실 나는 무엇이 맞다고 판단할 수 없다.

다만 내가 스스로 결정을 내렸을땐, 개발자는 아직도 창의적인 탐구의 영역이고 그것이 프런트엔드건 백엔드건 기술의 끝은 아직 멀었고 이 기술을 완벽하게 소화해 낸 사람은 전 세계에 단 1명도 없을 것이다.

그만큼 우주적인 영역에서 개발자가 할 수 있는 것은 주변의 트렌드를 미리 읽고 과거(역사)에서 준 힌트들을 바탕으로 사람들과 협업하며 꾸준히 얘기하며 발전을 지속하는 것이 나의 결정이다.