웹사이트 제작과 디지털 마케팅에 관한 이야기
방짜유기 한 점이 완성되기까지의 시간을 그대로 사이트의 흐름으로 옮긴 오롯 공방 브랜드 사이트 제작기. 황금빛, 두드림, 사진 무게와 페이지 속도 사이의 줄다리기를 공유합니다.
기계가 찍어낸 도자기와는 다른 온도를 보여주고 싶다는 공방의 요청에서 시작된 사이트. 손의 흔적과 흙빛 무드를 잃지 않으면서도, 작품 한 점마다 이름과 이야기가 머무는 페이지로 풀어낸 과정을 정리했다.
같은 키워드로 검색해도 구글에선 1페이지에 뜨는 사이트가 네이버에선 흔적조차 없는 경우가 많다. 두 검색엔진은 동작 방식 자체가 다르고, 한국 고객을 잡으려면 네이버만의 노출 규칙을 따로 챙겨야 한다.
닥나무 껍질을 두드려 만드는 한지의 결을, 빠르게 스쳐 가는 디지털 화면에 어떻게 옮길 수 있을까. 한지 공방 '닥(DAK)'의 브랜드 사이트는 그 질문에서 출발했다.
한글 제목 끝에 한두 글자만 외롭게 다음 줄로 떨어지는 문제, CSS 한 줄로 해결할 수 있다. text-wrap: balance와 pretty는 자바스크립트 없이 한글 웹사이트의 줄바꿈을 자동으로 정돈해 주는 새 표준이다.
사용자가 다시 들어왔을 때 페이지가 더 빠르게 뜨는지, 매번 처음과 똑같이 무거운지는 코드가 아니라 응답 헤더 한 줄에서 갈립니다. Cache-Control과 ETag의 기본기만 잡아도 재방문 속도가 달라집니다.
모달, 드롭다운, 툴팁을 만들기 위해 라이브러리를 끌어다 쓰던 시대가 저물고 있습니다. HTML 표준에 들어온 Popover API는 두 줄의 속성만으로 접근성과 키보드 인터랙션까지 한꺼번에 해결해 줍니다.
한 번도 차를 마셔본 적 없는 사람이 다래의 사이트를 보고 첫 시음을 신청하기까지. 보성 산지의 고요함을 디지털 화면에 옮기는 작업은 사진 한 장보다 깊이의 문제였습니다.
매주 라인업이 바뀌고 한정판이 떴다 사라지는 작은 막걸리 양조장의 사이트는 일반 식음료 사이트와 결이 다릅니다. 발효의 시간을 사이트의 흐름으로 옮긴 달담 양조장 프로젝트 후기를 정리합니다.