한 줄 정의
AI 에이전트와 아이디어를 브레인스토밍할 때, 말로 설명하기 어려운 시각적 요소(목업, 와이어프레임, 아키텍처 다이어그램 등)를 브라우저 탭에 실시간으로 렌더링하여 보여주는 도구.
핵심 요지
- 텍스트 터미널의 한계를 극복하고 사용자와 AI 간의 설계 맥락을 맞추기 위해 고안되었다.
- 처음부터 강제로 켜지는 것이 아니라, ‘말로 설명하는 것보다 보여주는 것이 나은’ 적절한 시점(Just-in-time)에 에이전트가 먼저 제안한다.
- 시각적인 질문(예: 레이아웃 비교)은 브라우저를, 개념적인 질문(예: 구조적 트레이드오프)은 터미널을 사용하는 식으로 하이브리드 소통을 강제한다.
상세
superpowers-brainstorming 스킬의 핵심 요소 중 하나다. 에이전트가 코드를 작성하기 전, 반드시 요구사항과 설계를 검증받도록 하는 <HARD-GATE> 원칙을 지키기 위한 보조 수단이다.
과거에는 단순히 프롬프트로 “어떤 레이아웃이 좋냐”고 물었다면, Visual Companion을 수락할 경우 에이전트가 로컬 서버를 띄워(--open) 사용자의 웹 브라우저에 A/B/C/D 시안을 렌더링한다. 사용자는 렌더링된 화면을 직접 보며 피드백을 줄 수 있어 의사소통의 오류를 획기적으로 줄일 수 있다.
예시
에이전트 제안: “다음 단계는 말로 설명하기보다 직접 보여드리는 게 낫겠습니다. 제가 브라우저 탭에 목업, 다이어그램, 비교 화면을 띄워드릴 수 있는데 실행할까요?”
사용자 승인 시: 에이전트가 시각적 렌더링 서버를 구동하고, 사용자는 브라우저에서 ‘마법사 레이아웃’, ‘그리드 레이아웃’ 등의 프로토타입을 눈으로 직접 보면서 의사결정을 내리게 된다.
충돌
- 토큰 소모: 화면을 실시간으로 그려내는 과정(특히 복잡한 UI나 다이어그램)에서 토큰 소모량이 매우 높다. 따라서 에이전트는 무조건 화면을 띄우는 것이 아니라, “시각적 질문인가 개념적 질문인가?”를 철저히 구분해야 한다.
- 의존성 오남용: 사용자가 시각적 도구에 너무 의존하면, 정작 중요한 백엔드 논리나 데이터 흐름 등의 텍스트 기반 기획(Terminal-based conceptual choice)이 소홀해질 수 있다.