브라우저, 서버, URL을 한 장으로 이해하기
AI가 만든 코드가 어디서 실행되는지 모르면 에러가 생겼을 때 질문도 막힙니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
웹앱은 어디에서 움직이나요
웹앱을 만들 때 가장 먼저 구분해야 하는 것은 브라우저와 서버입니다. 브라우저는 사용자의 컴퓨터나 휴대폰에서 화면을 보여주고 버튼 클릭 같은 행동을 처리합니다. 서버는 인터넷 어딘가에서 요청을 받고 데이터를 저장하거나 계산한 뒤 응답을 돌려줍니다.
처음 만드는 정적 사이트는 서버가 없어도 됩니다. HTML은 구조를 만들고, CSS는 모양을 정하고, JavaScript는 클릭이나 입력에 반응합니다. 이 세 파일만 있어도 브라우저에서 열리는 결과물을 만들 수 있고, 정적 호스팅에 올리면 URL로 공유할 수 있습니다.
URL과 요청의 감각
URL은 사용자가 어디에 접근하는지 알려주는 주소입니다. 브라우저에 URL을 입력하면 브라우저는 해당 주소로 요청을 보내고, 응답으로 HTML, CSS, JavaScript, 이미지 같은 파일을 받습니다. AI가 만든 앱이 열리지 않을 때는 이 주소와 파일 경로를 먼저 의심해야 합니다.
초보자는 '내 컴퓨터에서는 되는데 배포하면 안 돼요'라는 문제를 자주 만납니다. 대부분 이미지 경로, 파일 이름 대소문자, 빌드 결과물 위치, 공개 URL 설정에서 생깁니다. 웹 구조를 조금만 알아도 AI에게 훨씬 정확하게 질문할 수 있습니다.
서버가 필요한 순간
로그인, 결제, 여러 기기에서 공유되는 데이터, 비밀키를 사용하는 외부 API 호출은 보통 서버가 필요합니다. 반대로 소개 페이지, 계산기, 체크리스트, 간단한 기록 도구처럼 브라우저 안에서 끝나는 기능은 정적 사이트로도 충분할 수 있습니다.
첫 프로젝트에서는 서버가 꼭 필요한지 계속 물어보세요. 서버가 들어오면 배울 것이 늘고 보안 책임도 커집니다. 정적 사이트로 끝낼 수 있다면 먼저 정적으로 완성하고, 나중에 정말 필요한 순간에 서버를 붙이는 편이 안전합니다.
공부 기록 앱이 열리는 흐름
공부 기록 앱을 열 때 사용자의 입력이 어디를 거치는지 한눈에 봅니다.
- 01 사용자
기록을 입력하고 버튼을 누릅니다.
사용자가 주소를 엽니다 - 02 브라우저
화면을 보여주고 클릭을 받습니다.
브라우저가 파일을 읽습니다 - 03 HTML/CSS/JS
화면 구조, 스타일, 움직임을 만듭니다.
필요하면 서버에 요청합니다 - 04 서버
필요할 때 파일이나 데이터를 보내줍니다.
핵심 정리
브라우저는 화면을 보여주고, 서버는 요청에 응답합니다. 정적 사이트는 HTML/CSS/JS 파일만으로도 배포할 수 있습니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "브라우저, 서버, URL을 한 장으로 이해하기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 AI가 만든 코드가 어디서 실행되는지 모르면 에러가 생겼을 때 질문도 막힙니다.
이 웹앱이 브라우저에서 하는 일과 서버가 필요한 일을 표로 나눠줘. 초보자가 이해할 단어로 설명해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 HTML/CSS/JS가 브라우저에서 실행되는 부분인지 확인합니다., 서버나 DB가 꼭 필요한 기능인지 표시합니다., 결과물을 URL로 열 수 있는지 확인합니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- HTML/CSS/JS가 브라우저에서 실행되는 부분인지 확인합니다.
- 서버나 DB가 꼭 필요한 기능인지 표시합니다.
- 결과물을 URL로 열 수 있는지 확인합니다.
실습
자주 쓰는 웹사이트 하나를 골라 브라우저가 하는 일과 서버가 하는 일을 나눠 적어보세요.
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 브라우저 역할: 입력창, 저장 버튼, 기록 목록을 보여준다
- 공부 기록 앱 첫 버전 저장: 브라우저 저장으로 시작한다
- 공부 기록 앱 서버 후보: 여러 기기 동기화가 필요할 때 DB와 서버를 검토한다
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.