시참 티어 게임 다음 페이지용 공간을 준비해두었습니다.

DAME'S MUSIC ARCHIVE

다메의노래책

부르고 싶은 노래를 가수·곡명으로 검색하고
종류, 장르, 난이도, 자신감으로 골라보세요.

0SONGS
0ARTISTS
SONG SEARCH
종류로 빠르게 찾기 클릭해서 필터
다메 보러 가기

Google Sheet에서 수정한 내용이 이 페이지에 반영됩니다.

MUSIC LIST

오늘은 뭘 부를까?

최신 데이터 가져오는 중...
0곡

DAME SONGBOOK · SITE INFORMATION

다메의 노래책은 이렇게 만들어졌어요

현재 사이트의 데이터 흐름과 V1부터 V9.1까지의 주요 변경 기록을 한 번에 볼 수 있습니다.

01

사이트 전체 구조

이미지 크게 보기 ↗
다메의 노래책 프론트엔드, Google Sheets, Google Apps Script, Cloudflare의 관계를 설명하는 구조도
Google Sheets

노래의 원본 데이터베이스. 가수, 곡명, 종류, 장르, 난이도, 자신감, MR, 앨범 이미지 등을 관리합니다.

Google Apps Script

스프레드시트와 홈페이지 사이의 API 역할. 공개 목록 조회와 관리자 추가·수정·삭제 요청을 처리합니다.

Cloudflare

damedakki.com의 HTML·CSS·JavaScript·이미지를 제공하는 프론트엔드 호스팅 영역입니다.

브라우저

검색·필터·랜덤곡·테마를 처리하고 localStorage 캐시를 사용해 노래책을 빠르게 먼저 보여줍니다.

Google Sheets↔ Apps Script API↔ damedakki.com↔ 사용자
02

패치노트 · V1 → V9.1

주요 변경사항 기준
V1

첫 노래책

  • 정적 HTML 기반의 기본 노래책 화면 구축
  • 가수·곡명 중심의 노래 목록과 기본 검색/필터 구조 시작
V2

다메 브랜딩

  • 다메 데뷔 배너와 캐릭터 비주얼 적용
  • 남색·보라·핑크 중심의 DAME SONGBOOK 분위기 정립
V3

Google Sheets 연동

  • Google Apps Script 공개 API를 통해 스프레드시트 데이터를 불러오도록 변경
  • 앨범 이미지 컬럼을 사용하고 노래 데이터가 웹에 자동 반영되도록 구성
V4

상단 내비게이션

  • DAME / 다메의 노래책 / 시참 티어 게임 / 랜덤곡 구조 추가
  • 종류별 빠른 필터 카드의 가독성과 크기 개선
V5

곡 상세보기와 랜덤곡

  • 노래 카드를 누르면 상세 팝업이 열리도록 추가
  • 룰렛 느낌의 랜덤곡 추천 기능 추가
  • 초기 즐겨찾기 기능은 제거해 화면을 단순화
V6

앨범 커버 체계 정리

  • MR/YouTube 썸네일 자동 대체를 제거하고 앨범 이미지 컬럼만 사용
  • 이미지가 없을 때 DAME SONGBOOK 기본 커버 표시
  • 앨범 이미지 lazy-load 및 fade-in 적용
V6.1

빠른 로딩과 동기화 표시

  • localStorage 캐시를 이용해 저장된 노래책을 먼저 표시
  • 최신 데이터 가져오는 중 / 반영됨 / 사용 중 상태 표시 추가
  • Apps Script 60초 CacheService를 사용해 응답 속도 개선
V7

관리자 CRUD

  • 웹에서 노래 추가·수정·삭제 가능
  • 강제 새로고침 버튼과 관리자 모드 추가
  • 곡 ID(UUID)와 수정일 컬럼을 도입해 곡을 안정적으로 식별
V7.1

4자리 PIN

  • 관리자 인증을 정확히 4자리 숫자 PIN 방식으로 단순화
V7.2

