대시보드
Morit Plugin3. 화면과 사용자 경험

화면 분리와 정보 계층

플러그인은 기능 수보다 사용자가 판단해야 할 순서를 중심으로 화면을 나눕니다. 한 화면에 모든 설정·목록·상세·오류를 모으면 작은 기기에서 스크롤과 행동 우선순위가 무너집니다.

한 화면의 질문은 하나

화면을 열었을 때 답해야 할 질문을 문장 하나로 씁니다.

  • 홈 카드: “오늘 확인해야 할 변화가 있는가?”
  • 개요 화면: “오늘 일정과 급식은 무엇인가?”
  • 주간 화면: “이번 주 어느 날이 바쁜가?”
  • 설정 화면: “어떤 학교와 알림 시간을 사용할 것인가?”
  • Response UI: “방금 AI 작업의 핵심 결과는 무엇인가?”

질문이 두 개 이상이면 section이나 화면을 분리합니다.

정보 우선순위

text
1. 화면 제목과 현재 맥락
2. 사용자가 지금 판단할 핵심 결과
3. 다음으로 가능한 주 행동 하나
4. 결과를 설명하는 세부 정보
5. 드문 행동과 진단 정보

주 행동을 여러 개 같은 강도로 표시하지 않습니다. primary는 한 화면에 원칙적으로 하나만 두고, 나머지는 tonal 또는 text로 낮춥니다.

목록, 상세, 편집 분리

  • 목록은 비교와 선택에 집중합니다. 행마다 모든 메타데이터를 표시하지 않습니다.
  • 상세는 선택한 항목의 전체 맥락과 관련 행동을 보여줍니다.
  • 짧은 편집은 dialog 또는 sheet, 복잡한 편집은 별도 screen을 사용합니다.
  • 영구 삭제·연결 해제처럼 되돌리기 어려운 행동은 기본 목록 행동과 분리합니다.

설정의 계층

설정은 기능 소개 화면이 아닙니다. 사용자가 바꿀 수 있는 값만 표시하고 다음처럼 나눕니다.

  1. 계정과 데이터 원본
  2. 알림과 자동 실행
  3. 표시·정렬 선호
  4. 개인정보와 데이터 삭제

설정 값을 Runtime initial_state에 선언하고, 저장이 필요한 control에만 persist: true를 사용합니다. token이나 OAuth 값은 state에 넣지 않고 Credential/Connection 화면으로 연결합니다.

점진적 공개

첫 화면에는 기본 동작에 필요한 최소 정보만 보입니다. 고급 필터, 설명, 부가 지표는 사용자가 필요할 때 펼치거나 상세 화면에서 봅니다. 단, 중요한 권한·비용·외부 전송 사실을 점진적 공개라는 이유로 숨기면 안 됩니다.

좋은 empty와 error 문구

empty는 감정적인 문구가 아니라 다음 행동을 안내합니다.

text
나쁜 예: 아직 아무것도 없어요
좋은 예: 연결한 학교의 이번 주 일정이 없습니다. 다른 주를 선택하거나 학교 설정을 확인하세요.

오류는 “실패했습니다”에서 끝내지 않습니다.

text
나쁜 예: 문제가 발생했어요
좋은 예: 학교 정보를 불러오지 못했습니다. 네트워크 연결을 확인한 뒤 다시 시도하세요.

권한 거부, 계정 만료, 데이터 없음, 일시적 네트워크 오류는 서로 다른 상태입니다. capability가 구분한 오류 코드를 Host가 사용자용 상태로 표시할 수 있게 유지합니다.

Response UI의 계층

Response UI는 대화 본문과 경쟁하지 않습니다. 요약 한 줄, 핵심 결과, 필요한 후속 행동 순으로 구성하고 원시 실행 로그와 내부 경로를 표시하지 않습니다. 전체 내용은 하나의 응답 container 안에 두며, 여러 개의 별도 카드가 메시지 아래에 흩어지지 않게 합니다.

구체 계약은 Response UI와 Agent Timeline을 참고하세요.

화면 분리와 정보 계층 - Developers | Moring Developers