디자인 캔버스: 붙잡아 다듬는 디자인

채팅에 "카페 랜딩 페이지를 디자인해 줘"라고 요청하면, 다 만들어진 페이지가 새 탭으로 열리고 채팅은 왼쪽 사이드바로 옮겨 갑니다. 제목 위에 마우스를 올리면 작은 칩이 이름을 알려주고, 클릭하면 속성 패널이 톡 나타납니다. 여기가 바로 디자인 캔버스입니다.

캔버스는 AI가 만든 디자인을 손보는 곳입니다. UI 목업, 랜딩 페이지, 포스터, 원페이저, 슬라이드 덱이 모두 여기서 브라우저처럼 픽셀 그대로 열립니다. 아무 요소나 클릭해 스타일과 글을 고치고, 더 큰 변경은 바로 옆 채팅의 AI가 맡습니다.

디자인 전체가 HTML 파일 하나

따로 배워야 할 디자인 포맷은 없습니다. 디자인 하나는 워크스페이스 최상위 designs/ 폴더의 완결된 HTML 파일 하나입니다. 스타일은 인라인 <style> 안에 들고, 외부 CSS나 JS는 쓰지 않습니다.

이 파일이 단일 원본입니다. 캔버스, 코드 뷰, 브라우저, PNG/PDF 내보내기가 전부 똑같은 바이트를 읽습니다. 편집은 모두 이 파일로 곧바로 자동 저장됩니다.

• AI에게 요청: 에이전트가 디자인을 만들면(create_design 툴) 캔버스가 새 탭으로 앞쪽에 열립니다. 백그라운드 실행이 만든 디자인은 포커스를 뺏지 않고 뒤쪽 탭으로 조용히 붙습니다.
• 파일 트리: designs/ 아래의 .html/.htm 파일은 클릭하면 캔버스로 열립니다. 다른 위치의 HTML은 코드 에디터로 열립니다. 폴더 위치가 규칙입니다.
• 코드에서: 코드로 연 HTML 파일에는 타이틀바에 "캔버스로 보기" 버튼이 뜨고, 캔버스 독에는 반대인 "코드로 보기"가 있습니다. 전환하면 같은 파일의 다른 탭은 닫힙니다. 파일 하나에 뷰 하나입니다.
• "디자인 모드"로 들어가는 사이드바 아이콘이나 단축키는 따로 없습니다. 언제나 디자인 파일이나 AI가 방금 만든 디자인을 거쳐 들어갑니다.

페이지와 덱

캔버스는 디자인을 두 종류 중 하나로 다루고, 어느 쪽인지는 알아서 판별합니다.

디자인 파일

designs/ 아래의 자기완결형 HTML 문서 하나. 캔버스, 코드 뷰, 브라우저, 내보내기가 함께 쓰는 단일 원본입니다.

페이지

반응형 디자인 문서. 캔버스가 브라우저 탭처럼 스크롤해 보여줍니다.

덱

고정 1280×720 슬라이드로 이루어진 디자인. 한 장씩 보여주고 필름스트립이 붙습니다.

시맨틱 이름

캔버스가 요소를 부르는 쉬운 이름입니다. "슬라이드", "제목", "텍스트", "이미지", "아이콘", "버튼", "링크", "목록", "표", "그룹" 같은 이름입니다. HTML 태그를 날것으로 보여주지 않습니다.

요소 칩

캔버스에서 요소를 선택하면 채팅 입력창에 생기는 보라색 칩. 다음 메시지가 정확히 그 요소를 겨냥합니다.

필름스트립

덱 하단의 슬라이드 썸네일 줄. 클릭하면 그 슬라이드로 넘어가고, 우클릭으로 복제, 순서 변경, 삭제를 할 수 있습니다.

채팅을 옆에 두고 디자인하기

디자인 탭이 활성인 동안 채팅 패널은 스레드, 입력창, 첨부까지 그대로 왼쪽 사이드바로 옮겨 갑니다. 헤더의 세션 전환 버튼("채팅 세션")을 누르면 "채팅" 대화상자가 열려, 캔버스를 떠나지 않고 대화를 바꿀 수 있습니다. 디자인 파일 자체는 입력창에 @멘션 칩으로 얹혀 있어서, "파랗게 바꿔 줘"라고만 해도 다시 첨부할 필요가 없습니다.

요소를 선택하면 파일 칩 자리에 보라색 요소 칩이 들어옵니다. 이를테면 "제목 · Q3 실적…" 같은 식이죠. 다음 메시지에는 디자인 파일 이름, 슬라이드, 요소의 DOM 경로, 원본 마크업이 함께 실립니다.

DOM 경로는 문서 안에서 그 요소가 있는 정확한 주소입니다. 그래서 에이전트는 겨냥한 노드만 고치고 주변은 건드리지 않습니다. 편집이 도착하면 캔버스가 곧바로 다시 로드되면서, 바뀐 부분 둘레에 남색 윤곽선이 약 1.6초간 반짝입니다.

