AUDIT REPORT · 2026.06.10

🦎 후추네 홈페이지 전수 점검 리포트

지난 6/6 대규모 비주얼 업데이트 이후 신·구 페이지가 혼재된 상태를 페이지 단위로 전부 점검하고, 중복 메뉴를 추적하고, 단계별 정리 계획을 세웠어!

점검 대상: hoochoobothome.pages.dev (main 브랜치) · 작성: 후추봇 🦎

1한눈에 보기

숫자로 보는 현재 상태. 빨간 카드가 이번 정리의 핵심 타깃이야.

11개

점검한 페이지 (+미궁 3챕터)

7종

난립 중인 디자인 시스템 (CSS)

4중첩

index.html 네비게이션 (탭바+햄버거+퀵바+홈카드)

2벌

계정 메뉴 (햄버거 / 퀵바 양쪽에 가입·로그인)

2개

게임 허브 (홈 게임 탭 ↔ games.html 역할 중복)

7벌

복붙된 다크모드 토글 코드 (JS 파일마다)

신형 1

절충 3

구형 6

별도 1

신형 — 6/6 비주얼 업데이트 완료 (index) 절충 — 신형 style.css는 쓰지만 구형 레이아웃 (업적·앨범·나들이) 구형 — 독자 CSS, 업데이트 미반영 (게임·슬롯·거북수프·포커·가게·어드벤처) 별도 세계관 — 의도된 독자 디자인 (래버린스)

2중복 메뉴 추적 — index.html의 네비 4중첩

비주얼 업데이트 때 새 네비(탭바·홈카드)를 추가하면서 옛 네비(햄버거·퀵바)를 안 걷어내서 생긴 문제야. 심지어 퀵바 주석엔 "햄버거에서 이전"이라고 적혀 있는데 햄버거도 그대로 살아있어!

📱 하단 탭바 신형 · 주 네비

🏠 홈
🦎 후추
🎮 게임
📸 앨범
👨‍👩‍👧‍👦 가족

🗂️ 홈 카드 8개 신형 · 바텀시트

🎲 운세 · 💌 타임캡슐 · 📅 이벤트
💬 한마디 · 🚶 나들이 · 💪 운동
🍽️ 메뉴 · 🏆 업적

☰ 햄버거 메뉴 구형 · 잔존

🎮 게임 코너 — 탭바와 중복
🐢 바다거북수프 — 게임 탭과 중복
🪙 토큰 가게 — 게임 탭과 중복
📝 가입 · 🔑 로그인 — 퀵바와 중복
📋 변경기록 · 🧪 베타 — 퀵바와 중복

⚡ 퀵바 (플로팅) 구형 · 잔존

🎮 게임 6종 — 게임 탭과 통째로 중복
📍 섹션 11개 — 홈 카드와 통째로 중복
🔐 계정 5개 — 햄버거와 통째로 중복

목적지별 진입 경로 개수 — 같은 곳으로 가는 문이 몇 개씩 있는지 세어봤어. ● 신형 경로 · ● 구형 경로.

목적지	탭바	홈카드	헤더버튼	게임탭 카드	햄버거	퀵바	합계
🎮 게임 코너 (games.html)							5
🐢 바다거북수프							3
📸 앨범							3
🏆 가족 업적							3*
🚶 나들이							3*
🪙 토큰 가게							2
🃏 인디언 포커 · 🎰 슬롯 · 🌀 래버린스							각 2
📝 가입 / 🔑 로그인 / 🚪 로그아웃							2벌
📋 변경기록 / 🧪 베타 홈							2벌

* 업적·나들이는 홈 본문 섹션의 "전체 보기 →" 링크까지 포함한 수치.

3페이지별 점검 카드

각 페이지의 현재 모습을 실제 팔레트 그대로 미니 목업으로 그렸어. 빨간 플래그 = 문제 지점!

☰ 구형 잔존 ⚡ 구형 잔존

