[Dev] 웹을 지탱하는 세 겹(HTML·CSS·JS)과 멈추지 않는 브라우저의 비밀

🏷️ [NextX_R&D_Log] · 모두의연구소 아이펠 AI 에이전트 1기 [웹페이지를 이루는 세 겹 & 게임 만들기] 학습 기록

매일 마주하는 웹페이지는 겉보기엔 하나의 덩어리 같지만, 그 이면엔 성격이 전혀 다른 세 개의 기술 레이어가 정교하게 겹쳐 작동합니다. 이 글은 웹 3대 요소(HTML·CSS·JS)의 탄생 비화와, 싱글 스레드 자바스크립트가 화면을 멈추지 않고 비동기 처리를 해내는 CS 원리를 풀어냅니다.

Part 1. 웹을 이루는 세 겹 — 관심사의 분리(SoC)

컴퓨터 과학의 오랜 원칙인 ‘관심사의 분리(Separation of Concerns)’ 는 웹 설계에 가장 완벽하게 적용돼 있습니다. 웹은 처음부터 완성된 게 아니라, 30여 년간 구조(HTML) · 표현(CSS) · 동작(JS) 의 영역을 나누며 진화했습니다.

레이어	질문	역할
HTML (구조)	“무엇이 있는가”	정보의 뼈대와 의미(Semantics)
CSS (표현)	“어떻게 보이는가”	시각적 스타일 규칙
JavaScript (동작)	“무엇이 바뀌는가”	인터랙션·상태 변화

1️⃣ HTML — 잃어버린 문서들의 연결 고리

• 탄생: 1989년, 유럽입자물리연구소(CERN)의 팀 버너스리(Tim Berners-Lee)가 연구소 문서 유실 문제를 풀기 위해, 순차적으로 읽는 텍스트의 한계를 넘어 문서를 비선형으로 잇는 하이퍼텍스트(HyperText) 를 제안했습니다.
• 본질: 원고 여백에 “여기는 제목, 여기는 본문”이라 표시하던 교정 관행(Markup)처럼, 정보의 뼈대와 의미를 규정합니다.
• 검토 기준: 꾸밈이 아니라 “정확하고 필요한 정보가 의미에 맞게 누락 없이 담겼는가?”

2️⃣ CSS — “제목 색 다 바꿔라”라는 악몽의 탈출구

• 탄생: 초기 웹은 문서 곳곳에 꾸밈 태그를 직접 박았습니다. 대형 사이트에서 테마 하나 바꾸려면 모든 문서를 열어야 하는 악몽이었죠. 1994년 호콘 비움 리(Håkon Wium Lie)가 내용과 표현의 분리를 제안합니다.
• 본질: 정보 구조는 그대로 두고 ‘어떻게 보일지’ 만 정의. 폭포수처럼(Cascading) 규칙이 겹칠 때 우선순위 계층을 가집니다.
• 검토 기준: “시선이 의도대로 흐르는가? 모바일 등 다양한 뷰포트에서 레이아웃이 깨지지 않는가?”

3️⃣ JavaScript — 정적 문서에 생명을 불어넣은 ‘열흘의 기적’

• 탄생: 1995년 넷스케이프의 브렌던 아이크(Brendan Eich)가 사용자 행동에 즉각 반응하는 가벼운 스크립트 언어를 단 열흘 만에 설계했습니다. (이름은 마케팅상 당시 인기였던 Java를 빌렸을 뿐, 본질적으로 완전히 다른 언어입니다.)
• 본질: 클릭·입력·필터링 등 변화에 따라 화면 상태(DOM)를 유동적으로 제어.
• 검토 기준: “사용자 행동에 기대한 상태 변화가 즉각·정확하게 일어나는가?”

Part 2. 브라우저는 왜 멈추지 않을까 (동시성)

싱글 스레드 자바스크립트가 화면을 얼리지 않는 비결은 비동기 + 이벤트 루프입니다. 무거운 작업(fetch 등)은 브라우저(Web API)에 위임하고, 완료되면 태스크 큐를 거쳐 처리하죠. 그 아래 OS·CPU 층에서는 프로세스·스레드·코어가 자원을 나눠 맡습니다.

