본문으로 건너뛰기
Dot Design System
v0.3.1

AI 경험

AI의 능력과 불확실성을 투명하게 다루고 사용자 통제권을 보존합니다.

목적

Dot의 AI는 사용자를 대신해 결정하는 장식적 기능이 아니라, 복잡한 학습·운영 작업에서 다음 판단을 더 잘하도록 돕는 동반자다. AI 경험은 입력 맥락 → 처리 → 결과 → 사람의 검토 → 적용 → 다음 배움의 고리를 분명히 연결한다.

사용자는 언제나 다음을 알 수 있어야 한다.

  • AI가 무엇을 하고 있는가?
  • 어떤 입력과 기준을 사용했는가?
  • 결과는 제안인가, 검토됐는가, 이미 적용됐는가?
  • 무엇을 수정하거나 다시 실행할 수 있는가?
  • 결과가 불완전하거나 실패했을 때 어떻게 복구하는가?

AI를 사용하는 조건

다음 조건 중 하나 이상에서 실질적인 가치가 있을 때 사용한다.

  • 많은 정보를 사람이 검토할 수 있는 구조로 요약·분류한다.
  • 반복 작성의 초안을 제공해 사람이 판단과 수정에 집중하게 한다.
  • 누락, 충돌, 위험 신호를 찾아 다음 검토 지점을 제안한다.
  • 학습자의 맥락에 맞는 설명이나 피드백 후보를 제공한다.
  • 복잡한 설정을 사용자의 목표에 맞는 시작점으로 바꾼다.

단순히 입력을 자동 완성하거나 화면을 새롭게 보이게 한다는 이유만으로 AI를 붙이지 않는다. 규칙 기반으로 더 정확하고 예측 가능하게 해결할 수 있으면 그 방식을 우선한다.

AI 작업의 구조

1. 시작 전

  • 사용자가 얻을 결과와 적용 범위를 설명한다.
  • 필요한 입력과 선택 기준을 보여준다.
  • 결과가 자동 적용되는지 검토 후 적용되는지 명시한다.
  • 기존 작성 내용을 덮어쓸 수 있으면 실행 전에 알려준다.
  • 비용, 대기, 민감한 정보 사용처럼 결정에 영향을 주는 조건을 숨기지 않는다.

2. 처리 중

  • 답변을 분석하고 있어요, 피드백 초안을 만들고 있어요처럼 실제 작업을 말한다.
  • trigger의 중복 실행을 막고 취소 가능 여부를 제공한다.
  • 화면을 떠나도 계속되는지, 돌아올 경로가 있는지 알려준다.
  • 단계가 실제로 확인될 때만 단계 상태를 표시한다.
  • DotMotion variant="processing"은 실제 AI 생성·채점·분석 중에만 사용한다.
  • 일반 데이터 로딩에는 Skeleton 또는 일반 진행 표현을 사용한다.

3. 결과

  • 결과의 핵심 제안과 검토 상태를 먼저 보여준다.
  • 입력 원문, 근거, 변경 차이는 판단에 필요한 수준으로 연결한다.
  • 생성 완료와 적용 완료를 구분한다.
  • 일부 결과만 생성됐으면 누락 범위와 재시도 대상을 표시한다.
  • 사람이 수정한 부분과 새로 생성된 부분을 혼동하지 않게 한다.

4. 검토와 수정

  • 사용자가 결과를 수락, 수정, 제외할 수 있어야 한다.
  • 평가·학습 피드백·대규모 운영 변경은 사람이 검토할 경로를 기본으로 둔다.
  • 검토할 항목이 많으면 남은 수, 현재 위치, 이전·다음 항목을 제공한다.
  • 다시 생성하면 무엇이 유지되고 무엇이 교체되는지 설명한다.
  • 사용자의 수정은 생성 재시도나 화면 전환으로 조용히 사라지지 않는다.

5. 적용과 다음 단계

  • 적용보다 피드백 12개 확정, 선택한 질문에 반영처럼 결과를 말한다.
  • 적용 대상과 외부 공개 범위를 확인한다.
  • 적용 후 상태, 되돌리기 가능성, 변경 이력을 제공한다.
  • 하나의 학습 고리가 끝나면 다음 검토, 다음 학습, 운영 확인으로 이어지는 행동을 제안한다.

결과의 상태 언어

상태의미사용자에게 필요한 것
준비 필요입력 또는 기준이 부족함부족한 조건과 시작 방법
처리 중AI 작업이 실행 중대상, 진행 상태, 취소 여부
생성 완료결과가 만들어졌지만 확정 전검토 행동과 한계
검토 중사람이 확인·수정 중현재 위치와 남은 항목
확정됨사람이 최종 결과를 승인함적용 범위와 시점
적용됨제품 데이터나 학습자 경험에 반영됨영향과 되돌리기 경로
일부 실패일부 결과만 완료됨성공·실패 범위와 재시도
실패작업을 끝내지 못함입력 보존과 복구 행동

상태 이름은 제품 맥락에 맞게 구체화하되 생성·검토·확정·적용의 차이를 없애지 않는다.

입력과 요청 경험

  • 내부 처리 용어보다 사용자의 목표와 결과 형식을 묻는다.
  • 자유 입력이 필요한 경우에도 예시, 범위, 필수 조건을 제공한다.
  • 시스템이 이미 아는 사용자·과정·학습 맥락을 반복 입력하게 하지 않는다.
  • 사용자가 선택한 범위와 시스템이 추론한 범위를 구분한다.
  • 긴 요청문을 작성하게 하기보다 구조화된 선택과 필요할 때의 세부 입력을 조합한다.
  • 사용자가 입력한 원문을 재사용할 때 현재 저장·공유 범위를 알 수 있어야 한다.

