최근 채팅 형태를 넘어서 AI UI에 대해 [7월 TIL #1] 채팅창을 벗어난 AI: 4단계 GUI 진화와 자율성에서 내용을 정리했다. 오늘은 동료 분께서 관련 주제로 n년간 모으신 자료들을 제공해주신 것을 하나씩 열어보며, 실제 제품에 적용된 모습 위주로 모아봤다. 이전 글에서 세워둔 4단계 프레임에 맞춰 정리했다. 다만 프레임에 따른 분류에 보는 관점에 따라 이견이 있을 수 있다.
자율성에 따른 4단계
1단계: 행동 표면 (The Verb Surface)
- "명령을 버튼으로 압축하다"
- 제거하는 것: 프롬프트 '설정(Setup)'의 수고.
2단계: 생성형 캔버스 (The Generative Canvas)
- "수정 가능한 결과물을 바로 띄우다"
- 제거하는 것: 결과물을 내 작업창으로 '옮기는 과정(Translation)'.
3단계: 위임형 에이전트 (The Delegated Agent)
- "알아서 일하고 결과만 보고하다"
- 제거하는 것: 매 단계마다 개입해야 하는 '중간 감독(Supervision)'.
4단계: 무의식적 캡처 (The Ambient Capture)
- "프롬프트조차 생략하다"
- 제거하는 것: '프롬프트 명령 그 자체'.
1단계: 행동 표면 (The Verb Surface) - "명령을 버튼으로 압축하다"
- 제거하는 것: 프롬프트 '설정(Setup)'의 수고.
Labeling
여러 소스들을 보면서 "이 글들의 내용을 분석해서 어울리는 주제별로 카테고리를 만들고 묶어줘"라고 길게 프롬프트를 짤 필요 없음. 상단에 있는 "주제를 기준으로 소스에 자동 라벨 지정"이라는 버튼 하나로 복잡한 명령을 압축해 버렸기 때문.
Do the Obvious Thing
4단계 관점 (프롬프트 명령 그 자체를 생략):
그저 평소처럼 글을 쓰고 있었을 뿐인데, AI가 사용자의 입력 맥락을 배경에서 실시간으로 포착(Ambient)하여 오류를 잡아내고 Fix errors라는 툴팁을 띄웠음. 유저가 무슨 앱에서 무엇을 하고 있는지 실시간으로 파악해 적절한 행위를 제시.
2단계 관점 (결과물을 옮기는 과정 제거):
오류를 수정하기 위해 별도의 사이드바 창을 열거나, AI가 추천한 올바른 문장을 복사해서 내 글에 붙여넣을 필요가 없음. 사용자가 작업 중인 텍스트 에디터(캔버스) 안에서 Tab 키 하나만 누르면 그 자리에서 즉시 올바른 표현으로 텍스트가 교체됩니다.
Clean Up
2단계: 생성형 캔버스 (The Generative Canvas) - "수정 가능한 결과물을 바로 띄우다"
- 제거하는 것: 결과물을 내 작업창으로 '옮기는 과정(Translation)'.
Adept AI의 줌(Zoom) UI
+ 실제 줌 기능 구현 트윗 데모: https://t.co/TdSrSsKs3i
구글맵처럼 화면을 줌인/줌아웃(추상화 사다리, Ladder of Abstraction)하며 상호작용하는 줌 가능한 문서 실험
2단계 + 3단계
제거하는 수고: 목록을 엑셀로 옮겨적는 번역 과정(2) + 호스트에게 일일이 묻는 노가다(3)
작동: 답변을 줄글이 아니라 '산점도 → 테이블 → 카드'로 이어지는 반응형 캔버스로 띄워 줌인/아웃으로 조작. 그래프에서 특정 클러스터를 동그라미 치고 "얼리 체크인 되는지 물어봐" 하면 AI가 병렬로 메시지 발송·보고.
Google DeepMind의 Music AI Sandbox
제거하는 수고: 완성 오디오를 DAW로 내보내는 과정
작동: mp3 다운로드 대신, 생성 클립을 멀티트랙 타임라인 위 편집 가능한 블록으로 즉시 정렬. EXTEND/EDIT로 작업 공간 안에서 바로 이어붙이고 수정.제거하는 수고: 코드 블록을 복사해 정확한 위치에 붙여넣는 과정
작동: 실제 작동하는 웹 화면에서 수정할 요소(h2 등)를 직접 클릭해 그 자리에서 AI에게 수정 요청. 코드와 최종 결과물이 하나의 캔버스로 통합.
Replit의 Element Editor
제거하는 수고: 코드 블록을 복사해 정확한 위치에 붙여넣는 과정
작동: 실제 작동하는 웹 화면에서 수정할 요소(h2 등)를 직접 클릭해 그 자리에서 AI에게 수정 요청. 코드와 최종 결과물이 하나의 캔버스로 통합.
3단계: 위임형 에이전트 (The Delegated Agent) - "알아서 일하고 결과만 보고하다"
- 제거하는 것: 매 단계마다 개입해야 하는 '중간 감독(Supervision)'.
(메모)
"3단계는 UI로 드러나지 않는다"는 것 자체가 흥미롭습니다. 3단계(위임형 에이전트)의 핵심은 "AI가 백그라운드에서 알아서 여러 스텝을 처리하고 결과만 보고"하는 건데, 이건 본질적으로 화면에 보여줄 게 없는 단계예요. 에이전트가 뒤에서 20개 작업을 도는 장면은 스크린샷이 안 됩니다.
순수 3단계 예시 보강용 대표적인 3단계 사례들
- 딥리서치류 (Deep Research 등): 질문 하나 던지면 수십 개 소스를 알아서 돌고 리포트만 반환
- 코딩 에이전트 (Claude Code, Cursor 에이전트 모드 등): "이 버그 고쳐줘" → 파일 여러 개 수정하고 PR까지
- 컴퓨터 유즈/예약 에이전트: "이 조건으로 예약해줘" → 사이트 돌아다니며 대신 클릭
4단계: 무의식적 캡처 (The Ambient Capture) - "프롬프트조차 생략하다"
- 제거하는 것: '프롬프트 명령 그 자체'.
Inline Feedback
제거하는 수고: 검증 요청 명령 자체(4) + 근거를 내 글로 복붙하는 과정(2)
작동: 우측 렌즈들(Devil's Advocate 등)이 작업 맥락을 배경 감지해 허점을 지적하고, 반박 근거를 별도 챗창이 아니라 문서 위 인라인 팝업으로 표시. +Add로 내 글에 즉시 삽입.
제거하는 수고: 완성 오디오를 DAW로 내보내는 과정
작동: mp3 다운로드 대신, 생성 클립을 멀티트랙 타임라인 위 편집 가능한 블록으로 즉시 정렬. EXTEND/EDIT로 작업 공간 안에서 바로 이어붙이고 수정.
Summary and Synthesis
제거하는 수고: 요약 요청 명령(4) + 알림을 일일이 거르는 감독(3)
작동: OS 백그라운드로 밀려드는 알림을 스스로 포착하고, 중요도를 알아서 판단해 최종 요약만 보고.
Ghost Text UI
제거하는 수고: 지시어 입력 자체(4)
작동: 그냥 타이핑하는데 AI가 맥락을 캡처해 다음 코드를 유령 글씨로 제안. 별도 창이 아닌 현재 코드창에 바로 떠서 Tab으로 즉시 적용(2단계 인터랙션 결합).
마무리
1. 결국 중요한 건 "이 제품이 유저의 어떤 문제를 푸는가", 그리고 "그걸 얼마나 진심으로 해결하고 싶은가"다.
이 두 가지가 분명할 때 비로소 '게으른 채팅창'을 만들지 않게 된다. 앞의 사례들이 프롬프트나 복붙, 감독 같은 수고를 굳이 없앤 것도, 결국 유저의 문제를 진짜로 끝까지 해결하려 했기 때문이다.
2. 제작자의 상상력도 결국 아는 만큼이다.
"UI와 AI가 이렇게까지 만날 수 있다"는 걸 직접 보고 인풋으로 쌓아두는 게 정말 중요하다. 이런 사례들을 알고 있어야, 내가 만들 때도 채팅창 너머의 형태를 떠올릴 수 있다. (Shout out to AK..🙇♂️)
3. 그래서 다음엔, 문라이트나 내가 일상에서 만들어 쓰게 될 AI 도구에 이 관점을 하나라도 직접 적용해보려 한다.
보는 데서 그치지 않고 한 번 만들어봤으면 더 재밌었을 것 같아서 살짝 아쉽다. 만들어봐야지 ㅎㅎ 굿!
'Learn everyday' 카테고리의 다른 글
| [7월 TIL #7] 썸네일 이미지 작업기: 목적을 정하니 프롬프트가 달라졌다 (0) | 2026.07.10 |
|---|---|
| [7월 TIL #5] 아는 것과 하는 것 사이 knowing-doing gap (0) | 2026.07.08 |
| [7월 TIL #4] 상반기 팀 리뷰: AS-IS 개선하는 사람, TO-BE 설계하는 사람 (0) | 2026.07.07 |
| [7월 TIL #3] UI 리뉴얼 작업기: 의사결정은 혼자 존재하지 않는다 (0) | 2026.07.05 |
| [7월 TIL #2] Slop 경계하기: 우리는 유저/구매자가 듣고 싶은 말을 하고 있는가? (0) | 2026.07.03 |