Web Story for Makers

웹사이트는 어떻게 만들어질까? 네 가지 이야기로 풀어봅니다

아주 옛날엔 웹사이트라고 해 봐야 글자만 가득한 단순한 페이지였어요. 시간이 흐르면서 사람들은 “더 보기 좋게 꾸미고 싶어”, “마우스를 따라 움직이게 하고 싶어”, “더 빨리 만들고 싶어”라는 새로운 욕심을 품기 시작했고, 그 결과가 오늘 우리가 매일 보는 알록달록하고 살아 있는 웹페이지가 됐습니다.

이 페이지에서는 웹을 만드는 일을 네 가지 갈래로 나누어 들려드려요. 구조(글과 그림을 어떻게 배치할까), 스타일(어떻게 예쁘게 꾸밀까), 움직임(어떻게 살아 있게 만들까), 제작 도구(어떤 도구로 더 편하게 만들까). 각 이야기는 “사람들이 무엇이 불편했고, 어떻게 풀었는지” 차례대로 따라갑니다.

처음엔 큰 흐름만 가볍게 훑어보고, 관심 가는 갈래로 들어가 더 깊은 이야기를 펼쳐보세요. 어려운 용어가 나와도 괜찮습니다 — 그 시절 사람들이 어떤 마음으로 만들었는지 이야기로 풀어드릴게요.

네 가지 웹 제작 연대기

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

웹 문서 설계 연대기

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

연대기 읽기

스타일링 진화 연대기

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

연대기 읽기

브라우저 인터랙션 연대기

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

연대기 읽기

웹 제작 도구 연대기

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

연대기 읽기

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

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

더 깊이 읽을 거리

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