AI 왕복 없이 직접 고치기

아무 데나 마우스를 올리면 칩이 요소를 우리말로 불러 줍니다. "제목", "버튼", "이미지", "그룹" 하는 식입니다. "그룹"은 모든 컨테이너를 뜻하니 "div" 같은 태그를 볼 일이 없습니다.

클릭해 선택하면 옆에 속성 팝오버가 열립니다. 브레드크럼("요소 경로")은 조상을 최대 4단계까지 보여 줘서 부모 그룹으로 곧장 건너뛸 수 있습니다.

스타일, 텍스트, 복제와 삭제, 텍스트 블록 추가, 슬라이드 관리는 전부 늘 같은 방식으로 도는 로컬 DOM 편집입니다. 즉시 적용되고, 비용이 들지 않고, 모델을 호출하지 않습니다.

• "타이포그래피" 섹션: "크기", "굵기"(400–800), "색상", "행간", "자간", "불투명도 %", "정렬"(왼쪽/가운데/오른쪽).
• "박스" 섹션: "패딩", "마진", "모서리 둥글기", "배경", "너비", "높이". 모두 px 단위입니다.
• "텍스트" 섹션: 요소의 글을 그대로 비추는 텍스트 영역(텍스트 편집이 가능한 요소에만).
• 숫자 필드는 Enter를 누르거나, 포커스를 옮기거나, 잠깐 입력을 멈추면 반영됩니다. 키를 누를 때마다 반응하지는 않고, 아직 입력 중인 값은 Escape로 되돌릴 수 있습니다. 네 변의 값이 제각각인 박스 필드는 "혼합"으로 표시되고, 숫자를 하나 입력하면 네 변이 그 값으로 똑같이 맞춰집니다.

팝오버를 닫아 두면 선택 영역 오른쪽 위에 마이크로 툴바가 떠서 "속성", "텍스트 편집", "AI에게 요청…", "복제", "삭제"를 제공합니다. 우클릭 메뉴에는 같은 동작에 "겹친 요소 선택…"이 더해집니다.

플로팅 독: 슬라이드, 배율, 내보내기

캔버스 하단 가운데에 유리 재질의 알약형 독이 떠 있습니다(접근성 이름 "디자인 도구"). 왼쪽부터 차례로 살펴봅니다.

PDF 내보내기는 디자인 전체를 담습니다. 덱은 슬라이드당 한 페이지(1280×720), 페이지는 문서 전체 높이만큼 긴 한 페이지가 됩니다. PNG는 언제나 한 프레임, 즉 현재 슬라이드나 페이지 하나입니다.

저장 대화상자는 <디자인>.pdf, <디자인>.png, <디자인>-slide-N.png 같은 기본 이름을 제안합니다. 내보낸 파일은 Finder나 탐색기에서 바로 보여 줍니다. 타이틀바에는 실제 HTML 파일을 여는 "브라우저에서 보기" 버튼이 있고, ⋯ 메뉴에도 "PDF로 내보내기"가 들어 있습니다.

자동 저장, 충돌, 실행 취소

편집은 손을 뗀 뒤 약 0.4초 만에 자동 저장됩니다. ⌘S나 타이틀바 저장 배지를 누르면 즉시 저장하고, 탭을 닫을 때도 같은 검증 저장을 거칩니다.

저장할 때마다 그새 파일이 바뀌지 않았는지 먼저 확인합니다. 에이전트든 외부 에디터든 다른 무언가가 파일을 먼저 썼다면, 디스크 버전이 이기고 밀려난 내 편집은 배너 뒤에 보관됩니다.

배너에는 "파일의 새 버전이 저장 전 편집을 대체했어요."라는 문구와 "내 편집 복원" 버튼이 뜹니다. 복원하면 내 버전이 이기고, 그냥 닫으면 디스크 버전이 유지됩니다. 아무것도 소리 없이 사라지지 않습니다.

• 실행 취소 이력은 최대 100단계. 같은 필드를 빠르게 연달아 고치면 1.2초 안의 변경이 한 단계로 합쳐집니다.
• 파일이 디스크에서 다시 로드되면 이력이 초기화됩니다. 에이전트 편집이든 충돌이든 외부 쓰기든 마찬가지이고, 이때 디스크가 새 기준선이 됩니다.
• 선택은 리로드를 견딥니다. 에이전트 편집 후에도 같은 DOM 경로의 요소가 남아 있으면 캔버스가 다시 선택해 줍니다.
• 앱 창이 포커스를 되찾을 때마다 캔버스가 파일을 다시 확인합니다. 그래서 열어 둔 디자인이 모르는 사이 낡은 버전으로 남는 일은 없습니다.

이것이 디자인 캔버스입니다. 자기완결형 HTML 파일 하나를 캔버스로도 코드로도 브라우저로도 열고, 무거운 일은 AI가, 미세 조정은 속성 팝오버가 맡습니다. 다음은 바깥의 다른 앱과 데이터를 에이전트의 손이 닿는 곳으로 연결할 차례입니다.