3.4 KiB
3.4 KiB
공유채팅 채팅방 헤더 재배치 제안
목적
- 실제 공유채팅에서 사용하는 라이트 블루 테마를 유지한 채, 헤더를 방 선택과 알림센터 진입의 허브로 재구성한다.
- 채팅방 제목 또는 아이콘 선택 시 필터와 채팅방 목록을 함께 노출하고, 헤더 손잡이를 아래로 내리면 iOS 알림센터 같은 요약 대시보드와 알림 피드를 보여준다.
- 기존 기능은 유지하되, 설정/최소화/닫기 같은 툴 액션은 헤더 집중도를 해치지 않도록 보조 영역으로 정리한다.
현재 테마 확인 기준
- 공유채팅 카드 바디는
#edf3fb → #e4edf8계열 세로 그라데이션과 얕은 inset border, soft shadow를 사용한다. - 헤더 액션은 흰색 pill 버튼 위에
#2563eb아이콘 포인트를 두고 hover 시 더 밝은 블루 계열로 반응한다. - 헤더 배경은 반투명 흰색보다 한 단계 채도 낮은 블루톤이며 blur가 들어간다.
- 방 상태/요청 상태는 회색, 파랑, 초록, 빨강 계열 pill로 구분한다.
제안 방향 공통 원칙
- 헤더 1행은 현재 방 인지와 이동, 헤더 2행은 상태/필터/알림센터 진입으로 역할을 명확히 분리한다.
- 방 목록은 제목 또는 아이콘을 누르는 행위 하나로 열리도록 통합하고, 목록 안에서 필터 칩과 최근 대화 프리뷰를 동시에 보여준다.
- 알림센터는 현재 방 전용이 아니라 전체 채팅방과 apps 알림을 함께 집계한다.
- 손잡이 드래그는 모달보다 시스템 오버레이처럼 느껴지게 하고, 상단에는 다시보드형 요약 카드를 고정한다.
제안안 구성
A안 Capsule Rail
- 제목 캡슐 자체가 방 목록 트리거다.
- 헤더 중앙 손잡이를 내려 알림센터를 여는 패턴으로 가장 직관적이다.
- 알림센터 상단은 처리중, 새 답변, apps 경고, 캘린더성 일정 같은 4분할 다시보드다.
B안 Split Status Bar
- 좌측은 방 정보, 우측은 앱 알림과 빠른 전환 상태를 모은 split bar 구조다.
- 필터를 헤더 하단의 segment row로 남겨 자주 쓰는 상태 전환을 더 빠르게 한다.
- 데스크톱 확장성은 좋지만 모바일에서는 약간 더 촘촘해질 수 있다.
C안 Focus Stack
- 방 아이콘과 제목을 한 덩어리 hero chip으로 키워 현재 방 인지를 강화한다.
- 알림센터 대시보드 카드를 더 크게 두고, 현재 처리중 요청 중심의 집중도를 높인다.
- 정보량이 많을 때보다 “현재 작업 집중” 상황에 적합하다.
유지되어야 할 기존 기능
- 방 이동
- 필터 전환
- 설정
- 최소화
- 닫기
- 현재 연결 상태 표시
- 현재 방 상태 요약
알림센터 추천 콘텐츠
- 상단 고정 다시보드: 처리중 요청 수, 읽지 않은 다른 채팅방, apps 경고/완료, 오늘 일정 또는 예약 작업
- 중단: 현재 방 진행 카드와 다른 방 새 답변 카드 혼합 피드
- 하단: 앱별 알림 묶음, 빠른 액션, 전체 읽음/필터 토글
검토 포인트
- 방 목록과 알림센터를 둘 다 헤더에 얹되 탭 충돌 없이 한 손 조작이 가능한지
- 모바일에서 드래그 손잡이와 브라우저 스크롤 제스처가 충돌하지 않는지
- 현재 존재하는 설정/최소화/닫기 액션을 보조 영역으로 빼도 발견 가능성이 유지되는지