퀴즈로 배우는 디자인 서평: 비전공자 블로거가 아이와 함께 체득한 시각적 안목과 A/B 테스트 실전 감각
블로그에 정보성 글을 포스팅하거나 직장에서 발표용 슬라이드(PPT), 혹은 카드뉴스 레이아웃을 다듬다 보면 늘 넘기 힘든 디자인의 벽을 실감하곤 합니다. 분명 전달하려는 텍스트와 핵심 이미지는 동일한데, 전문가의 작업물은 핵심 정보가 한눈에 들어오는 반면 내가 배치한 화면은 어딘가 모르게 산만하고 답답해 보이기 일쑤였습니다. 미술이나 시각 디자인을 체계적으로 전공하지 않은 비전공자 입장에서 여백의 비율, 폰트의 위계, 색상 간의 명도 대비는 감을 잡기 대단히 난해한 영역이었습니다.
두껍고 딱딱한 디자인 이론서 대신, 오늘 당장 내 블로그 섬네일과 텍스트 배치에 적용할 수 있는 시각적 직관을 키우고자 집어 든 책이 바로 데라모토 에리(ingectar-e)의 《퀴즈로 배우는 디자인》이었습니다. 두 가지 시안(A와 B)을 나란히 두고 어느 쪽이 전달 목적에 적합한지 직접 선택해 보는 A/B 테스트 퀴즈 형식은, 이론 암기 없이도 시각 매체의 기본기를 빠르게 습득할 수 있는 훌륭한 계기를 마련해 주었습니다.
1. 디자인의 본질은 '장식'이 아니라 '정보의 우선순위 정돈'
저자인 데라모토 에리는 디자인 사무소 ingectar-e의 대표이자 카페 브랜딩 현장에서 활약해 온 베스트셀러 기획자답게, 디자인을 '예쁘게 꾸미는 기술'이 아닌 '정보를 오해 없이 정확하게 전달하는 커뮤니케이션 도구'로 정의합니다.
책에서 제시하는 핵심 원리는 크게 세 가지로 요약됩니다.
- 여백(Negative Space)의 기능적 가치: 여백은 단순히 비어 있는 공간이 아니라, 사용자의 시선이 머물며 정보를 해석할 수 있도록 뇌에 휴식을 주는 '숨구멍'입니다. 여백이 부족하면 정보 간의 경계가 흐려져 가독성이 급격히 저하됩니다.
- 시선의 동선 설계 (Z/F 패턴): 인간의 눈은 화면을 볼 때 좌측 상단에서 우측 하단으로 자연스럽게 이동합니다. 중요한 헤드라인과 액션 버튼(CTA)은 이 시선의 이동 경로 위에 배치해야 피로감을 줄일 수 있습니다.
- 폰트 크기와 두께의 위계 구조(Hierarchy): 제목, 본문, 부가 설명의 폰트 크기와 굵기를 명확히 차등화해야 독자가 1초 만에 전체 맥락을 훑어보고(스캐닝) 읽을 가치가 있는지 판단할 수 있습니다.
2. 유치원생 아이와 함께 풀어본 A/B 퀴즈: '타깃'의 차이를 체감한 순간
이 책의 가장 큰 미덕은 매 페이지마다 문제 상황과 함께 시안 A와 B를 직관적으로 비교하게 만든다는 점입니다. 내가 선택한 답을 확인하고 페이지를 넘기면, 왜 특정 시안이 메시지 전달에 실패했는지를 전문가의 시각에서 명쾌하게 해설해 줍니다.
특히 저는 이 책을 읽으며 유치원생 아이와 곁에 앉아 어떤 그림이 더 마음에 드는지 함께 맞춰보는 색다른 경험을 했습니다.
- 어른의 시선 vs 아이의 시선: 어른인 제 눈에는 여백이 단정하고 텍스트의 가독성이 높은 정제된 시안이 당연한 정답으로 보였습니다. 하지만 아직 글자를 읽지 못하는 아이는 알록달록한 고채도의 색감과 귀여운 캐릭터가 전면에 배치된 시안에 즉각적으로 반응했습니다.
- 타깃 중심 디자인(UX)의 깨달음: 아무리 조형적으로 완벽하고 깔끔한 디자인이라 하더라도, 정보를 받아보는 최종 사용자(Target)의 연령과 심리 상태를 고려하지 않으면 실패한 디자인이 될 수 있음을 일상에서 실감한 순간이었습니다.
실제로 초반부 기본 레이아웃 퀴즈에서는 80% 이상의 높은 정답률을 기록하며 자신감을 얻었지만, 특정 타깃층의 세밀한 감성을 맞춰야 하는 후반부 퀴즈로 갈수록 오답이 늘어났습니다. 디자인이란 디자이너의 자기만족이 아니라 철저히 '상대방의 눈높이를 맞추는 작업'임을 깨닫게 해준 대목이었습니다.
3. 실전 블로그 운영에의 적용: 섬네일과 텍스트 레이아웃 개선
《퀴즈로 배우는 디자인》을 완독한 후 제 블로그 포스팅과 이미지 편집 루틴에는 세 가지 명확한 변화가 생겼습니다.
첫째, 섬네일 텍스트의 최소화와 여백 확보입니다. 이전에는 섬네일 한 장에 모든 키워드를 다 욱여넣으려다 조잡해졌다면, 이제는 핵심 키워드 1줄만 굵게 배치하고 주변 여백을 40% 이상 확보하여 모바일 화면에서도 1초 만에 글의 주제를 파악할 수 있도록 개편했습니다.
둘째, 본문 소제목(H2, H3)과 단락 간격의 시각적 분리입니다. 본문 텍스트가 빽빽하게 붙어 있을 때 생기는 독자의 피로도를 줄이기 위해, 소제목 위아래 마진을 충분히 두고 문단마다 2~3줄 단위로 여백을 주어 글의 스캔 효율을 극대화했습니다.
셋째, 포인트 컬러의 단일화입니다. 화면에 3~4가지 이상의 색상을 남발하지 않고, 흑백 톤을 기본으로 하되 강조하고 싶은 핵심 문구에만 1가지 브랜드 컬러를 적용하는 원칙을 세웠습니다.
4. 번역서로서의 한계와 총평
한 가지 짚고 넘어갈 점은, 원서의 예시 시안들이 일본어(가타카나·한자) 타이포그래피를 기반으로 구성되어 있어 한글 폰트의 자모음 구조와 완전히 100% 동일하게 맞아떨어지지는 않는다는 아쉬움이 있습니다. 그럼에도 불구하고 시선의 동선, 배색의 조화, 정보의 계층화라는 보편적인 시각 디자인의 법칙을 익히는 데는 전혀 부족함이 없습니다.
- 추천 대상:
- 블로그 섬네일이나 SNS 카드뉴스를 깔끔하게 정돈하고 싶은 크리에이터
- 보고서나 발표 슬라이드(PPT)의 시인성을 높이고 싶은 직장인 및 대학생
- 딱딱한 디자인 이론 암기 대신 직관적인 퀴즈로 시각적 안목을 기르고 싶은 분