🤖후추네 가족📸🌙☰

🦎

NEXT UP · D-12

엄마 생신 🧡

🎲 운세

💌 타임캡슐

📅 이벤트

💬 한마디

🚶 나들이

💪 운동

⚡

🏠홈🦎후추🎮게임📸앨범👨‍👩‍👧‍👦가족

신형 앱셸 + 구형 네비 2종이 아직 떠 있음

🏠 홈 `index.html`

신형 앱셸최종수정 6/6style.css (4,579줄)

6/6 비주얼 업데이트의 본체. 5탭 바텀바 + 홈 카드 + 바텀시트 팝업 — 구조 자체는 훌륭해!
햄버거 ☰ + 퀵바 ⚡가 철거 안 된 채 신형 네비와 4중첩
계정 메뉴(가입·로그인·로그아웃)가 햄버거/퀵바에 2벌 존재
헤더 📸 버튼 ↔ 탭바 앨범 탭 중복
게임 탭의 래버린스 카드 설명이 "챕터 1: 잠긴 정원" — ch3까지 나온 지금 구식 정보
구형 collapsible 섹션 8개가 DOM에 남아 JS가 매번 stash로 옮기는 구조 (이중 관리)

🧹 유지 + 잔재 청소신형 구조는 그대로, 구형 네비·중복 버튼만 걷어내면 완성형!

홈 게임탭과 역할 중복

← 홈 🎮 게임 코너🌙

📝 오늘의 단어 퀴즈

힌트 2명 + 맞추기 1명

💡 힌트🤔 맞추기

🃏 포커 하러 가기!

🎰 슬롯 돌리러 가기!

🪙 가게 가기!

📦 보관된 게임 보기

🗼 도쿄 어드벤처

단어퀴즈 본체 + 링크 카드 모음 (허브 역할 중복)

🎮 게임 코너 `games.html`

구형최종수정 6/6games.css (독자, 445줄)

