포스터는 종이 크기가 정해져 있지만 웹 페이지는 손바닥만 한 휴대폰에서도, 벽만 한 모니터에서도, 글자를 두 배로 키운 화면에서도 열린다. 이 교과서는 뷰포트와 박스에서 시작해 레이아웃 그리드, 반응형, 색과 글자의 체계, 컴포넌트와 상태, 내비게이션, 폼, 모션, 접근성, 속도까지 창 폭을 끌고 상태를 바꿔 보며 배운다.
웹사이트를 직접 만들거나 고쳐야 하는 사람, 개발자와 함께 일하는 그래픽·UI 디자이너, 작은 가게나 단체의 홈페이지를 맡은 사람을 위해 썼다. 코드는 원리를 보여 줄 만큼만 쓰고, 화면이 왜 그렇게 움직이는지를 먼저 보여 준다.
열 그리드 위의 웹 화면. 이 책은 정답 레이아웃을 외우게 하지 않는다. 창 폭이 바뀔 때 무엇이 함께 바뀌어야 하는지 직접 끌어 보게 한다.
웹 디자인은 결국 네 가지 질문으로 모인다.
1장은 전체 지도, 끝의 두 장은 실험실과 용어집입니다. 나머지 장은 부로 나뉩니다.
윤서윤(28)은 작은 회사의 UI 디자이너이자 수채화가다. 두 해 동안 책방 E의 색, 진열, 드로잉, 글자, 그림 읽기 모임, 사진을 맡아 왔다(ArtBook 1~6권). 2028년 겨울, 낡은 서점 웹사이트를 처음부터 다시 만든다. 행사 일정, 모임 신청, 신간 목록, 서점 소개.
오지후(34)는 서윤의 회사 동료인 프런트엔드 개발자다. 퇴근 뒤 서점 사이트의 코드를 맡는다. "화면 크기는 우리가 정할 수 없어요"가 입버릇이다. 멘토인 화가 한도경(62)은 글자를 크게 키운 휴대폰으로 사이트를 시험하는 첫 손님이 된다.
모든 장이 세 사람의 개편 작업을 한 걸음씩 진전시킨다. 모두 가상의 인물·가게이며 실제와 무관하다.
각 장은 일상의 질문(또는 그림 한 장) → 만져 보는 그림 → 원리 → 시뮬레이터 → 실제 작품·디자인 사례 → 작업실 노트 → 작업 노트(케이스) → 핵심 정리 → 퀴즈 순서입니다.
지금 필요한 것부터 읽어도 됩니다.
브라우저와 기기, 화면 크기는 사람마다 다르다. 시뮬레이터는 원리를 보여 주는 단순 모형이다. 표준 수치(WCAG 등)는 출처와 함께 적었고, 근거가 엇갈리는 통설은 그 수준을 밝혀 두었다.