웹은 화면이 아니라 주고받는 과정이다
우리가 웹사이트를 볼 때 가장 먼저 만나는 것은 화면입니다. 검색창, 메뉴, 사진, 글, 버튼이 보입니다. 그래서 웹을 '화면을 만드는 일'로 이해하기 쉽습니다. 하지만 웹의 핵심은 화면 자체보다 화면 뒤에서 오가는 요청과 응답에 있습니다.
브라우저는 크롬, 사파리, 엣지처럼 웹페이지를 보여 주는 프로그램입니다. 사용자가 웹 주소를 입력하거나 링크를 누르면 브라우저가 혼자서 모든 내용을 만들어 내는 것은 아닙니다. 필요한 자료를 어딘가에 요청하고, 받은 자료를 해석해서 화면으로 보여 줍니다.
그 요청을 받는 쪽이 서버입니다. 서버는 서비스를 제공하는 컴퓨터 또는 프로그램입니다. 식당으로 비유하면 브라우저는 손님이고, 서버는 주문을 받고 음식을 내주는 주방입니다. 손님이 메뉴를 말하면 주방이 음식을 준비해 내오듯, 브라우저가 웹 주소를 통해 자료를 요청하면 서버가 그에 맞는 자료를 응답합니다.
이때 웹 주소는 흔히 URL이라고 부릅니다. URL은 인터넷에서 원하는 자료의 위치를 가리키는 주소입니다. 집 주소가 특정 장소를 찾아가게 해 주듯, 웹 주소는 브라우저가 어느 서버의 어떤 자료를 요청해야 하는지 알려 줍니다.
AI 생성 이미지
주소를 입력하면 실제로 일어나는 일
사용자가 브라우저 주소창에 웹 주소를 입력하면 대략 다음 흐름이 일어납니다.
브라우저가 주소를 확인합니다.
해당 주소의 서버가 어디 있는지 찾습니다.
서버에 자료를 요청합니다.
서버가 필요한 자료를 응답합니다.
브라우저가 받은 자료를 해석해 화면을 그립니다.
여기서 중요한 단어는 요청과 응답입니다. 요청은 브라우저가 서버에 '이 자료를 주세요'라고 보내는 메시지입니다. 응답은 서버가 브라우저에 '여기 있습니다'라고 돌려주는 결과입니다.
조금 더 풀어 말하면, 브라우저는 먼저 주소에 적힌 이름을 보고 실제로 찾아가야 할 서버의 위치를 확인합니다. 이때 인터넷에는 주소 이름을 실제 위치로 연결해 주는 전화번호부 같은 과정이 있습니다. 전문적으로는 DNS라고 부르지만, 지금은 '브라우저가 서버를 찾아가는 단계가 있다' 정도로 이해해도 충분합니다.
예를 들어 뉴스 사이트에 접속한다고 해 보겠습니다. 브라우저는 서버에 첫 화면을 요청합니다. 서버는 기사 제목, 이미지 위치, 화면 구조 같은 자료를 보냅니다. 브라우저는 이 자료를 받아 사용자가 읽을 수 있는 화면으로 바꿉니다.
사용자는 단순히 페이지가 열린다고 느끼지만, 실제로는 짧은 시간 안에 여러 요청과 응답이 오갑니다. 글을 가져오는 요청, 이미지를 가져오는 요청, 광고를 가져오는 요청, 로그인 상태를 확인하는 요청이 따로 있을 수 있습니다. 웹페이지 하나가 열리는 동안 작은 심부름이 여러 번 오가는 셈입니다.
HTML, CSS, JavaScript의 역할
브라우저가 서버에서 받은 자료를 화면으로 보여 주려면 약속된 형식이 필요합니다. 웹의 기본 재료로 자주 나오는 것이 HTML, CSS, JavaScript입니다. 이름은 낯설지만 역할은 비교적 단순하게 나눌 수 있습니다.
HTML은 화면의 구조를 담당합니다. 집으로 비유하면 기둥, 벽, 방의 배치에 가깝습니다. 제목이 어디에 있고, 문단이 어디에 있으며, 버튼과 입력창이 어떤 순서로 놓일지를 정합니다. '이것은 제목이다', '이것은 이미지다', '이것은 링크다'처럼 화면에 들어갈 요소의 의미와 뼈대를 알려 줍니다.
CSS는 디자인을 담당합니다. 같은 구조라도 색, 글자 크기, 여백, 배치에 따라 전혀 다른 느낌이 납니다. CSS는 버튼을 파란색으로 만들지, 글자를 크게 할지, 모바일 화면에서는 메뉴를 접어 둘지 같은 시각적 표현을 정합니다. 집에 비유하면 벽지, 조명, 가구 배치에 해당합니다.
JavaScript는 움직임과 상호작용을 담당합니다. 사용자가 버튼을 눌렀을 때 메뉴가 펼쳐지고, 검색어를 입력하면 추천어가 뜨고, 장바구니 수량이 즉시 바뀌는 일이 여기에 해당합니다. JavaScript는 화면이 사용자 행동에 반응하도록 만드는 역할을 합니다.
세 가지를 한 문장으로 정리하면 이렇습니다. HTML은 무엇이 있는지 정하고, CSS는 어떻게 보일지 정하고, JavaScript는 어떻게 반응할지 정합니다.
물론 실제 개발에서는 이 경계가 더 복잡해질 수 있습니다. 하지만 일반 사용자가 웹의 작동 원리를 이해하기 위해서는 이 정도 구분이면 충분합니다. 화면은 그냥 예쁘게 그린 그림이 아니라, 구조와 디자인과 동작이 합쳐진 결과입니다.
정적인 웹페이지와 웹서비스의 차이
모든 웹페이지가 같은 방식으로 복잡하게 움직이는 것은 아닙니다. 웹에는 정적인 웹페이지와 웹서비스가 있습니다.
정적인 웹페이지는 누가 봐도 거의 같은 내용을 보여 주는 페이지입니다. 회사 소개, 행사 안내, 식당 메뉴판, 단순한 포트폴리오 페이지가 여기에 가깝습니다. 서버는 미리 준비된 자료를 보내고, 브라우저는 그것을 화면에 보여 줍니다. 사용자가 특별한 행동을 하지 않아도 내용이 크게 바뀌지 않습니다.
웹서비스는 사용자의 행동과 상태에 따라 결과가 달라지는 웹입니다. 로그인, 검색, 결제, 댓글 작성, 예약, 장바구니, 지도 길찾기처럼 사용자의 입력을 받아 처리하고 결과를 돌려줍니다.
예를 들어 쇼핑몰을 생각해 보겠습니다. 상품 목록을 보는 것만으로는 단순한 웹페이지처럼 느껴질 수 있습니다. 하지만 사용자가 로그인하면 개인 장바구니가 보입니다. 검색어를 입력하면 해당 상품을 찾아야 합니다. 결제를 누르면 재고, 가격, 배송지, 결제 승인 상태를 확인해야 합니다. 이때 서버는 단순히 같은 화면을 보내는 것이 아니라 사용자마다 다른 결과를 계산해 응답합니다.
이 차이를 이해하면 개발 비용과 난이도도 조금 더 현실적으로 볼 수 있습니다. '페이지 하나 만들어 주세요'와 '로그인하고 결제되는 서비스 만들어 주세요'는 겉보기에는 둘 다 웹 화면이지만, 안에서 해야 할 일이 크게 다릅니다. 전자는 안내판을 세우는 일에 가깝고, 후자는 주문, 결제, 재고, 고객 정보를 처리하는 가게 운영 시스템을 만드는 일에 가깝습니다.
화면 뒤에는 데이터가 오간다
웹서비스가 작동하려면 화면만 있어서는 부족합니다. 사용자의 정보, 상품 정보, 주문 내역, 게시글, 댓글 같은 데이터가 필요합니다. 데이터는 서비스가 기억하고 처리해야 할 정보입니다.
사용자가 로그인 버튼을 누르면 브라우저는 아이디와 비밀번호를 서버에 보냅니다. 다만 실제 서비스에서는 보통 암호화된 연결을 통해 전송하고, 서버는 저장된 정보와 비교해 사용자가 맞는지 확인합니다. 확인이 끝나면 서버는 로그인된 사용자에게 필요한 정보를 응답합니다. 사용자가 검색어를 입력하면 브라우저는 검색어를 서버에 보내고, 서버는 관련 데이터를 찾아 결과를 돌려줍니다.
이 과정은 앞에서 본 입력, 처리, 출력의 흐름과 닮아 있습니다. 사용자의 클릭과 입력은 입력입니다. 서버가 규칙에 따라 확인하고 계산하는 과정은 처리입니다. 그 결과가 화면에 보이는 것은 출력입니다.
웹을 이해할 때 중요한 관점은 '화면에 무엇이 보이는가'에서 한 걸음 더 나아가 '그 화면을 만들기 위해 어떤 데이터가 오갔는가'를 보는 것입니다. 로그인 화면 뒤에는 사용자 확인이 있고, 결제 버튼 뒤에는 금액 계산과 승인 요청이 있으며, 검색창 뒤에는 데이터 조회가 있습니다.
페이지가 느리게 열리는 이유
웹페이지가 느리게 열리면 우리는 흔히 '사이트가 무겁다'고 말합니다. 이 말은 대체로 맞지만, 실제 원인은 여러 가지일 수 있습니다.
첫째, 요청해야 할 자료가 너무 많을 수 있습니다. 글 몇 줄만 있는 페이지보다 큰 이미지, 영상, 광고, 외부 서비스 연결이 많은 페이지는 더 많은 자료를 받아야 합니다. 심부름을 한 번만 다녀오면 되는 상황과 열 번 다녀와야 하는 상황은 속도가 다릅니다.
둘째, 서버가 바쁠 수 있습니다. 많은 사용자가 동시에 접속하면 서버가 모든 요청을 즉시 처리하지 못할 수 있습니다. 인기 공연 예매 사이트가 오픈 시간에 느려지는 이유도 이와 관련이 있습니다.
셋째, 네트워크가 느리거나 불안정할 수 있습니다. 브라우저와 서버 사이의 길이 막히면 자료가 늦게 도착합니다. 같은 사이트라도 집에서는 빠르고 지하철에서는 느릴 수 있는 이유입니다.
넷째, 브라우저가 화면을 그리는 데 시간이 걸릴 수 있습니다. 받은 자료가 많거나 화면 동작이 복잡하면 브라우저도 해석하고 정리하는 데 시간이 필요합니다.
따라서 웹이 느릴 때 원인을 단순히 하나로 단정하기 어렵습니다. 사용자의 인터넷 문제일 수도 있고, 서버 문제일 수도 있으며, 페이지 설계 문제일 수도 있습니다. 개발자는 이런 가능성을 나누어 보고 어디에서 시간이 많이 걸리는지 확인합니다.
오류는 어디에서 생길까
웹에서 오류가 나면 사용자에게는 그냥 '안 된다'로 보입니다. 하지만 개발 관점에서는 오류가 생기는 위치를 나누어 보는 것이 중요합니다.
브라우저 쪽 오류는 사용자의 기기나 브라우저에서 화면을 처리하는 중에 생길 수 있습니다. 예를 들어 오래된 브라우저가 최신 기능을 제대로 해석하지 못하거나, 화면 동작을 담당하는 코드에 문제가 있을 수 있습니다.
서버 쪽 오류는 요청을 받은 서버가 처리에 실패한 경우입니다. 데이터베이스 연결이 끊겼거나, 결제 확인 과정에서 문제가 생겼거나, 예상하지 못한 입력이 들어왔을 수 있습니다.
네트워크 오류는 브라우저와 서버 사이의 연결 문제입니다. 인터넷이 끊기거나, 요청이 중간에서 지연되거나, 회사나 학교의 보안 설정 때문에 특정 접속이 막힐 수도 있습니다.
이 차이를 알면 오류를 더 차분하게 바라볼 수 있습니다. '내 컴퓨터가 문제인가?', '사이트 서버가 문제인가?', '인터넷 연결 문제인가?'를 나누어 생각할 수 있기 때문입니다. 개발자와 대화할 때도 '버튼을 누르면 아무 반응이 없다', '로그인 후 흰 화면이 나온다', '모바일 데이터에서는 안 되고 와이파이에서는 된다'처럼 상황을 구체적으로 말하면 원인을 찾는 데 도움이 됩니다.
웹에 대한 흔한 오해
첫 번째 오해는 웹사이트가 내 컴퓨터 안에 전부 들어 있다고 생각하는 것입니다. 실제로 브라우저는 필요한 자료를 서버에서 받아와 임시로 보여 주는 경우가 많습니다. 그래서 인터넷 연결이 끊기면 많은 웹서비스를 제대로 사용할 수 없습니다.
두 번째 오해는 예쁜 화면을 만들면 서비스가 완성된다고 보는 것입니다. 단순 안내 페이지라면 화면이 대부분일 수 있습니다. 하지만 로그인, 결제, 검색, 예약이 들어가면 화면 뒤의 규칙과 데이터 처리가 훨씬 중요해집니다.
세 번째 오해는 웹 주소 하나가 항상 파일 하나를 뜻한다고 생각하는 것입니다. 과거의 단순한 웹에서는 그렇게 보이는 경우가 많았습니다. 하지만 현대 웹서비스에서는 주소 하나가 서버의 처리 결과를 뜻할 때가 많습니다. 같은 주소라도 로그인한 사람과 로그인하지 않은 사람에게 다른 화면을 보여 줄 수 있습니다.
네 번째 오해는 느리거나 오류가 나면 무조건 개발을 잘못한 것이라고 단정하는 것입니다. 물론 잘못 만든 코드가 원인일 수 있습니다. 그러나 서버 사용량, 외부 결제사의 응답, 이미지 용량, 네트워크 상태, 사용자의 기기 성능도 영향을 줍니다. 좋은 개발은 이런 가능성을 줄이고 문제가 생겼을 때 원인을 찾기 쉽게 만드는 일까지 포함합니다.
웹을 이해하는 가장 중요한 관점
웹사이트와 웹서비스를 이해하는 핵심은 브라우저와 서버 사이의 대화입니다. 사용자는 화면을 보고 행동하지만, 그 행동은 요청이 되어 서버로 갑니다. 서버는 필요한 처리를 하고 응답을 돌려줍니다. 브라우저는 그 응답을 해석해 다시 화면으로 보여 줍니다.
HTML, CSS, JavaScript는 이 화면을 만들고 움직이게 하는 기본 재료입니다. 정적인 웹페이지는 준비된 내용을 보여 주는 데 가깝고, 웹서비스는 사용자의 입력과 데이터에 따라 결과가 달라지는 시스템에 가깝습니다.
웹을 화면으로만 보면 개발이 단순해 보입니다. 그러나 요청과 응답, 데이터와 처리 과정을 함께 보면 왜 어떤 기능은 간단하고 어떤 기능은 복잡한지 이해할 수 있습니다. 앞으로 서버, 데이터베이스, API를 배울 때도 이 관점이 계속 이어집니다. 웹은 결국 사용자의 행동을 받아, 필요한 곳에 요청하고, 처리된 결과를 다시 사용자에게 보여 주는 흐름입니다.
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.