DEVLOG.md

---
## 🚀 새로운 아이디어 및 개발 예정 (Upcoming Tasks)

1.  **달력 디자인 개선:** 투명 스타일에서 가독성 높은 '모던 카드(Modern Card)' 스타일로 변경.
2.  **감정 이모지 톤 매칭:** 저장 애니메이션 구슬(Orb) 색상을 감정별 분위기에 맞게 세부 조정.
3.  **용어 직관화:** 추천 카테고리 명칭 변경 ('수용/전환' → **'공감/환기'**) 및 관련 로직 동기화.
4.  **저장 애니메이션 고도화:** 구슬이 통통 튀기다(Bouncing) '나의 일기' 메뉴로 강력하게 날아가는(Super Jump) 효과 구현.
5.  **마이페이지 '기억의 유리병' 시각화 구현.**

---

## 📅 2025년 11월 27일
### 주제: UI 디테일 완성도 향상 & 애니메이션 고도화 (Polishing)

사용자 경험의 질을 높이기 위해 내비게이션, 달력 등 핵심 UI 요소를 현대적인 스타일로 리디자인하고, 저장 애니메이션에 물리적인 생동감을 더했습니다.

#### 1. 매직 내비게이션 바 (Magic Capsule Navbar)
-   **디자인:** 기존 텍스트 나열 방식을 탈피하여, 공중에 떠 있는 **캡슐 형태의 글래스모피즘(Glassmorphism)** 디자인 적용.
-   **인터랙션:** 마우스의 움직임에 따라 하얀색 하이라이트 바(`nav-marker`)가 메뉴 사이를 물 흐르듯 따라다니는 **Sliding Magic Line** 효과 구현.

#### 2. 대시보드형 달력 (Modern Card Calendar)
-   **스타일:** 투명한 배경 대신 가독성이 뛰어난 **'모던 카드(Modern Card)'** 스타일로 변경. 헤더에 테마 색상을 적용하여 집중도 향상.
-   **레이아웃 최적화:** 요일(Header)과 날짜(Grid)의 정렬이 어긋나는 문제를 CSS `flex-basis: 14.28%` 강제 적용을 통해 1:1로 완벽하게 맞춤.
-   **시각화:** 날짜 아래에 해당 일기의 감정을 나타내는 **색상 점(Dot)**이 자동으로 표시되도록 구현.

#### 3. 저장 애니메이션 고도화 (Bouncing & Super Jump)
-   **물리 효과:** 단순히 날아가는 애니메이션을 **"바닥에 통통 튀기다가(Bouncing) 에너지를 모아 목표지점으로 슈웅 날아가는(Super Jump)"** 역동적인 시퀀스로 업그레이드.
-   **데이터 동기화:** CSS 애니메이션 시간(5.1초)과 서버 저장 요청(`fetch`)을 `Promise.all`로 동기화하여, 애니메이션과 데이터 저장이 안전하게 완료된 후 페이지가 이동되도록 로직 강화.

#### 4. 감성 디테일 및 용어 개선
-   **용어 직관화:** 추천 카테고리 명칭을 '수용/전환'에서 더 감성적인 **'공감/환기'**로 변경하고, 프론트엔드 파싱 로직을 이에 맞춰 수정.
-   **추천 요약:** AI의 긴 추천 이유를 제거하고, 핵심 정보(종류, 제목)만 깔끔하게 보여주도록 텍스트 정제 함수(`extractSummary`) 적용.
-   **톤 매칭:** 저장 애니메이션 시 생성되는 '기억 구슬'의 색상을 각 감정(기쁨=Gold, 슬픔=SteelBlue 등)의 고유 분위기에 맞춰 세밀하게 조정.

---

## 📅 2025년 11월 25일
### 주제: 애니메이션 통합 및 버그 수정

`test_animation.html`에서 개발된 책 접기 및 구슬 바운스 애니메이션을 `main.html`에 통합하고 관련 버그를 수정했습니다.

#### 1. 애니메이션 기능 개선 및 통합
-   **애니메이션 시작 문제 해결**: `playFullAnimation` 함수에 전달되던 정의되지 않은 변수(`rect`) 오류를 수정하여 애니메이션이 정상적으로 시작되도록 했습니다.
-   **구슬 바운스 정교화**: 중앙에서 시작하여 화면 오른쪽 가장자리에서 정확히 마무리되는 6회 바운스 애니메이션을 구현했습니다. 각 바운스의 수평 이동 거리를 조정하여 자연스러운 움직임을 만들었습니다.
-   **책 → 구슬 변신 인트로 애니메이션 구현**:
    -   책이 구겨지듯 중앙으로 모여 구슬로 변하는 1.5초(책 응축) + 5초(구슬 바운스) = 총 6.5초 길이의 인트로 애니메이션을 구현했습니다.
    -   책이 모이는 동안 구슬의 감정 색상으로 배경색이 변하도록 하여 시각적 연결성을 강화했습니다.
    -   책이 모이는 동작은 '접히는' 대신 회전 없이 '중앙으로 응축되는' 느낌을 주도록 `transform` 속성을 조정했습니다.
    -   응축되는 책이 최종적으로 구슬 모양과 잘 연결되도록 `borderRadius` 애니메이션을 다시 도입했습니다.
    -   책이 사라지는 느낌 없이 구슬로 전환되도록, 책이 사라지는 동안 구슬이 동시에 나타나는 크로스페이드(cross-fade) 기법을 사용하여 부드러운 변신을 구현했습니다.
