처음 만나는 AI와 Claude Code

브라우저와 로컬 웹서버의 역할 이해하기

3장. 브라우저와 로컬 웹서버의 역할 이해하기

2장에서는 내 컴퓨터의 index.html을 브라우저로 열어 안내 페이지를 확인했습니다. 3장에서는 책 제목과 질문을 입력하고 저장하는 동작을 더합니다. 실습 중에 Python과 웹서버라는 낯선 이름이 나올 수 있으니, 먼저 전체 구조를 살펴봅시다.

모두 내 컴퓨터 안에서 일어나는 일

index.html은 연습용 폴더에 있는 파일입니다. 브라우저는 그 파일을 읽어 화면을 보여 주고, 준비 카드는 브라우저의 저장 공간에 남깁니다. 파일을 직접 열어도 되고, 필요하면 로컬 웹서버를 거쳐 열 수도 있습니다. 웹서버는 브라우저의 요청을 받아 파일을 전달하는 프로그램입니다. 여기서 로컬은 그 프로그램이 인터넷의 다른 컴퓨터가 아니라 내 컴퓨터에서 실행된다는 뜻입니다.

두 길 모두 같은 index.html을 보여 줍니다. 로컬 웹서버는 페이지를 전달할 뿐, 준비 카드를 보관하지 않습니다. 카드를 보관하는 곳은 브라우저입니다. 127.0.0.1은 내 컴퓨터를 가리키는 주소입니다. 파일을 직접 열 때의 file: 주소와 로컬 웹서버의 주소는 브라우저에서 서로 다른 저장 공간을 쓰므로, 주소를 바꾸면 기존 카드가 보이지 않을 수 있습니다.

Python은 언제 쓸까요?

Python은 프로그래밍 언어입니다. 이 책에서는 Python으로 앱을 만들지 않습니다. 이미 설치된 Python의 간단한 웹서버 기능을 필요할 때만 사용해 index.html을 브라우저에 전달합니다. 파일을 직접 열었을 때 저장이 잘 된다면 웹서버를 실행할 필요가 없습니다. 직접 연 file: 페이지의 저장 동작은 브라우저마다 다를 수 있습니다. 저장이 되지 않을 때 다음 페이지에서 로컬 웹서버를 실행해 다시 확인합니다. Python의 로컬 웹서버 설명과 MDN의 브라우저 저장 공간 설명에서 이 차이를 더 살펴볼 수 있습니다.

새 기술을 만날 때 처음부터 모든 명령과 옵션을 외울 필요는 없습니다. 무엇이 어디에 있는지 이해하고 → 작은 동작을 만들어 보고 → 결과를 확인하며 → 필요한 부분을 더 자세히 배우는 순서로 나아가면 됩니다. 이제 이 구조를 떠올리며 첫 준비 카드를 만들어 봅시다.

참고 링크

• https://docs.python.org/3/library/http.server.html

• https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage