웹사이트 제작과 디지털 마케팅에 관한 이야기
긴 소개 페이지를 열면 브라우저는 화면 밖 저 아래 섹션까지 전부 계산하고 그려 놓습니다. content-visibility: auto 한 줄이면 보이는 부분만 먼저 그려 첫 화면이 눈에 띄게 빨라집니다.
카카오톡, 인스타그램, 검색광고에 같은 링크를 뿌리면 어떤 채널이 손님을 데려왔는지 알 길이 없습니다. 링크 뒤에 UTM 꼬리표만 달아도 어느 채널에 돈과 시간을 더 쓸지가 숫자로 보입니다.
모달을 여는 버튼, 팝업을 닫는 버튼마다 이벤트 리스너를 다시 쓰던 관행이 끝나갑니다. HTML 속성 두 개로 버튼과 대상 요소를 직접 잇는 Invoker Commands를 소개합니다.
오탈자 하나, 가격표 한 줄을 바꿀 때마다 제작 업체에 메일을 보내고 기다리고 있다면, 홈페이지에 관리자 페이지(CMS)가 없다는 신호다. 계약 전에 따져야 할 5가지 기준을 정리했다.
홈페이지 제작비와 운영비는 증빙만 제대로 챙기면 부가세 공제와 비용 처리가 가능한 지출이다. 세금계산서 확인부터 프리랜서 원천징수, 자산 계상, 지원금 정산까지 사장님이 놓치기 쉬운 다섯 가지를 정리했다.
영업시간, 주차, 가격, 예약 방법. 매일 반복되는 문의 전화는 FAQ 페이지 하나로 크게 줄일 수 있습니다. 상담 시간을 아끼면서 검색 노출과 AI 인용까지 잡는 FAQ 설계 원칙을 정리했습니다.
select 태그는 20년간 CSS가 닿지 않는 유일한 폼 요소였고, 업계는 div와 자바스크립트로 가짜 셀렉트를 다시 지어 왔다. appearance: base-select 한 줄이 이 관행을 어떻게 끝내는지 정리했다.
운영 중인 홈페이지를 직접 뜯어고치다 나는 사고는 사장님보다 손님이 먼저 목격한다. 작은 회사도 어렵지 않게 갖출 수 있는 스테이징(테스트 환경)의 5가지 원칙을 정리했다.
아코디언과 드롭다운을 부드럽게 펼치려면 지금까지는 자바스크립트로 높이를 계산해 픽셀로 박아 넣어야 했다. CSS 한 줄로 height: auto까지 자연스럽게 애니메이션되는 interpolate-size와 calc-size()를 정리했다.