1. 왜 웹 구조부터인가

26년 4월 기준으로 요즘 AI에게 "할 일 관리 앱 만들어줘"라고 던져 보면 "어떤 주제로 만드실 계획인가요?", "어떤 기능이 필요하신가요?", "어떤 디자인을 원하시나요?" 등의 질문이 돌아옵니다. 우리는 단계마다 AI에게 답변을 하고 추천하는 기술로 구현을 시작합니다.

이렇게 모든 선택을 마치면 AI가 초안을 주고, 우리는 초안을 보고 수정을 명령합니다. 때로는 검은색 창에 들어가서 명령어를 입력하라는 AI 지시에 따라 명령어도 입력합니다. 왜 이렇게 하는지는 모르겠지만 AI가 시키니까 합니다. 배포로 가면 더 복잡합니다. 어디에 가입하라고 하고, 어떤 버튼을 클릭하라고 합니다. AI 시키면 합니다. 그렇게 하면 되니까요. 하지만 왜 그런지는 모릅니다. AI가 시키니까 하는 거죠.

그리고 어느 순간 길을 잘못 들어왔다는 사실을 알게 됩니다. 원하는 결과물이 아니었던거죠. 바로 깨닫지 못하고 서비스를 배포해본 후에야 아는 경우도 있습니다. 제가 말하려고 하는 것은 '주제' 얘기는 아닙니다. '구조'와 '기술' 얘기입니다. 주제에 적합한 '구조'와 '기술'을 선택하지 못했던거죠.

이 책은 적어도 이러한 작업을 왜 해야하고, 왜 이런 결과물을 주었는지 빠르게 정리합니다. 내가 원하는 주제와 관련된 결과물이 어느정도가 적절한 결과물인지 파악하는 것이 목표입니다. 문법서가 아닙니다. AI에게 "프론트만 있어도 돼", "이건 백엔드가 필요해", "DB는 안 써도 돼"라고 말할 수 있게 되는 게 목표입니다. AI에게 어떻게 시킬지 알게 되는 게 목표입니다.

2. 들어가기 전

본격적인 웹 서비스 구조 이야기에 들어가기 전에, 간단한 실습을 통해 우리가 보고 있는 화면들이 어떻게 구성되어 있는지 확인해보도록 하겠습니다. 네이버에서 '로또'를 검색해보세요. 저는 크롬을 사용하고 있습니다. 크롬을 설치하고 실습을 따라와주세요.

여기서 F12 또는 Ctrl + Shift + i, 맥북은 Cmd + opt + i를 누르면 개발자 도구가 열립니다. Elements 탭을 눌러주시고 왼쪽에 있는 화살표 모양을 클릭해주세요. 그리고 여러분이 수정을 원하는 곳에 커서를 가지고 가보세요.

아래와 같이 요소를 선택한 다음 클릭해주세요.

오른쪽에 <span class="ball type1">6</span>이라는 코드가 보이시나요? 이 코드가 로또 번호의 6을 만들어내는 텍스트입니다. 이것은 이미지도 아니고, 동영상도 아니에요. 단지 이 텍스트로 만들어내는 화면일 뿐입니다. 6이라는 숫자를 더블클릭하여 수정해보세요.

실제 텍스트가 수정이 된 것을 볼 수 있습니다.

이렇게 여러분이 보고 있으신 웹 페이지뿐만 아니라, 윈도우 화면, 맥북 화면, 게임 등 모든 것은 코드로 만들어지는 화면입니다. 그 중에서 웹 브라우저를 열어 보는 화면은 HTML, CSS, JavaScript라는 언어로 만들어진 화면입니다. 더 상세한 것은 01-3에서 다루도록 하겠습니다.

이번에는 탭을 이동해보도록 하겠습니다. Network 탭을 눌러주세요.

새로고침을 해보세요.

이렇게 어디선가 우리에게 이미지, HTML, CSS, JavaScript 등의 파일이 전달되고 있습니다. 이렇게 우리에게 보내는 쪽을 '서버'라고 부릅니다. 그리고 이 책을 다 보게 되면 이 파일이 어떻게 우리에게 전달될 수 있는지 알게될 것입니다.