모든 프로젝트의 오른쪽은 실시간 미리보기입니다. 목업이 아니라 프로젝트 폴더의 실제 파일이 로컬로 서빙되고, 에이전트가 파일을 쓸 때마다 다시 그려집니다. 보이는 것이 문자 그대로 배포할 결과물입니다.
Result, Code, Split
패널 상단의 탭이 같은 상태를 보는 방식을 바꿉니다.
- Result — 렌더링된 디자인. 스티어링이 일어나는 곳입니다.
- Code — 미리보기 아래의 소스. 파일을 직접 보고 싶을 때 씁니다.
- Split — 둘을 나란히 봅니다.
뷰포트와 줌
툴바의 디바이스 버튼은 결과를 고정 너비로 다시 레이아웃합니다. 데스크톱, 태블릿, 폰이라서 실행을 떠나지 않고 디자인이 어떻게 반응하는지 확인할 수 있고, 너비 칩은 게이트가 검사하는 브레이크포인트로 바로 점프합니다(nav와 히트 타겟이 가장 자주 깨지는 폰과 태블릿 크기).
옆의 줌 컨트롤은 −, 퍼센트, **+**로 되어 있고 25%부터 400%까지 단계별로 조절됩니다. 트랙패드에서 핀치하거나, Ctrl을 누른 채 스크롤하거나, ⌘/Ctrl +, −, 0을 눌러도 됩니다. 포커스가 디자인 안에 있어도 단축키는 동작합니다. 디바이스 프레임에서는 핀치해도 포인터 아래 지점이 제자리에 유지됩니다. 퍼센트를 클릭하면 100%로 돌아옵니다. 지도처럼 자체적으로 뷰를 줌하는 디자인은 핀치를 직접 사용합니다.
검사가 실시간이기 때문에 게이트가 실행하는 다섯 너비 비교 — 데스크톱, 노트북, 태블릿, 두 개의 폰 너비 — 는 턴이 끝난 뒤가 아니라 언제든 직접 눈으로 확인할 수 있습니다.
선택, 댓글, 도구 레일
미리보기 안에서 ⌥-hover하면 커서 아래의 요소가 하이라이트됩니다. 에이전트가 보는 것과 같은 요소입니다. ⌥-click은 그 요소에 댓글을 핀으로 고정합니다. 레일 버튼은 스티어링 서랍을 엽니다. 실시간 컨트롤은 Tweaks, 핀과 그리기는 Comment mode, 디자인이 왜 이렇게 생겼는지 묻는 것은 Designer talk입니다. 각각 스티어링 아래에 전용 페이지가 있습니다.
프레젠트 모드
Present는 스튜디오 크롬을 걷어내고 창을 결과물로 채웁니다. 같은 방에 있는 사람에게 실행 결과를 보여주거나, 트랜스크립트 없이 디자인만 보고 싶을 때 씁니다. Escape로 프로젝트로 돌아옵니다.
에이전트가 작업하는 동안에도 실시간인 것
미리보기는 턴의 끝이 아니라 턴 도중에 다시 그려집니다. 디자인이 파일 단위로 조립되는 것을 지켜볼 수 있습니다. 에이전트는 메인 페이지를 먼저 쓰고 섹션이나 화면을 하나 마칠 때마다 저장하도록 지시받으므로, 미리보기는 빌드 끝이 아니라 초반부터 디자인을 보여주기 시작합니다. Mobile app, Social Media, Pixel Sprite, Diagram, Map처럼 데이터 모델로 빌드되는 디자인 유형은 스타터를 먼저 렌더링하고 모델이 커지는 대로 업데이트됩니다. 스티어링(선택, 댓글, Tweaks)도 계속 살아 있습니다. 새 메모는 빌드를 끊지 않고 다음 턴에 큐잉됩니다.
메인 페이지가 생기기 전
여러 화면으로 된 디자인은 메인 페이지를 저장하기 전에 토큰, 컴포넌트 스타일, 공유 스크립트를 쓰는 데 몇 분을 쓸 수 있습니다. 그때까지 미리보기 영역에는 빈 프레임이나 템플릿의 샘플 콘텐츠 대신 빌드 카드가 표시됩니다.
- Design so far가 맨 위에 놓입니다. 에이전트가 디자인 계획을 저장하는 즉시 카드가 그 계획을 디자인 자체의 토큰으로 그립니다. 실제 헤드라인과 주요 액션, 순서대로 놓인 섹션, 하나의 과감한 포인트, 그리고 에이전트가 스케치한 첫 화면입니다. 이어서 테마별 샘플 화면이 나오고, 에이전트가 저장한 스타일시트로 구성한 팔레트, 서체, 컴포넌트(버튼, 카드, 칩, 입력, 토글)가 뒤따릅니다. 에이전트가 쓴 화면이 아니라 샘플이라고 표시되며, 카드가 내용에 맞춰 늘어나므로 긴 계획도 두 번째 스크롤바 없이 위에서 아래로 읽힙니다.
- Build so far는 이번 실행에서 쓴 파일을 최신순으로 크기, 경과 시간과 함께 나열하고, 메인 페이지가 아직 쓰이지 않았는지, 여전히 템플릿의 스타터인지, 쓰여서 로딩 중인지를 알려주는 줄을 덧붙입니다.
- 실행이 길어지면 여러 화면 디자인에서는 빌드가 오래 걸리는 것이 정상이라는 메모가 추가됩니다.
새 웹사이트에서는 첫 빌드가 도는 동안 템플릿의 플레이스홀더 페이지가 숨겨진 채로 있습니다. 토큰이나 스타일시트를 쓰는 것은 시작으로 치지 않습니다. 에이전트가 메인 페이지 자체를 다시 쓸 때까지 카드가 떠 있고, 그 페이지가 아직 내 디자인이 아니라 템플릿의 플레이스홀더라고 알려줍니다. 에디터 템플릿(스프라이트, 캐릭터, 3D 부품, 다이어그램, 지도)은 예외입니다. 메인 페이지가 곧 에디터이므로 어떤 디자인 파일이든 미리보기를 띄웁니다.
카드는 디자인을 보여줄 뿐 소스 코드는 보여주지 않습니다. 퍼센트나 예상 시간은 없고, 에이전트가 실제로 저장한 것만 나옵니다.
저장된 페이지가 로드되었지만 미리보기에 끝내 연결되지 않으면(예를 들어 스크립트 하나가 초반에 실패한 경우), 미리보기는 2초 뒤 그 페이지를 있는 그대로 보여주고 "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait."(저장된 페이지를 표시 중 — 미리보기 브리지에 응답하지 않아 선택과 댓글은 대기합니다)라는 메모를 붙입니다. 이후 저장 때도 계속 새로고침됩니다.
Tip: 결과를 완료라 부르기 전에 폰 뷰포트를 확인하세요. 게이트는 확인합니다. 데스크톱 너비에서는 동작하지만 모바일에서 막히는 nav가 가장 흔한 FAIL입니다.