웹 문서 설계 연대기
HTML 태그의 탄생부터 반응형 레이아웃, 웹 컴포넌트까지. “문서를 어떻게 구조화할까?”라는 고민을 시대별로 정리했습니다.
연대기 읽기Web Story for Makers
아주 옛날엔 웹사이트라고 해 봐야 글자만 가득한 단순한 페이지였어요. 시간이 흐르면서 사람들은 “더 보기 좋게 꾸미고 싶어”, “마우스를 따라 움직이게 하고 싶어”, “더 빨리 만들고 싶어”라는 새로운 욕심을 품기 시작했고, 그 결과가 오늘 우리가 매일 보는 알록달록하고 살아 있는 웹페이지가 됐습니다.
이 페이지에서는 웹을 만드는 일을 네 가지 갈래로 나누어 들려드려요. 구조(글과 그림을 어떻게 배치할까), 스타일(어떻게 예쁘게 꾸밀까), 움직임(어떻게 살아 있게 만들까), 제작 도구(어떤 도구로 더 편하게 만들까). 각 이야기는 “사람들이 무엇이 불편했고, 어떻게 풀었는지” 차례대로 따라갑니다.
처음엔 큰 흐름만 가볍게 훑어보고, 관심 가는 갈래로 들어가 더 깊은 이야기를 펼쳐보세요. 어려운 용어가 나와도 괜찮습니다 — 그 시절 사람들이 어떤 마음으로 만들었는지 이야기로 풀어드릴게요.
웹을 만든 사람들은 같은 시대에 서로 다른 질문을 던졌습니다. 구조는 어떻게 정리할지, 화면은 어떻게 꾸밀지, 움직임은 어떻게 자연스럽게 할지, 도구는 어떻게 협업을 도울지. 각 카테고리는 그 질문에 대한 연대기입니다.
HTML 태그의 탄생부터 반응형 레이아웃, 웹 컴포넌트까지. “문서를 어떻게 구조화할까?”라는 고민을 시대별로 정리했습니다.
연대기 읽기CSS, Flexbox, Grid, 디자인 시스템, 컨테이너 쿼리까지. 화면을 더 읽기 좋게 만들려는 실험을 모았습니다.
연대기 읽기JavaScript, Ajax, SPA, Service Worker, WebAssembly, WebGPU까지. 웹이 앱처럼 반응해 온 순간을 따라갑니다.
연대기 읽기Dreamweaver와 FTP에서 npm, Webpack, Vite, AI 도구까지. “더 빠르게 만들고 배포하려면?”이라는 질문의 답을 모았습니다.
연대기 읽기구조를 정돈한 사람이 있었기에 스타일링이 단단해졌고, 훌륭한 인터랙션이 나오자 제작 도구가 생겨났습니다. 네 갈래 중 어디서부터 읽어도, 다음 걸음은 다른 연대기가 알려 줄 거예요. 필요하다면 언제든 허브로 돌아와 새로운 길을 골라 보세요.
아래 자료는 네 가지 연대기를 설계할 때 참고한 대표 아카이브입니다.