Chapter 14
용어집 & 종합 퀴즈
웹 디자인의 말은 여러 곳에서 따로 자랐다. CSS 명세의 박스 모델과 마진 상쇄, 종이 편집에서 건너온 단과 거터, 인간–컴퓨터 상호작용 연구의 피츠의 법칙, 접근성 표준의 성공 기준 번호, 속도를 재는 LCP와 CLS. 같은 "여백"이 상자의 padding도, 그리드 양옆의 빈 자리도 되고, 같은 "픽셀"이 CSS 픽셀도 기기 픽셀도 된다. 이 장은 이 책에서 쓴 뜻을 한곳에 모으고, 그 말을 설명한 절로 돌아가는 길을 놓는다. 마지막에는 열세 장을 묶는 종합 퀴즈와, 서윤의 웹 개편 노트가 장마다 정한 것을 다시 모았다.
- 이 책의 핵심 용어를 검색하고, 그 용어를 설명한 절로 바로 간다.
- 헷갈리기 쉬운 용어 쌍(CSS 픽셀과 기기 픽셀, 마진과 패딩, 중단점과 컨테이너 쿼리, 라벨과 자리표시자, LCP와 CLS 등)의 차이를 확인한다.
- 종합 퀴즈로 화면·배치·상호작용·쓰임 네 부와 도입, 실험실의 내용을 점검한다.
- 서윤의 웹 개편 노트가 장마다 정한 것을 한눈에 다시 본다.
- 이 책에 쓴 그림과 이미지의 출처를 확인한다.
용어 찾기
용어, 영어 이름, 뜻풀이의 어느 낱말로도 찾는다. 부 단추로 그 부의 장에서 설명한 용어만 볼 수 있다. 각 항목 아래의 장 번호를 누르면 그 용어를 설명한 절로 간다. 여러 장에서 다룬 용어는 링크가 여럿이다. CSS 속성이나 HTML 속성처럼 코드에 그대로 적는 말은 고정폭 글자로 보인다.
헷갈리기 쉬운 짝
웹 디자인에는 이름이 비슷하거나 함께 다녀서 섞어 쓰기 쉬운 말이 많다. 둘을 가르는 기준과, 서윤의 작업에서 그 차이가 드러난 장면을 함께 적었다. 오른쪽 장 번호를 누르면 그 절로 간다.
| 짝 | 차이 | 장 |
|---|---|---|
| CSS 픽셀 · 기기 픽셀 | CSS 픽셀은 웹 페이지의 모든 길이를 재는 단위(px)로, 화면의 빛 점이 아니라 보이는 각도로 정의된다. 기기 픽셀은 화면 패널의 실제 빛 점 하나다. 둘은 기기 픽셀 비율(DPR)로 이어진다. 기기 픽셀 = CSS 픽셀 × DPR. 서윤의 휴대폰(DPR 3)에서 1px 선은 기기 픽셀 3줄로 또렷했고, 시안의 0.5px 선은 DPR 1 모니터에서 흐린 회색이 되거나 사라졌다. 그래서 시안의 숫자는 늘 CSS 픽셀로 말하고 선은 1px 이상으로 했다. | 2 · 2 |
| 뷰포트 · 화면 해상도 | 화면 해상도는 기기 패널의 기기 픽셀 수(예: 1170 × 2532)로, 기기를 사면 정해진다. 뷰포트는 브라우저 창에서 페이지가 실제로 그려지는 사각형으로, CSS 픽셀로 잰다(같은 휴대폰이면 390 × 844 남짓). 컴퓨터에서는 창을 화면보다 작게 쓸 수 있고, 휴대폰에서는 방향과 주소창, 확대에 따라 바뀌므로 디자인이 마주하는 것은 해상도가 아니라 뷰포트다. "지원 해상도 목록" 대신 "320부터 어떤 폭에서도"처럼 폭의 범위로 약속하는 까닭이다. | 2 · 2 |
| 안쪽 여백 · 바깥 여백 (패딩 · 마진) | 안쪽 여백(padding)은 테두리 안, 내용과 테두리 사이의 자리로 바탕색이 칠해지고 상자의 크기에 들어간다. 바깥 여백(margin)은 테두리 밖에서 이웃을 밀어내는 투명한 자리이고, 위아래로 맞닿으면 큰 쪽 하나로 겹친다(마진 상쇄). 4장의 그리드에서 말하는 "바깥 여백"은 CSS margin이 아니라 그리드 양옆의 빈 자리로, 코드에서는 흔히 페이지 상자의 padding으로 만든다. 서윤은 "카드는 자기 안쪽 여백만 알고, 카드 사이는 부모의 gap이 준다"로 정리했다. | 3 · 3 · 4 |
| 그리드 · 플렉스박스 | 둘 다 CSS의 배치 방식이다. 플렉스박스는 상자를 한 방향으로 흘리며 줄마다 남는 공간을 나누므로, 줄이 바뀌면 윗줄과 아랫줄의 경계가 서로 맞지 않을 수 있다. 그리드는 가로·세로의 선을 두 방향으로 먼저 긋고 상자를 칸에 놓으므로, 줄과 줄이 같은 세로선을 나눠 갖는다. 메뉴 한 줄이나 버튼 묶음처럼 한 방향으로 늘어놓을 때는 플렉스박스, 신간 카드 목록처럼 줄과 줄이 맞아야 할 때는 그리드가 어울린다. | 4 · 4 |
| 중단점 · 컨테이너 쿼리 | 중단점은 미디어 쿼리로 적는 화면(뷰포트) 폭의 경계로, 페이지 전체의 짜임을 바꾼다. 컨테이너 쿼리는 부품을 담은 칸의 폭을 묻는다. 같은 신간 카드가 넓은 본문에 놓이든 좁은 옆 칸에 놓이든, 칸이 25em 이상이면 가로형, 아니면 세로형이 된다. 화면 폭으로 카드 모양을 정하면 넓은 화면의 좁은 옆 칸에서 카드가 깨진다. 서윤은 페이지 짜임은 중단점(35em·56em)으로, 카드 모양은 컨테이너 쿼리로 나눴다. | 5 · 5 |
| px · rem · em | px는 CSS 픽셀이라 사용자의 기본 글자 크기 설정을 무시한다(확대에는 반응한다). rem은 루트(html)의 글자 크기를 기준으로 해서, 기본 글자 크기를 16px에서 24px로 올리면 1.0625rem이 17px에서 25.5px로 커진다. em은 그 요소(부모)의 글자 크기를 기준으로 해서 겹쳐 쓰면 곱해지지만, 미디어 쿼리 안의 em은 사용자의 기본 글자 크기를 기준으로 한다. 이 책의 결정: 글자는 rem, 중단점은 em, 휴대폰 화면 가장자리 여백 16px만 px. | 6 · 5 |
| 디자인 토큰 · CSS 변수 | 디자인 토큰은 "버튼 바탕은 이 초록"처럼 이름이 붙은 디자인 결정 하나로, 디자인 도구와 코드, 문서가 함께 쓰는 개념이다. CSS 변수(사용자 정의 속성, --이름과 var())는 그 결정을 웹에 담는 가장 단순한 그릇이다. 토큰이 아닌 변수(계산 중간값)도 있고, 토큰을 다른 형식(디자인 도구의 스타일, JSON 파일)에 담을 수도 있다. 토큰의 핵심은 그릇이 아니라 원시 → 의미의 층과 이름 규칙이다. | 6 · 6 |
| 상태 · 변형 | 상태는 같은 부품이 사람의 조작에 따라 바뀌는 모습(기본·호버·포커스·눌림·비활성·로딩)으로, 한 버튼이 시간에 따라 오간다. 변형은 쓰임에 따라 미리 나눠 둔 다른 판(주 버튼·보조 버튼·글자 버튼, 큰 것·작은 것)으로, 한 자리에 하나를 골라 놓는다. 상태 표는 가로로 상태, 세로로 변형을 놓아 빈칸이 없는지 확인한다. 의미 토큰의 이름에서 text-muted의 muted도 "변형"의 자리다. | 7 · 6 |
| 내비게이션 바 · 탭 바 | 내비게이션 바(머리 띠의 링크 줄)는 화면 위쪽에 메뉴를 한두 줄로 펼친다. 모든 갈래가 보이지만, 항목이 많거나 글자가 크면 여러 줄로 깨져 첫 화면의 높이를 먹는다. 탭 바는 화면 아래에 3~5개의 탭을 아이콘과 글자로 고정한다. 늘 같은 높이로 보이고 현재 위치를 표시하기 좋지만, 다섯 칸을 넘기 어렵고 아래 본문을 늘 가린다(포커스가 숨지 않게 scroll-padding-bottom). 서윤은 휴대폰에서 탭 바 넷, 넓은 화면에서 머리 띠에 다섯을 모두 펼쳤다. | 8 · 8 |
| 라벨 · 자리표시자 | 라벨은 칸 바깥(이 책은 칸 위)에 늘 남는 이름표로, label 요소로 칸과 이어 화면 낭독기도 읽는다. 자리표시자는 칸 안의 흐린 글씨로, 입력을 시작하면 사라진다. 그래서 적는 동안 무엇을 적는 칸이었는지 기억에 기대게 하고, 흐린 색이라 대비가 낮고, 다 채운 뒤에는 칸의 이름이 남지 않는다. 도경은 "인원(본인 포…"에서 잘린 자리표시자 칸에 "2"를 적었다가 무엇을 묻는 칸이었는지 헷갈렸다. | 9 · 9 |
| 전환 · 애니메이션 | 전환(CSS transition)은 한 상태에서 다른 상태로 넘어가는 동안의 움직임이다. 호버로 색이 바뀌거나 메뉴가 열릴 때처럼 계기가 있고, 시작과 끝은 두 상태가 정한다. 애니메이션(CSS animation)은 처음부터 정해 둔 여러 단계(keyframes)를 따라가는 움직임으로, 계기 없이 반복할 수도 있다. 이 책은 둘을 함께 "움직임"이라고 부르고, 어느 쪽이든 상태 변화·공간 관계·주의 끌기·연속성의 일을 하는지로 판단한다. | 10 |
| 대체 텍스트 · 캡션 | 대체 텍스트(img의 alt)는 그림을 볼 수 없는 사람에게 그림 대신 읽히는 글로, 화면에는 보이지 않고 그림이 그 자리에서 하는 일을 쓴다. 캡션(figcaption)은 그림 곁에 모두에게 보이는 글로, 그림만으로는 알 수 없는 정보(누가, 언제, 무엇을 보라는지)를 더한다. 캡션이나 옆 글이 그림의 내용을 이미 말하면 대체 텍스트는 같은 말을 되풀이하지 않는다(신간 표지 옆에 제목이 있으면 alt=""). 둘은 서로를 대신하지 않는다. | 11 |
| LCP · CLS | 둘 다 Core Web Vitals의 지표지만 재는 것이 다르다. LCP는 시간으로, 페이지를 열기 시작해 첫 화면의 가장 큰 그림이나 글 덩어리가 그려질 때까지다(2.5초 이하 좋음). CLS는 움직임의 점수로, 사용자가 건드리지 않았는데 요소가 밀린 정도를 영향 비율 × 거리 비율로 모은다(0.1 이하 좋음, 단위 없음). 사진을 가볍게 하면 LCP가 줄고, 사진에 width·height를 주면 CLS가 준다. 주인이 지하철에서 겪은 "한참 하얗다"는 LCP, "버튼이 내려가 다른 데를 눌렀다"는 CLS의 문제였다. | 12 · 12 · 12 |
| WCAG · KWCAG | WCAG는 W3C의 국제 웹 콘텐츠 접근성 지침으로, 최신판 2.2가 2023년 10월 권고안이 되었다. KWCAG(한국형 웹 콘텐츠 접근성 지침) 2.2는 WCAG를 바탕으로 국내 실정에 맞게 만든 지침으로, 공공기관 웹사이트와 국내 웹 접근성 품질인증 심사의 기준이 된다. 다루는 내용은 대부분 겹치지만 항목의 묶음과 번호가 다르다. 이 책은 WCAG 2.2의 번호(1.4.3, 2.5.8 등)로 설명했으니, 국내 사이트는 KWCAG 2.2의 검사 항목에서 같은 내용을 찾아 함께 확인한다. | 11 · 1 |
| 브라우저 확대 · 글자 크기 설정 | 브라우저 확대(Ctrl +)는 CSS 픽셀 자체를 키워 뷰포트를 CSS 픽셀로 좁힌다. 1,280px 화면의 200%는 640px, 400%는 320px이 되어 중단점이 바뀐다. 기본 글자 크기 설정은 rem으로 적은 글자만 키우고 뷰포트 폭은 그대로 둔다(px로 적은 글자는 반응하지 않는다). em으로 적은 중단점은 둘 모두를 따라가서, 글자를 키운 사람에게 "더 좁은 화면의 짜임"을 준다. 도경은 휴대폰 글자를 가장 크게, 노트북 브라우저는 200%로 해서 두 가지를 모두 시험했다. | 2 · 13 |
종합 퀴즈
도입과 네 부, 실험실에서 고루 뽑은 스물세 문제다. 열세 장에서 적어도 한 문제씩 나온다. 답을 고르면 해설과 그 내용을 다룬 절이 나온다. 맞힌 개수는 아래에 쌓인다.
SCORE
나의 점수
푼 문제0 / 23
맞힌 문제0
다시 볼 장—
부마다 맞힌 비율을 막대로 보여 준다. 틀린 문제가 있는 장은 "다시 볼 장"에 쌓인다. (점수는 이 화면에만 있고 어디에도 저장하거나 보내지 않는다.)
서윤의 웹 개편 노트 색인
2028년 1월 첫 주부터 2월 마지막 주까지, 열세 장에 걸쳐 서윤과 지후, 도경이 책방 E 웹사이트를 처음부터 다시 만들며 정한 것을 장 순서대로 모았다. 2019년쯤 산 960px 고정 템플릿을 버리고, 첫 화면·행사 일정·모임 신청 폼·신간 목록·서점 소개와 오시는 길의 다섯 페이지를 3월 첫 주에 공개하는 과제였다. 각 줄의 장 번호를 누르면 그 장의 작업 노트로 간다. 방문 기록과 측정값은 이 책의 가상 자료와 교육용 모형으로 낸 값이고, 마지막 장의 설정도 정답이 아니라 서윤의 선택이다.
| 장 | 상황 | 서윤의 선택 |
|---|
내 웹 개편 노트 색인 쓰기
자주 쓰는 웹사이트 하나(동네 가게, 동아리, 자기 포트폴리오)를 골라 이 표처럼 적어 본다. 왼쪽 칸에는 그 장을 읽으며 그 사이트에서 막힌 곳을, 오른쪽 칸에는 무엇을 정했는지(최소 폭, 간격 단계, 그리드와 최대 폭, 중단점, 토큰 이름, 터치 타깃, 메뉴 패턴, 폼 칸 수, 움직임 시간, 점검표, 무게 예산)를 숫자와 함께 쓴다. 정하지 못한 칸은 비워 둔다. 빈칸이 다음에 다시 읽을 장이다. 마지막으로 그 사이트를 자기 휴대폰에서 글자 크기를 가장 크게 하고, 노트북에서는 200%로 확대하고, Tab 키만으로 한 번씩 써 본다. 무엇이 달라졌는지 한 줄 적는 것으로 이 책을 마친다.
그림과 이미지 크레딧
이 책의 시뮬레이터와 도식, 책방 E의 가상 웹 화면은 모두 이 책이 직접 그린 것이며 CC BY 4.0을 따른다. 특정 서비스나 브랜드의 실제 화면은 옮기지 않았다. 가상 웹 화면의 색은 ColorBook에서 정한 책방 E의 색(책방 초록 #2f7d5b, 크림 #ffe2d7, 차분한 초록 #567666, 강조 #d24f39, 짙은 색 #22342a)을 고정색으로 썼다. 서가 공통 글꼴은 Pretendard(길형진, OFL)와 JetBrains Mono(JetBrains, OFL)이고, 몇몇 시뮬레이터의 "시스템 글꼴"은 보는 기기에 설치된 글꼴이다.
작품·사진 이미지
작품이나 사진 이미지를 쓴다면 공공 도메인 또는 CC0 자료만 쓰고 서가의 크레딧 자료에 기록한다. 아래 목록은 그 자료에서 WebBook 장에 쓰인 이미지만 골라 보여 준다. 서가 전체의 목록은 크레딧 페이지에 있다.
이 책이 기댄 자료
대비비(ART.contrast)는 WCAG의 정의 그대로 이 서가의 엔진으로 계산했다. 반면 손가락 터치의 흩어짐과 잘못 누르기 비율, 숨긴 메뉴의 발견 확률, 내려받는 시간, LCP와 레이아웃 이동 점수, 실험실의 목업 측정 같은 계산은 이 책이 만든 단순한 교육용 모형이며, 각 모형의 식과 한계는 해당 장에 밝혔다. 방문 기록과 화면 폭 분포는 가상 자료다. 본문에서 이름을 밝힌 주요 자료는 아래와 같다.
- John Allsopp, "A Dao of Web Design", A List Apart, 2000. Ethan Marcotte, "Responsive Web Design", A List Apart, 2010. Luke Wroblewski, Mobile First, A Book Apart, 2011.
- W3C: CSS 2.1(8장 박스 모델, 8.3.1 마진 상쇄), CSS Box Model·Box Sizing·Box Alignment Level 3, CSS Values and Units Level 3·4(기준 픽셀, vw, clamp(), svh·lvh·dvh), CSS Grid Layout Level 1·2, CSS Flexible Box Layout Level 1, Media Queries Level 4·5(em의 기준, prefers-color-scheme, prefers-reduced-motion), CSS Containment Level 3(컨테이너 쿼리), CSS Custom Properties Level 1. WHATWG HTML Living Standard(srcset·sizes, picture).
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, 2023(1.1.1, 1.3.5, 1.4.3, 1.4.4, 1.4.8, 1.4.10, 1.4.11, 2.1.1, 2.3.3, 2.4.3, 2.4.4, 2.4.5, 2.4.7, 2.4.11, 2.4.13, 2.5.5, 2.5.8, 3.2.3, 3.3.1 등)과 Understanding WCAG 2.2. W3C WAI, Images Tutorial(An alt Decision Tree). 한국형 웹 콘텐츠 접근성 지침(KWCAG) 2.2.
- W3C Design Tokens Community Group, Design Tokens Format Module. Tim Brown, "More Meaningful Typography", A List Apart, 2011(모듈러 스케일). Björn Ottosson, "A perceptual color space for image processing", 2020(OKLab·OKLCH).
- P. M. Fitts, "The information capacity of the human motor system in controlling the amplitude of movement", Journal of Experimental Psychology 47(6), 1954. I. S. MacKenzie, "Fitts' law as a research and design tool in human-computer interaction", Human–Computer Interaction 7(1), 1992. Holz & Baudisch(CHI 2010), Bi, Li & Zhai(CHI 2013). Apple Human Interface Guidelines(44 pt), Material Design(48 dp).
- K. Pernice & R. Budiu, "Hamburger Menus and Hidden Navigation Hurt UX Metrics", Nielsen Norman Group, 2016. Nielsen Norman Group의 스크롤과 주의에 관한 시선 추적 보고(2010, 2018). G. A. Miller, "The magical number seven, plus or minus two", Psychological Review, 1956.
- M. Penzo, "Label Placement in Forms", UXmatters, 2006. L. Wroblewski, "Inline Validation in Web Forms", A List Apart, 2009. R. B. Miller, "Response time in man-computer conversational transactions", 1968. J. Nielsen, Usability Engineering, 1993.
- web.dev(Google), Web Vitals와 Core Web Vitals의 기준값(LCP, INP, CLS, 2024년 INP 반영).
- 색과 대비는 시리즈의 ColorBook 13·14장, 근접과 무리는 CompositionBook 4장, 글줄 길이와 한글 웹폰트는 TypeBook 6·11장, 사진의 크기와 형식은 ImageBook 10장에서 더 깊게 다룬다.
핵심 정리
- 웹은 크기를 정할 수 없는 캔버스다. 뷰포트는 CSS 픽셀로 재고, 기기 픽셀 = CSS 픽셀 × DPR이다. 확대는 뷰포트를 좁히고 글자 크기 설정은 rem을 키운다. 디자이너가 만드는 것은 한 장의 그림이 아니라 폭이 바뀔 때의 규칙이다.
- 모든 요소는 상자다. 박스 모델의 네 겹과 border-box, 마진 상쇄를 알고, 간격은 짧은 단계와 "안쪽 간격 < 바깥 간격" 규칙으로 정해 부모의 gap이 준다.
- 배치는 열 그리드와 최대 폭, 콘텐츠가 깨지는 곳의 em 중단점, clamp()의 비탈, 컨테이너 쿼리로 늘인다. 색과 글자는 원시 → 의미 토큰으로 한 곳에 두고, 다크 모드는 반전하지 않고 따로 지정하며, 글자 크기는 rem으로 적는다.
- 부품은 상태로 대답한다. 포커스 표시는 지우지 않고, 터치 타깃은 24(하한)와 44·48(지침)을 구별한다. 메뉴는 자주 가는 곳을 보이게 두고 현재 위치는 색 말고 단서를 겹친다. 폼은 칸 위 라벨, 칸을 떠날 때 검증, 칸 바로 아래 오류로 짠다.
- 움직임은 설명일 때만 쓴다. 들어오는 것은 감속, 시간은 짧게, 전환은 누른 곳에서 시작해 그곳으로 돌아가며, 줄인 움직임 선호를 존중한다.
- 모두에게, 빨리. 접근성 트리를 세우는 HTML, 키보드, 대체 텍스트, 대비, 200% 확대(WCAG 2.2·KWCAG 2.2)와 무게 예산, Core Web Vitals가 기준이다. 숫자는 판단의 재료이고, 결론은 실제 사람의 실제 기기로 확인한 선택으로 남긴다.