하루 저녁, 사이트 6개를 다시 만든 기록

혼자 사이트를 만들고 운영하면서 그날 한 일을 남기는 첫 일지입니다. 이번 글은 2026년 10월 18일 오후 5시 22분부터 다음 날 0시 50분까지, 한 저장소(모노레포)에 있는 사이트 6개를 한꺼번에 손본 이야기입니다.

숫자로 본 하룻저녁

git 기록으로 잰 값입니다.

직접 운영하는 사이트는 site30cut(이 사이트), 계산모아, 글자수, 휴일모아이고, 나머지 두 곳은 카페 고객과 출장 광택 고객의 사이트입니다.

1. 페이지가 한 장이면 검색에 걸릴 곳도 한 곳

처음 문제는 단순했습니다. 홈 한 장에 모든 내용을 넣어 두니 검색어 하나에 대응하는 주소가 홈 하나뿐이었습니다. 그래서 사이트마다 소개·과정·가격·FAQ·문의처럼 주제별 하위 페이지를 4개 언어(한국어·영어·일본어·중국어 번체)로 나눴습니다. 페이지를 늘리면서 사이트맵 수정일(lastmod)과 RSS도 함께 넓혔습니다. 네이버 서치어드바이저는 RSS를, 구글은 사이트맵을 주로 읽기 때문입니다.

같은 시간에 Search Console과 GA4를 읽기 전용으로 조회하는 스크립트를 만들었습니다. 노출은 있는데 순위가 낮거나 클릭이 없는 페이지를 골라, 다음에 무엇을 보강할지 정하는 데 씁니다. 결과 숫자는 데이터가 쌓이면 다음 일지에서 다루겠습니다.

2. 같은 메뉴를 여섯 번 만들지 않기

출장 광택 고객 사이트에 먼저 만든 왼쪽 펼침 메뉴(그룹 아코디언, 메뉴 검색, 동의어·초성 검색, ESC·포커스 트랩)가 쓸 만해서 이것을 공통 패키지로 옮겼습니다. 이제 사이트마다 nav.config.ts 하나에 메뉴 그룹과 동의어만 적으면 6개 사이트가 같은 방식으로 동작합니다. 「가격」을 검색하면 가격 페이지가, 「얼마」를 검색해도 같은 페이지가 나오는 식입니다.

입력 안내도 같은 방식으로 정리했습니다. 계산기·글자수 도구·연차 플래너가 각자 갖고 있던 「빈 값·범위 밖·잘못된 숫자」 안내를 공통 form-kit 하나로 합쳤고, 동작과 문구는 그대로 두었습니다.

3. 글 대신 움직이는 도식

설명 문단이 길면 읽지 않고 넘깁니다. 그래서 제작 과정은 5단계 타임라인으로, 대출 계산 결과는 원금·이자 도넛으로, 연휴는 달력 띠로 바꿨습니다. 원래 글은 지우지 않고 「자세히 보기」 안에 접어 두었습니다. 움직임은 화면에 보일 때만 돌고, 운영체제에서 「동작 줄이기」를 켠 사용자에게는 멈춘 장면을 보여 줍니다.

4. 이모지를 아이콘으로

메뉴와 도식 곳곳에 쓰던 이모지는 기기마다 모양이 다르고, 솔직히 자동으로 만든 티가 났습니다. Lucide 아이콘 115종(ISC 라이선스)으로 바꾸고 공통 Icon 컴포넌트 하나로 6개 사이트가 같이 쓰게 했습니다.

5. 마무리 — 작아 보이지만 빠뜨리면 안 되는 것

• PWA 1단계: 6개 사이트에 웹 매니페스트와 아이콘을 넣었습니다. 서비스워커는 일부러 넣지 않았습니다. 설치 조건에 필요 없고, 캐시가 옛 화면을 붙잡는 위험이 더 컸습니다.
• 이미지 출처: 고객 사이트 사진을 브랜드 로고·번호판이 없는 무료 사진으로 바꾸고, 사이트마다 소개 페이지에 출처와 작가를 적었습니다.
• 모바일 가로 넘침: 등장 애니메이션의 대기 위치 때문에 390px 화면이 426px로 밀리는 문제를 overflow-x: clip 으로 막았습니다.

다음에 할 일

하위 페이지가 검색에 실제로 잡히는지는 며칠 뒤 Search Console 데이터로 확인합니다. 이 일지도 그 숫자와 함께 이어서 쓰겠습니다. 이런 방식으로 사이트를 만드는 과정이 궁금하다면 제작 과정과 포트폴리오를 함께 보셔도 좋습니다.