퀘스트 로그
이 사이트의 모험 일지. 뭔가 만들 때마다 경험치가 쌓인다.
- 📜사이드
사전의 국경을 넓히다
레시피 사전을 한식 전용에서 한식+일식으로 확장하고 삿포로 스프카레를 발행. 현지 이름 필드를 nativeName으로, 마트 필드를 asian 계열로 바꾸고 cuisine 필드를 새로 만들어 나라 필터·배지·schema.org recipeCuisine이 한 데이터로 돌아가게 했다. 나라 필터는 두 나라 이상일 때만 나오도록 해서 한 나라뿐일 땐 예전 화면 그대로다.
- 📜사이드
주문서를 평민의 말로 옮기다
토스 카톡 알림 글(012)을 코드 없는 판으로 전면 재작성. 코드블록 6개를 전부 걷어내고 그 자리에 AI한테 실제로 던진 한국어 문장을 넣었다. 제목도 '(클로드코드+API)'로 바꾸고 서두를 3줄로 줄여 1단계부터 바로 시작하게 구성. 원글의 crontab 한 줄은 실제 세팅이 아니어서(진짜는 클로드 코드 예약 실행) 사실 정정.
- 📜사이드
손안의 수정구
아이폰 홈 화면에서 sonnyplot을 보는 Scriptable 위젯 제작. 워커에 /api/widget 엔드포인트를 새로 파서 시세·공포탐욕 지수·시장 브리핑을 호출 한 번에 묶고(위젯은 네트워크 왕복이 곧 렌더 지연), 위젯 스크립트는 사이트가 호스팅해 push만으로 폰이 갱신되게 했다. 소·중·대 세 크기, 오프라인이면 마지막 성공 응답 표시.
- 📜사이드
아침마다 장부를 물어오는 전서구
토스증권 오픈API와 카카오톡으로 매일 아침 포트폴리오 수익률 알림을 받는 자동화 기록을 블로그 글로 발행. 두 달간 종목별 그래프 7장에서 요약 카드 1장까지 줄여온 과정과, 허용 IP·동의항목 누락·카톡 좌우 크롭 세 함정의 해결법을 남겼다. 토스증권 계좌는 한국 거주자만 열 수 있어 이중언어 예외로 한국어 단독 발행.
- 📜사이드
첫 번째 실전 요리
레시피 사전의 첫 실전 레시피 발행 — 지코바식 닭다리살 양념구이. 추측으로 쓴 샘플 4개는 전부 버리고, 직접 해본 요리 하나로 다시 시작했다.
- ⚔️메인
부엌의 서고를 열다
한식 레시피 사전 /recipes 개설. 블로그와 별도 컬렉션으로 색인·필터·상세 페이지를 만들고, 재료는 구조화 데이터로 관리해 schema.org Recipe까지 자동 출력. 사진과 재료 출처는 직접 해본 것만 쓰기로 하고 선택 필드로 자리만 비워둠.
- 🗡️토벌
토벌: 눌러도 아무 일이 없는 허수아비 칸
경매장 장부의 '적기' 화면에서 '누르세요'라고 적힌 칸을 눌러도 아무 반응이 없었다. 원인은 고르는 판이 칸 아래에 따로 붙어 있고, 첫 화면에서는 그 판이 이미 펼쳐진 상태였다는 것 — 누르면 그 판만 바뀌니 이미 열려 있는 칸을 누르면 화면이 그대로였다. 게다가 사람이 한 명도 없는 첫 사용에는 그 판에 작은 점선 버튼 하나뿐이라 어디를 눌러야 할지 알 수 없었다. 칸을 누르면 창이 뜨도록 바꿨고, 판 사람을 고르면 금액 창이, 금액을 확인하면 산 사람 창이 저절로 이어지게 했다. 사람이 없을 때는 창 안에 '아직 등록된 사람이 없습니다, 아래를 눌러 이름을 적으세요'와 큰 버튼을 띄운다.
- ⚔️메인
제작: 시골 경매장의 셈을 대신하는 장부
동네 현장 경매장용 정산 장부 웹앱을 만들어 /auction/에 올렸다. 이 바닥의 특징은 같은 사람이 물건을 팔기도 하고 사기도 한다는 것 — 그래서 마감 때 사람마다 판 값과 산 값을 상계해야 하고, 그 계산 때문에 엑셀 다루는 서기를 따로 쓴다. 경매 한 건이 끝날 때마다 판 사람·금액·산 사람 세 가지만 누르면 나머지는 전부 자동으로 떨어지게 만들었다. 사람별 명세서, 내줄 돈/받을 돈 두 갈래 마감 화면, 덜 받으면 자동으로 쌓이고 다음 경매 정산에 저절로 얹히는 외상 장부까지. 서버 없이 파일 하나로 돌아가서 인터넷이 끊겨도 쓸 수 있고, 백업은 파일로 내려받는다. 컴맹 사용자를 전제로 타이핑을 0으로 만들었다 — 이름은 눌러서 고르고 금액은 숫자판, 확인 팝업은 없앴다.
- 📜사이드
기록: v0부터 v13까지, 두루마리 한 장에
사과게임 제작기를 블로그 글 011로 한/영 두 벌 발행 — 버전 하나하나(리필 도입, 판 축소, 셔플·힌트를 한 번만으로 제한, alert()를 확인창으로 교체, 시간 만료 시 보너스 제안, 숫자 가중치 조정, 시작 커버·극적 타이머, 보상 배율 인상)를 순서대로 짚었다. 화면 숫자와 실제 값이 어긋난 버그, 알림창 뒤에서 타이머가 몰래 돌던 버그, 빌드는 되는데 배포만 실패했던 삽질까지 담았다. 실험 페이지에 이 글로 이어지는 프로모 박스도 달았다.
- 🗡️토벌
토벌: 화면과 실제 값이 어긋나는 유령
개발 중 실제로 잡은 버그 두 건. ① 지운 칸의 리필값(합계 계산용)이 화면 숫자보다 먼저 바뀌어서, 팝 애니메이션 도중 드래그하면 화면엔 옛 숫자가 보이는데 합계는 새 숫자로 계산되는 불일치가 있었다 — 화면 갱신과 값 갱신을 같은 순간에 묶어서 해결. ② 알림창이 연쇄로 뜨는 경우(막힘→셔플 실패→종료 알림) 첫 알림의 확인 콜백이 타이머를 무조건 재개시켜서, 두 번째 알림이 떠 있는 동안에도 타이머가 몰래 돌아가는 버그가 있었다 — 확인 직후 다른 알림이 새로 떴는지 검사해서, 떠 있으면 재개를 그 알림에 넘기도록 수정.
- ⚔️메인
제작: 시간을 사냥하는 사과게임
실험 #3 사과게임 10 만들기를 /apple-game·/kr/apple-game에 올렸다. 드래그한 사각형 안 숫자 합이 정확히 10이면 사라지는 국민게임 방식. 지운 자리는 바로 리필돼 조합 고갈로 조기 종료되던 문제를 없앴고, 대신 셔플은 게임당 딱 1번(막혔을 때 자동 제안, 확인 눌러야 실행), 힌트도 자동이 아니라 버튼을 눌러야 한 번만 보여준다. 시간이 다 됐을 때도 셔플 기회가 남아있으면 종료 대신 보너스 시간(+15초)을 제안한다. 칸 지울 때마다 시간도 보상해서(칸당 0.6초) 빠르고 정확하게 하면 실제로 타이머를 버틸 수 있게 만들었다. 9처럼 큰 숫자는 1과만 짝지어져 주변을 자주 "먹통"으로 만드는 문제는 낮은 숫자가 더 자주 나오게 가중치를 줘서 완화했다. 시작 전엔 판을 가려두고 "시작" 버튼을 눌러야 공개되고, 타이머는 화면 중앙에 크게 두고 20초부터 경고색, 10초부턴 심장박동처럼 커지며 매초 째깍 소리가 난다.
- 📜사이드
기록: 세 번 갈아엎은 설계를 두루마리에
구구단 드롭 제작기를 블로그 글 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 도메인 연결과 첫 배포. 놀이터의 탄생.