DOCS/journey/troubleshooting/251116_admin_frontend_chat_dark_mode_bubble.md

프론트엔드 채팅 다크모드 말풍선 대비 문제

요약

• 문제: 다크모드에서 사용자 말풍선이 라이트 모드용 연보라 그라데이션(from-violet-50 to-violet-100)이 그대로 적용되어, 거의 흰색에 가까운 배경 + 밝은 텍스트 조합으로 매우 눈부시고 배경과 동떨어진 느낌을 줌.
• 원인: Tailwind 클래스를 라이트 모드 기준으로 기본값으로 두고 dark: 프리픽스로 덮어쓰는 방식으로 구현했는데, bg-gradient-to-r 등 일부 속성이 다크 모드에서 완전히 제거되지 않고 섞여서 적용됨.
• 해결: 채팅 말풍선 스타일에서 다크 모드일 때는 라이트용 그라데이션 배경을 완전히 끄고(dark:bg-none), 다크 전용 네이비 팔레트 배경과 그림자만 적용하도록 수정.

상세 현상

• 재현 환경: frontend-customer (rb10508_micro 포함), 다크모드 활성화 상태.
• 예시 DOM:
  • <div class="px-2.5 py-1.5 rounded-lg max-w-[280px] bg-gradient-to-r from-violet-50 to-violet-100 text-violet-950 border border-violet-200 shadow-[0_8px_24px_rgba(15,23,42,0.08)] dark:bg-[#3B1E5A] dark:text-[#F4F2…">11월 19일 대구 심사 14시부터 18시까지 적어줘 대구 창경</div>
• 육안으로는 다크모드인데도 말풍선이 거의 흰색에 가까운 그라데이션 + 밝은 텍스트로 보였고, 배경 네이비와 전혀 어울리지 않아 “흰 바탕에 밝은 글씨”처럼 매우 이질적인 UI로 인식됨.

원인 분석

• Tailwind 다크모드 전략을 라이트 모드 기본 + dark: 덮어쓰기로만 사용.
• bg-gradient-to-r, from-*, to-*처럼 그라데이션 관련 클래스는 dark:bg-[#3B1E5A]만으로 완전히 제거되지 않음.
  • 결과적으로 다크모드에서도 그라데이션이 일부 남아있고, 브라우저/렌더링 환경에 따라 밝게 보이는 현상이 발생.
• 즉, “라이트 모드 배경을 지우지 않고 위에 다크 배경만 얹는” 식의 스타일링으로 인해 라이트/다크 속성이 섞인 상태가 되었음.

조치 내용

• 파일: frontend-customer/src/components/chat-interface.tsx
• 함수: getMessageStyle
• 변경 포인트 (사용자 말풍선):
  • 라이트 모드:
    • 그대로 연보라 그라데이션 유지
      • bg-gradient-to-r from-violet-50 to-violet-100 text-violet-950 border border-violet-200 shadow-[0_8px_24px_rgba(15,23,42,0.08)]
  • 다크 모드:
    • 라이트용 그라데이션을 완전히 끄기 위해 dark:bg-none 추가
    • 네이비 배경 + 보라 계열 보더 + 딥 섀도우만 적용
      • dark:bg-none dark:bg-[#3B1E5A] dark:text-[#F4F2FF] dark:border-[#7C3AED]/40 dark:shadow-[0_12px_24px_rgba(8,8,16,0.45)]
• 결과:
  • 다크모드에서 사용자 말풍선이 네이비 톤의 말풍선으로만 보이고, 흰색/연보라 그라데이션이 더 이상 섞이지 않음.
  • 배경과 대비가 자연스러워지고, 텍스트 가독성도 확보됨.

향후 다크모드 스타일링 원칙

• 라이트 전용 스타일은 명시적으로 끄거나 분리한다
  • 특히 bg-gradient-*, from-*, to-* 같은 그라데이션/배경 계열은 다크 모드에서 dark:bg-none 등으로 완전히 제거할 것.
• 다크모드 팔레트는 별도 토큰/클래스로 관리
  • 예시: dark:bg-slate-900, dark:bg-[#020617] 같은 다크 전용 팔레트 사용.
• 기본값을 다크로 둘지, 라이트로 둘지 컴포넌트 단위로 명확히 결정
  • 현재 채팅 말풍선은 “라이트 기본 + 다크 오버레이” 전략을 사용하지만,
  • 다크 비중이 높아질 경우 “다크 기본 + light: 프리픽스 or 조건부 클래스” 방식도 검토 필요.

교훈

• Tailwind의 dark: 프리픽스는 **덮어쓰기(overwrite)**이지, 라이트 스타일을 자동으로 제거해 주지 않는다.
• 특히 그라데이션/배경 계열 클래스는 다크모드에서 눈으로만 보면 “그럴 듯해 보이지만” 실제로는 라이트/다크 속성이 섞여 있을 수 있으므로 실제 DOM 클래스와 렌더링 결과를 반드시 같이 확인해야 한다.
• 프론트엔드 UI/UX 수정 시에는 스타일 수정과 함께 스크린샷/DOM 캡처 + 간단한 트러블슈팅 문서화까지 한 번에 처리하면, 나중에 동일한 실수를 반복하지 않게 된다.