손님은 한 번 사고 나면 우리 가게를 그날로 잊는다 — 작은 회사가 카카오톡 채널로 손님을 단골로 붙드는 5가지 원칙
새 손님을 부르는 광고비는 매달 나가는데, 계산이 끝나는 순간 손님과의 연결은 끊긴다. 카카오톡 채널로 그 끈을 다시 잇는 다섯 가지 원칙을 정리했다.
반응형을 화면 크기 하나로만 짜다, 같은 카드가 넓은 본문에선 멀쩡한데 좁은 사이드바에선 글자가 우그러진다 — 컨테이너 쿼리(@container)가 요소를 ‘제가 놓인 자리의 폭’에 맞춰 스스로 바꾸는 시대
화면 전체 너비로만 짜던 반응형은 넓은 화면 속 좁은 사이드바에서 무너진다. 컨테이너 쿼리는 요소가 담긴 상자의 폭을 기준으로 스스로 모양을 바꿔, 한 번 만든 카드를 어디에 놓아도 안심하고 재사용하게 한다.
손님은 홈페이지 맨 아래 ‘사업자 정보’ 한 줄이 비어 있으면 ‘진짜 파는 곳 맞나’부터 의심한다 — 작은 회사 웹사이트가 법으로 꼭 넣어야 하는 표기 5가지
화면 맨 아래 사업자 정보 몇 줄은 손님이 믿고 결제할지 판단하는 근거이자 법적 의무다. 작은 회사 홈페이지가 반드시 표기해야 할 5가지를 정리했다.
스타일이 서로 이기려고 !important를 덕지덕지 붙이다, 어느 순간 아무도 화면 색 하나 못 바꾼다 — CSS 캐스케이드 레이어(@layer)가 스타일의 서열을 미리 정해 두는 시대
CSS에서 스타일끼리 우선순위 싸움이 벌어질 때마다 !important와 복잡한 선택자로 힘겨루기하던 관행의 한계와, 스타일의 서열을 미리 층으로 나눠 정해 두는 캐스케이드 레이어(@layer)가 작은 회사 웹사이트 관리에 주는 이점을 풀어냅니다.
손님은 5년 전 만든 홈페이지를 열고 '이 가게 아직 하나?'부터 의심한다 — 작은 회사가 홈페이지를 새로 만들 때를 아는 5가지 신호
멀쩡히 열리기는 하니 미루게 되는 홈페이지 리뉴얼. 휴대폰 가독성부터 보안 경고까지, 지금 새로 만들어야 할 때를 알려주는 다섯 가지 신호를 짚어 드립니다.
결제 직전 손님이 주소창의 '주의 요함' 한 줄을 보고 슬그머니 손을 뗀다 — 작은 회사 웹사이트 SSL 보안 인증서(https 자물쇠) 설계의 5가지 원칙
주소창의 자물쇠 하나가 손님의 신뢰를 좌우한다. 작은 회사 웹사이트가 SSL 인증서로 '안전한 사이트'가 되는 5가지 원칙을 정리했다.
손님은 하얀 화면이 멈춰 있는 3초를 못 견디고 창을 닫는다 — 작은 회사 웹사이트 로딩 속도(페이지 속도) 설계의 5가지 원칙
공들여 만든 홈페이지도 첫 화면이 뜨는 데 몇 초씩 걸리면 손님은 내용을 보기도 전에 떠난다. 작은 회사가 큰돈 들이지 않고 웹사이트 속도를 지키는 다섯 가지 실무 원칙을 정리했다.
스크롤을 내릴 때마다 사진이 스르륵 떠오르게 하려고, 스크롤 위치를 자바스크립트로 밤새 감시한다 — 스크롤 기반 애니메이션(scroll-driven animation)이 그 일을 CSS 한 곳에 넘기는 시대
요소가 화면에 들어올 때 부드럽게 떠오르는 효과, 예전엔 자바스크립트로 스크롤을 감시해야 했다. 이제 CSS animation-timeline 한 줄이 그 일을 대신한다. 작은 회사 웹사이트에 이 기술이 왜 반가운지 정리했다.
브라우저 탭 스무 개 중 우리 사이트만 회색 지구본이다 — 작은 회사 웹사이트 파비콘(브라우저 탭 아이콘) 설계의 5가지 원칙
손님은 탭을 스무 개 열어둔 채 우리 사이트를 다시 찾는다. 그 사이에서 회색 지구본 하나면 우리는 그대로 사라진다. 작은 회사가 파비콘으로 브라우저 탭에서 살아남는 5가지 원칙.