-   **`main.html` 통합**: 개발된 애니메이션 로직을 `src/templates/static/js/main_logic.js` 파일로 이전했습니다. 이 애니메이션은 이제 '일기장에 저장하기' 버튼을 클릭할 때 실행됩니다.

#### 2. 리디렉션 버그 수정
-   **문제**: 애니메이션 완료 후 `main_logic.js`에서 `/diary` 경로로 리디렉션할 때 'Not Found' 오류가 발생했습니다.
-   **원인**: 백엔드에 `/diary` 라우트가 정의되어 있지 않고, 실제 일기 목록 페이지는 `/my_diary` 라우트를 사용하고 있었습니다.
-   **해결**: `main_logic.js` 파일 내 `window.location.href`의 경로를 `/diary`에서 올바른 경로인 `/my_diary`로 수정하여 리디렉션 오류를 해결했습니다.

---
## 📅 2025년 11월 23일
### 주제: 메인 화면 UI/UX 대규모 개편 & 인터랙션 강화

사용자가 일기를 쓰는 행위에 더 깊이 몰입할 수 있도록, 메인 화면의 디자인 언어를 '디지털'에서 '아날로그 감성'으로 전면 교체하고, 저장 과정에 스토리텔링을 담았습니다.

#### 1. 펼쳐진 다이어리 (Book Spread Layout)
-   **문제:** 기존의 분리된 입력창(Left)과 결과창(Right)은 시선이 분산되고, '일기장'이라는 앱의 정체성을 시각적으로 전달하기 부족함.
-   **해결:** 화면 전체를 아우르는 **'펼쳐진 다이어리'** 형태의 레이아웃 도입.
-   **구현 디테일:**
    -   **Wide Layout:** `max-width: 1600px`, `min-width: 1200px`를 적용하여 실제 책상 위에 노트를 펼친 듯한 시원한 개방감 확보.
    -   **Clean UI:** 추천 콘텐츠가 길어질 경우 스크롤은 되지만 스크롤바(Bar)는 숨겨(`scrollbar-width: none`) 깔끔함 유지.
    -   **Line-clamp:** 추천 텍스트가 길어지면 `line-clamp`로 말줄임 처리하고, Hover 시 전체 내용을 보여주는 인터랙션 추가.

#### 2. '기억의 구슬' 저장 애니메이션 (Memory Orb & Bouncing)
-   **기획 의도:** 단순히 데이터를 서버로 전송(Submit)하는 것을 넘어, **"나의 소중한 하루가 기억의 구슬이 되어 보관된다"**는 메타포(영화 *인사이드 아웃* 모티브)를 전달하고자 함.
-   **애니메이션 시나리오:**
    1.  **응축 (Morph):** 저장 버튼 클릭 시, 거대했던 다이어리가 순식간에 작아지며 동그란 구슬로 변신.
    2.  **감정의 색:** AI가 분석한 감정(기쁨=노랑, 슬픔=파랑 등)에 맞춰 구슬의 색상이 실시간으로 변화.
    3.  **역동적 이동 (Bouncing):** 구슬이 바닥에 통통 튀기며(Squash & Stretch) 에너지를 모으다, 마지막에 메뉴(보관함) 쪽으로 슈웅 날아감.
-   **기술적 구현:**
    -   **Clone Node:** 원본 DOM을 건드리면 레이아웃이 깨지므로, `cloneNode`로 다이어리의 복제본을 생성하여 `fixed` 포지션으로 띄운 뒤 애니메이션 적용.
    -   **Keyframes:** `0%`~`100%` 구간을 세밀하게 나누어 위치 이동(`translate`)과 형태 변형(`scale`, `border-radius`)을 동시에 제어.

#### 🔜 Next Step
-   상단 내비게이션 바(Navbar)에 'Sliding Magic Line' 인터랙션 적용 예정.
-   마이페이지 '기억의 유리병' 시각화 구현.

---


## 📅 2025년 11월 21일 (UI/UX Refinement)

