웹사이트 제작과 디지털 마케팅에 관한 이야기
사용자가 길게 쓸수록 입력창이 답답하게 좁아지던 시대가 끝났다. CSS 한 줄짜리 새 속성 field-sizing: content가 textarea와 input을 콘텐츠 길이에 맞춰 스스로 늘려준다.
영문 템플릿을 그대로 가져온 한글 사이트는 어딘가 답답해 보인다. 원인은 폰트가 아니라 폰트 주변의 공기—자간과 행간, 글자 크기, 한 줄의 길이—에 있다. 한글 본문이 가장 잘 읽히는 다섯 가지 원칙을 정리했다.
검색 결과 1페이지에 사이트가 올라가도 클릭이 따라오지 않는 경우가 많다. 그 차이를 만드는 것은 검색 결과에 보이는 단 두 줄, 타이틀 태그와 메타 디스크립션이다. 글자 수 제한, 페이지별 작성, 검색 의도와의 일치, 행동 유도 문구, 실제 결과 확인까지 검색 결과의 클릭률을 끌어올리는 5가지 원칙을 정리한다.
사이트를 새로 단장하거나 도메인을 바꾼 뒤 검색에서 들어오던 손님이 사라지는 사고는 대개 리다이렉트 한 줄에서 시작된다. 301과 302의 차이부터 매핑표 작성, 체인 점검, 서치 콘솔 통보, 옛 도메인 유지까지 사이트 이전에서 검색 순위와 매출을 지키는 5가지 원칙을 정리한다.
푸터는 카피라이트 한 줄로 끝나는 자리가 아니라, 사이트 전체의 신뢰와 법적 안전망이 모이는 자리다. 작은 회사가 푸터에서 챙겨야 할 다섯 가지 원칙을 정리했다.
모바일 검색의 상당수는 위치 기반으로 일어난다. 우리 사이트가 아무리 잘 만들어져 있어도, 지도와 플레이스 결과에 떠 있지 않으면 손님은 옆 가게로 간다. 작은 회사가 챙겨야 할 로컬 SEO와 지도 검색의 5가지 원칙을 정리했다.
구글에서 받은 무료 폰트, 자료실에서 다운받은 사진, 외주 사이트에 박힌 이미지 한 장이 1~2년 뒤 라이선스 청구서가 되어 돌아오는 사고는 작은 회사일수록 자주 일어난다. 폰트와 이미지를 안전하게 쓰는 다섯 가지 점검 순서를 정리한다.
패럴랙스와 페이드인을 위해 GSAP, AOS, ScrollMagic을 더하는 시대는 끝나간다. CSS의 animation-timeline 한 줄이 스크롤 위치를 애니메이션의 시간축으로 바꿔주는 Scroll-driven Animations의 동작 원리와 작은 사이트에 먼저 적용해야 할 두 가지 패턴을 정리한다.
About 페이지는 메인 다음으로 가장 많이 클릭되지만 가장 적게 신경 쓰는 페이지다. 작은 회사가 한 페이지로 신뢰를 만드는 5가지 구성 원칙을 정리했다.