단어 퀴즈 게임 본체가 여기 살고 있음 (로그인 연동 포함) — 이 기능은 유일
홈 게임 탭과 "게임 허브" 역할이 통째로 중복 — 게임 탭 → games.html → 또 각 게임으로 2단 점프
포커/슬롯/가게 링크 카드가 인라인 style="" 하드코딩 (그라데이션 3종)
독자 games.css — 신형 style.css와 토큰 다름
보관소(#archive)는 좋은 패턴! 아카이브 진입점으로 유지 가치 있음

🔀 역할 축소"단어 퀴즈 + 보관소" 전용 페이지로 다이어트. 허브 역할은 홈 게임 탭에 넘기고 링크 카드 3개 제거.

🐢 바다거북 수프🏠🌙

오늘의 수수께끼 🐢

예/아니오 질문으로 풀어봐!

Q. 그 사람은 혼자였어?

→ 응, 맞아!

Q. 밤에 일어난 일이야?

→ 아니야!

질문하기정답 도전!

올리브 팔레트라 이질감은 적은 편

🐢 바다거북 수프 `turtle-soup.html`

구형최종수정 4/26turtle-soup.css (독자, 695줄)

올리브 계열 독자 팔레트 — 색감은 신형과 제일 가까워서 이식 쉬움
독자 CSS 695줄 — 신형 토큰 미사용
뒤로가기가 "🏠 홈" — 다른 게임들은 "← 게임"으로 감 (동선 불일치)
다크모드 토글 코드 자체 복붙본 보유

🎨 신형 리스킨style.css 토큰 + 공통 헤더로 이식. 게임 기능은 그대로.

테마 키 불일치 버그

← 게임 🃏 인디언 포커🌙

내 카드만 안 보여! 🙈

🪙 팟: 12토큰

콜레이즈폴드

베이지+카드 레드/블랙, 독자 디자인

🃏 인디언 포커 `indian-poker.html`

구형최종수정 4/26indian-poker.css (독자, 381줄)

실질 버그: 다크모드 저장 키가 혼자만 darkMode (다른 페이지는 전부 theme) → 페이지 이동하면 라이트/다크가 어긋남!
독자 CSS — 신형 토큰 미사용
게임 로직·토큰 베팅은 정상 동작

🎨 리스킨 + 버그픽스테마 키 theme으로 통일(마이그레이션 포함)이 최우선, 그다음 신형 이식.

← 게임 🎰 후추 슬롯머신

🦎

🥔

아쉽다! 한 끗 차이!

🪙 잔액: 23토큰

🎰 3토큰 넣고 당기기!

🏆 잭팟 기록: 엄마 🧡 +50

games.css에 업혀 있는 미니 페이지

🎰 후추 슬롯머신 `slot.html`

구형최종수정 6/6games.css + slot.css

기능 멀쩡, 코드도 작음 (slot.css 108줄)
games.css에 의존 — games.html을 다이어트하면 같이 정리 필요
다크모드 토글 복붙본 보유

🎨 신형 리스킨작아서 이식 비용 최소. games.css 의존만 끊으면 끝.

← 게임 🪙 후추봇 토큰 가게🌙

🪙 내 토큰: 23개

💬 후추봇에게 따뜻한 말 한마디

하루 1번, 토큰 5개를 받아!

후추봇아 오늘도 고마워 🦎

🪙 토큰 받기!

올리브/크림 — 색감은 가까움

🪙 후추봇 토큰 가게 `huchubot-shop.html`

구형최종수정 5/31huchubot-shop.css (독자, 291줄)

최근(5/31) 추가된 페이지인데 구형 패턴으로 만들어짐 — 신형 도입 직전이라 그런 듯
독자 CSS — 신형 토큰 미사용
다크모드 토글 복붙본 보유

🎨 신형 리스킨토큰 이코노미의 관문이라 자주 쓰임 — 리스킨 우선순위 높게.

홈 업적 팝업과 중복

🤖가족 업적🏠🌙

🧡 엄마 12💻 형 9💜 누나 11

🏅
첫 잭팟

🐢
명탐정

🔒
???

💪
운동왕

🔒
???

style.css 재사용하지만 구형 헤더 레이아웃

🏆 가족 업적 `achievements.html`

절충형최종수정 4/26style.css + achievements.css (86줄)

신형 style.css를 이미 불러서 토큰은 공유 중
홈의 업적 카드(바텀시트 팝업)와 콘텐츠 중복
헤더가 구형 레이아웃 (탭바 없음, 🏠 버튼 방식)
상세 통계가 팝업보다 풍부하면 "전체 보기" 전용으로 가치 있음 — 팝업은 요약, 여긴 상세로 역할 분리

✅ 유지 + 역할 분리홈 팝업 = 요약, 이 페이지 = 상세 전체보기. 헤더만 신형 통일.

홈 앨범 탭과 보기 기능 중복

🤖후추 성장 앨범🏠🌙

🦎

🎂

🚶

🦎

👨‍👩‍👧‍👦

🦎

📷 사진 업로드

R2 버킷(hoochoopic) 연동 · 관리 기능

보기 + 업로드/관리가 한 페이지에

📸 후추 성장 앨범 `album.html`

절충형최종수정 3/10style.css + album.css (332줄)

홈 앨범 탭(필터 칩 + 그리드)이 "보기" 기능을 이미 흡수 — 보기가 두 군데
업로드/관리(R2 연동)는 이 페이지에만 있는 고유 기능
헤더 구형 + 진입점 3개 (탭바·헤더📸·퀵바)

🔀 관리 전용으로 축소"사진 관리(업로드·삭제)" 전용 페이지로 명확화. 보기는 홈 앨범 탭으로 일원화.

🤖가족 나들이 기록🏠🌙

☕ 광교 카페

5/24 · 엄마 🧡 누나 💜 — 감자빵 맛집!

🗼 도쿄 여행

5/16~19 · 다 함께 🎉

🌸 호수공원 산책

4/12 · 형 💻 누나 💜

➕ 나들이 기록 추가

기록 작성 UI가 있는 전체 목록 페이지

🚶 가족 나들이 기록 `outing.html`

절충형최종수정 3/28style.css + outing.css (478줄)

기록 작성·전체 목록은 고유 기능 (홈 팝업은 최근 미리보기만)
홈 나들이 카드/섹션과 미리보기 중복
헤더 구형 레이아웃

✅ 유지 + 헤더 통일역할(전체 기록 + 작성)은 분명함. 신형 헤더만 입히면 OK.

📦 보관됨

← 게임 🗼 도쿄 어드벤처🌙

5/16~19 가족 도쿄 여행 🎉

투표로 만든 일정, 성공적으로 완주!

Day 2 점심 🍜

A. 이치란 라멘 — 3표 확정!

Day 3 오후 🛍️

B. 시부야 쇼핑 — 3표 확정!

도쿄 테마(핑크/블루) — 추억용 의도된 디자인

🗼 도쿄 어드벤처 `adventure.html`

구형 (의도적)최종수정 3/19adventure.css (독자, 621줄)

여행 종료 후 games.html 보관소에 정식 보관됨 — 처리 잘 되어 있음!
도쿄 테마(핑크·블루·오렌지)는 여행 추억 그 자체 — 리스킨하면 오히려 손해
유일한 잔손질: 다크모드 코드만 공용 모듈로 빼면 끝

📦 보관 확정추억 박물관으로 그대로 동결. 리스킨 대상에서 제외!

← 홈 🌀 미궁 입구🌓

더 래버린스

🌿 ch1 — 잠긴 정원

완료 ✅

🗝️ ch2 — 시계태엽 도서관

완료 ✅

🛂 ch3 — 세계여행

여권 프레임 · 16개 도시 · 진행 중!

독자 세계관 — 의도된 별도 디자인

🌀 더 래버린스 `labyrinth/`

별도 세계관최종수정 6/6 (ch3)labyrinth.css (공용 723줄)

미궁 테마로 의도된 독자 디자인 — 통일 대상이 아님!
shared/labyrinth.css로 챕터 간 일관성도 자체 관리 중. 모범 사례야
홈 게임 탭 카드 설명이 "챕터 1: 잠긴 정원"으로 멈춰 있음 — ch3 공개 반영 필요

✅ 그대로 유지본체는 손대지 말기. 홈 쪽 소개 문구만 갱신!

4정리 계획 — 5단계 로드맵

효과 큰 것부터, 안전한 순서로. 각 Phase는 독립적으로 배포 가능한 단위야 (beta 브랜치에서 작업 → 검증 → main 이식).

Phase 1

🧹 메뉴 대청소 (index.html)

효과 ★★★난이도 ★☆☆예상 반나절

구형 네비 철거 — 아래 A/B안 중 선택 (후추봇 추천: B안)
계정 메뉴(가입·로그인·로그아웃·변경기록·베타) 1벌로 통합
헤더 📸 버튼 제거 (탭바 앨범 탭과 중복)
게임 탭 래버린스 카드 설명 갱신: "챕터 1: 잠긴 정원" → "챕터 3: 세계여행 공개!"

Phase 2

🎮 게임 허브 단일화

효과 ★★★난이도 ★★☆예상 1일

홈 게임 탭을 유일한 허브로 — 모든 게임의 단일 진입점
games.html → "단어 퀴즈 + 보관소" 전용 페이지로 다이어트 (포커·슬롯·가게 링크 카드 3개 제거)
게임 탭 단어퀴즈 카드에 "오늘 풀었는지" 상태 뱃지 연동 (오늘의 픽 히어로 활용)
각 게임의 뒤로가기 목적지 통일: 전부 ← 게임 탭(홈)으로

Phase 3

🎨 구형 4페이지 신형 리스킨

효과 ★★☆난이도 ★★★예상 2~3일

대상: slot → huchubot-shop → turtle-soup → indian-poker (쉬운 순)
style.css 디자인 토큰 + 공통 헤더/뒤로가기 컴포넌트로 이식
다크모드 토글을 theme.js 공용 모듈 1개로 통합 (현재 7벌 복붙)
버그픽스: indian-poker의 darkMode 키 → theme으로 마이그레이션 (기존 값 이전 코드 포함)
제외: adventure(보관 동결), labyrinth(별도 세계관)

Phase 4

🔀 절충 3페이지 역할 정리

효과 ★★☆난이도 ★★☆예상 1일

album.html → "사진 관리(업로드·삭제)" 전용으로 축소, 보기는 홈 앨범 탭으로 일원화
achievements.html → 상세 전체보기로 역할 분리 (홈 팝업 = 요약), 신형 헤더 통일
outing.html → 유지하되 신형 헤더 통일

Phase 5

🧰 코드 헬스 (점진적)

효과 ★☆☆난이도 ★★☆예상 틈틈이

style.css 4,579줄 분할: base(토큰·공통) / home(홈 전용) / components(팝업·모달)
games.html 인라인 style="" 그라데이션 → 클래스로
홈 collapsible 섹션 ↔ stash 이중 구조 단순화 (팝업 콘텐츠를 템플릿으로)
JS 문법 체크(node -c) 습관은 그대로 유지!

5네비게이션 정리 — A/B 선택지

Phase 1의 핵심 결정! 어느 쪽이든 "주 네비 = 탭바, 섹션 점프 = 홈 카드"는 동일하고, 계정/시스템 메뉴를 어디 남길지가 갈림길이야.

A안 — 퀵바 ⚡ 올인원

햄버거 ☰ 철거. 퀵바가 계정/시스템까지 전담.

📱 하단 탭바 주 네비

🗂️ 홈 카드 8개 섹션 점프

☰ 햄버거 메뉴 철거

⚡ 퀵바 계정·시스템 전담 (다이어트)

플로팅 버튼이라 어느 스크롤 위치에서든 접근
3컬럼 패널이 무거움 — 게임/섹션 컬럼은 어차피 중복이라 결국 1컬럼으로 다이어트해야 함
탭바와 시각적으로 겹치는 위치 (우하단)

B안 — 슬림 햄버거 ☰

퀵바 ⚡ 철거. 햄버거는 계정/시스템 5개만 남긴 슬림 메뉴로.

📱 하단 탭바 주 네비

🗂️ 홈 카드 8개 섹션 점프

☰ 햄버거 가입·로그인·변경기록·베타만

⚡ 퀵바 철거

네비 체계가 가장 단순: 탭바(이동) + 홈카드(콘텐츠) + 햄버거(설정성 메뉴) — 역할이 안 겹침
화면을 가리는 플로팅 요소 제거 → 모바일에서 깔끔 (엄마 사용성 👍)
헤더 ☰는 모두에게 익숙한 위치 (설정류 메뉴의 표준 자리)
스크롤 깊은 곳에서 계정 메뉴 가려면 맨 위로 올라가야 함 (어차피 드묾)

✓요약 — 형이 결정할 것 딱 2개!

네비 A/B안 선택 — 후추봇 추천은 B안 (슬림 햄버거). 정해주면 Phase 1 바로 들어갈 수 있어!
achievements 역할 — "홈 팝업 요약 + 페이지 상세" 분리안으로 갈지, 페이지를 아예 흡수할지. (추천: 분리 유지)
나머지(games 다이어트, 리스킨 순서, 테마 키 버그픽스)는 방향 이견 없을 것 같아서 베타 브랜치에서 순서대로 진행하면 돼!