Web Story for Makers

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

아주 옛날엔 웹사이트라고 해 봐야 글자만 가득한 단순한 페이지였어요. 시간이 흐르면서 사람들은 “더 보기 좋게 꾸미고 싶어”, “마우스를 따라 움직이게 하고 싶어”, “더 빨리 만들고 싶어”라는 바람을 하나씩 기술로 풀어냈고, 그 결과 오늘 우리가 매일 쓰는 생동감 넘치는 웹페이지가 만들어졌어요.

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

처음엔 큰 흐름만 가볍게 훑어보고, 관심 가는 갈래로 들어가 보세요. 어려운 용어가 나와도 괜찮아요. 그 시절 사람들이 무엇을 고치려고 그 기술을 만들었는지 이야기로 풀어 적었거든요.

네 가지 웹 제작 연대기

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

웹 문서 설계 연대기

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

연대기 읽기

스타일링 진화 연대기

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

연대기 읽기

브라우저 인터랙션 연대기

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

연대기 읽기

웹 제작 도구 연대기

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

연대기 읽기

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

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

더 깊이 읽을 거리

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