결과 설명과 불확실성

  • 결과가 제안임을 명확히 하고 확정된 사실처럼 말하지 않는다.
  • 신뢰도나 점수를 표시하려면 정의, 기준, 사용자가 취할 행동이 있어야 한다.
  • 설명 가능한 근거가 있으면 결과 가까이에 연결한다.
  • 근거가 불충분하면 그 한계를 문장으로 말하고 추가 확인 행동을 제공한다.
  • 결과가 좋다고 주장하는 대신 사용자가 비교·수정·확정할 수 있게 한다.
  • 학습자에게 직접 영향을 주는 판단은 사람의 책임과 검토 지점을 없애지 않는다.

대화와 연속 작업

  • 대화 기록은 현재 대상과 작업에 연결하고 이전 맥락이 적용되는 범위를 명확히 한다.
  • 새 대상이나 새 작업으로 바뀌면 이전 조건이 계속 적용되는지 알려준다.
  • 사용자의 수정 요청이 어떤 결과 version에 반영됐는지 확인할 수 있게 한다.
  • 대화만으로 중요한 운영 변경을 완료하지 않고 대상·범위·최종 행동을 구조화된 UI로 확인한다.
  • 긴 대화는 결정된 내용, 남은 질문, 다음 행동을 요약해 작업 고리를 유지한다.

브랜드 표현

  • 캐릭터는 AI가 실제로 안내하거나 사용자와 정서적으로 연결되는 순간에만 사용한다.
  • 처리 중 motion은 진행 상태의 보조 신호이며 상태 문장을 대체하지 않는다.
  • 2D 표현은 제품 안의 답변·처리·안내처럼 기능 맥락에 적합하다. 실제 사용은 catalog에 승인된 자산으로 제한한다.
  • 3D 캐릭터는 온보딩, 넓은 빈 상태, 중요한 완료처럼 넓고 드문 브랜드 맥락에 적합하다.
  • Glow는 다음 방향을 안내하는 의미 있는 순간에만 사용하고 AI 영역 전체의 배경이나 기본 버튼에 사용하지 않는다.
  • 캐릭터의 형태, 색, 요소 관계, 지정 여백을 임의로 바꾸지 않는다.
  • Flexible: 사용자마다 다른 학습 문제, 권한, 입력, 검토 방식에 적응하되 생성·검토·적용의 본질을 유지한다.
  • Link: 사람, 입력 데이터, 생성 결과, 수정, 적용 결과, 다음 배움을 하나의 추적 가능한 고리로 연결한다.
  • Glow: 결과가 불확실하거나 다음 단계가 필요한 순간에 방향을 밝힌다. AI임을 과시하는 장식으로 쓰지 않는다.

예외와 피해야 할 사용

  • AI 결과를 자동으로 정답 또는 최종 결정으로 표시하지 않는다.
  • 실제 진행 단계를 모르는 상태에서 가짜 단계와 percent를 보여주지 않는다.
  • 다시 생성할 때 사용자 수정을 경고 없이 덮어쓰지 않는다.
  • 캐릭터와 motion으로 오류, 지연, 한계를 가리지 않는다.
  • 모든 AI 기능에 Glow와 캐릭터를 반복 사용하지 않는다.
  • AI 대화 안에서 권한 변경, 외부 발송, 대량 적용을 별도 확인 없이 수행하지 않는다.
  • 일반 네트워크 요청에 processing motion을 사용하지 않는다.
  • 의미 없는 정확도의 confidence score를 보여주지 않는다.
  • 개인정보와 학습 원문을 결과 설명이나 오류에 불필요하게 반복하지 않는다.

상태와 접근성

  • streaming 콘텐츠는 screen reader에 지나치게 자주 알리지 않고 의미 있는 단위로 전달한다.
  • 처리 container에 필요한 aria-busy를 제공한다.
  • motion에는 접근 가능한 텍스트 상태와 reduced-motion fallback이 있다.
  • 결과 변경, 검토 상태, 적용 여부를 색만으로 표현하지 않는다.
  • 생성 결과를 keyboard로 탐색·수정·확정할 수 있어야 한다.
  • 긴 결과에서 focus와 scroll이 새 내용마다 밀리지 않게 한다.
  • 오류 후 원래 입력과 focus 맥락을 보존한다.
  • 캐릭터가 의미 정보를 전달하지 않으면 빈 대체 텍스트를 사용하고 인접 텍스트가 상태를 설명한다.

검토 질문

  • AI가 해결하는 사용자 문제가 분명한가?
  • 규칙 기반 방식보다 AI가 실제 가치를 제공하는가?
  • 시작 전에 입력, 결과, 적용 범위, 덮어쓰기 영향을 알 수 있는가?
  • 생성 완료, 검토, 확정, 적용 상태가 구분되는가?
  • 사람이 결과를 수정하고 책임 있게 확정할 수 있는가?
  • 실패와 일부 실패에서 입력과 성공 결과가 보존되는가?
  • 다시 생성할 때 유지·교체 범위를 예측할 수 있는가?
  • 입력부터 다음 배움까지 맥락이 연결되는가?
  • motion, 캐릭터, Glow가 실제 상태와 안내를 보조하는가?
  • keyboard, screen reader, reduced motion에서도 전체 작업을 끝낼 수 있는가?