Web Story for Makers

웹을 짓는 네 가지 모험, 어디부터 떠날까요?

정적 문서를 엮던 시절부터 컴포넌트, 디자인 시스템, Jamstack, AI 도구까지. 웹을 만드는 일은 계속 영역을 넓혀 왔습니다. 이 허브에서는 “구조 · 스타일 · 인터랙션 · 제작 도구”라는 네 갈래를 소개하고, 세부 타임라인으로 안내합니다.

각 시리즈는 불편(Problem) → 필요(Need) → 해결(Fix) 순서로 이야기를 풀어, 초보자도 큰 흐름을 따라갈 수 있도록 구성했습니다.

먼저 전체 발자국을 훑고 싶다면 아래 카드에서 대략의 내용을 읽고, 관심 있는 타임라인으로 들어가 더 깊은 사건과 모달 이야기를 펼쳐 보세요.

네 가지 웹 제작 연대기

웹을 만든 사람들은 같은 시대에 서로 다른 질문을 던졌습니다. 구조는 어떻게 정리할지, 화면은 어떻게 꾸밀지, 움직임은 어떻게 자연스럽게 할지, 도구는 어떻게 협업을 도울지. 각 카테고리는 그 질문에 대한 연대기입니다.

웹 문서 설계 연대기

HTML 태그의 탄생부터 반응형 레이아웃, 웹 컴포넌트까지. “문서를 어떻게 구조화할까?”라는 고민을 시대별로 정리했습니다.

연대기 읽기

스타일링 진화 연대기

CSS, Flexbox, Grid, 디자인 시스템, 컨테이너 쿼리까지. 화면을 더 읽기 좋게 만들려는 실험을 모았습니다.

연대기 읽기

브라우저 인터랙션 연대기

JavaScript, Ajax, SPA, Service Worker, WebAssembly, WebGPU까지. 웹이 앱처럼 반응해 온 순간을 따라갑니다.

연대기 읽기

웹 제작 도구 연대기

Dreamweaver와 FTP에서 npm, Webpack, Vite, AI 도구까지. “더 빠르게 만들고 배포하려면?”이라는 질문의 답을 모았습니다.

연대기 읽기

어떤 기술도 혼자 자라지 않았어요

구조를 정돈한 사람이 있었기에 스타일링이 단단해졌고, 훌륭한 인터랙션이 나오자 제작 도구가 생겨났습니다. 네 갈래 중 어디서부터 읽어도, 다음 걸음은 다른 연대기가 알려 줄 거예요. 필요하다면 언제든 허브로 돌아와 새로운 길을 골라 보세요.

더 깊이 읽을 거리

아래 자료는 네 가지 연대기를 설계할 때 참고한 대표 아카이브입니다.

ArcherLab IT Story · 웹이 층을 나눈 이유

Web Story for Product Builders

정적 문서에서 API와 서버리스까지, 웹이 달라진 순간을 따라가 보세요

이 타임라인은 “웹이 어떻게 지금 모습이 되었을까?”라는 질문에서 시작했습니다. 실험실에서 문서를 돌려 보던 연구원, 회의를 연결하고 싶었던 엔지니어, 빠른 지도를 만들고 싶었던 제품팀까지. 사람들의 고민을 시간 순서로 따라가면 복잡한 기술 용어가 자연스럽게 이해됩니다.

연도 버튼을 눌러 보세요. 정적 페이지에서 출발해 CGI, Ajax, 단일 페이지 앱, 서버리스와 엣지 컴퓨팅까지 이어지는 흐름을 소설 읽듯 차근차근 풀어 드립니다. 낯선 단어는 바로 옆 문장에서 설명하고, 다음 시대 이야기로 어떻게 이어졌는지도 함께 적어 두었습니다.

서버 쪽 엔진의 상세한 변화가 궁금하다면 웹 서버 연대기에서 서블릿, Tomcat, Spring, 서버리스 같은 사건을 따로 모아 읽어 보세요.

연도 버튼을 누르면 새 창 없이 팝업 대화 상자가 열리고, 그 자리에서 자세한 이야기를 이어서 읽을 수 있습니다.

1968–1986

웹을 가능하게 한 토대

“서로 다른 컴퓨터를 어떻게 이어 붙일까?” “문서는 어떻게 찾아야 할까?” 같은 질문을 풀어낸 시기입니다. 마우스를 처음 소개한 데모, 첫 네트워크 연결, 주소 체계와 문서 규칙이 차곡차곡 쌓이며 오늘의 웹을 위한 퍼즐 조각이 맞춰졌습니다.

1990–1993

정적 문서를 연결한 첫 웹

팀 버너스-리가 “링크로 문서를 이어 보자”고 제안하고, 이를 누구나 따라 할 수 있게 설명한 시기입니다. 아직은 서버가 파일을 그대로 건네주고 브라우저가 보여 주기만 했던 순박한 웹의 모습입니다.

1993–1997

서버가 문서를 만들어 주기 시작하다

사람마다 다른 페이지를 보여 주고 싶다는 요구가 늘어나면서 서버와 브라우저 사이에 일이 나눠지기 시작했습니다. 이때 나온 CGI, JavaScript, PHP, CSS, ASP 덕분에 “백엔드는 생각을 처리하고, 프론트엔드는 화면을 꾸민다”는 개념이 생겼습니다.

1998–2008

브라우저가 움직임을 맡다

인터넷이 대중화되자 “페이지가 너무 느려요”라는 목소리가 커졌습니다. HTTP/1.1, XMLHttpRequest, LAMP, Ajax, 모바일 웹, Chrome과 V8 같은 사건이 이어지면서 브라우저는 더 많은 일을 맡고, 서버는 데이터를 빠르게 전달하는 역할에 집중하게 됩니다.

2009–2016

브라우저가 애플리케이션이 되다

이제 브라우저가 앱처럼 행동합니다. Node.js, 단일 페이지 앱 프레임워크, WebSocket, React 같은 도구가 나오면서 프론트엔드는 상태와 화면을 모두 챙기고, 백엔드는 필요한 데이터를 즉시 보내 주는 조력자가 됩니다.

2014–2025

API와 서버리스로 재조합

서버를 직접 살피지 않아도 되는 시대가 왔습니다. HTML5, 서버리스, GraphQL, PWA, WebAssembly, 엣지 함수, JAMstack 흐름이 이어지며 “필요한 기능만 조각처럼 가져다 쓰자”는 방식이 자리 잡았습니다. 프론트엔드는 독립적으로 배포하고, 백엔드는 API와 이벤트로 조용히 힘을 보탭니다.

참고 자료

웹의 구조가 정적 문서에서 애플리케이션 플랫폼으로 바뀐 과정을 기록한 1차 자료와 회고를 모았습니다. 원문을 읽어 보면 각 시대의 개발자들이 어떤 문제를 해결하려 했는지 더 선명합니다.