🔎 이 “웹이 멈추지 않는 마법”(동기·비동기·이벤트 루프·프로세스·스레드·코어)은 카페 진동벨·’외팔이 일꾼’ 비유로 전용 심화편에서 깊게 풀었습니다. → 웹이 멈추지 않는 마법 — 동기·비동기와 이벤트 루프

💡 기술연구소 Insight — AI 에이전트 시대의 ‘관심사 분리’

이 다층 구조를 이해해야 하는 진짜 이유는, AI 에이전트(Claude Code 등)와의 협업 생산성에 직결되기 때문입니다.

❌ 나쁜 지시 (뒤섞인 요청) “웹게임 만들었는데 점수판 고쳐주고 화면 디자인도 모바일에 맞게 직관적으로 다듬어줘.” → 정보(HTML)·스타일(CSS)·로직(JS)을 뒤섞으면 AI가 수정 범위를 넓게 잡아 기존 코드를 훼손하거나 엉뚱한 사이드 이펙트를 냅니다.

🟢 좋은 지시 (관심사 분리) “데이터·JS 로직은 그대로 두고, 모바일(390px) 뷰포트에서 두 점수 카드가 가로로 겹치지 않고 세로로 줄바꿈되도록 CSS 레이아웃 영역만 수정해줘.” → 좁은 실행 영역에 집중시키면 AI가 정확하고 완벽한 패치를 냅니다.

명확한 개념 모델을 갖고 관심사를 분리해 질문할 때, 비로소 AI 에이전트도 제 실력을 냅니다. 이것이 넥스트엑스가 프롬프트 설계를 중요하게 보는 이유입니다.

🏗️ 넥스트엑스는 이 사상을 ‘AI 시스템’에 이렇게 적용합니다

관심사의 분리는 화면(HTML·CSS·JS)에서 끝나지 않습니다. 넥스트엑스가 구축하는 AI 에이전트 시스템 역시 정확히 이 3계층 구조 위에 설계됩니다. 오늘 배운 웹의 세 겹이, 그대로 최첨단 AI 인프라의 뼈대가 되는 것이죠.

계층	오늘 배운 웹 3겹	넥스트엑스 AI 에이전트 시스템
표현 (Presentation)	HTML·CSS로 보이는 화면	유저 ↔ AI 실시간 인터랙션 (챗·검수 UI)
로직 (Application)	JS의 이벤트·상태 제어	LLM 오케스트레이션 · 툴 콜링 · 에이전트 흐름
데이터 (Data)	DOM·브라우저 상태	벡터 DB(Vector DB) · 사내 업무 데이터 연동

각 계층이 서로의 영역을 침범하지 않고 독립적으로 작동하기에, 대규모 엔터프라이즈 AX(AI 전환) 솔루션에서도 유지보수성과 확장성이 보장됩니다. 실제 구현은 → 사내 RAG 챗봇 · 임베딩 & 벡터 DB · 툴 콜링·멀티 에이전트에서 공개합니다.

이런 견고한 3계층 설계 사상은 넥스트엑스 팀이 지향하는 일하는 방식과도 맞닿아 있습니다. 각자의 역할에서 최고의 효율을 내는 분업과 협업의 가치를, 우리는 시스템 구조와 철학으로 증명합니다.

🔗 이어지는 R&D 일지

• 🎮 실전편 → 관심사의 분리를 몸으로 익히다 — 오목 웹 게임 만들기
• ⚡ 심화편 → 웹이 멈추지 않는 마법 — 이벤트 루프
• 🛠️ 작업대·개념 → 바이브 코딩 작업대 · 터미널·셸·커널·프롬프트
• 🔌 다음 편 예고 → 이 3-Layer 위에서 백엔드 서버와 오가는 비동기 통신, API란 무엇인가로 이어집니다.

다음 포스팅에서는 이 프론트엔드 구조 위에서 실제 백엔드 API를 오가는 비동기 데이터 통신 아키텍처를 심층적으로 다룹니다.

---

📎 본 글은 주식회사 넥스트엑스(NEXT X) 기술연구소의 R&D 자산입니다. 함께 읽기 — 🛠️ 개발 대표 사례 · 📖 블로그 안내 · 📩 비즈니스 문의