사장님 모니터에선 쨍하던 브랜드 파랑이, 손님 아이폰에선 다른 파랑으로 뜬다 — 색을 sRGB 밖으로 꺼내는 oklch·display-p3의 시대
웹의 색은 30년 된 sRGB 상자 안에서만 움직여 왔습니다. oklch와 display-p3가 그 상자를 열었고, 덕분에 색은 더 선명해지기 전에 먼저 관리하기 쉬워집니다.
광고비는 다달이 빠져나가는데, 어떤 광고가 문의를 만들었는지는 아무도 모른다 — 홈페이지 전환 추적을 붙이는 5단계
광고 관리자에는 클릭 수만 찍히고, 그 클릭이 문의로 이어졌는지는 어디에도 없다. 방문자 수 대신 '문의 한 건'을 세는 전환 추적을 구글 태그 매니저로 붙이는 실무 5단계를 정리했다.
"오늘 문 여나요?" 전화가 하루 열 통 — 홈페이지 영업시간을 살아 있게 만드는 법
영업시간을 표로 적어 두었는데도 확인 전화는 계속 온다. 손님이 알고 싶은 것은 '영업시간'이 아니라 '지금 열려 있는지'이기 때문이다. 실시간 영업 상태 표시를 제대로 만드는 6가지 실무 원칙을 정리했다.
제목은 묵직하게, 본문은 담백하게 — 글꼴 파일을 네 개씩 부르지 않고 굵기를 조절하는 법
굵기마다 글꼴 파일을 따로 싣느라 제목이 밍밍해진 사이트가 많습니다. 한 파일로 100부터 900까지 다루는 가변 폰트가 한글 사이트에서 특히 유리한 이유와, 도입 전 확인할 세 가지를 정리했습니다.
영문 페이지를 따로 만들어 뒀는데, 구글은 해외 바이어에게 여전히 한국어 화면을 띄운다 — 작은 회사 다국어 사이트가 검색에 제대로 걸리는 5가지 원칙
번역만 잘하면 해외에서도 알아서 찾아올 거라 믿었지만, 검색엔진은 어느 언어판을 누구에게 보여 줘야 할지 모른 채 한국어 페이지만 계속 내보냅니다. 작은 회사가 다국어 사이트를 검색에 제대로 태우는 다섯 가지 원칙을 정리했습니다.
손님은 바짓단 하나 줄이는 값이 얼마인지 몰라, 그 바지를 반년째 옷장에 걸어 둔다 — 동네 옷 수선집 '한땀수선' 홈페이지 제작기
수선은 금액도 기간도 되는 범위도 물어봐야만 알 수 있는 일입니다. 그 세 가지를 화면에 먼저 펼쳐 놓았더니, 문 앞에서 망설이던 걸음이 안으로 들어왔습니다.
서버는 답을 다 준비해 뒀는데, 손님의 브라우저는 아직 무엇을 받을지 몰라 기다리고 있다 — HTTP/3와 103 Early Hints가 첫 화면을 앞당기는 시대
사이트가 느린 이유가 늘 이미지 용량은 아닙니다. 파일을 내려받기도 전에 흘려보내는 연결·대기 구간을 HTTP/3와 103 Early Hints가 어떻게 줄이는지, 그리고 오늘 당장 할 수 있는 조치는 무엇인지 정리했습니다.
네이버 블로그에 쓴 글을 홈페이지에도 그대로 옮겼더니, 둘 다 검색에서 사라졌다 — 작은 회사가 채널을 나눠 쓰며 중복 콘텐츠를 피하는 5가지 원칙
같은 글을 블로그와 홈페이지에 똑같이 올리면 검색엔진은 어느 쪽을 보여줄지 판단을 미룹니다. 채널마다 역할을 나누고 원본을 명확히 선언하는 다섯 가지 방법을 정리했습니다.
긴 소개 페이지를 만들어 놓고, 손님에게는 "스크롤 좀 내려 보세요"라고 말한다 — 페이지 안 길잡이(목차·현재 위치·맨 위로) 설계법
페이지는 길게 만들면서, 그 안에서 길을 찾는 장치는 하나도 두지 않는다. 손님이 스크롤 중간에 포기하지 않도록 목차와 현재 위치 표시, 맨 위로 버튼을 설계하는 방법을 정리했다.