관리자 세션

  • 초기 PIN fallback 도입 및 같은 탭에서는 관리자 상태 유지
  • 탭을 닫으면 관리자 세션이 종료되도록 sessionStorage 사용
V7.3

쓰기 요청 안정화

  • Apps Script hidden iframe POST bridge의 X-Frame 처리 수정
  • window.top.postMessage 기반으로 관리자 저장 요청의 timeout 문제 해결
V7.4

저장 체감속도 개선

  • 서버 저장 성공 직후 화면과 로컬 캐시를 즉시 갱신
  • 전체 Google Sheet 재동기화는 백그라운드에서 진행
V8

우주 테마 리디자인

  • 남색→인디고→보라 계열의 밤하늘 HERO로 전면 비주얼 개편
  • 상단 관리자/랜덤 버튼의 데스크톱 배치와 반응형 폭 개선
V8.1

UP / DOWN 아트 도입

  • UP 밤하늘 이미지를 HERO 배경으로 적용
  • DOWN 도시 야경 이미지를 페이지 전환 비주얼로 도입
V8.2

DOWN 위치 수정

  • DOWN 도시 배너를 노래 목록 위가 아닌 노래 목록 전체 아래로 이동
  • 푸터까지 짙은 남색으로 연결
V8.3

레이아웃 확장

  • 노래 목록 최대 폭 확대 및 넓은 화면 4열 카드 적용
  • HERO 콘텐츠를 키우고 높이는 줄여 빈 공간 감소
  • 노래 목록과 DOWN 사이 전환 효과 개선
V8.4

읽기 전용 /embed

  • 게시물/iframe용 /embed/ 페이지 추가
  • 관리자·추가·수정·삭제 코드를 제외한 읽기 전용 노래책 제공
V8.5

랜덤곡 가독성

  • 상단 랜덤곡 버튼 글자 크기 확대
V8.6

상단 메뉴 연결

  • 관리자와 랜덤곡 글자 크기 균형 조정
  • 시참 티어 게임을 tier.damedakki.com 으로 연결
V8.7

다크모드

  • 원형 테마 토글과 우주형 다크모드 추가
  • 다크 전용 캐릭터 배너 및 글라스 카드/필터 스타일 적용
  • 선택 테마를 브라우저에 저장
V8.8

움직이는 우주 실험

  • 다크모드를 최초 방문 기본값으로 변경
  • animated WebP 반복 배경을 시도
  • 환경에 따라 hero-up.png가 반복되는 문제가 발견되어 이후 방식 재설계
V8.9

연속 우주 배경 실험

  • 큰 이미지 반복 대신 CSS 기반 연속 우주색 배경으로 변경
  • 화면 여러 높이에 CSS 별똥별 애니메이션 추가
V9.0

픽셀 매칭 배경

  • UP과 DOWN의 실제 경계 픽셀을 이용한 전환 이미지를 생성
  • 실제 animated WebP를 별도 DOM 레이어로 고정해 배경 교체 문제 방지
  • UP → transition → animated WebP → transition → DOWN 구조 확립
V9.1

사용성 UI 정리

CURRENT BASE
  • 랜덤곡을 검색 패널 아래의 ‘오늘 뭐 부를지 모를 때 누르는 버튼’으로 이동
  • SOOP 방송국으로 연결되는 ‘다메 보러 가기’ 버튼 추가
  • 테마 토글을 아이콘 대신 ‘밝음 모드 / 어둠 모드’ 텍스트로 변경
  • 노래 추가·새로고침·동기화 상태 UI 확대
  • 관리자 PIN 안내를 ‘PIN 4자리는 다메 메일에 있어요.’로 변경

DAME'S RANDOM PICK

오늘은 이 노래 어때?

▼
랜덤곡
✦ 버튼을 누르면 시작합니다 ✦
다메의 노래책에서 한 곡을 골라볼게요.

ADMIN MODE

관리자 모드

PIN 4자리는 다메 메일에 있어요.

DAME SONGBOOK ADMIN

노래 추가

ADD