미리보기

미리보기는 채팅 오른쪽에서 실행되는 내 앱이에요. 안에 있는 모든 것이 게시한 뒤와 똑같이 동작해요. 버튼도, 폼도, 페이지도요.

위에 있는 막대

왼쪽부터 차례로 설명해요.

휴대폰에서

휴대폰에는 한 번에 패널 하나만 둘 공간이 있어요. 아래쪽의 Chat과 Preview 두 버튼으로 대화와 앱 사이를 오가요. 미리보기를 닫는 × 버튼은 더 큰 화면에만 있고, Split view(코드를 보세요)는 컴퓨터에서만 쓸 수 있어요.

모든 화면 크기에서

크기 메뉴는 각 화면에서 앱이 어떻게 보일지 보여 줘요.

• No frame은 위 그림처럼 패널을 가득 채워요.
• Desktop은 브라우저 창 안에 넣고, 위쪽에 게시된 주소를 표시해요.
• Tablet과 Mobile은 태블릿이나 휴대폰 안에 실제 너비로 넣어요.

모든 앱은 세 가지 크기 모두를 위해 만들어지고, 빌드와 변경이 끝날 때마다 휴대폰 너비에서 측정돼요. 그래도 여기서 보는 것이 휴대폰으로 방문한 사람이 무엇을 보게 될지 가장 빨리 확인하는 방법이에요.

그 자리에서 수정하기

Edit을 켜면 버튼이 Editing으로 바뀌고, 미리보기는 사용하는 페이지에서 수정하는 페이지로 바뀌어요. 글자 위에 포인터를 올리면 그 위에 Edit text가 나타나요. 클릭하고 입력하세요. 아무 요소나 클릭하면 윤곽선이 그려지고, 미리보기 아래쪽에 도구 막대가 나타나요.

끝에 있는 화살표는 막대를 접고, × 버튼은 요소 선택을 풀어요. 버튼을 더블클릭하면 그 버튼이 여는 페이지로 이동해요.

도구로 하는 변경에는 크레딧이 들지 않아요. Edit Element는 AI가 써 주기 때문에 채팅 답변처럼 크레딧이 조금 들어요. 요소 하나보다 큰 일, 예를 들어 새 섹션, 폼, 페이지는 채팅에서 요청하세요.

Theme

Theme는 앱 전체가 쓰는 색과 글꼴을 오른쪽 패널에 모아 보여 줘요. 하나를 바꾸면 그것을 쓰는 모든 곳이 모든 페이지에서 함께 바뀌어요.

• Colors는 각 색과 그 용도, 앱에서 몇 번 쓰이는지를 보여 줘요. 색상 견본을 클릭해 다른 색을 고르세요.
• Fonts는 각 글꼴과 사용 횟수를 보여 줘요. 목록에서 다른 글꼴을 고르세요.

미리보기에는 변경할 때마다 그 결과가 바로 보여요. Save & Apply는 변경을 코드에 기록하고, Cancel은 모두 원래대로 되돌려요. 테마에는 크레딧이 들지 않고, 그 이전 버전은 History에 보관돼요.

실행 취소와 History

실행 취소와 다시 실행은 이번 세션의 변경을 한 번 클릭에 하나씩 오가요. 그보다 오래된 것은 에디터 위쪽의 History에 모든 변경이 한 일에 따라 이름이 붙어 보관돼 있고, 어떤 버전으로든 돌아갈 수 있어요. 돌아간 것도 버전으로 보관되므로 다시 앞으로 올 수 있어요.