공개: KoTalk 최신 기준선

문서/64-low-fatigue-work-messenger-ui-expansion.md

@@ -0,0 +1,248 @@
+# 64. Low-Fatigue Work Messenger UI Expansion
+
+## 목적
+
+이 문서는 기존 `화이트 / 플랫 / 컴팩트` UI 헌장을 유지하면서, `업무 메신저로서 더 빠르고 덜 피곤한 인터페이스`를 만들기 위한 확장 규칙을 정리한다.
+
+기준은 단순히 예쁜 화면이 아니라 아래 3가지다.
+
+- 대화를 더 빨리 찾고 더 짧게 판단할 수 있는가
+- 실수로 흐름이 끊기지 않는가
+- 장시간 사용해도 시각적, 인지적 피로가 누적되지 않는가
+
+이번 합의안은 아래 관점을 합쳐 정리했다.
+
+- Product: 작업 전환 비용, 탐색 시간, 복귀 시간 최소화
+- UI Design: 화이트 원톤과 플랫 계층 유지, 과한 강조 금지
+- UX Research: 업무 대화에서 `판단 피로`와 `복귀 피로` 축소
+- QA: 작은 화면, 흔들리는 네트워크, 다중 작업 환경에서도 안전한지 검증
+- Desktop: 가변 창, 멀티윈도, 키보드 중심 조작 확장
+
+## 1. 레이아웃 / 시각 시스템 확장 원칙
+
+### 1. 한 화면 한 판단 원칙
+
+- 한 화면에는 사용자가 동시에 판단해야 할 우선순위를 1개만 둔다.
+- 예:
+  - 목록 화면: `누구와 어떤 대화를 열지`
+  - 대화 화면: `읽기 / 답장 / 다음 액션`
+- 상태, 배지, 안내문, 보조 메뉴가 이 우선순위를 가리면 재배치한다.
+
+### 2. 흰색은 배경이 아니라 여백 자산이다
+
+- 화이트 원톤을 유지하되, 모든 면을 순백으로 채우지 않는다.
+- 실제 구분은 `흰 면`, `옅은 회색 면`, `얇은 보더`, `정렬`, `간격`으로 만든다.
+- 그림자 대신 `밀도 차이`와 `행 높이 차이`로 계층을 만든다.
+
+### 3. 강조는 색보다 위치로 만든다
+
+- 업무 메신저는 강조 색을 많이 쓸수록 피곤해진다.
+- 읽지 않음, 현재 선택, 전송 가능 상태, 경고 상태만 시각적 우선순위를 가진다.
+- 나머지는 위치, 정렬, 굵기, 간격으로만 구분한다.
+
+### 4. 가시성보다 복귀성이 우선이다
+
+- 업무 도중에는 “지금 무슨 일이 일어나는가”보다 “방금 하던 맥락으로 쉽게 돌아갈 수 있는가”가 더 중요하다.
+- 최근 대화, 미해결 대화, 임시 저장 중인 대화, 멘션 받은 대화는 다시 찾는 비용이 낮아야 한다.
+- 따라서 레이아웃은 새 기능을 추가할수록 `복귀 경로`를 먼저 드러내야 한다.
+
+### 5. 패널은 목적 단위로 쪼개고 의미를 섞지 않는다
+
+- 필터, 내비게이션, 계정, 설정, 상태는 같은 바 안에 섞지 않는다.
+- 하단 바 또는 좌측 바는 `목적지`만 가져야 한다.
+- 필터는 목록 헤더에, 세션/계정은 설정 시트에, 네트워크 상태는 상단 상태 바에 분리한다.
+
+### 6. 텍스트는 줄이는 대신 예측 가능하게 한다
+
+- 글자를 최소화하되, 의미 해석 부담은 남기지 않는다.
+- 같은 액션은 항상 같은 동사와 같은 위치를 쓴다.
+- 예:
+  - 보내기
+  - 고정
+  - 안읽음
+  - 나중에 보기
+- 짧은 문구와 일관된 위치가 함께 있어야 피로가 줄어든다.
+
+### 7. 읽는 화면과 조작하는 화면을 겹치지 않는다
+
+- 메시지 열람 중에는 입력, 첨부, 반응, 전달 기능이 과도하게 튀면 안 된다.
+- 읽는 구간은 정적이고 안정적이어야 하고, 조작은 포커스 또는 선택 시 드러나야 한다.
+- 기본 화면은 읽기 우선, 조작 UI는 필요 시 등장하는 구조가 맞다.
+
+### 8. 자동 동작은 사용자의 현재 맥락을 침해하지 않는다
+
+- 새 메시지, 읽음 동기화, 상태 갱신이 와도 사용자가 읽던 위치를 망가뜨리면 안 된다.
+- 자동 스크롤, 자동 포커스 이동, 자동 탭 전환은 하단 근처이거나 사용자가 직접 보낸 직후에만 허용한다.
+
+### 9. 업무 메신저의 기본 밀도는 “컴팩트 + 숨 쉴 정도”다
+
+- 지나치게 빽빽하면 부담스럽고, 지나치게 크면 판단 속도가 떨어진다.
+- 기준:
+  - 목록 행은 빠르게 훑되 클릭 실수는 나지 않는 수준
+  - 메시지 간격은 타임라인처럼 이어지되 블록 구분은 충분한 수준
+  - 툴바는 한 줄 유지, 두 줄 이상은 예외 처리
+
+### 10. 창 크기 변화는 축소판이 아니라 역할 재배치다
+
+- PC에서는 단순 리사이즈가 아니라 `역할의 재배치`가 필요하다.
+- 넓은 창: 목록 / 대화 / 보조 정보 3분할
+- 중간 창: 목록 / 대화 2분할
+- 좁은 창: 대화 우선, 목록은 오버레이
+- 같은 정보가 작은 창에서 그대로 남아 복잡도를 키우면 안 된다.
+
+### 11. 한 번에 다 보여주지 말고, 가까운 다음 행동만 보여준다
+
+- 업무적 사용에서 핵심은 모든 기능의 노출이 아니라 `지금 바로 필요한 다음 행동`이다.
+- 예:
+  - 첫 진입: `대화 시작`
+  - 새 팀 대화: `참여자 추가`
+  - 파일 많은 방: `최근 파일`
+  - 읽다 멈춘 방: `이어 읽기`
+
+### 12. 상태는 설명이 아니라 신뢰를 줘야 한다
+
+- `동기화 중`, `준비됨`, `연결됨` 같은 내부 상태는 최소화한다.
+- 대신 사용자가 실제로 안심할 수 있는 상태만 남긴다.
+- 예:
+  - `방금 보낸 메시지는 저장됐어요`
+  - `연결이 잠시 끊겨 임시 저장했어요`
+  - `다시 연결되면 자동으로 맞출게요`
+
+## 2. 컴포넌트 / 패턴 제안
+
+### 1. 우선순위 인박스 헤더
+
+- `전체 / 안읽음 / 고정 / 멘션 / 나중에 보기`를 필터 칩으로 두는 목록 헤더
+- 하단 내비와 분리해 목적을 명확히 한다.
+
+### 2. 이어보기 점프 바
+
+- 읽다 멈춘 메시지 위치, 마지막 멘션, 내가 남긴 초안 위치로 바로 복귀시키는 얇은 점프 바
+- `어디까지 읽었는지`를 복원하는 컴포넌트다.
+
+### 3. 초안 존재 배지
+
+- 목록 행 우측에 `초안` 짧은 배지를 노출
+- 입력 중이던 방을 다시 찾는 시간을 줄인다.
+
+### 4. 빠른 결정 바
+
+- 회의성 대화나 업무 방에서 `확인`, `보류`, `찬성`, `수정 필요` 같은 반응을 텍스트 버튼으로 한 줄 제공
+- 이모지보다 명시적이고 업무적이다.
+
+### 5. 컴팩트 컨텍스트 패널
+
+- 링크, 파일, 할 일, 고정 메시지를 우측 패널 또는 바텀 시트로 묶는 보조 패널
+- 별도 화면 이동 없이 현재 대화를 유지한다.
+
+### 6. 조용한 상태 바
+
+- 네트워크 재연결, 임시 저장, 동기화 지연 같은 정보를 상단 얇은 바 하나로 통합
+- 토스트 남발을 줄인다.
+
+### 7. 스마트 작성 영역
+
+- 입력창 아래에 항상 많은 버튼을 두지 않고, 입력 내용과 맥락에 따라 필요한 도구만 노출
+- 예:
+  - URL 붙여넣기 시 링크 카드 제안
+  - 파일 드래그 시 첨부 모드
+  - `@` 입력 시 사람 추천
+
+### 8. 집중 읽기 모드
+
+- 알림, 보조 패널, 배경 잡음을 낮추고 메시지 타임라인과 입력만 남기는 모드
+- 긴 대화 정리나 중요한 협업 상황에 유리하다.
+
+### 9. 다중 창 팝아웃 패턴
+
+- 특정 대화를 별도 창으로 떼어 두는 패턴
+- 메인 창에서는 목록과 검색을 유지하고, 팝아웃 창에서는 해당 방 읽기/쓰기만 담당한다.
+
+### 10. 작업 전환용 커맨드 패널
+
+- `대화 열기`, `멤버 찾기`, `파일 찾기`, `안읽음 이동`, `초안 있는 방 열기`를 한 입력창에서 처리
+- 키보드 중심 업무 흐름을 빠르게 만든다.
+
+### 11. 회의/승인용 인라인 카드
+
+- 채팅 중간에 `결정 필요`, `참여 여부`, `읽고 확인` 같은 가벼운 카드 삽입
+- 외부 도구 없이 빠른 의사결정을 만든다.
+
+### 12. 요약형 빈 상태 패턴
+
+- 대화가 없는 화면, 검색 결과 없음, 파일 없음, 멘션 없음 상태를 단순 문구로 끝내지 않는다.
+- 항상 `다음 행동 1개`를 포함한다.
+
+### 13. 저피로 알림 묶음 패턴
+
+- 짧은 시간 안에 같은 방에서 연달아 들어온 알림을 개별 토스트로 쏘지 않고 하나로 묶는다.
+- `몇 건 더 있음` 구조가 업무 집중을 덜 깨뜨린다.
+
+### 14. 가벼운 관계 맥락 칩
+
+- 상대 이름 아래에 `최근 파일`, `응답 느림`, `오늘 멘션`, `나와의 공통 방` 같은 짧은 맥락 칩을 노출
+- 연락 판단 시간을 줄인다.
+
+## 3. 새 문서로 나눌 주제 제안
+
+아래 주제는 기존 문서를 더 구현 친화적으로 분리할 가치가 있는 후보들이다.
+
+1. `65-layout-hierarchy-and-panel-responsibility-spec.md`
+2. `66-low-fatigue-visual-density-and-spacing-rules.md`
+3. `67-list-scanning-row-priority-and-badge-system.md`
+4. `68-conversation-reentry-bookmarks-and-jump-patterns.md`
+5. `69-work-decision-reactions-and-approval-microinteractions.md`
+6. `70-smart-composer-and-contextual-tool-reveal.md`
+7. `71-session-recovery-reconnect-and-last-good-state-policy.md`
+8. `72-reading-position-autoscroll-and-timeline-stability-spec.md`
+9. `73-bottom-bar-navigation-vs-filter-separation-rules.md`
+10. `74-multiwindow-popout-and-secondary-task-flow.md`
+11. `75-focus-mode-quiet-mode-and-notification-bundling.md`
+12. `76-empty-states-and-next-best-action-system.md`
+13. `77-workspace-inbox-mention-later-and-priority-queues.md`
+14. `78-command-palette-and-keyboard-first-productivity-model.md`
+15. `79-link-file-context-panel-and-side-surface-rules.md`
+16. `80-mobile-web-low-fatigue-one-hand-patterns.md`
+17. `81-android-material-translation-and-navigation-contract.md`
+18. `82-desktop-resize-adaptation-and-pane-collapse-logic.md`
+19. `83-user-fatigue-scorecard-and-heuristic-review-method.md`
+20. `84-trustful-status-copy-and-recovery-feedback-guidelines.md`
+
+## 4. 구현 우선순위 제안
+
+지금 제품 상태 기준으로는 아래 순서가 맞다.
+
+### 1순위
+
+- 하단 바에서 `내비게이션`과 `필터` 분리
+- 마지막 정상 화면 유지 기반 세션 복구
+- 자동 스크롤 억제와 읽기 위치 보존
+
+### 2순위
+
+- 초안 배지와 이어보기 점프 바
+- 빈 상태의 다음 행동 패턴
+- 조용한 상태 바와 토스트 정리
+
+### 3순위
+
+- 커맨드 패널
+- 다중 창 팝아웃
+- 업무용 빠른 결정 바
+
+## 5. 사용자 관점 기대 효과
+
+- 업무 사용자는 `대화 찾기`, `읽던 곳 복귀`, `실수 방지`에서 체감 이득을 느낀다.
+- 친근한 소통 사용자는 UI가 과하게 무겁지 않으면서도 더 정돈된 인상을 받는다.
+- 장시간 사용자는 색, 그림자, 과한 애니메이션 대신 정렬과 밀도로 설계된 화면에서 피로가 덜하다.
+
+## 결론
+
+기존 화이트/플랫/컴팩트 방향은 유지할 가치가 충분하다. 다만 이 방향만으로는 `세련됨`까지만 설명되고, `업무에서 덜 피곤한 이유`는 아직 부족하다.
+
+앞으로의 확장 기준은 `예쁜 화면`이 아니라 아래 문장으로 요약한다.
+
+- 덜 찾게 하고
+- 덜 실수하게 하고
+- 덜 끊기게 하고
+- 덜 피곤하게 한다