백엔드 개발자도 HTML을 알아야 하는 이유
처음에는 HTML이 프론트엔드 개발자의 영역처럼 느껴질 수 있다.
실제로 HTML은 화면의 구조를 만드는 언어이기 때문에
"백엔드 개발자는 서버만 잘 만들면 되는 것 아닌가?"라고 생각하기 쉽다.
하지만 웹 애플리케이션을 제대로 이해하려면 백엔드 개발자도 HTML을 알아둘 필요가 있다.
그 이유는 웹 요청과 응답의 흐름이 결국 화면과 연결되어 있기 때문이다.
첫 번째 이유는 많은 요청이 HTML 문서로부터 시작되기 때문이다.
사용자가 버튼을 누르거나 링크를 클릭하거나 폼을 제출하는 순간, 브라우저는 서버로 요청을 보낸다.
그런데 이 버튼, 링크, 입력창, 폼 같은 요소들은 모두 HTML 문서 안에 정의되어 있다.
즉, 서버 입장에서는 요청만 받는 것처럼 보일 수 있지만,
그 요청이 어떤 화면 구조와 어떤 사용자 동작에서 비롯된 것인지를 이해하려면 HTML 구조를 아는 것이 도움이 된다.
두 번째 이유는 포트폴리오의 완성도와도 연결된다.
예를 들어 API만 존재하는 포트폴리오는 분명 기술적으로 의미가 있을 수 있지만,
실제 사용자가 어떻게 쓰는지까지 보여주기에는 한계가 있다.
반면 간단한 프론트 페이지라도 함께 있으면,
내가 만든 백엔드가 어떤 화면과 연결되고 어떤 흐름으로 동작하는지를 더 분명하게 보여줄 수 있다.
세 번째 이유는 모든 백엔드 개발자가 항상 프론트엔드 개발자와 함께 일하는 것이 아니기 때문이다.
작은 팀이나 개인 프로젝트, 초기 서비스 개발 환경에서는
백엔드 개발자가 간단한 프론트 페이지까지 직접 다뤄야 하는 경우가 자주 있다.
이때 HTML을 전혀 모른다면 혼자 힘으로 서비스의 전체 흐름을 구현하기 어렵다.
반대로 HTML의 기본 구조와 동작 원리를 이해하고 있으면,
적어도 화면의 기본 뼈대를 만들고 요청-응답 흐름을 검증하는 수준까지는 스스로 해낼 수 있다.
HTML의 구조
HTML 문서는 여러 개의 태그(tag) 로 이루어진다.
HTML의 기본 문법은 태그 단위로 구조를 나누어 작성하는 방식이며,
각 태그는 이름과 속성, 값으로 구성될 수 있다.
HTML은 프로그래밍 언어처럼 복잡한 로직을 처리하기보다는,
웹페이지의 구조와 의미를 정의하는 데 초점이 맞춰져 있다.
HTML 문서의 최상단에는 보통 html 태그가 위치한다.
이 태그는 말 그대로 “이 문서가 HTML 문서다”라는 큰 틀을 감싸는 역할을 한다.
그리고 그 안에는 크게 head와 body가 들어간다.
이 둘을 구분해서 이해하는 것이 HTML 구조를 보는 가장 기본적인 출발점이다.
먼저 head 태그 안에는 사용자의 눈에 바로 보이지는 않지만,
해당 문서를 설명하거나 설정하는 정보가 들어간다.
예를 들어 title 태그는 브라우저 탭에 표시될 제목을 지정하고,
meta 태그는 문자 인코딩이나 뷰포트 설정처럼 문서의 메타정보를 담는다.
또 link 태그를 사용하면 외부 CSS 파일을 연결할 수 있다.
<head>
<title>이 HTML의 제목입니다.</title>
<meta charset="utf-8">
</head>
반면 body 태그는 사용자가 실제로 화면에서 보게 되는 내용이 들어가는 영역이다.
텍스트, 버튼, 이미지, 링크, 입력창처럼 눈에 보이는 대부분의 요소가 여기에 포함된다.
예를 들어 a 태그는 다른 페이지나 주소로 이동하는 링크를 만들고,
img 태그는 이미지를 표시하며,
script 태그는 자바스크립트 파일을 연결하거나 실행하는 데 사용된다.
<body>
<a href="https://www.google.com/">어떤 링크</a>
<script>
document.querySelector('a').innerText = '구글로 이동';
</script>
</body>
HTML 실행 과정
HTML 문서를 작성하는 것과, 브라우저가 그것을 실제로 어떻게 처리하는지를 이해하는 것은 또 다른 문제다.
브라우저는 HTML 문서를 받으면 그 파일을 한 번에 “그림처럼” 보는 것이 아니라,
위에서 아래로 차례대로 읽어가며 해석한다. 그리고 태그들을 등록하고,
필요한 리소스를 불러오고, 최종적으로 화면을 구성하는 과정을 거친다.
예를 들어 브라우저가 HTML 문서를 읽을 때
head 안에서 title 태그를 만나면 브라우저 탭의 제목을 준비하고,
link 태그를 만나면 연결된 CSS 파일을 불러올 수 있다.
또 body 안에서 텍스트나 이미지 태그를 만나면 그것을 화면에 표시할 요소로 등록한다.
script 태그를 만나면 자바스크립트를 실행하거나 외부 스크립트를 불러오는 작업이 일어날 수도 있다.
즉, 브라우저는 HTML 태그를 단순히 저장하는 것이 아니라, 각각의 태그가 가진 의미에 따라 필요한 동작을 수행한다.
이 과정이 중요한 이유는, HTML 문서 안의 위치와 순서가 실제 동작에도 영향을 줄 수 있기 때문이다.
예를 들어 스크립트가 너무 앞쪽에 있으면 아직 화면 요소가 준비되기 전에 실행될 수 있고,
CSS 연결 위치에 따라 초기 렌더링 방식이 달라질 수도 있다.
그래서 브라우저가 HTML을 어떻게 읽고 처리하는지를 이해하면,
단순히 마크업 문법만 아는 수준을 넘어 웹페이지가 실제로 만들어지는 흐름까지 함께 볼 수 있게 된다.
'공부 기록 > 이것이 백엔드 개발이다 With Java' 카테고리의 다른 글
| EP9. JSON (0) | 2026.04.01 |
|---|---|
| EP8. 웹 브라우저와 서버의 상호작용 (0) | 2026.03.25 |
| EP6. 스프링부트로 웹 애플리케이션을 시작해보기 (0) | 2026.03.23 |
| EP5. 서버와 서버, 서버와 클라이언트 (0) | 2026.03.20 |
| EP4. 서버와 브라우저 (0) | 2026.03.18 |
