웹사이트 제작과 디지털 마케팅에 관한 이야기
사이트는 디자인이 마음에 안 들 때가 아니라, 비즈니스가 사이트보다 앞서 나갔을 때 리뉴얼해야 합니다. 사장님이 헷갈리는 리뉴얼 타이밍을 판단하는 5가지 신호를 정리합니다.
검은 옻칠 위에 자개 한 조각이 박히면 그 안에 일곱 빛이 산다. 결빛(結光) 나전 공방의 브랜드 사이트를 만들며 우리가 화면 위에 옮기려 한 것은 자개의 화려함이 아니라 옻칠 한 겹 아래 머무는 시간의 결이었다.
충북 청주의 작은 누비 공방 '누비결'은 사진만으로는 가치가 설명되지 않는 손바느질 작업이었다. 매크로 사진과 광목 톤의 색감, 넓은 행간으로 누비의 결을 화면에 옮긴 사이트 제작기와 그 결과를 정리한다.
부모 그리드의 줄을 자식 카드 안쪽까지 그대로 이어주는 CSS Subgrid가 자바스크립트 없이 카드 안 요소들의 가로 줄을 맞춰준다. 이제 카드 높이를 강제로 정렬하던 코드를 버려도 된다.
사용자가 길게 쓸수록 입력창이 답답하게 좁아지던 시대가 끝났다. CSS 한 줄짜리 새 속성 field-sizing: content가 textarea와 input을 콘텐츠 길이에 맞춰 스스로 늘려준다.
영문 템플릿을 그대로 가져온 한글 사이트는 어딘가 답답해 보인다. 원인은 폰트가 아니라 폰트 주변의 공기—자간과 행간, 글자 크기, 한 줄의 길이—에 있다. 한글 본문이 가장 잘 읽히는 다섯 가지 원칙을 정리했다.
검색 결과 1페이지에 사이트가 올라가도 클릭이 따라오지 않는 경우가 많다. 그 차이를 만드는 것은 검색 결과에 보이는 단 두 줄, 타이틀 태그와 메타 디스크립션이다. 글자 수 제한, 페이지별 작성, 검색 의도와의 일치, 행동 유도 문구, 실제 결과 확인까지 검색 결과의 클릭률을 끌어올리는 5가지 원칙을 정리한다.
사이트를 새로 단장하거나 도메인을 바꾼 뒤 검색에서 들어오던 손님이 사라지는 사고는 대개 리다이렉트 한 줄에서 시작된다. 301과 302의 차이부터 매핑표 작성, 체인 점검, 서치 콘솔 통보, 옛 도메인 유지까지 사이트 이전에서 검색 순위와 매출을 지키는 5가지 원칙을 정리한다.
푸터는 카피라이트 한 줄로 끝나는 자리가 아니라, 사이트 전체의 신뢰와 법적 안전망이 모이는 자리다. 작은 회사가 푸터에서 챙겨야 할 다섯 가지 원칙을 정리했다.