퀘스트 로그
이 사이트의 모험 일지. 뭔가 만들 때마다 경험치가 쌓인다.
- 📜사이드
기록: 세 번 갈아엎은 설계를 두루마리에
구구단 드롭 제작기를 블로그 글 010으로 한/영 두 벌 발행 — 다섯 게임을 섞었다가 복잡도로 실패한 1차, 운빨이 남은 2차, '지뢰찾기의 본질은 지뢰가 아니라 숫자 단서'라는 진단, 변수명 충돌로 스크립트가 통째로 죽었는데 콘솔은 조용했던 삽질, 디버깅 값을 안 지워 멀쩡한 걸 버그로 오해하게 만든 삽질까지. 실험 페이지·트로트 자판기 글과 상호 링크로 묶었다.
- ⚔️메인
제작: 운을 몰아낸 구구단 오락기
실험 #2 구구단 드롭을 /times-table·/kr/times-table에 올렸다. 국민게임 5종을 한 판에 섞은 1차, 카드+지뢰로 줄인 2차를 모두 폐기하고 낙하식 곱셈 게임으로 착지 — 지뢰찾기에서 추론 단서를 빼고 벌칙만 가져온 게 운빨의 원인이었다. 숨긴 정보 0, 답은 항상 라벨 안에 존재, 시작 열은 정답 배제, 오답 기둥은 정답으로 만회. 같은 숫자를 두 번(n×m, m×n) 맞추면 새 숫자로 갈려 위치 암기를 막는다. 라벨·블록을 JS가 만들어 Astro 스코프 스타일이 안 붙는 문제는 .tt 접두사 전역 스타일로, onclick 전역 의존은 IIFE + addEventListener로 해결.
- ⚔️메인
기록: 슬래시 봉인술을 두루마리에 새기다
URL 뒤 슬래시 정리 작업을 블로그 글 009로 한/영 두 벌 발행 — 왜 슬래시를 통일해야 하는지, 없는 페이지까지 301로 넘기면 생기는 '301 후 404', run_worker_first 함정, canonical/hreflang을 같은 슬래시로 맞추는 abs() 헬퍼, 재발 방지 스모크 테스트까지. 지난 영어 대이주 글과 상호 링크로 묶었다.
- 📜사이드
봉인: 주소 요괴 재림 방지진
같은 함정에 두 번 빠지지 않도록 방지진을 깔았다 — `scripts/check-urls.sh` 스모크 테스트(슬래시 301·구 URL 301·정적 자산·404를 실제 요청으로 검증, `npm run check:urls`)와 CLAUDE.md의 URL 규칙 절. 워커 수정 시 함수 직접 호출이 아니라 wrangler dev를 거쳐 확인하라는 규칙도 배포 체크리스트에 못박았다.
- 🗡️토벌
토벌: 두 얼굴의 주소 요괴
같은 글이 슬래시 유무로 두 주소처럼 보이던 문제 토벌 — 사이트맵(슬래시)과 hreflang(슬래시 없음)이 어긋나 있었고 canonical 태그는 아예 없었다. Base.astro에 canonical 추가 + hreflang을 슬래시 형태로 정규화하고, worker가 슬래시 없는 주소를 301로 넘기도록 했다(기존엔 ASSETS가 307 임시 리다이렉트). 구 한국어 글 301도 슬래시까지 붙여 리다이렉트 체인 제거. 배포 후 301이 안 먹길래 원인 추적 — Cloudflare 정적 자산이 워커보다 먼저 응답하고 있었다. wrangler.jsonc에 run_worker_first를 켜서 워커가 먼저 받도록 하고, 없는 주소는 301 대신 그대로 404가 되게 존재 확인을 붙였다.
- 📜사이드
정비: 제목 각인식, How-to의 인장
블로그 글 8편 전부의 제목을 한/영 모두 how-to 형태로 통일 — 영어는 "How to ...", 한국어는 "~하는 법". 슬러그·translationKey는 색인 유지를 위해 그대로 뒀다.
- 📜사이드
기록: 대이주와 여름 신곡의 하루
블로그 007편 발행(한/영) — 사이트 영어 전면 개편, 자판기 세계화, 얼씨구 트로트 여름 신곡, Suno 자동화 삽질을 하루 기록으로 정리.
- 🗡️토벌
시도: 자동화 골렘, 1패
Claude in Chrome로 Suno 곡 생성 자동화 첫 시도(Advanced 모드·v5.5 고정). 1번곡은 Create 성공(크레딧 831→821), 2번곡에서 한글 입력 글자 깨짐·폼 헤맴으로 수동 복붙보다 느려 중도 포기. 재시도 여지는 남김.
- 📜사이드
레시피 각인: 제목과 무대의 규칙
trot-song-producer 스킬에 규칙 2개 추가·패키징 — ① 메인 제목 미지정 시 진행 전 확인(썸네일에 크게 배치), ② 가수 스타일링·무대를 계절·시기·무드에 맞춰 구성(미지정 시 확인).
- 📜사이드
여름 원정: 더위 날리는 트로트 10곡
얼씨구 트로트 신곡 배치 제작·업로드 — 콘셉트(20~30대 여성·파워풀 보컬·신나는 사랑 트로트), 10곡 트랙리스트(비유형 4 + 후킹형 6) 작사·Suno styles 태그, Higgsfield 여름 워터페스티벌 썸네일까지. 47분 메들리 유튜브 업로드 완료.
- 🗡️토벌
토벌: 숫자 몬스터
자판기 가사에 숫자(알9099아)가 섞여 나오는 것을 라이브 테스트에서 발견 — 이물질 검출·세척 필터에 숫자(0-9)를 추가해 토벌.
- ⚔️메인
자판기 골렘, 세계 무대로
트로트 자판기 K컬처 체험판 개조 — /trot은 영어 UI(트로트 장르 소개 포함), /kr/trot은 한국어 유지. 가사는 한국어 그대로 뽑되 영어판엔 국립국어원 로마자(worker에서 수학적 변환)와 AI 영어 뜻풀이를 줄마다 3단으로 표시. TrotMachine 공용 컴포넌트 신설, /api/trot에 lang=en 모드.
- ⚔️메인
대이주: 영어 대륙이 수도가 되다
사이트 전면 개편 — 영어가 루트(/), 한국어는 /kr/로 이주. 블로그 6편 전부 영어로 재작성해 이중언어 짝 구조(translationKey + hreflang + 글 상단 언어 전환 칩) 구축, 퀘스트 로그 39건 영어화, Base 레이아웃·카테고리 이중언어화, 구 URL 301 리다이렉트.
- 📜사이드
이세계 칭호 번역서
RPG 칭호(rpg.js TITLES)를 ko/en 이중 배열로 확장. summarize/levelFromXp가 lang을 받아 영어 홈에선 영어 칭호(룬 조각가→Rune Carver 등)를 표시 — 영어 메인에서 한국어 잔재 제거. quests 페이지는 한국어 유지.
- 🗡️토벌
토벌: 하강부를 삼킨 그라디언트
영어 히어로 'playground.'의 g·p·y 하강부와 마침표가 잘리던 버그 수정. background-clip:text가 박스 밖 하강부를 못 칠하던 문제라 h1에 padding-bottom 추가, 영어 히어로 폰트도 살짝 줄여 넘침 완화.
- ⚔️메인
차원문: 영어의 땅으로
홈에 한/영 이중언어 도입. index.astro를 공용 Home.astro 컴포넌트 + src/i18n/home.js 문구 사전으로 리팩터링, /en/ 영어 랜딩 신설, hreflang·우상단 KR/EN 토글 추가. 영어판 경제 브리핑은 미국 시장 하나만 전체 폭으로, worker /api/news에 lang=en(AI 요약 없이 원문 헤드라인) 모드 추가.
- 📜사이드
모험가 길드에 구인 공고
About에 'What I'm looking for' 섹션 추가 — 희망 직군·산업·근무지·워크 퍼밋·바이링구얼 강점 5줄 정리.
- 📜사이드
서사에 교훈 한 줄
About Spotlight를 Purpose→Process→Result→Lesson 4단 2×2 그리드로 확장하고, QA(배터리팩 소재) 경력에도 스포트라이트 추가.
- 📜사이드
초상화에 서사 한 폭
About 페이지에 Spotlight 섹션 추가 — 마케팅 시절 원가·판가 업무를 Purpose → Process → Result 3단 플로우 카드로 도식화.
- 📜사이드
연대기: 이틀의 정비 기록
블로그 글 발행 — 카테고리 서랍·홈 개편·자판기 A/S·우체통 개설·mailto 토벌까지 이틀 치 사이트 업데이트 총정리.
- 🗡️토벌
토벌: mailto 몬스터
Plash 등 mailto: 미지원 환경에서 Email me 버튼이 'unsupported URL' 오류를 뱉는 문제 토벌 — 클릭 시 주소를 클립보드에 복사하고 'Copied ✓' 피드백을 주는 방식으로 교체.
- 📜사이드
전서구 우체통 개설
연락 창구 확장 — Cloudflare Email Routing 별칭 contact@sonnyplot.com 개설, About 페이지에 이메일 버튼·Get in touch 문구 추가.
- 🗡️토벌
토벌: 한자 몬스터
자판기 가사에 한자·영어가 섞여 나오는 문제 토벌 — 순수 한글 규칙 명시, 검출 시 재생성 + 세척 필터, 후킹 시작 줄 최대 3줄 규칙 추가.
- 📜사이드
연대기: 자판기의 탄생
블로그 글 발행 — 트로트 자판기 제작 기록.
- ⚔️메인
자판기 골렘 소환
첫 번째 실험 '트로트 자판기' 완성 — Workers AI에 얼씨구 작사 규칙을 이식한 /api/trot + /trot 페이지, 홈 실험 카드 교체.
- 📜사이드
연대기: 얼씨구 한 가락
블로그 글 발행 — 얼씨구 트로트 채널 소개·운영 파이프라인 기록.
- 📜사이드
연대기: 숲의 노래
블로그 글 발행 — Sylvamoor 채널 소개·운영 파이프라인 기록.
- 📜사이드
광장에 음유시인 부스 설치
홈 개편 — 포스트잇+RPG 상태창을 히어로 우측에 컴팩트 스택으로, 그 자리에 유튜브 채널 카드 2개(Sylvamoor·얼씨구 트로트) 배치.
- 📜사이드
서고에 분류 서랍 설치
블로그 카테고리 시스템 구축 — 실험·요리·유튜브·음악·AI 아트·미국 생활 분류, 목록 필터 탭과 글 카테고리 칩 추가.
- 📜사이드
두 번째 연대기
블로그 2호 발행 — 사이트 오픈 후 하루 동안의 모험기 (RPG 각성, 대시보드화, 삽질 토벌전, 검색엔진 입주 신고).
- 📜사이드
시간의 각인
블로그 글 날짜에 발행 시각(24시간제, 뉴욕 기준)까지 표시. 첫 글의 진짜 발행 순간(01:25)을 git 기록에서 발굴해 새겼다.
- 📜사이드
구글 탐색자의 지도
sitemap 자동 생성(@astrojs/sitemap)과 robots.txt 추가. 구글 봇이 사이트 전체를 찾아갈 수 있는 지도가 생겼다 — 애드센스 원정의 첫 준비물.
- 📜사이드
하늘의 기운을 읽는 자
방문자 지역의 날씨·기온·일출일몰·달 위상에 맞춰 랜딩 분위기가 은은하게 변하는 앰비언트 시스템. Cloudflare 위치정보 + Open-Meteo로 /api/ambient 구축, 새벽·황혼·밤 하늘 틴트와 비·눈 입자, 헤더 날씨 표시줄 추가.
- 📜사이드
관문과 두 개의 시계탑
랜딩에 구글·네이버 검색창(결과는 새 탭으로) 추가, RPG 상태창 오른쪽에 뉴욕·서울 실시간 시계 카드를 2:1:1 그리드로 배치. 시계는 1초마다 갱신되고 낮/밤 아이콘 표시.
- 📜사이드
노란 기억의 부적
히어로를 반으로 갈라 왼쪽에 카피, 오른쪽에 포스트잇 위젯 배치. 접힌 모서리·공책 줄 디자인, 입력하면 localStorage에 자동 저장(디바운스 400ms)되고 '저장됨 ✓' 표시.
- 📜사이드
달의 서고: 한 달을 한눈에
뉴욕·서울 시계를 한 카드로 합본하고 그 자리에 미니 달력 추가 (상태창-달력-시계 순). 달력은 방문자 로컬 기준, 오늘 강조·일/토 색상, 자정 넘으면 자동 갱신.
- 📜사이드
대오 정렬: 세 번째 파수꾼
공포·탐욕 지수를 게이지에서 다른 지수와 동일한 티커 카드(점수·등급·1개월 미니차트)로 재단장하고 한국 시장 카드 3번째 자리에 배치. 양쪽 카드 모두 지수 3개로 대칭.
- 📜사이드
감정의 나침반: 공포와 탐욕
CNN 공포·탐욕 지수를 미국 시장 카드에 추가. Worker가 지수를 받아오고, 그라데이션 게이지에 현재 점수·어제/1주/1달 전 수치 표시.
- 🗡️토벌
토벌: 깨진 문자 몬스터
미국 브리핑 헤드라인에 — 같은 HTML 엔티티가 그대로 노출되던 버그 토벌. 원인은 RSS의 이중 인코딩 — 디코딩을 두 번 돌려 해결.
- 📜사이드
진영 재편성: 두 대륙의 막사
흩어져 있던 시세 티커를 각 시장 브리핑 카드 안으로 편입. 미국(나스닥·S&P·비트코인)/한국(코스피·환율) 진영으로 나누고, 데스크톱에선 두 카드를 좌우 2열로 배치.
- 📜사이드
두 대륙의 전령
브리핑을 미국/한국 시장 섹션으로 분리. 각자 독립 갱신, 주말엔 금요일 마감판 유지. 미국 뉴스는 영어 헤드라인을 AI가 한국어로 요약.
- 📜사이드
전령의 도착: 경제 브리핑
하루 2번(한국·미국 장 마감 후) AI가 경제 헤드라인을 골라 요약하는 브리핑 시스템. Workers AI 첫 도입.
- ⚔️메인
외형 각성
레벨에 따라 사이트의 모습이 진화하는 이펙트 시스템. Lv.5 빛 입자를 시작으로 숨쉬는 글로우, 룬 각인, 오로라, 별하늘이 잠들어 있다.
- ⚔️메인
영혼의 계약: 레벨 시스템
사이트 자체가 RPG 캐릭터가 되었다. 상태창과 퀘스트 로그 구축.
- 📜사이드
모험가의 초상
About 페이지 공개 — 세상에 이름을 알렸다.
- 🗡️토벌
토벌: 가짜 데이터 몬스터
야후가 보낸 코스피 불량 틱(+6% 유령 스파이크)을 필터로 처치.
- 📜사이드
흐름을 읽는 자
시세 카드에 1개월 스파크라인 차트 추가.
- 📜사이드
시장의 눈
실시간 시세 위젯 구현 (나스닥·S&P·코스피·환율·비트코인). 사이트에 첫 백엔드가 생겼다.
- 📜사이드
첫 번째 연대기
첫 블로그 글 발행 — 이 사이트가 만들어진 이야기.
- ⚔️메인
기록의 서고 건설
Astro 블로그 구축. 실험 기록을 쌓을 서고가 열렸다.
- ⚔️메인
마법 회로 연결
GitHub 자동배포 파이프라인 구축 — push하면 30초 뒤 세상에 반영된다.
- ⚔️메인
대지에 깃발을 꽂아라
sonnyplot.com 도메인 연결과 첫 배포. 놀이터의 탄생.