2026.09.19 SAT
결심했다. 나의 인생을 담은 홈페이지를 만들기로....
문제는? 내가 홈페이지 만드는 방법을 하나도 모른다는 것이다!! (비전공자)
그래서 내가 홈페이지를 만들어가는 과정을 일지를 쓰며 기록해 볼 생각이다.
내가 어떤 시행착오를 거쳐서 지식이 정리되는지를 추척할 예정이다!
일단... 나는 비전공자이고 웹 개발에 대해서 아무것도 모르는 사람이니 공부의 필요성을 먼저 느꼈다.
Claude의 추천을 받아서 공부할 교재를 구매했다!
내가 앞으로 공부할 책은 바로...!
Do it! HTML+CSS+자바스크립트 웹 표준의 정석
'Do it! HTML+CSS+자바스크립트 웹 표준의 정석' 으로 정했다.
이유라면.... Claude가 1위로 추천해줘서...?
그리고 내가 원하는 정보들이 저 책 한권에 다 야무지게 들어있을 것 같아서 선택했다.
책을 펼쳐보니 30일 정석 코스와 15일 집중 코스 플랜이 있었다.
나는(나같경...) 취미로 공부하는거라서 30일 정석 코스로 선택했다.
오늘의 목표라면 1일차-HTML을 마무리 하는 것..!
01. 웹은 어떻게 움직일까
01-1 여러 형태의 웹 사이트
01-2 네트워크 이해하기
01-3 웹의 기본 동작 이해하기
01-4 웹 접근성 알아보기
오늘의 목표는 아마도 웹에 대한 기본적인 이해를 하는 것이 될 것 같다.
일지에는 배운 내용을 정리하며 중요한 것들이나 내가 겪은 시행착오들을 기록할 계획이다.
# 라우터(router)
네트워크에 대한 설명이 나오는데 '라우터(router)'라는 개념이 나온다.
이건.... 어딘가 익숙한데.....
바로 범용 분자 최적화 에이전트를 만들던 시기에 배웠던 개념이다...!
이 책에서는 '중간 관리자'로 설명하는데 이렇게 풀어보니 이해하기가 한결 쉬워진다.
라우터들을 연결하는 상위 라우터들도 존재할 수 있는데... 이거... 생각해보니 걍 Agentic AI 아닌가...?
뭔가 연관성이 있는건지 찾아본다...
구글링 결과....
Q. 웹 라우터들을 관리하는 라우터는 에이전틱 ai 인가?
아니라고 한다;; ㅋ;;
근데 개념이 헷갈리고 비슷한 건 맞아서 차이가 뭔지 좀 더 파봐야 할 것 같다.
개념을 구분해서 제미나이가 친절하게 설명해 주었다. ㅎㅎ
음... 설명을 읽어보니 저번에도 Agentic AI가 무엇인지에 대해서 찾아봤었는데 까먹은 것이었다.
기억해보니 뭐 LLM(필수는 아니라고 알고 있음), 에이전트 핸들러..? 네트워크가 아니라 프로그램 등을 상황에 맞게 호출하는 능력이 있어야 한다고 했었던 것 같은데.....
네트워크에서의 라우터는 '결정론적(deterministic)'하다는 점이 둘의 차이를 확실하게 가르는 부분인 것 같다.
난 Profiler라는 서브 에이전트도 결정론적으로 자료를 긁어오게 만들긴 했지만...
뭔가 둘의 확실한 차이는 아직 명확히 이해되진 않았지만 그냥 계속 읽어나가도록 한다.
# 서버와 클라이언트의 관계
이건 내가 항상 궁금했던 개념이다.
지금도 연구실에서 서버를 사용하고 있지만... 난 서버가 뭔지 모른다!!!
서버(server)는 네트워크에 연결된 컴퓨터가 인터넷에 공개할 정보를 저장하는 역할을 수행한다고 한다.
컴퓨터가 라우터에 항상 연결되어 있어야 다른 컴퓨터가 접근이 가능하고 보안 문제도 있기 때문에 웹 서비스에서는 '서버(sever)'라고 하는 별도의 컴퓨터를 사용하는 것이다.
서버에 연결해서 정보를 보여달라고 요청하는 컴퓨터는 '클라이언트 컴퓨터'라고 한다.
클라이언트 컴퓨터는 좁은 의미로는 브라우저를 의미하기도 한다.
그럼 그냥 (정보나) 이것저것 요청하니깐 앞에 '클라이언트'를 붙인건가...
뭔가 이름이 직관적이다.
이해하자면 인터넷 망? 데이터 정보들은 서버에 존재하며 서버에서 정보가 제공되고 서버에 정보를 요청하기 위해 사용한 기기(하드웨어?)가 클라이언트가 되는 것 같다.
존재하는 사물, 하드웨어 쪽은 클라이언트라고 부르고 실체하지 않는 정보같은 것은 서버의 영역에 해당하는 느낌..? 으로 일단 이해했다. 그리고 각 서버들은 인터넷을 통해 연결되는 것이다.
정보가 기기의 웹 '브라우저'에 표시되므로 클라이언트의 좁은 의미가 브라우저를 의미한다는 것도 이해가 되는 것 같다.
# 프런트엔드 개발과 백엔드 개발
이제 내가 정말 궁금했던 부분이 나왔다.
웹 브라우저 화면에 보이는 내용을 기기가 달라져도 모두 작동하도록 만드는 것이 어느 쪽의 기능인지가 궁금했었는데...!
스마트폰, 태블릿 PC에 관계없이 모두 사용할 수 있는 반응형 웹 사이트를 만드는 것은 프런트엔드의 영역이라고 한다!
나는 사실 뭔가 반응 구조를 짜는 이런 영역...은 당연히 백엔드의 범주라고 생각했다.
백엔드는 데이터 베이스를 설계하거나 데이터를 처리하는 담당이고 프론트앤드는 그 데이터를 사용자에게 어떻게 보여줄지를 담당하는 것이다.
프론트앤드에서는 웹 사이트를 디자인하거나 사용자 동작에 반응하는 기능 등을 만들 수 있다고 한다.
(이거 완전 재밌겠는데...?)
프런트엔드(front-end) : HTML, CSS, JavaScript 사용 + React.js, Vue.js (개발 도구)
백엔드(back-end) : Java, PHP, Python, JavaScript 등 ... 사용
이 책에는 프런트엔드 개발에 필요한 HTML, CSS, 자바스크립트를 모두 다룬다! (Lucky!!)
# IP 주소와 도메인, DNS 서버
이 파트도 내가 정말정말 궁금했던 부분..!!
IP 주소는 인터넷에 연결되어 있는 여러 사이트를 구분하기 위해 붙이는 주소라고 한다.
C/C++을 잠깐 배웠을 때를 생각해보니...
서버 컴퓨터에 연결된 수많은 컴퓨터들 각각은 다른 개별 '변수'들이고 IP 주소는 할당된 주소니깐 이거 'scanf' 로 주소 할당하던 그거 아닌가?
확실하진 않지만 이 개념이랑 비슷하다고 하고 넘어가기로 했다. ㅎㅎ
* IP 주소의 종류
1. IPv4 (4개의 숫자 조합) : 대부분의 웹사이트가 사용
ex) 173.194.121.32
2. IPv6 (8개의 숫자 조합) : 휴대폰 등에서 사용
ex) 2001:0D88:0000:0000:0000:0000:1428:57ab
근데 IPv6은 왜 8개의 숫자 조합인데 6이라고 하지..?
그리고 알파벳 들어갔는데 숫자라고..? 10진수를 16진수로 표현한건가?
IP 주소를 사람이 이해하기 쉬운 이름으로 바꾼 것이 바로 '도메인(domain)'이다!
ex) google.com / easyspub.co.kr / ....
헉.. 그동안 궁금했던 개념이 바로 해결됨;
그리고 google.com처럼 사용자가 많거나 규모가 큰 사이트는 여러 개의 IP 주소를 사용한다고 한다.
그런데.... 저 IP 주소를 어떻게 도메인으로 바꾼다는 것일까....?
이 역할을 하는 친구가 바로...!!!
'DNS 서버(Domain Name Server)' 였던 것이다..!!!!
어제 도메인 구매를 하고 티스토리에 연결하며 이게 뭐지 하고 했던 DNS가 바로 이런 것이었구나..
DNS 서버는 등록된 도메인 정보를 가지고 있다가 사용자가 도메인을 입력할 때마다 빠르게 IP 주소로 바꿔준다.
(근데 어케 바꿔준다는 거지;;?)
# HTTP 프로토콜과 HTTPS 프로토콜
여기서 또 궁금증이 하나 더 생긴다.
클라이언트랑 서버랑 소통하는데 대체 어떻게 소통하는 것일까?!!
클라이언트와 서버가 사용하는 프로그래밍 언어도 동작하는 방식도 다르지만, 둘 다 공통으로 인식하는 규칙을 통해 소통할 수 있고 이 공통 규칙을 'HTTP 프로토콜'이라고 한다.
뒤이어 웹에서 개인 정보나 결제 정보처럼 민감한 내용이 오고가는 경우가 많아졌고, 이에 대응해 HTTP 프로토콜에 암호화를 추가해 보안을 강화한 것이 'HTTPS 프로토콜'이다.
추가적으로 최신 크롬 브라우저에서는 HTTP 프로토콜을 사용하는 웹 사이트를 기본적으로 차단하므로, 웹 사이트를 개발할 때에는 HTTPS 프로토콜을 통해 접속하도록 만들어야 한다고 한다.
+ 웹 사이트를 개발할 때 HTTP와 HTTPS 가운데 어떤 것을 사용할지는 '호스팅'을 할 때 결정한다.
# 웹 접근성이란
'웹 접근성(web accessibility; A11Y 또는 a11y)'은 나이나 장애에 상관없이 모든 사용자가 접근할 수 있음을 의미한다.
예를 들어 시각 장애인이 화면 낭독기로 웹을 이용하거나 마우스 사용이 어려운 경우에는 키보드만으로 웹을 둘러볼 수 있는 식으로 말이다. 서로 다른 운영체제나 브라우저에서 접근할 때에도 웹을 사용 가능하게 하는 경우도 포함된다.
우리나라를 포함한 대부분의 나라에서는 '웹을 개발할 때 웹 접근성을 지키도록 법으로 규정'해 놓았다.
따라 공공기관 사이트나 사용자가 많은 사이트는 오픈 전에 웹 접근성 인증을 받아야 하고 인증 마크도 표시해야 한다.
시각/이동/청각/인지 장애를 고려하면 웹 접근성을 준수할 수 있고, '널리(https://nuli.navercorp.com/)' 라는 사이트에서는 웹 접근성 관련 교육과 세미나를 제공한다고 한다.
뭐야.. 티스토리에 정리하면서 하다 보니 벌써 1일차 진도가 끝났다.
더 할까 고민되기도 하지만 일단은 여기에서 마무리하고 쉬어야겠다.
끝~~!!