Skip to content
Role
UX · 디자인 시스템 · 프론트엔드
Period
2026.09
Tools
Figma, Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, Playwright

대화를 끊지 않는 회의 AI

SAI

요약

회의 중에는 아무도 AI에게 말을 걸 수 없습니다. 그래서 SAI는 먼저 묻습니다 – “…할까요?” 누군가 수락한 제안만 일을 하고, 그 결과만 노트에 남습니다.

10개
시연 장면

흐름 6단계 + 오류 상태 4가지

32개
자동 테스트

데스크톱 · 모바일, WCAG 2.1 AA

파랑 1개
시스템의 유일한 강조색

UX 흐름 · 디자인 시스템 · 프론트엔드 데모 (목업 데이터 기반, 실제 음성·검색 기능은 없음)

조건이 바뀐 뒤 두 가지 예산안을 다시 계산한 노트와 제안 패널
1 / 4
조건이 바뀐 뒤 두 가지 예산안을 다시 계산한 노트와 제안 패널

개요

같은 방에서 각자의 노트북과 휴대폰으로 한 회의방에 들어오고, 마이크는 한 기기만 켭니다. AI는 대화를 듣다가 쓸모 있는 순간에 제안을 띄우고, 사람은 대화를 멈추지 않은 채 눈으로 확인하고 손으로 수락합니다.

핵심 결정

  1. 01노트는 스스로 생기지 않는다 – 제안, 수락, 그리고 노트

    대화 중인 사람에게 AI가 마음대로 쓴 글은 확인해야 할 일만 늘립니다.

    AI는 먼저 묻고, 수락된 뒤에만 일하며, 결과만 노트에 씁니다. 제안 자체는 노트 본문에 섞이지 않습니다.

  2. 02근거가 없는 제안은 보여주지 않는다

    왜 지금 이걸 묻는지가 보여야 믿고 누릅니다.

    출처가 된 발화나 자료가 없는 제안은 띄우지 않고, 답을 기다리는 제안은 동시에 2개까지만 둡니다.

  3. 03강조색은 파랑 하나

    회의 중에는 화면을 흘끗 봅니다. 어디를 봐야 하는지가 한 번에 보여야 합니다.

    종류와 상태는 회색의 명도로만 나누고, 지금 눌러야 할 것만 파랑입니다. 빨강도 쓰지 않습니다.

  4. 04AI가 만든 것은 빛으로 표시한다

    AI 기본법의 고지 의무를 지키면서, 무엇을 AI가 썼는지 분명해야 했습니다.

    AI 생성물은 파란 글로우와 ‘AI 생성’ 배지로 구분합니다.

  5. 05자료는 사용자를 기다린다

    읽고 있는 숫자가 갑자기 바뀌거나 사라지면 읽을 수 없습니다.

    새 결과는 읽던 카드를 덮지 않고 대기열과 배너로 알립니다. 확인되지 않은 값은 지우지 않고 ‘확인 안 됨’ 태그를 붙입니다.

  6. 06지금 일어나는 일은 아래 섬 하나에

    녹음 상태와 알림이 화면 곳곳에 흩어지면 대화를 놓칩니다.

    하단의 캡슐 하나가 녹음 상태와 모든 알림을 담고, 막힌 동작은 이유와 해결 버튼을 함께 보여줍니다.

디자인 시스템

  • 원칙 8가지 – 선 대신 여백, 파랑 하나, AI는 빛, 자료는 사용자를 기다림, 모르는 건 모른다고, 선은 정보가 있을 때만, 그림자는 자르지 않음, 공식 로고는 그대로.
  • 토큰 – primitive → semantic → 컴포넌트의 3단 구조. 4px 그리드, 그림자는 두 종류만.
  • 컴포넌트 – 제안 카드(제안 · 진행 · 완료 · 닫힘), 근거 · 계산 · 제안 세 종류의 자료 카드(채움의 강도로 확신도를 표시), 회의 섬, 동의 게이트, QR 공유.
  • 라이브 스타일 가이드 – 앱 안의 /design-system에서 토큰과 원칙을 그대로 봅니다.
Figma에서 열기
Figma 파일 불러오는 중
드래그로 이동, 스크롤로 확대 — 실제 Figma 파일입니다.

품질

  • 테스트 – Playwright 테스트 32개를 데스크톱(1440×900)과 모바일에서 실행하고, 콘솔 오류가 하나라도 나면 실패로 봅니다. axe로 WCAG 2.1 AA를 검사합니다.
  • 대비 – 검사에서 기준 미달이던 색(보조 글자 4.49, 강조색 위 흰 글자 3.88)을 각각 5.05, 4.77로 고쳤습니다.
  • 한글 입력 중 단축키 – 키 코드 기준으로 처리해, 한글을 입력하는 중에도 단축키가 동작합니다.

사람이 개입하는 지점

  • AI가 먼저 제안 – 들은 것 중 쓸모 있는 것을 카드로 꺼냅니다. 제안은 제안일 뿐, 자동으로 노트가 되지 않습니다.
  • 사람이 수락한 것만 남음 – 누군가 받아들인 카드만 회의 노트로 들어갑니다. 회의를 끊지 않으면서도 결정권은 사람에게 둡니다.
  • 근거를 함께 – 어떤 발화에서 나왔는지가 카드에 붙고, 확신도는 카드 채움의 강도로 보입니다. 모르는 건 모른다고 말합니다.

회고

  • 필수 기능만 남긴다. 전체를 한 번 만든 뒤 90개 파일에서 9,000줄 가까이 덜어냈습니다.
  • 남은 일 – 이 데모는 프론트엔드만 있습니다. 실제 음성 인식, 검색, 동기화는 개발 단계에서 연결해야 합니다.