DEVLOG.md

📅 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 데이터셋을 활용한 사전 학습 모델은 아직 기대만큼의 성능을 보여주지 못함. 추후 개선 방향 재설정 필요.