### Feature: 새로운 하단 내비게이션 바
-   기존 상단 헤더를 대체하는 새로운 SVG 기반 하단 내비게이션 바를 구현했습니다.
-   주요 기능인 '홈', '나의 일기', '마이페이지' 및 '로그아웃' 버튼을 포함합니다.
-   내비게이션 바는 사용자가 로그인했을 때만 표시되도록 설정했습니다.

### Refactor: 내비게이션 바 인터랙션 개선
-   **UI 스타일:** 흰색 배경, 어두운 색상의 아이콘 및 활성 페이지를 나타내는 '빛 효과(tubelight)'를 적용했습니다. 4개의 아이콘에 맞게 너비를 조정했습니다.
-   **위치 문제 해결 (CSS 기반 로직):** 페이지 로드 시 '빛 효과'의 위치가 어긋나는 문제를 해결하기 위해, 불안정한 JavaScript 타이밍 대신 CSS만으로 위치를 제어하는 방식으로 로직을 전면 수정했습니다.
    -   서버에서 현재 페이지 주소(`request.endpoint`)에 따라 `<nav>` 태그에 `active-main-home` 과 같은 동적 클래스를 부여합니다.
    -   CSS는 이 클래스를 사용하여 '빛 효과'의 초기 `left` 위치를 직접 지정하므로, 더 이상 렌더링 시점의 경쟁 상태(Race Condition) 문제가 발생하지 않습니다.
-   **애니메이션 피드백 (JS):** `navigation.js` 스크립트는 이제 초기 위치 계산을 전혀 하지 않고, 사용자가 아이콘을 클릭했을 때 시각적 피드백을 주기 위해 빛을 움직이는 단순한 역할만 수행하도록 대폭 축소했습니다.

### Feature: 페이지 전환 효과 (일시적 롤백)
-   부드러운 페이지 이동 경험을 위해 화면 전체를 덮는 '커튼' 방식의 전환 효과를 구현했습니다.
-   하지만 내비게이션 바 애니메이션과의 지속적인 충돌 및 불안정성 문제로, 사이트의 안정성을 확보하기 위해 이 기능은 **일시적으로 이전 상태로 되돌렸습니다.** 현재는 브라우저의 기본 탐색 방식을 사용합니다.

---

## 📅 2025년 11월 19일
### 주제: AI 모델 개선 실험 & 초기 UI/UX 구축

#### 1. AI 모델 개선 여정
**초기 모델의 한계와 새로운 아이디어**
-   **기존 모델 정확도:** `79.06%`로, 다소 아쉬운 성능.
-   **새로운 가설:** NSMC는 '긍정/부정' 분석에 특화되어 있어, 우리 프로젝트의 다중 감정 분류(대분류)에는 적합하지 않다고 판단. NSMC를 제거하고 수동 가중치로만 훈련했을 때, 오히려 **순정 모델의 성능이 가장 좋았음.**
-   **방향 전환:** 사용자에게 AI가 예측한 감정 확률을 보여주고, 가장 높은 확률의 감정을 기본으로 추천하되 **사용자가 직접 수정할 수 있는 선택권**을 제공하는 UX적 해결책 도입.

#### 2. UI/UX 개선 사항
**로그인/회원가입 UX 개선: Flip Animation**
-   **해결:** 로그인과 회원가입 화면을 **하나의 '책(Book)'** 콘셉트로 통합.
-   **구현:** CSS `transform: rotateY(180deg)`를 활용한 3D 책 넘김 애니메이션 및 단일 페이지 턴(Single Page Turn) 효과 적용.

**감정 분석 정확도 보완: Emotion Selection UI**
-   **해결:** AI의 **확신도(Confidence Score)**에 따라 UI를 유연하게 분기 처리.
    -   **확신 (80% 이상):** AI가 예측한 감정을 정답으로 자동 채택.
    -   **불확실 (80% 미만):** 상위 3개 감정과 확률을 **'감정 칩(Chips)'** 형태로 제안하여 선택권 부여.

**사용자 경험 보호: 분석과 저장 단계 분리**
-   **구현:** **`[분석] → [확인/수정] → [저장]`** 플로우 구축. 최종적으로 '저장하기' 버튼을 눌렀을 때만 DB에 저장되도록 변경하고 로딩 UI 추가.

#### 3. KOTE 사전 학습 모델 실험 결과
> Colab 환경에서 진행되었으며, 결과가 만족스럽지는 않았음.

-   **실험 1 (기본):** F1 Score `0.6154`
-   **실험 2 (가중치 적용):** Accuracy `54.2%`
-   **실험 3 (가중치 제거):** Accuracy `58.45%`
-   **결론:** KOTE 데이터셋을 활용한 사전 학습 모델은 아직 기대만큼의 성능을 보여주지 못함. 추후 개선 방향 재설정 필요.