손님은 맡긴 겨울 코트를 언제 찾으러 가야 할지 몰라, 다 됐다는 연락만 기다리다 계절을 넘긴다 — 동네 세탁소 '단정한하루' 홈페이지 제작기
접수번호 하나로 세탁 진행 상태를 확인하고, 완료되면 알림을 받는 화면. 전화에 묶여 있던 동네 세탁소의 소통을 홈페이지로 풀어낸 제작기입니다.
다크 모드 하나 넣자고 색을 라이트용·다크용 두 벌씩 정의하고 자바스크립트로 갈아 끼운다 — 밝음과 어둠을 색 한 줄에 담는 light-dark()의 시대
다크 모드를 만들 때마다 색을 두 벌씩 정의하고 자바스크립트로 갈아 끼우던 일을, CSS light-dark() 함수가 색 한 줄로 끝냅니다. 작은 회사 홈페이지에 왜 중요한지 짚어봅니다.
강아지가 밤새 앓는데, 보호자는 지금 문 연 병원이 어디인지 검색만 하다 새벽을 넘긴다 — 동네 동물병원 '다솜동물병원' 홈페이지 제작기
진료시간도 야간 응급 여부도 오시는 길도 어디에 정리돼 있지 않아, 정작 급할 때 보호자는 병원을 찾지 못했습니다. 다솜동물병원 홈페이지를 만들며 우리가 가장 공들인 것들을 기록합니다.
손님은 어머니 칠순상에 올릴 꽃을 지난봄 사진 하나만 믿고 골랐다가 헛걸음을 한다 — 동네 꽃집 피어라 홈페이지 제작기
매일 재고가 바뀌는 꽃집에 몇 년 묵은 사진을 걸어 두면 손님은 헛걸음을 한다. 사장님이 직접 오늘의 꽃을 올리고 손님이 상황별로 예약하게 만든 꽃집 홈페이지 제작기.
손님은 크루아상 하나 사러 두 정거장을 걸어왔다가, 오늘은 다 나갔다는 말에 빈손으로 돌아선다 — 동네 빵집 '오늘의밀' 홈페이지 제작기
매일 굽는 빵이 달라 손님이 헛걸음하던 동네 빵집 '오늘의밀'. 오늘 나온 빵을 사장님이 직접 올리고 픽업 예약까지 받는 홈페이지를 만든 과정을 정리했습니다.
단골이 친구에게 우리 가게를 몇 번이나 말했는데, 그 입소문은 어디에도 남지 않고 흩어진다 — 작은 회사 웹사이트가 손님이 손님을 데려오게 만드는 추천(리퍼럴) 설계의 5가지 원칙
가장 확실한 손님인 '아는 사람 소개'를 운에 맡기지 마세요. 흩어지던 입소문을 매출로 바꾸는 추천(리퍼럴) 시스템 설계의 5가지 원칙을 정리했습니다.
손님 열에 일곱은 휴대폰으로 들어오는데, 우리 홈페이지는 두 손가락으로 벌려야 글씨가 겨우 읽힌다 — 작은 회사 웹사이트 모바일 최적화 설계의 5가지 원칙
방문자 대부분이 휴대폰으로 들어오는 시대, 모바일 화면은 데스크톱의 부록이 아니라 홈페이지의 본체입니다. 작은 회사가 반드시 챙겨야 할 모바일 최적화 다섯 가지를 정리했습니다.
손님이 입력을 시작하기도 전에 칸마다 빨간 경고가 떠 겁을 먹고 폼을 닫는다 — 입력을 마친 뒤에야 맞고 틀림을 알려 주는 CSS :user-valid·:user-invalid의 시대
입력값이 맞는지 빨강·초록으로 알려 주려 자바스크립트로 칸마다 감시하던 시절이 저뭅니다. CSS :user-valid·:user-invalid는 손님이 직접 입력을 마친 칸에만 검증 표시를 띄워, 성가시지 않은 실시간 피드백을 코드 몇 줄로 만듭니다.
이벤트 팝업 하나 띄우려고 홈페이지에 자바스크립트 한 뭉치를 얹는다 — 팝업·모달을 코드 몇 줄로 여는 팝오버(Popover) API의 시대
공지창 하나 띄우려고 라이브러리를 통째로 불러오던 시절은 지나갔습니다. 이제 브라우저가 팝업의 열고 닫힘·바깥 클릭·겹침 순서까지 알아서 처리하는 팝오버(Popover) API를 살펴봅니다.