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

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가 과하게 무겁지 않으면서도 더 정돈된 인상을 받는다.
• 장시간 사용자는 색, 그림자, 과한 애니메이션 대신 정렬과 밀도로 설계된 화면에서 피로가 덜하다.

결론

기존 화이트/플랫/컴팩트 방향은 유지할 가치가 충분하다. 다만 이 방향만으로는 세련됨까지만 설명되고, 업무에서 덜 피곤한 이유는 아직 부족하다.

앞으로의 확장 기준은 예쁜 화면이 아니라 아래 문장으로 요약한다.

• 덜 찾게 하고
• 덜 실수하게 하고
• 덜 끊기게 하고
• 덜 피곤하게 한다