모든 프로젝트의 오른쪽은 실시간 미리보기입니다. 목업이 아니라 프로젝트 폴더의 실제 파일이 로컬로 서빙되고, 에이전트가 파일을 쓸 때마다 다시 그려집니다. 보이는 것이 문자 그대로 배포할 결과물입니다.
Result, Code, Split
패널 상단의 탭이 같은 상태를 보는 방식을 바꿉니다.
- Result — 렌더링된 디자인. 스티어링이 일어나는 곳입니다.
- Code — 미리보기 아래의 소스. 파일을 직접 보고 싶을 때 씁니다.
- Split — 둘을 나란히 봅니다.
뷰포트와 줌
툴바의 디바이스 버튼은 결과를 고정 너비로 다시 레이아웃합니다. 데스크톱, 태블릿, 폰이라서 실행을 떠나지 않고 디자인이 어떻게 반응하는지 확인할 수 있습니다. 옆에는 50 / 100 / 150% 줌 단계가 있고, 너비 칩은 게이트가 검사하는 브레이크포인트로 바로 점프합니다(nav와 히트 타겟이 가장 자주 깨지는 폰과 태블릿 크기).
검사가 실시간이기 때문에 게이트가 실행하는 다섯 너비 비교 — 데스크톱, 노트북, 태블릿, 두 개의 폰 너비 — 는 턴이 끝난 뒤가 아니라 언제든 직접 눈으로 확인할 수 있습니다.
선택, 댓글, 도구 레일
미리보기 안에서 ⌥-hover하면 커서 아래의 요소가 하이라이트됩니다. 에이전트가 보는 것과 같은 요소입니다. ⌥-click은 그 요소에 댓글을 핀으로 고정합니다. 레일 버튼은 스티어링 서랍을 엽니다. 실시간 컨트롤은 Tweaks, 핀과 그리기는 Comment mode, 디자인이 왜 이렇게 생겼는지 묻는 것은 Designer talk입니다. 각각 스티어링 아래에 전용 페이지가 있습니다.
프레젠트 모드
Present는 스튜디오 크롬을 걷어내고 창을 결과물로 채웁니다. 같은 방에 있는 사람에게 실행 결과를 보여주거나, 트랜스크립트 없이 디자인만 보고 싶을 때 씁니다. Escape로 프로젝트로 돌아옵니다.
에이전트가 작업하는 동안에도 실시간인 것
미리보기는 턴의 끝이 아니라 턴 도중에 다시 그려집니다. 디자인이 파일 단위로 조립되는 것을 지켜볼 수 있습니다. 스티어링(선택, 댓글, Tweaks)도 계속 살아 있습니다. 새 메모는 빌드를 끊지 않고 다음 턴에 큐잉됩니다.
Tip: 결과를 완료라 부르기 전에 폰 뷰포트를 확인하세요. 게이트는 확인합니다. 데스크톱 너비에서는 동작하지만 모바일에서 막히는 nav가 가장 흔한 FAIL입니다.