Canvas: 모델이 쓰는 모든 것을 위한 라이브 프리뷰 창
모델이 HTML, SVG, Mermaid 다이어그램, Markdown을 쓸 때, 그걸 보려고 어딘가 다른 곳으로 복사할 필요는 없어야 해요. Canvas는 채팅 옆에서 그걸 렌더링하고, 당신이 반복할 때마다 업데이트해요.
- 기능
- 캔버스
대부분의 채팅 도구는 코드 블록을 건네주고 행운을 빌어요. 당신은 그걸 에디터에 복사하고, 파일을 저장하고, 브라우저를 열고, 살짝 틀린 걸 보고, 채팅으로 돌아가, 수정을 붙여넣고, 반복해요. Canvas는 이 루프에서 중요한 두 가지 — 묻기, 그리고 보기 — 를 빼고 모든 단계를 없애요.
Canvas가 뭔가요
모델의 답변에 렌더링할 수 있는 게 들어 있으면, 대화 옆에 프리뷰 창이 열리고 그걸 라이브로 보여줘요. HTML은 페이지로 렌더링돼요. SVG는 이미지로 렌더링돼요. Mermaid 블록은 다이어그램이 돼요. Markdown은 서식이 입혀진 텍스트가 돼요. 당신이 보는 건 소스가 아니라 결과예요 — 모델이 다 쓰는 바로 그 순간에요.
채팅은 왼쪽에, 렌더링된 아티팩트는 오른쪽에 있어요. 당신은 계속 말해요 — “헤더를 더 작게,” “더 어두운 배경으로,” “재시도 경로 노드를 추가해” — 그리고 모델이 고칠 때마다 프리뷰가 업데이트돼요. 복사도, 붙여넣기도, 두 번째 앱도 없어요.
진가를 발휘하는 곳
잡일을 대화로 바꿔주는 몇 가지예요:
- 랜딩 섹션과 이메일 HTML. 히어로 섹션을 묘사하고, 렌더링되는 걸 보고, 보기 좋아질 때까지 평범한 말로 여백과 색을 미세 조정해요. 당신은 “그것에 대한 설명”이 아니라 “그것 자체”를 반복하는 거예요.
- 다이어그램. 인증 핸드셰이크의 플로차트나 요청의 시퀀스 다이어그램을 요청해 보세요. Mermaid가 즉시 렌더링하고, “이 두 단계를 바꿔줘”는 손으로 다시 그리는 대신 한 문장이면 돼요.
- 차트와 SVG. 빠른 데이터 스케치, 아이콘, 간단한 일러스트. 풀사이즈로 보고 말하면서 다듬어요.
- 긴 글. Markdown이 진짜 제목과 구조로 렌더링되니까, 날것의 별표를 째려보는 대신 독자가 읽을 그대로 문서를 읽어요.
모델 선택기와 함께 작동해요
Canvas는 한 공급자에 묶여 있지 않아요. 빠른 모델로 레이아웃을 초안하고, 까다로운 부분을 더 강한 모델로 분기하면 — 프리뷰가 이긴 브랜치를 따라가요. 아티팩트가 한 모델의 샌드박스 안이 아니라 스레드 옆에 살기 때문에, 모델을 갈아타도 진행 중인 작업을 잃지 않아요. 렌더링이 새 답에 대해 그냥 다시 실행될 뿐이에요.
이게 스튜디오 전체가 세워진 것과 같은 원칙이에요: 쓸모 있는 것(여기서는 라이브 아티팩트)은 한 모델의 담장 친 기능 세트가 아니라, 당신의 대화에 속해요.
말로 반복하고, 소스를 출고해요
프리뷰가 보기 좋아지면, 소스는 바로 거기 있어 가져갈 수 있어요 — HTML을 복사하고, SVG를 내보내고, Mermaid 정의를 챙겨요. Canvas는 자기만 읽을 수 있는 블랙박스가 아니에요. 당신이 온전히 소유하는 소스에 더 빨리 닿는 방법이에요. 반복은 평범한 말로 했고, 끝에는 프로덕션에 바로 쓸 출력을 손에 넣어요.
효과가 큰 작은 기능
Canvas는 모델들이 못 하던 능력을 더하는 게 아니에요 — 모델은 늘 HTML을 쓸 수 있었어요. Canvas가 없애는 건 쓰인 것과 보인 것 사이의 간극이에요. 그 간극을 닫으면 일하는 방식이 바뀌어요: 모델의 출력을 나중에 평가할 초안으로 다루는 걸 멈추고, 지금, 실시간으로, 같은 창 안에서 빚어내는 것으로 다루기 시작해요. 알고 보면 그게 도구를 빠르게 느끼게 만드는 것의 대부분이에요.
오타를 발견했거나 반박하고 싶나요? 이메일 주세요 .