7. 브라우저와 웹페이지의 관계
화면은 어떻게 나타날까요
브라우저의 주소창에 사이트 주소를 넣으면 브라우저는 그 주소에 필요한 자료를 요청합니다. 인터넷에서 자료를 제공하는 컴퓨터나 프로그램을 서버라고 합니다. 브라우저는 받은 내용을 해석해 글과 그림, 버튼이 있는 화면을 보여 줍니다. 일부 자료는 이미 보관한 것을 재사용하기도 하지만, 처음에는 ‘주소로 자료를 찾고, 브라우저가 화면으로 보여 준다’고 이해하면 됩니다.
컴퓨터에 저장된 파일도 브라우저로 열 수 있습니다. 이때 보이는 내 컴퓨터의 파일 위치가 다른 사람에게 접속 주소가 되는 것은 아닙니다. 인터넷에 공개하려면 다른 사람의 브라우저도 자료를 받을 수 있는 곳에 파일을 올려야 합니다. 그 과정은 뒤에서 배웁니다.
그림을 읽으며 요청을 구분하기
제목 · 소개 문단 · 링크
글자 크기 · 색 · 간격
입력 · 검색 · 버튼 반응
그림의 세 칸은 같은 소개 페이지를 서로 다른 역할로 나눈 것입니다. 첫 칸은 어떤 내용이 있는지, 두 번째는 그 내용이 어떤 모습인지, 세 번째는 사용자의 행동에 어떤 반응을 하는지 보여 줍니다. 파일이 반드시 세 개라는 뜻은 아닙니다. 이번 실습에서는 필요한 내용을 한 HTML 파일 안에 담아 볼 수 있습니다.
소개 문장을 바꾸려는 상황에서는 첫 칸의 내용을 생각합니다. 제목의 색을 바꾸려는 상황에서는 두 번째 칸을, 검색창에 쓴 글에 따라 목록을 바꾸려면 세 번째 칸을 생각합니다. 전문 이름을 넣어 말하지 않아도 괜찮습니다. 무엇이 달라져야 하는지 설명하면 AI에게 의도를 전달할 수 있습니다.
버튼을 하나 더 만드는 요청에는 세 역할이 함께 들어갈 수 있습니다. 화면에 무엇이라고 적을지, 어디에 어떤 모습으로 놓을지, 눌렀을 때 무엇을 할지가 필요합니다. AI가 버튼 모양만 추가했다면 동작에 관한 확인이 아직 남은 것입니다. 이런 식으로 나누어 보면 화면을 보고 빠진 부분을 찾기 쉽습니다.
그림 아래에서 자신이 만든 결과를 떠올려 볼 수 있습니다. 제목은 있는데 읽기 어렵다면 내용을 모두 다시 쓸 이유는 없을 수 있습니다. 읽기는 편한데 링크가 틀리다면 색과 간격을 바꿀 일이 아닐 수 있습니다. 문제와 관련된 역할을 좁히는 것이 작은 수정의 출발점입니다.
화면을 만드는 세 가지 역할
HTML, CSS, 자바스크립트는 웹을 설명할 때 자주 나오는 이름입니다. 지금 문법을 배우거나 외울 필요는 없습니다. 같은 소개 페이지에서 무엇을 맡는지만 봅니다.
| 이름 | 소개 페이지에서 맡는 역할 |
|---|---|
| HTML | 제목, 소개 문단, 링크처럼 내용과 구조를 표현합니다. |
| CSS | 글자 크기, 색, 간격, 배치처럼 보이는 모습을 정합니다. |
| 자바스크립트 | 입력을 처리하거나 버튼을 눌렀을 때 화면을 바꾸는 동작을 담당합니다. |
“소개 문장을 바꿔 줘”, “글자를 키워 줘”, “버튼을 누르면 목록을 보여 줘”는 서로 다른 요청입니다. 이름을 정확히 말하지 않아도 AI에게 부탁할 수 있습니다. 다만 AI가 어느 부분을 바꿨다고 설명할 때 위 구분을 알면 이야기를 따라가기 편합니다. 한 파일 안에 세 역할이 함께 들어갈 수도 있고 여러 파일로 나뉠 수도 있습니다.
파일·폴더·주소의 차이
파일은 내용을 담아 보관하는 단위입니다. 사진도 파일이고 웹페이지를 만드는 코드도 파일입니다. 폴더는 여러 파일을 묶는 공간입니다. 파일 이름 뒤의 .html 같은 부분은 파일 종류를 구별하는 표시이며 확장자라고 합니다. 처음에는 읽는 데 필요한 만큼만 알아두면 됩니다.
주소는 자료를 찾는 위치입니다. 브라우저 위쪽 주소창에 넣는 https://…와 AI에게 부탁하는 대화 입력칸은 다릅니다. AI 대화의 주소를 보내면 만든 페이지 대신 대화나 로그인 화면이 열릴 수도 있습니다. 무엇의 주소인지 구분해야 하는 이유입니다.
책과 작업 화면을 오가는 방법
브라우저의 탭은 한 창에서 여러 페이지를 나누어 여는 자리입니다. 책을 한 탭, AI 도구를 다른 탭에 두면 번갈아 볼 수 있습니다. 글을 옮길 때는 선택한 뒤 복사하고 원하는 입력칸에 붙여 넣습니다. Windows에서는 Ctrl+C와 Ctrl+V, Mac에서는 Command+C와 Command+V를 씁니다. 책의 요청문에는 복사 버튼도 있습니다.
새로고침은 현재 주소의 화면을 다시 불러오는 동작입니다. 저장하지 않은 입력이나 작업 상태가 사라질 수 있으므로, 문제가 생길 때 무조건 누르는 버튼으로 생각하지 않습니다. 먼저 무엇이 저장되어 있는지 확인하는 습관을 들입니다.
글은 보이는데 그림이 안 보이는 상황
소개글은 정상인데 사진 자리만 비어 있다고 해 봅시다. 페이지 자체가 전부 실패한 것은 아닐 수 있습니다. 글과 사진이 서로 다른 파일이고 사진 위치가 잘못되었거나 파일이 빠졌을 수 있습니다. AI에게 ‘화면이 전부 안 된다’고 말하는 대신 ‘제목과 글은 보이지만 사진만 안 보인다’고 설명하면 확인 범위를 좁힐 수 있습니다.
내 컴퓨터에서만 사진이 보인다면 공개된 곳에 사진도 함께 있는지 봅니다. 파일 이름의 대소문자나 경로가 다른 경우도 확인할 단서입니다. 경로는 폴더 안에서 파일이 있는 위치를 뜻합니다. 지금은 복잡한 경로 문법보다 파일이 실제로 있는 곳과 페이지가 찾는 곳이 같은지를 생각합니다.
주소와 새로고침이 헷갈릴 때
주소를 바꾸면 무엇이 달라질까요
페이지 안에서 같은 사이트의 다른 경로로 이동하는 일과, 전혀 다른 사이트로 이동하는 일은 구분할 수 있습니다. 주소에는 사이트를 찾는 이름과 그 안의 자료 위치 등이 들어갑니다. 지금은 주소의 모든 기호를 외우기보다 어디에서 받은 주소인지, 무엇을 열어야 하는 주소인지를 아는 것으로 시작합니다. 낯선 주소가 나왔다면 목적을 설명해 달라고 할 수 있습니다.
사진이 내 컴퓨터에서는 보이는데 공개 후 보이지 않는 경우도 있습니다. 사진의 위치가 내 컴퓨터에만 있거나, 함께 올려야 할 파일이 빠졌을 수 있습니다. 이때 글자 색이나 화면 배치를 고쳐서는 문제가 해결되지 않습니다. 웹페이지가 여러 자료를 읽어 화면을 만든다는 사실을 알면 필요한 파일이 실제로 있는지부터 질문할 수 있습니다.
안내문을 받아 읽는 장면으로 생각하기
브라우저와 서버의 관계를 모임 안내문에 빗대어 볼 수 있습니다. 안내문을 보관한 곳에 자료를 요청하고, 받은 내용을 내 화면에서 읽는 장면입니다. 다만 브라우저는 종이를 그대로 펼치는 것보다 더 많은 일을 합니다. 글과 그림의 위치를 계산하고, 화면 폭에 따라 배치를 바꾸며, 입력이나 버튼 동작도 처리합니다.
이 비유에는 한계가 있습니다. 실제 웹에서는 화면에 필요한 파일이 여러 곳에서 오거나 이미 받은 자료를 다시 쓸 수 있습니다. 그래도 ‘주소를 찾는 일’, ‘자료를 제공하는 일’, ‘화면으로 보여 주는 일’을 구분하는 데는 도움이 됩니다. 처음부터 모든 통신 과정을 외우는 대신 문제가 어느 부분에서 생겼는지 질문할 수 있는 정도로 출발합니다.
새로고침과 새로 만들기는 다릅니다
새로고침은 현재 주소를 다시 불러오는 행동입니다. AI에게 페이지 코드를 처음부터 다시 작성해 달라고 하는 것과는 다릅니다. 아직 저장되지 않은 입력이 있을 때 새로고침하면 그 입력이 사라질 수 있습니다. 반면 서버에 올려 둔 파일 자체가 새로고침 한 번으로 지워지는 것은 아닙니다.
문제가 생겼을 때는 무엇을 다시 하려는지 구분해야 합니다. 결과를 다시 열면 되는지, 최신 파일을 선택해야 하는지, 코드 수정이 필요한지 먼저 봅니다. 동작을 구분하면 ‘계속 다시 해 봐’라는 넓은 요청을 줄이고 현재 자료를 보존하면서 문제를 살필 수 있습니다.
주소창에서 볼 수 있는 단서
주소의 앞부분은 접속 방식, 가운데는 사이트 이름, 뒤쪽은 그 안의 위치를 나타낼 수 있습니다. 지금은 주소를 직접 설계할 필요는 없습니다. 다만 브라우저 주소창의 값과 페이지 안에 보이는 제목이 서로 다른 정보라는 점은 알아둡니다. 제목을 바꾸었다고 사이트 주소가 자동으로 바뀌는 것은 아닙니다.
내 컴퓨터의 파일을 연 경우와 인터넷 사이트를 연 경우도 주소의 모습이 다를 수 있습니다. 파일 위치를 친구에게 보내면 친구의 컴퓨터에는 그 파일이 없어서 열리지 않을 수 있습니다. 공개 주소가 필요한 이유를 이 상황으로 이해할 수 있습니다. 상대가 접근할 수 있는 곳에 자료가 있어야 같은 결과를 볼 수 있습니다.
“인터넷이 끊기면 만든 것도 없어지나요?”
인터넷 접속이 안 되는 것과 자료가 삭제되는 것은 다릅니다. 이미 받은 파일이 내 컴퓨터에 있거나 일부 자료를 브라우저가 보관하고 있을 수 있습니다. 그러나 모든 페이지가 인터넷 없이 같은 기능을 계속 제공하는 것은 아닙니다. 외부 자료나 서비스가 필요한 기능은 멈출 수 있습니다.
이번에 내려받은 독립적인 소개 파일은 별도 외부 자료가 없다면 브라우저로 내용을 볼 수 있습니다. 반면 인터넷 주소의 최신 파일을 받으려면 연결이 필요할 수 있습니다. 현재 무엇을 열고 있는지에 따라 결과가 달라집니다. 도구 안의 미리보기와 내려받은 파일과 공개 주소를 구분한 이유가 여기에도 있습니다.
화면이 안 열릴 때는 연결 상태를 확인하되 자료가 지워졌다고 바로 판단하지 않습니다. 이미 보관한 파일이 있는지, 작업 계정과 대화가 맞는지, 현재 주소에 접속할 수 있는지 나누어 봅니다. 문제의 원인을 모르는 상태에서 파일을 삭제하거나 프로젝트를 새로 만드는 일이 항상 필요한 것은 아닙니다.
꼭 기억하세요
브라우저는 자료를 화면으로 보여 주는 프로그램입니다. 코드 이름보다 내용·모양·동작의 역할을 구분하는 것으로 충분합니다.