App 뷰어
실시간으로 앱을 미리 보고 수정하세요.
App 뷰어란 무엇인가요?
AI 에이전트가 작업을 완료하면 페이지 상단에 App 뷰어가 표시됩니다. 이를 통해 실행 중인 앱을 미리 보고, 코딩 없이 바로 시각적으로 편집할 수 있습니다.
시작하기 전에
- 에이전트 처리에는 잠시 시간이 걸릴 수 있으니, 잠시만 기다려 주세요.
- 자세한 진행 상황은 오른쪽의 터미널 패널에서 확인하세요. 터미널 패널에는 파일 생성, 코드 생성, 빌드 과정에서 발생한 오류를 포함해 AI 에이전트가 수행 중인 작업의 실시간 로그가 표시됩니다.
- 언제든지 새로고침 아이콘을 클릭해 미리보기를 다시 불러올 수 있습니다.
App 뷰어 사용 방법
1단계: 미리보기가 로드될 때까지 기다리기
에이전트가 작업을 마치면 App 뷰어가 메인 미리보기 창에 미리보기를 로드합니다.
⏱️ 보통 몇 초에서 1분 정도 걸립니다.
2분 이상 걸리는 경우: App 뷰어 툴바에서 새로고침 아이콘을 클릭하세요. 그래도 멈춰 있으면 터미널 패널에서 오류를 확인하세요(아래 3단계 참조).
2단계: 앱 미리보기
로드가 완료되면 미리보기 창에서 실행 중인 앱을 확인할 수 있습니다.
- Desktop / Tablet / Mobile — 미리보기 창 상단의 기기 툴바를 사용해 보기 전환과 반응형 테스트를 할 수 있습니다. 툴바에는 데스크톱, 태블릿, 모바일 기기를 나타내는 세 개의 아이콘이 표시됩니다. 각 아이콘을 클릭하면 페이지를 벗어나지 않고도 다양한 화면 크기에서 앱이 어떻게 보이는지 확인할 수 있습니다.
- 새 탭에서 열기— 미리보기 창 오른쪽 상단의 화살표 아이콘을 클릭하면 별도의 브라우저 탭에서 미리보기를 열 수 있습니다. 이는 내장된 미리보기가 멈추거나 반응이 없을 때 특히 유용합니다.
3단계: 오류 확인하기 (문제가 있어 보일 때)
앱이 로드되지 않거나 깨져 보인다면 Console 패널에서 오류 메시지를 확인하세요.
Console 패널은 화면 오른쪽, 터미널 탭 아래에 있습니다. 이 패널에는 빌드 과정에서 생성된 시스템 로그와 오류 메시지가 표시됩니다.
빨간색 오류 메시지가 보인다면 일반적으로 다음 정보가 포함됩니다.
- 무엇이 잘못되었는지에 대한 설명
- 오류가 발생한 파일과 줄 번호
- 근본 원인을 파악하는 데 도움이 되는 스택 트레이스
오류를 수정하려면: (자세한 내용은 다음을 참조하세요: 문제 신고)
- "Resolve"를 클릭하세요 — AI가 식별된 모든 버그를 자동으로 분석하고 수정합니다.
- 수정이 적용되면 미리보기가 다시 로드됩니다. 진행 상황은 터미널 패널에서 실시간으로 확인할 수 있습니다.
"Resolve" 버튼이 없나요?
에이전트의 최신 메시지 옆에 있는 "..."(추가 옵션)을 클릭한 다음 "Feedback"을 선택해 지원팀에 문제를 신고하세요. Chat Link와 오류 스크린샷을 함께 포함해 주세요.
4단계: 앱 수정하기
방법 1: 클릭하여 편집 (시각적 변경에 권장)
미리보기 창에서 원하는 요소를 직접 클릭하세요. 화면 왼쪽에 비주얼 에디터가 나타나며 다음 항목을 조정할 수 있습니다.
- 색상 — 색상 선택기를 사용해 텍스트 색상, 배경색 또는 테두리 색상을 변경
- 여백 — 패딩, 마진, 요소 간 간격 조정
- 타이포그래피 — 글꼴 크기, 굵기, 글꼴 계열 수정
- 레이아웃 — 정렬, flexbox 설정 또는 grid 속성 변경
- 텍스트 내용 — 에디터에서 직접 텍스트 편집
변경을 하면 미리보기가 즉시 업데이트되어 결과를 실시간으로 확인할 수 있습니다.
비주얼 에디터에는 Library 탭도 포함되어 있어 아이콘, 이미지, UI 컴포넌트와 같은 사전 제작된 에셋을 탐색하고 프로젝트에 추가할 수 있습니다.
방법 2: 채팅으로 설명하기
자연어로 AI 에이전트에게 변경하고 싶은 내용을 알려주세요. 예를 들면 다음과 같습니다.
- "배경색을 더 어둡게 해줘"
- "헤더 주변 패딩을 줄여줘"
- "버튼 색상을 파란색으로 바꿔줘"
AI가 요청을 이해하고 앱에 변경 사항을 적용합니다.
빠른 참조
- 미리보기 새로고침 – App 뷰어 툴바에서 새로고침 아이콘을 클릭해 미리보기 창을 다시 불러옵니다.
- 기기 보기 전환 – 미리보기 툴바의 Desktop, Tablet 또는 Mobile 아이콘을 사용해 다양한 화면 크기에서 앱이 어떻게 보이는지 테스트합니다.
- 새 탭에서 열기 – 미리보기 창 오른쪽 상단의 화살표 아이콘을 클릭해 별도의 브라우저 탭에서 미리보기를 엽니다.
- 오류 로그 보기 – 화면 오른쪽의 Console 패널에서 오류 메시지와 시스템 로그를 확인합니다.
- 오류 자동 수정 – 문제 신고 알림에서 "Resolve" 버튼을 클릭하면 AI가 식별된 모든 버그를 수정합니다.
- 시각적 요소 편집 – 미리보기 창에서 요소를 클릭하면 왼쪽에 비주얼 에디터가 열립니다.
- 문제 신고 – 에이전트 메시지에서 "..." → "Feedback"을 클릭해 지원팀에 문제를 신고합니다.
FAQ
왜 App 뷰어에 로딩 화면이 표시되나요?
로딩 화면은 웹사이트가 로드 중이라는 의미입니다. App 뷰어는 정상적으로 작동하고 있습니다. 미리보기가 정상적으로 로드될 때까지 잠시 기다려 주세요. 2분 이상 걸리면 새로고침 아이콘을 클릭하거나 Console 패널에서 오류를 확인해 보세요.
왜 App 뷰어에 빨간 오류 메시지가 표시되나요?
에이전트는 빌드 과정에서 문제를 겪을 수 있으며, 이로 인해 간혹 웹페이지 오류가 발생할 수 있습니다. "Resolve"를 클릭하면 에이전트가 오류를 대신 수정해 줍니다. 수정이 완료되면 App 뷰어가 다시 정상적으로 미리보기를 표시하므로, 빨간 오류 메시지가 나타나더라도 걱정하실 필요는 없습니다.
게시한 페이지에서 Atoms 배지를 왜 제거할 수 없나요?
배지 제거는 Pro 이상에서만 가능합니다. 언제든지 Settings → Plans & Billing에서 업그레이드할 수 있습니다. 업그레이드 후에는 게시한 페이지에서 배지가 자동으로 제거됩니다.
업그레이드하려면 오른쪽 상단의 아바타를 클릭하고 Settings를 선택한 다음 Plans & Billing으로 이동하세요. Pro 또는 Max 플랜을 선택하고 업그레이드 절차를 완료하면, 이후 게시한 페이지에 Atoms 배지가 더 이상 표시되지 않습니다.
