웹사이트 제작과 디지털 마케팅에 관한 이야기
툴팁, 드롭다운, 알림 같은 '떠 있는 화면'은 늘 자바스크립트로 힘겹게 만들어 왔습니다. 이제 HTML popover 속성 하나로 열고 닫고 맨 위에 띄우는 일을 브라우저가 알아서 처리합니다.
부드러운 페이지 전환을 위해 SPA 프레임워크와 애니메이션 라이브러리를 통째로 끌어안던 시절이 저뭅니다. 이제 브라우저가 기본으로 지원하는 View Transitions로 일반 멀티페이지 사이트도 한 호흡으로 이어집니다.
홈페이지를 만든 뒤 '잘 만들었다'는 칭찬만 남고 매출에 도움이 됐는지는 막연한 경우가 많습니다. 작은 회사가 감이 아닌 숫자로 홈페이지 효과를 따져보는 5가지 기준을 정리했습니다.
이제 손님 열에 일고여덟은 휴대폰으로 홈페이지를 엽니다. 데스크톱에서만 멀쩡한 화면은 정작 가장 많은 손님 앞에서 무너집니다. 작은 회사 웹사이트가 모바일 화면을 제대로 갖추는 5가지 원칙을 정리했습니다.
미디어 쿼리는 브라우저 화면 전체의 너비만 본다. 그래서 같은 카드를 넓은 본문과 좁은 사이드바에 함께 놓으면 한쪽은 반드시 깨진다. 컨테이너 쿼리는 '화면'이 아니라 '그 요소가 실제로 담긴 칸'의 크기를 기준으로 반응한다.
주소창의 '안전하지 않음' 경고 하나에 손님은 입력칸을 채우기도 전에 떠납니다. 작은 회사가 HTTPS를 빠짐없이 갖추는 5가지 실무 원칙을 정리했습니다.
문의 폼에 스팸이 쏟아지면 진짜 문의를 놓치고, 그렇다고 폼을 닫으면 손님이 연락할 길까지 막힌다. 폼은 열어둔 채 스팸만 걸러내는 다섯 가지 실무 원칙을 정리했다.
홈페이지를 찾은 방문자 100명 중 문의로 이어지는 건 두세 명 남짓입니다. 나머지를 그냥 흘려보내지 않고 다시 불러오는 리타게팅 광고의 핵심 원칙 다섯 가지를 실무 관점에서 정리했습니다.
오랫동안 CSS는 자식만 골라낼 수 있어 '부모를 바꾸려면 자바스크립트'가 공식이었습니다. :has() 선택자는 그 벽을 허물어, 입력 상태·내용 유무·하위 요소에 따라 화면을 코드 없이 반응시킵니다. 작은 회사 웹사이트에서 바로 쓰는 장면과 도입 전 짚을 점을 정리했습니다.