저도 처음엔 웹사이트가 그냥 '예쁜 화면'의 집합이라고 생각했습니다. HTML로 제목 만들고, CSS로 색 입히면 반쯤 완성된 줄 알았으니까요. 그런데 공부를 조금 더 해보니 그건 빙산의 일각이었습니다. 화면 뒤에서 데이터가 오가고, 서버가 판단하고, 데이터베이스가 기억하는 구조 전체를 이해해야 비로소 웹사이트가 보이기 시작했습니다.
웹사이트의 주조 중 프런트엔드가 하는 일
처음 IT 공부를 시작하면 프런트엔드(Front-end)부터 접하는 경우가 많습니다. 여기서 프런트엔드란 사용자가 브라우저에서 직접 보고 조작하는 모든 화면 영역을 말합니다. 메뉴, 버튼, 검색창, 로그인 폼, 상품 이미지처럼 눈에 보이는 요소가 전부 여기에 속합니다.
프런트엔드를 구성하는 핵심 기술은 HTML, CSS, JavaScript 세 가지입니다. HTML은 웹페이지의 뼈대를 만들고, CSS는 그 뼈대에 색과 디자인을 입히며, JavaScript는 버튼을 눌렀을 때 화면이 반응하도록 동작을 부여합니다.
저는 처음에 이 세 가지만 잘 쓰면 웹사이트를 완성할 수 있다고 봤습니다. 그런데 실제로는 화면만 있으면 데이터를 저장할 수 없고, 로그인 정보를 검증할 수도 없습니다. 프런트엔드는 어디까지나 '요청을 만들어 보내는 쪽'이지, 처리하는 쪽이 아니라는 점을 뒤늦게 깨달았습니다.
프런트엔드는 사용자가 웹사이트를 이용할 때 가장 먼저 만나는 영역입니다. 하지만 화면만 있다고 해서 웹사이트가 완성되는 것은 아닙니다. 로그인 정보 확인, 게시글 저장, 상품 주문 처리 같은 기능은 화면 뒤에서 따로 처리되어야 합니다.
프런트엔드만으로 완성된다고 생각하는 분들도 있는데, 저는 오히려 프런트엔드는 서버와 데이터베이스가 있어야 비로소 살아 움직인다고 봅니다. 화면은 창문이고, 실제 기능은 그 안에 있는 방에서 일어납니다.
보이지 않는 핵심, 백엔드와 서버의 역할
사용자가 로그인 버튼을 누르는 순간, 그 정보는 어딘가로 전달됩니다. 그 '어딘가'가 바로 서버입니다. 서버란 사용자의 요청을 받아 처리하고 결과를 돌려주는 컴퓨터 또는 프로그램을 말합니다.
이 서버를 설계하고 구현하는 영역을 백엔드(Back-end)라고 부릅니다. 여기서 백엔드란 사용자 눈에는 보이지 않지만 웹사이트의 실질적인 기능, 즉 인증, 데이터 처리, 비즈니스 로직을 담당하는 서버 측 개발 영역을 의미합니다. Java, Python, Node.js 같은 언어가 주로 사용됩니다.
예를 들어 게시판에 글을 작성하면, 프런트엔드는 제목과 내용을 서버로 보냅니다. 서버는 그 데이터를 검증하고, 이상이 없으면 데이터베이스에 저장합니다. 나중에 다른 사용자가 목록을 열면, 서버는 데이터베이스에서 글을 꺼내 화면에 보낼 데이터를 구성합니다. 이 흐름이 한 번의 '게시글 작성' 안에 모두 들어 있습니다.
제 경험상 백엔드 개념이 어렵게 느껴지는 이유는 눈에 안 보이기 때문입니다. 화면은 바로 확인할 수 있는데, 서버 로직은 실행 결과가 화면에 나타나기 전까지는 중간 과정이 보이지 않습니다. 그래서 백엔드를 처음 공부할 때는 흐름을 그림으로 그려보는 것이 많이 도움 됐습니다.
백엔드 개발자는 주로 이 서버 영역을 다루게 됩니다. 서버 로직, API, 데이터 처리, 인증, 권한, 오류 처리 같은 기능을 설계하고 구현합니다.
서비스의 기억장치, 데이터베이스와 API의 연결 구조
데이터베이스(Database)란 웹사이트에 필요한 데이터를 체계적으로 저장하고 관리하는 공간입니다. 회원 정보, 게시글, 주문 내역, 결제 상태처럼 서비스가 기억해야 하는 모든 정보가 여기에 저장됩니다.
데이터베이스가 없다면 어떻게 될까요. 회원가입을 해도 서버가 꺼지는 순간 정보가 사라지고, 게시글도 새로 고침 한 번에 없어집니다. 데이터베이스는 서비스의 기억 역할을 하는 셈입니다.
그렇다면 프런트엔드는 어떻게 서버, 데이터베이스와 소통할까요. 이때 사용되는 것이 API(Application Programming Interface)입니다. API란 프런트엔드와 백엔드가 정보를 주고받기 위해 사전에 약속한 통신 규약을 의미합니다. 쉽게 말해 메뉴판과 비슷합니다. 손님(프런트엔드)이 메뉴판에 적힌 방식대로 주문(요청)하면, 주방(백엔드)이 요리해서 내어줍니다(응답).
오늘날 웹 서비스 대부분은 REST API 방식을 활용합니다. 여기서 REST API란 HTTP 프로토콜을 기반으로 데이터를 요청하고 응답받는 표준화된 통신 방식을 말하며, URL 형태로 자원을 표현하고 GET, POST, PUT, DELETE 같은 메서드로 동작을 구분합니다(출처: MDN Web Docs).
웹사이트 하나의 기능이 실제로 어떤 흐름으로 작동하는지 정리하면 다음과 같습니다.
- 사용자가 화면에서 행동(버튼 클릭, 폼 제출 등)을 합니다.
- 프런트엔드가 API를 통해 서버로 요청을 보냅니다.
- 서버는 요청을 처리하고 필요한 경우 데이터베이스에서 정보를 꺼냅니다.
- 서버가 결과를 API 응답으로 프런트엔드에 돌려줍니다.
- 프런트엔드가 받은 데이터를 화면에 렌더링(Rendering)합니다. 여기서 렌더링이란 서버로부터 받은 데이터를 사용자가 볼 수 있는 화면으로 변환하는 과정을 의미합니다.
솔직히 이건 예상 밖이었습니다. 버튼 하나를 클릭하는 단순한 행동 뒤에 이렇게 많은 단계가 숨어 있을 줄은 몰랐습니다.
구조를 알면 공부 방향이 선명해진다
웹사이트 구조를 이해하면 좋은 점이 하나 더 있습니다. 어떤 직무를 공부해야 할지 방향이 보인다는 것입니다. 화면 구현에 관심이 있다면 프런트엔드, 데이터 처리와 서버 로직에 관심이 있다면 백엔드, 양쪽 모두 경험하고 싶다면 풀스택(Full-stack) 방향을 선택할 수 있습니다. 여기서 풀스택이란 프런트엔드와 백엔드를 모두 다루며 서비스 전체를 한 명이 개발할 수 있는 능력을 가진 개발자를 말합니다.
웹사이트 구조를 먼저 이해하는 것이 중요하다는 의견도 있는 반면, 문법부터 빠르게 배워야 실력이 는다고 보는 시각도 있습니다. 저는 후자로 시작했다가 벽에 부딪혔습니다. 코드를 외웠는데 왜 이 코드가 여기 있는지, 이 함수가 어디로 데이터를 보내는지 맥락이 안 잡혔습니다. 결국 구조 공부를 다시 하고 나서야 코드가 제대로 읽히기 시작했습니다.
실제로 국내 IT 교육 현장에서도 웹 개발 전반 구조에 대한 이해가 취업 준비에 중요한 역량으로 꼽힙니다(출처: 고용노동부 HRD-Net). 기술 스택보다 개념 이해가 먼저라는 뜻이기도 합니다.
제가 직접 경험해 봤는데, 구조를 먼저 잡고 나면 새로운 기술이나 언어를 배울 때 적응 속도가 확실히 빨라집니다. "이건 백엔드 쪽 로직이구나", "이 API 응답이 프런트엔드에서 어떻게 쓰이겠구나" 하는 감이 생기기 때문입니다.
웹사이트 구조는 결국 프런트엔드, 백엔드, 데이터베이스, API 네 가지가 함께 맞물려 돌아가는 시스템입니다. 하나만 빠져도 서비스는 완성되지 않습니다. IT 공부를 막 시작했다면, 어떤 언어를 먼저 배울지 고민하기 전에 이 전체 흐름을 한 번 그려보시길 권합니다. 구조가 머릿속에 들어오는 순간, 공부 방향이 훨씬 또렷해집니다.