손님은 흐릿한 사진 한 장에 '여기 별로겠다'며 창을 닫는다 — 작은 회사 웹사이트 사진·이미지 설계의 5가지 원칙
손님이 가장 먼저, 가장 오래 보는 것은 글이 아니라 사진이다. 스튜디오 없이도 지킬 수 있는 웹사이트 사진·이미지 설계의 다섯 가지 원칙을 정리했다.
손님은 정보가 빼곡한 화면 앞에서 어디부터 봐야 할지 몰라 숨이 막혀 창을 닫는다 — 작은 회사 웹사이트 여백(화이트스페이스) 설계의 5가지 원칙
화면을 꽉 채울수록 손님은 어디부터 봐야 할지 몰라 떠난다. 여백은 남는 자리가 아니라 시선을 안내하고 핵심을 강조하는 설계 요소다. 작은 회사 홈페이지의 여백 설계 다섯 가지 원칙을 정리했다.
헤더를 반투명 유리처럼 뒤가 비쳐 흐릿하게 만들려고, 배경을 미리 흐려 놓은 이미지를 잘라 붙인다 — 뒤에 있는 것을 실시간으로 흐리는 CSS backdrop-filter의 시대
반투명 유리처럼 뒤가 은은하게 비치는 메뉴 바와 팝업, 예전엔 흐린 이미지를 미리 만들어 오려 붙였습니다. 뒤에 있는 것을 실시간으로 흐리는 CSS backdrop-filter가 그 수고를 한 줄로 대신하는 이야기입니다.
손님은 주문 폼마다 이름·주소·카드번호를 처음부터 손으로 다 치다, 결제 직전에 지쳐 창을 닫는다 — 작은 회사 웹사이트 폼 자동완성(autocomplete)·자동입력 설계의 5가지 원칙
브라우저와 휴대폰에 이미 저장된 정보를 폼이 스스로 꺼내 쓰게 만드는 자동완성 설계 5가지. autocomplete 속성부터 모바일 키보드, 문자 인증번호 자동입력까지, 손님의 입력 마찰을 줄여 문의·주문 완주율을 끌어올리는 실무 원칙.
첫 화면을 꽉 채우려 100vh를 썼더니, 모바일 주소창이 '문의' 버튼을 반쯤 잘라먹는다 — 화면 높이를 주소창까지 계산해 담는 CSS dvh·svh 단위의 시대
모바일에서 100vh는 주소창이 접힌 가장 큰 높이를 기준으로 잡혀 버튼이 잘리곤 합니다. 주소창을 계산에 넣는 새 단위 svh·lvh·dvh로 자바스크립트 없이 첫 화면을 정확히 채우는 법을 정리했습니다.
체크박스 하나 브랜드 색으로 물들이자고, 기본 네모를 숨기고 자바스크립트로 처음부터 다시 그린다 — 폼 요소의 색을 CSS 한 줄에 맡기는 accent-color의 시대
체크박스·라디오·슬라이더의 파란색을 브랜드 색으로 바꾸려고 네이티브 요소를 통째로 걷어내던 시절이 있었다. 이제 accent-color 한 줄이면 접근성을 지킨 채 색만 갈아입힌다.
손님은 빽빽한 글씨 두 줄을 읽다 지쳐 창을 닫는다 — 작은 회사 웹사이트 글꼴·가독성(타이포그래피) 설계의 5가지 원칙
예쁜 폰트보다 중요한 건 '끝까지 읽히는' 글자입니다. 작은 회사 웹사이트가 손님을 붙드는 타이포그래피 설계 원칙 다섯 가지를 정리했습니다.
사장님은 홈페이지를 '한 번 만들면 끝'인 줄 알았는데, 매달 자동결제 문자가 조용히 쌓인다 — 작은 회사가 홈페이지 총 운영비(TCO)를 미리 계산하는 5가지 기준
홈페이지는 제작비 한 번으로 끝나지 않습니다. 도메인·호스팅·보안·유지보수·기능 수수료까지, 매달·매년 나가는 돈을 3년 총액으로 미리 계산하는 5가지 기준을 정리했습니다.
사장님은 같은 홈페이지 같은데 견적이 세 배씩 벌어지는 이유를 몰라, 제일 싼 곳에 맡겼다 결국 두 번 만든다 — 작은 회사가 홈페이지 제작 견적서를 제대로 읽는 5가지 기준
홈페이지 제작 견적은 왜 업체마다 세 배씩 차이가 날까요. 총액이 아니라 무엇이 포함되고 무엇이 빠졌는지를 읽는 다섯 가지 기준을 정리했습니다.