미리보기, 실시간으로 실행되는 내 앱
핵심 요약미리보기 탭은 만드는 동안 앱을 실제로 실행합니다. 주소창으로 원하는 페이지를 열고, 기기 버튼으로 태블릿(820px)이나 휴대폰(390px) 너비로 보고, ↻로 새로고침, ⟲로 다시 시작, 화살표로 새 탭에서 여세요. 20분 동안 쓰지 않으면 절전 상태가 되고, 돌아올 때까지 저장된 사본을 보여 줍니다.
미리보기 탭에서는 앱이 전용 보안 클라우드 컴퓨터에서 실제로 실행됩니다. 그림이 아닙니다. 클릭하고, 회원가입하고, 수업을 예약하거나 주문할 수 있으며, 입력한 내용은 앱의 데이터베이스에 저장됩니다. MonstarX가 바꾼 내용은 몇 초 안에 여기에 나타납니다.
미리보기 도구 모음에는 무엇이 있나요?
섹션 제목: “미리보기 도구 모음에는 무엇이 있나요?”왼쪽부터 차례로 다음과 같습니다.
| 버튼 | 하는 일 |
|---|---|
| 상태 | 앱이 실행 중이면 실행 중, 시작하는 동안 시작 중, 절전 상태면 중지됨, 실패하면 오류가 표시됩니다. |
| 주소창 | 지금 보고 있는 페이지와 앱의 모든 페이지 목록 |
| 데스크톱 / 태블릿 / 휴대폰 | 앱을 전체 너비, 820px, 390px 너비로 보여 줍니다. |
| 편집 | 페이지를 가리키고 바꿀 내용을 말합니다. 편집 모드를 참고하세요. |
| 캡처 | 페이지 일부의 이미지를 메시지에 넣습니다. 캡처를 참고하세요. |
| 댓글 | 다른 사람이 미리보기에 남긴 댓글과 내 댓글. 공유와 댓글을 참고하세요. |
| ↻ 미리보기 새로고침 | 현재 페이지를 다시 불러옵니다. |
| ⟲ 개발 서버 다시 시작 | 앱의 미리보기를 다시 시작합니다. 미리보기가 멈췄거나 최신 상태가 아닐 때 쓰세요. |
| 공개 미리보기 링크 복사(복사 아이콘) | 지금 보고 있는 페이지의 미리보기 주소를 복사합니다. 버튼에 마우스를 올리면 주소가 보입니다. 링크가 있는 사람은 누구나 미리보기를 열 수 있습니다. ••• 메뉴에서는 미리보기 링크 복사입니다. |
| ↗ 새 탭에서 미리보기 열기 | 미리보기를 별도의 브라우저 탭에서 엽니다. |
노트북에서 대화창을 넓게 열어 둔 경우처럼 미리보기 패널이 좁으면, 주소창 뒤의 도구가 줄 끝의 ••• 메뉴(미리보기 옵션)로 들어갑니다.
다른 페이지는 어떻게 여나요?
섹션 제목: “다른 페이지는 어떻게 여나요?”주소창을 클릭하세요. 앱의 모든 페이지 목록이 각 페이지의 파일과 함께 열립니다.
- 페이지를 클릭하거나, 입력해서 목록을 좁힌 다음 Enter 키를 누르세요. 페이지 주소의 앞부분만 입력하고 Enter를 눌러도 열립니다(
/pr을 입력하면/pricing이 열립니다). - ↑, ↓ 키로 목록을 이동하고, Esc 키로 닫으세요.
/classes/$id처럼 바뀌는 부분이 있는 페이지는 그 패턴이 입력란에 들어가고 바뀌는 부분이 선택되므로, 실제 값을 입력하면 됩니다.- 전체 주소를 붙여 넣으면 도메인 뒷부분(
/pricing)만 남습니다.
MonstarX가 새 페이지를 만들수록 목록이 채워집니다. 앱 안의 링크를 클릭해서 이동할 수도 있습니다.
휴대폰이나 태블릿 화면은 어떻게 확인하나요?
섹션 제목: “휴대폰이나 태블릿 화면은 어떻게 확인하나요?”도구 모음의 태블릿이나 휴대폰 버튼을 클릭하세요. 미리보기가 820px(태블릿) 또는 390px(휴대폰) 너비로 좁아져, 메뉴가 버튼 하나로 접히거나 열이 세로로 쌓이는 등 레이아웃이 어떻게 바뀌는지 볼 수 있습니다.
실제 기기에서 확인하려면 휴대폰에서 미리보기를 여세요. 휴대폰으로 만들기를 참고하세요.
새로고침과 다시 시작 중 무엇을 써야 하나요?
섹션 제목: “새로고침과 다시 시작 중 무엇을 써야 하나요?”- ↻ 새로고침은 브라우저의 새로고침과 같습니다. 페이지를 다시 불러옵니다. 무언가가 최신 상태가 아닌 것 같을 때 먼저 써 보세요.
- ⟲ 개발 서버 다시 시작은 앱을 실행하는 프로그램을 다시 시작합니다. 새로고침으로 해결되지 않을 때, 미리보기가 멈춘 것 같을 때, MonstarX가 요청할 때 쓰세요. 대부분 주소는 그대로입니다.
미리보기는 스스로도 관리합니다. 변경 뒤에 페이지가 깨지면 페이지가 다시 그려질 때까지 조용히 새로고침하고, 시작에 실패한 미리보기는 자동으로 다시 시도합니다.
미리보기가 왜 절전 상태인가요?
섹션 제목: “미리보기가 왜 절전 상태인가요?”자원을 아끼기 위해 미리보기는 20분 동안 쓰지 않으면 절전 상태가 됩니다. 그러면 빈 패널 대신 마지막으로 보던 페이지의 저장된 사본이 배너와 함께 나옵니다. 배너에는 ‘저장된 사본 · 25분 전 · 미리보기가 절전 상태입니다. 마우스를 움직이거나 클릭하면 다시 시작됩니다.’라고 표시됩니다.
작업 공간 위에서 마우스를 움직이거나, 스크롤하거나, 입력하거나, 클릭하면 실시간 미리보기가 저절로 다시 시작됩니다. 지금 활성화를 클릭해도 됩니다. 저장된 사본에서 링크나 버튼을 클릭하면 실시간 미리보기가 그 페이지를 열어 줍니다(‘다음 항목을 열기 위해 실시간 미리보기를 시작하는 중: “소개”…’).
저장된 사본은 MonstarX 서버가 아니라 내 브라우저에만 보관됩니다. 앱 안에서 로그인한 내용이 보일 수 있기 때문입니다. 저장된 사본이 없으면 패널에 미리보기가 절전 상태입니다라는 문구와 지금 활성화 버튼이 나옵니다.
미리보기 안에서 내 앱에 로그인할 수 있나요?
섹션 제목: “미리보기 안에서 내 앱에 로그인할 수 있나요?”네. 앱 사용자처럼 회원가입하고 로그인하세요. 별도 탭(↗)에서 연 미리보기는 로그인이 따로 관리되므로 그곳에서 다시 로그인해야 합니다. 앱에 계정 기능이 있으면 MonstarX가 대화창에 바로 쓸 수 있는 테스트 사용자를 줍니다(데모 계정 준비됨).
누가 미리보기를 열 수 있나요?
섹션 제목: “누가 미리보기를 열 수 있나요?”MonstarX 안에서는 프로젝트 소유자와 프로젝트를 공유받은 사람이 열 수 있습니다. 모두 앱을 써 보고 댓글을 남길 수 있지만, 편집, 캡처, 개발 서버 다시 시작은 소유자와 편집 가능 권한이 있는 사람에게만 보입니다.
미리보기에는 따로 주소가 있으며, 공개 미리보기 링크 복사(또는 ••• 메뉴의 미리보기 링크 복사)로 복사할 수 있습니다. 이 링크가 있는 사람은 누구나 미리보기를 열 수 있으니 신중하게 공유하세요. 임시 주소이기도 합니다. 미리보기를 다시 시작하면 바뀔 수 있고, 아무도 쓰지 않으면 절전 상태가 됩니다. 앱을 모두에게 보여 주려면 게시하세요.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”미리보기에서 입력한 데이터는 실제 데이터인가요?
게시된 앱이 쓰는 것과 같은 앱의 실제 데이터베이스에 저장됩니다. 테스트 주문, 예약, 회원가입은 관리자 탭과 백엔드에 나타납니다.
미리보기에 ‘미리보기 서버를 시작하지 못했습니다’라고 나옵니다. 어떻게 해야 하나요?
다시 시작을 클릭하세요. 계속 실패하면 로그 탭에서 원인을 확인하거나, 대화 모드에서 물어보세요.
미리보기에 왜 앱 대신 카드가 나오나요?
MonstarX가 만드는 동안이나 앱이 시작되는 동안에는 쓰다 만 페이지가 보이지 않도록 상태 카드가 미리보기를 가립니다. 빌드 지켜보기를 참고하세요.
MonstarX를 닫아도 미리보기는 계속 실행되나요?
20분 동안 쓰지 않으면 절전 상태가 되고, 돌아오면 다시 깨어납니다. 게시된 앱은 별개이며 항상 켜져 있습니다.
미리보기 링크를 고객과 공유해도 되나요?
됩니다. 링크가 있는 사람은 누구나 열 수 있습니다. 다만 미리보기는 앱을 만들 때 쓰는 것이라 주소가 바뀔 수 있고 절전 상태가 되기도 합니다. 널리 공유할 앱은 게시하세요. 다른 사람이 진행 상황을 보고 댓글을 남기게 하려면 프로젝트를 공유하세요.