📖 Dear My Bear (oong의 비밀 일기장)
비밀번호 잠금 기능, 서버 저장 기반 일기 작성, 커스텀 기념일 자동 계산 기능이 포함된 아기자기한 감성의 웹 다이어리 프로젝트입니다.
배포 주소: https://oong-diary.vercel.app
🌟 주요 기능 (Key Features)
- 🔒 진입 잠금 화면: 사이트 접속 시 자물쇠 커버가 우선 표시되며, 곰발자국을 눌러 비밀번호(자릿수 박스 입력)를 맞춰야 메인 달력 열람 가능
- 📅 월간 달력 기반 일기장: 연/월 이동이 가능하며, 일기가 작성되거나 기념일이 있는 날짜에 스티커 뱃지(🐾 공개글 / 🔒 비밀글) 표시. 월마다 다른 속지(배경 이미지) 자동 적용
- ✏️ 날짜당 일기 1개: 날짜를 클릭하면 보기 화면이 먼저 뜨고, 연필 아이콘으로 작성/수정. 일기가 없는 날짜도 좌우 이동(PC: 화살표, 모바일: 스와이프)으로 자유롭게 넘겨볼 수 있음
- 🎉 커스텀 기념일 자동 계산:
- 매년 반복 생일
- 휴 첫 방송일(2025/06/21) 기준 100일 단위 & 매년 N주년 자동 표시
- 👑 숨겨진 관리자 인증: 달력 하단 곰 그림을 0.6초 길게 누르면 관리자 인증 모달 진입. 인증 시 하단에 "전체 글 관리"·"휴지통" 아이콘이 나타남
- 전체 글 관리 화면에서 글마다 공개/비밀 상태를 토글로 전환 (글쓰기 화면에는 공개 여부·작성자 선택 항목 없음)
- 삭제는 관리자만 가능, 삭제된 글은 휴지통으로 이동 후 복구/영구삭제 가능
- ☁️ 서버 저장 (Vercel KV): 브라우저
localStorage가 아닌 서버리스 API(/api/diary) + Vercel KV(Upstash Redis)에 저장되어, PC·모바일 등 어떤 기기로 접속해도 같은 일기 데이터가 보임
📂 프로젝트 구조 (Directory Structure)
oong-diary/
├── index.html # 웹사이트 레이아웃 및 마크업 구조
├── style.css # 종이 노트를 연상시키는 스타일 및 모달 디자인
├── script.js # 비밀번호 인증, 달력 랜더링, 기념일 계산, 서버 API 연동
├── api/diary.js # 일기 데이터 조회/저장 서버리스 함수 (Vercel KV)
├── package.json # @vercel/kv 의존성
├── bg_1.png ~ bg_12.png # 월별 달력 속지 이미지
├── cover.jpg, paws.png, bear.png # 표지·발자국·곰 일러스트
└── README.md # 프로젝트 설명 문서
🛠️ 기술 스택 (Tech Stack)
- HTML5 / CSS3 / JavaScript (ES6+)
- Google Fonts (Gaegu Font)
- Vercel — 정적 사이트 + 서버리스 함수 배포
- Vercel KV (Upstash Redis) — 일기 데이터 서버 저장소
🚀 실행 및 사용 방법 (How to Use)
- 배포된 사이트(https://oong-diary.vercel.app) 접속, 또는 저장소를 클론해
index.html을 로컬 서버로 실행
- 곰발자국을 눌러 표지 비밀번호(자릿수 박스) 입력
- 달력에서 날짜를 클릭해 일기 보기/작성
- 달력 하단 곰 그림을 0.6초 길게 눌러 관리자 인증하면 전체 글 관리·휴지통 이용 가능
(입장/관리자 비밀번호는 보안상 이 문서에는 기재하지 않습니다.)
📝 개발 기록 및 히스토리
- 2026-09-09: 프로젝트 초기 기획 및 HTML/CSS/JS 기능 구현, GitHub 레포(
webdiary) 생성 및 첫 배포
- 2026-09-13: GitHub 저장소를 Vercel과 연동해
oong-diary.vercel.app으로 배포, 관리자 UI를 상단 탭 → 하단 아이콘 버튼으로 개편
- 2026-09-13~14: 일기 데이터를
localStorage에서 Vercel KV(서버) 저장으로 전환해 기기 간 데이터 공유 지원
- 2026-09-14~16: 관리자 진입 방식을 버튼 → 곰 그림 롱프레스(숨김 진입)로 변경, 달력/보기 화면 디자인을 미니멀하게 정리(점선 제거, 여백 확장, 톤다운된 색상)
- 2026-09-16: 일기 데이터 모델을 "날짜당 여러 글(작성자 구분)" → "날짜당 글 1개" 로 단순화, 공개/비밀 전환을 관리자 "전체 글 관리" 화면으로 이동
- 2026-09-16~17: 일기 보기 화면에 이전/다음 날짜 이동(PC 화살표 + 모바일 스와이프) 추가, 모달 높이를 화면 크기에 맞춰 고정하고 내부 스크롤 적용
- 2026-09-17: 스푼캐스트 방송 댓글(엑셀, 3~9월 156일치)을 날짜별로 파싱해 서버 데이터에 일괄 반영
- 2026-09-17: 브라우저 기본
prompt() 비밀번호 입력창을 자릿수 박스(OTP 스타일) 커스텀 모달로 교체, 월별 달력 속지 이미지(1~12월) 추가
🛠️ 주요 트러블슈팅 및 개선 사항 (Troubleshooting)
1. 모바일 및 PC 화면별 표지 이미지 반응형 비율 유지 문제
- 문제 상황: 화면 크기가 변함에 따라 표지 이미지(
cover.jpg)가 과도하게 확대되거나 옆으로 찌그러지는 현상, PC 접속 시 표지 하단이 잘리는 스크롤 이슈 발생
- 원인 분석:
.diary-container의 가로 폭이 퍼센트(%) 단위로만 설정되어 넓은 화면에서 끝없이 확장됨
- 해결 방법:
.diary-container에 max-width 제약을 부여하고, .lock-screen에 aspect-ratio: 3 / 4.3;을 적용해 해상도와 무관하게 원본 비율 유지
2. 독립적인 애니메이션을 위한 발자국 요소를 표지 위에 정밀 배치
- 문제 상황: 표지 배경과 곰발자국이 하나로 합쳐져 있어 발자국만 튀는 애니메이션 적용 불가
- 해결 방법: 발자국을
paws.png 투명 PNG로 분리하고 position: absolute + 퍼센트 위치 지정으로 표지 위에 정밀 배치, @keyframes bouncePaw로 독립 애니메이션 구현
3. HTML 시작 태그 누락으로 인한 레이아웃 붕괴 문제
- 문제 상황: CSS를 수정해도 다이어리 카드 틀이 적용되지 않고 표지가 전체 화면으로 확대됨
- 원인 분석:
<div class="diary-container"> 시작 태그가 누락되어 닫는 태그만 존재하는 DOM 오류
- 해결 방법: 시작 태그를 복구해 CSS가 정상 바인딩되도록 수정
4. 브라우저 스타일 캐싱(Caching) 이슈
- 문제 상황:
style.css 수정 후에도 브라우저 캐시 때문에 변경 사항이 즉시 반영되지 않음
- 해결 방법:
<link rel="stylesheet" href="style.css?v=N"> 형태로 버전 쿼리를 붙여 최신 스타일시트를 강제로 불러오도록 처리
5. 로컬 git 저장소가 홈 디렉토리 전체로 잡혀 있던 문제
- 문제 상황: 프로젝트 폴더(
Hyuwebsite)에 자체 .git이 없고, 상위의 C:\Users\quddk 홈 디렉토리 전체가 git 저장소 루트로 잡혀 있어 완전히 다른 팀 프로젝트(AI-HealthCare-03/AH_03_01) 히스토리와 뒤섞여 있었음
- 위험성: 이 상태로 push하면 Desktop·문서 등 개인 파일이 함께 올라갈 위험
- 해결 방법:
Hyuwebsite 폴더 안에 독립된 새 git 저장소를 생성(git init)하고, 웹사이트 파일만 커밋 후 webdiary 레포로 remote 연결
6. Vercel 도메인 이름에 https://를 포함해 등록 실패
- 문제 상황: 프로젝트 도메인을
oong-diary.vercel.app으로 바꾸는 과정에서 "Cannot add invalid domain name" 오류 발생
- 원인 분석: 도메인 입력칸에 프로토콜(
https://)까지 함께 입력됨 — Vercel은 호스트네임만 받음
- 해결 방법: 입력칸에
oong-diary.vercel.app처럼 호스트네임만 남기고 재입력
7. Vercel KV 연동 직후 환경변수가 반영되지 않아 API 500/실패
- 문제 상황: Upstash Redis(Vercel Marketplace)를 프로젝트에 연결했지만, 연결 시점보다 먼저 배포된 버전이 Production으로 떠 있어
/api/diary가 환경변수(KV_REST_API_URL 등)를 못 찾는 상태였음
- 해결 방법: Deployments 탭에서 최신 배포를 Redeploy해 새 환경변수를 반영
8. 비밀번호 입력 직후 서버 데이터 로딩 실패(일시적)
- 문제 상황: 재배포 직후 곧바로 접속하면 "서버에서 일기를 불러오지 못했습니다" 알림이 한 번 뜸
- 원인 분석: 재배포 직후 함수/DB 연결이 완전히 준비되기 전에 요청이 들어간 일시적 현상
- 해결 방법: 새로고침 시 정상 동작 확인 — 별도 코드 수정 없이 해결됨(일시적 콜드스타트)
9. 비밀번호 입력 후 빈 달력이 잠깐 보이는 깜빡임
- 문제 상황: 비밀번호를 맞추면 표지가 사라지고 배경·날짜 없는 빈 달력이 1~2초 보인 뒤에야 제대로 된 달력이 나타남
- 원인 분석: 표지를 먼저 숨기고 화면을 보여준 다음에 서버에서 데이터를 불러와 렌더링하는 순서였어서, 로딩 중인 빈 상태가 그대로 노출됨
- 해결 방법: 서버 데이터 로딩(
loadDataFromServer)과 달력 렌더링을 먼저 끝낸 뒤 표지를 감추고 완성된 달력을 보여주도록 순서 변경
10. 날짜당 여러 글 → 글 1개로 데이터 구조 변경 시 기존 데이터 마이그레이션
- 문제 상황: 초기 구조는 하루에 작성자별로 여러 글이 배열로 저장됐는데, 이를 "날짜당 글 1개" 구조로 단순화하면서 기존에 저장된 배열 데이터를 그대로 두면 화면이 깨질 상황
- 해결 방법: 데이터를 불러올 때(
migrateDiaryData) 배열 형식이면 자동으로 글 내용을 이어붙여 단일 글로 변환하는 마이그레이션 로직을 추가해 기존 데이터 손실 없이 전환
11. 엑셀 방송 댓글 데이터 이관 시 날짜 불일치 처리
- 문제 상황: 스푼캐스트 방송 댓글을 정리한 엑셀에서, 일부 행은 표시된 날짜(예:
2026-05-07)와 실제로는 그 아래 숫자 셀(505)이 가리키는 진짜 날짜(5월 5일)가 서로 달랐음
- 해결 방법: 숫자 셀이 있으면 "월+일"로 해석해 실제 날짜를 우선 적용하도록 파싱 스크립트를 작성, 같은 날짜에 댓글이 여러 개인 11개 날짜는 내용을 이어붙여 병합 후 서버에 일괄 반영(총 156개 날짜, 172개 댓글)
