Design and preview

App 뷰어

실행 중인 앱을 미리 보고, 상호작용을 테스트하고, 게시 전 점검을 실행하세요 — 툴바 전체 안내와 비주얼 편집을 수행하는 모든 방법까지 함께 제공합니다.

App 뷰어란 무엇인가요?

AI 에이전트가 작업을 마치면 페이지 상단에 App 뷰어가 열립니다. 단순히 결과물이 어떻게 보이는지만 확인하는 것이 아니라, 완전히 작동하는 앱처럼 직접 상호작용할 수 있습니다. 페이지를 클릭해 이동하고, 기능을 테스트하고, 코드를 작성하지 않고도 비주얼 변경을 할 수 있습니다. 또한 게시 전 마지막 점검 지점 역할도 합니다. 무언가가 잘못 보이거나 예상과 다르게 동작한다면, 사용자가 보기 전에 발견하고 수정할 수 있습니다.

시작하기 전에: 에이전트 처리에는 잠시 시간이 걸릴 수 있습니다. 작업이 실행되는 동안 오른쪽의 터미널 패널에는 파일 생성, 코드 생성, 진행 중 발생한 오류를 포함한 실시간 활동이 표시됩니다. 언제든지 새로고침 아이콘을 사용해 미리보기의 최신 버전을 다시 불러올 수도 있습니다.

App 뷰어 툴바

미리보기 창 위에는 얇은 툴바가 있습니다. 왼쪽에서 오른쪽 순서로 각 컨트롤의 기능은 다음과 같습니다:

Design: 비주얼 편집 모드를 전환합니다. 활성화되면 미리보기에서 무엇이든 클릭해 해당 요소를 편집 대상으로 선택할 수 있습니다 — 아래의 “앱 수정하기”를 참고하세요.
기기 전환: 디스플레이 아이콘으로 미리보기를 모바일 보기로 전환했다가 다시 돌아올 수 있어, 페이지를 벗어나지 않고도 반응형을 확인할 수 있습니다.
새로고침: 미리보기 창을 다시 불러옵니다. 미리보기가 오래되었거나 멈춘 것처럼 보일 때 가장 먼저 해야 할 동작입니다.
홈: 어디까지 이동했든 미리보기를 앱의 홈 페이지로 즉시 되돌립니다.
페이지 선택기: 가운데 드롭다운에 앱의 페이지 목록이 표시됩니다. 클릭해서 이동하는 대신 하나를 선택해 바로 미리볼 수 있습니다.
새 탭에서 열기: 화살표 아이콘으로 미리보기를 별도의 브라우저 탭에서 엽니다. 특히 내장 미리보기가 멈추거나 응답하지 않을 때 유용합니다.
Console: 오른쪽 가장자리에서 시스템 로그와 오류 메시지가 있는 패널을 엽니다. 무언가가 망가져 보일 때 가장 먼저 확인할 곳입니다.

미리보기 위의 툴바: 왼쪽부터 Design, 기기 전환(“모바일 미리보기 표시”), 새로고침, 홈, 페이지 선택기, 새 탭에서 열기, 그리고 오른쪽의 Console.

화살표 아이콘은 실행 중인 앱을 자체 브라우저 탭에서 엽니다 — 내장 미리보기가 오작동할 때 믿을 수 있는 탈출구입니다.

App 뷰어 사용 방법

1단계: 미리보기가 로드될 때까지 기다리기

에이전트가 작업을 마치면 App 뷰어가 메인 창에 미리보기를 로드합니다. 보통 몇 초에서 1분 정도 걸립니다.

2분 이상 걸리나요? 툴바에서 새로고침을 클릭하세요. 그래도 멈춰 있다면 Console에서 오류를 확인하세요(3단계 참고).

2단계: 미리보기 및 상호작용 테스트

로드가 완료되면 지금 보고 있는 것은 실제 앱입니다:

반응형 확인: 기기 전환을 사용해 데스크톱 보기와 모바일 보기 사이를 전환하고, 더 작은 화면에서도 레이아웃이 유지되는지 확인하세요.
상호작용 직접 테스트: 모든 탐색 링크를 열고, 버튼을 누르고, 폼을 제출하고, hover 상태를 트리거하세요. 페이지가 렌더링된다고 해서 곧바로 제대로 작동하는 것은 아닙니다.
핵심 사용자 흐름 점검: 랜딩 페이지에서 탐색을 거쳐 주요 행동 유도 요소를 완료하는 가장 중요한 경로를 처음부터 끝까지 따라가 보세요.
실제 탭에서 테스트: 미리보기를 새 브라우저 탭에서 열어, 사용자가 실제로 접하게 될 환경에서 마지막 점검을 하세요.

3단계: 오류 확인하기(문제가 있어 보일 때)

앱이 로드되지 않거나 깨져 보인다면 App 뷰어 툴바에서 Console을 선택하세요. Console 패널은 미리보기 아래에 열리며, 터미널은 별도의 작업 활동 영역입니다. Console은 빌드 중 생성된 시스템 로그와 오류 메시지를 수집합니다. 빨간 오류 메시지에는 무엇이 잘못되었는지에 대한 설명과 추가 진단 정보가 포함될 수 있습니다.

오류를 수정하려면:

문제 신고 알림에서 Resolve를 클릭하면 AI가 식별된 모든 버그를 자동으로 분석하고 수정하며, 수정이 반영되면 미리보기가 다시 로드됩니다. 진행 상황은 터미널 패널에서 실시간으로 확인할 수 있습니다.
Resolve 버튼이 없나요? 에이전트의 최신 메시지 옆에 있는 “…”(더보기 옵션)을 클릭하고 Feedback을 선택해 지원팀에 문의하세요 — Chat Link와 오류 스크린샷을 함께 포함하세요.

전체 오류 처리 흐름은 문제 신고를 참고하세요.

4단계: 앱 수정하기

방법 1 — 클릭하여 편집하기(비주얼 변경에 가장 적합)

먼저 App 뷰어 툴바에서 Design을 선택해 비주얼 편집 모드를 활성화하세요. Design은 편집 권한이 있는 사용자의 적격한 데스크톱 프로젝트 상태에서만 사용할 수 있습니다. 보이지 않는다면 채팅에서 방법 2를 사용하세요. 그런 다음 미리보기에서 원하는 요소를 직접 클릭하세요. 선택된 요소에는 윤곽선이 표시되고, 선택한 항목과 크기를 알려주는 배지가 함께 나타납니다. 예: h1, 버튼, 카드. 요소 바로 옆에는 인라인 “Ask the Atoms to change…” 바가 나타나므로, 정확히 그 위치에 한정된 변경 사항을 설명할 수 있습니다. 또한 왼쪽에는 직접 조정할 수 있는 비주얼 에디터가 열립니다:

색상: 색상 선택기를 통한 텍스트, 배경, 테두리 색상.
간격: padding, margin, 요소 간 간격.
타이포그래피: 글꼴 크기, 굵기, 글꼴 패밀리.
레이아웃: 정렬, flexbox, grid 속성.
텍스트 콘텐츠: 문구를 제자리에서 편집.

모든 변경 사항은 미리보기에 즉시 반영되므로 결과를 실시간으로 확인할 수 있습니다. 비주얼 에디터에는 미리 만들어진 에셋을 탐색하고 추가할 수 있는 Library 탭도 포함되어 있습니다. 아이콘, 이미지, UI 컴포넌트를 프로젝트에 바로 추가할 수 있습니다.

클릭하여 편집하는 모습: 헤드라인이 선택되어 있고(태그와 크기 표시), 인라인 바를 통해 정확히 이 요소에 대한 변경을 요청할 수 있습니다.

방법 2 — 채팅에서 설명하기

에이전트에게 변경할 내용을 자연어로 설명하면 앱에 적용해 줍니다:

배경색을 더 어둡게 만들어 주세요.

헤더 주변의 padding을 줄여 주세요.

버튼 색상을 파란색으로 바꿔 주세요.

게시 전 점검

App 뷰어는 Publish 전 마지막 점검 지점입니다. 이 체크리스트는 사용자가 보기 전에 흔한 문제를 잡아내는 데 도움이 됩니다:

미리보기가 정상적으로 로드되고, Console에 빨간 오류 메시지가 표시되지 않습니다.
레이아웃이 데스크톱뿐 아니라 모바일 보기에서도 잘 유지됩니다.
탐색, 버튼, 폼, 주요 행동 유도 요소 등 모든 상호작용이 작동합니다.
플레이스홀더 콘텐츠가 교체되었습니다. [Company name] 같은 대괄호 자리표시는 놓치기 쉽지만 실제 게시 후에는 매우 눈에 띕니다.
페이지 선택기에 있는 각 페이지를 홈 페이지만이 아니라 최소한 빠르게라도 확인합니다.

모두 이상 없나요? 오른쪽 상단의 Publish를 누르고 링크를 공유하세요.

빠른 참조

미리보기 새로고침 — App 뷰어 툴바의 새로고침 아이콘.
기기 보기 전환 — 다양한 화면 크기를 테스트하려면 툴바의 기기 전환을 사용하세요.
페이지 간 이동 — 툴바의 페이지 선택기 드롭다운.
새 탭에서 열기 — 툴바의 화살표 아이콘.
오류 로그 보기 — App 뷰어 툴바에서 Console을 선택하면 로그 패널이 미리보기 아래에 열립니다.
오류 자동 수정 — 문제 신고 알림의 Resolve 버튼.
비주얼 요소 편집 — 미리보기에서 아무 요소나 클릭해 선택하고 비주얼 에디터를 여세요.
문제 신고 — 에이전트 메시지에서 “…” → Feedback.

FAQ

왜 App 뷰어에 로딩 화면이 표시되나요?

웹사이트가 로드 중이며 App 뷰어는 정상적으로 작동하고 있습니다. 잠시만 기다려 주세요. 2분 이상 걸리면 새로고침 아이콘을 클릭하거나 Console 패널에서 오류를 확인하세요.

왜 App 뷰어에 빨간 오류 메시지가 표시되나요?

에이전트는 빌드 중 문제를 겪을 수 있으며, 이로 인해 가끔 웹페이지 오류가 발생합니다. Resolve를 클릭하면 에이전트가 대신 복구해 주며, 수정이 완료되면 미리보기가 정상으로 돌아옵니다. 빨간 메시지는 위기 상황이 아니라 신호입니다.

게시된 페이지에서 Atoms 배지를 왜 제거할 수 없나요?

배지 제거는 Pro 이상 플랜에서 가능합니다. 오른쪽 상단의 아바타를 클릭하고 Settings를 선택한 다음 Plans & Billing으로 이동해 Pro 또는 Max 플랜을 선택하세요. 업그레이드가 완료되면 게시된 페이지에서 Atoms 배지가 자동으로 제거됩니다.

Design Mode를 사용해 페이지 레이아웃이나 스타일 문제를 어떻게 수정하나요?

Design Mode 를 열고 정렬이 어긋났거나 스타일이 잘못된 정확한 요소를 선택하세요.
페이지와 브레이크포인트, 현재 문제, 원하는 결과, 그리고 변경되면 안 되는 사항을 명시하세요.
padding, 정렬, 너비, 색상, 줄바꿈 동작처럼 측정 가능한 지시를 사용하세요. 시각적으로 맞추는 것이 중요하다면 참고 이미지를 첨부하세요.
한 번에 하나의 변경만 적용한 뒤, 데스크톱과 모바일 레이아웃, 그리고 로딩, 비어 있음, hover, 오류 같은 중요한 상태를 확인하세요.
결과가 다른 영역을 망가뜨리면 마지막으로 정상 작동하던 버전으로 돌아가 더 좁은 범위로 다시 시도하세요.

왜 App 뷰어에 빈 흰 화면이 표시되나요?

문제가 App 뷰어에만 영향을 주는지, Preview URL에도 해당하는지, 또는 게시된 사이트에도 동일한지 확인하세요.
한 번 새로고침하고, Preview를 새 탭에서 열고, 시크릿 창에서도 테스트하세요.
현재 작업이나 빌드가 아직 실행 중인지 확인하세요. 완료될 때까지 기다린 후 다시 시도하세요.
Cloud & AI 잔액이 부족하거나 앱이 중지되었다는 명시적 메시지가 표시되면 Settings → Cloud & AI 를 열어 해당 잔액을 확인하세요. 단순히 빈 화면만 보고 충전하지는 마세요.
쿠키, 토큰 또는 비밀 값을 공유하지 않은 상태로 Console 또는 Network 오류를 기록하세요.

화면이 계속 비어 있다면 Chat Link, 전체 Viewer URL, 시간과 시간대, 영향을 받는 환경, 스크린샷, 민감 정보가 제거된 오류 세부 정보와 함께 Support에 문의하세요.

왜 Preview 또는 App 뷰어에 빈 화면이 표시되거나 계속 로딩되나요?

App 뷰어에만 해당하는지, Preview URL에 해당하는지, 또는 게시된 사이트에도 영향을 주는지 확인하세요.
한 번 새로고침하고, Preview를 새 탭에서 열고, 시크릿 창에서도 테스트하세요.
현재 작업이나 빌드가 아직 실행 중인지 확인하고 완료될 때까지 기다리세요.
마지막으로 정상 작동하던 버전을 테스트하세요. 그 버전은 괜찮다면 빈 화면을 유발한 최근 변경 사항을 비교해 보세요.
제품에서 잔액 부족 또는 앱 중지를 명시적으로 보고할 때만 Settings → Cloud & AI 를 여세요.

문제가 계속되면 Chat Link, 전체 Viewer URL, 버전, 시간과 시간대, 영향을 받는 환경, 스크린샷, 민감 정보가 제거된 Console 또는 Network 오류와 함께 Support에 문의하세요.

왜 Design Mode 변경 사항이 Preview에서는 올바르게 보이는데 게시된 사이트에는 반영되지 않나요?

Preview와 게시된 사이트는 서로 독립된 채널입니다. 저장하거나 미리보기하는 것만으로는 변경 사항이 프로덕션에 반영되지 않습니다.

Publish 패널에서 Update를 클릭하세요 — Publish 패널을 열고 Update를 클릭하세요. 상태가 Up to date로 표시될 때까지 기다리세요.
실제 사이트를 강력 새로고침하세요 — Cmd+Shift+R(Mac) 또는 Ctrl+F5(Windows)를 누르거나, 브라우저 캐시 영향을 배제하기 위해 시크릿 창에서 URL을 여세요.
게시된 버전 번호를 확인하세요 — Publish 패널에서 버전이 Preview에서 보는 것과 일치하는지 확인하세요. 다르다면 다시 게시하세요.
플랫폼 Prod 서브도메인을 테스트하세요 — 사용자 지정 도메인을 사용 중이라면 기본 Prod URL도 별도로 열어 보세요. Prod 서브도메인은 업데이트되었는데 사용자 지정 도메인은 아니라면 문제는 DNS 또는 CDN 캐싱입니다.

문제가 계속되면 Preview URL, Prod URL, 나란히 비교한 스크린샷, 그리고 Publish 또는 Update를 클릭한 시간을 제공해 주세요.

에이전트가 변경한 뒤 모바일에서 페이지가 깨져 보이는 이유는 무엇인가요?

에이전트가 레이아웃이나 스타일을 수정할 때 더 작은 화면에서의 반응형 동작이 의도치 않게 깨질 수 있습니다.

먼저 모바일 너비에서 미리보기 — App 뷰어 툴바의 기기 전환을 사용해 모바일 보기로 전환하고 게시 전에 결과를 확인하세요.
모바일 보기에서 Design Mode 사용 — 기기 전환을 모바일로 설정한 상태에서 Design Mode로 전환하세요. 깨진 요소를 클릭하면 에이전트가 해당 화면 크기에서 그 컴포넌트만 대상으로 삼습니다.
명확한 반응형 제약 조건 제공 — 모바일 레이아웃이 정확히 어떻게 보여야 하는지 에이전트에게 알려 주세요. 예: "화면 너비가 768px보다 좁을 때 카드를 한 열로 쌓고 padding을 16px로 설정해 주세요."
기존 미디어 쿼리 유지 요청 — 데스크톱 변경을 요청할 때 "기존 반응형 또는 모바일 스타일은 수정하지 마세요."를 추가하세요.

문제가 계속되면 Chat Link, 깨진 모바일 레이아웃의 스크린샷, 기대하는 레이아웃의 참고 이미지를 제공해 주세요.

Preview 또는 게시된 사이트에서 이미지가 누락되거나 로드되지 않는 이유는 무엇인가요?

이미지가 깨져 보이거나, 플레이스홀더 아이콘이 표시되거나, 로드되지 않는다면:

이미지 파일 경로 확인 — Files 섹션을 열고 코드에서 참조하는 경로에 이미지 파일이 실제로 존재하는지 확인하세요. 편집 중 에이전트가 파일을 이동하거나 이름을 바꿨을 수 있습니다.
파일 크기와 형식 확인 — 너무 큰 이미지나 지원되지 않는 형식은 로드되지 않을 수 있습니다. 이미지를 압축하거나 PNG, JPG 또는 WebP로 변환하세요.
Cloud 스토리지 확인 — Settings > Cloud & AI로 이동해 사용 가능한 스토리지 공간이 있는지 확인하세요.
강력 새로고침 — Cmd+Shift+R(Mac) 또는 Ctrl+F5(Windows)를 눌러 캐시된 이미지 참조를 지우세요.

문제가 계속되면 Chat Link, 누락된 이미지의 URL, 깨진 상태의 스크린샷을 제공해 주세요.

에이전트가 잘못된 요소를 변경했거나 페이지의 다른 부분을 망가뜨렸습니다. 어떻게 해야 하나요?

에이전트가 관련 없는 요소를 수정하거나 페이지의 다른 부분에 회귀 문제를 일으킨 경우:

되돌리기 — History로 이동해 마지막으로 안정적이던 버전에서 리믹스하세요. 이렇게 하면 코드는 유지하면서 채팅 컨텍스트를 초기화할 수 있습니다.
Design Mode로 범위 고정 — Design Mode로 전환한 뒤 특정 요소를 직접 클릭하세요. 이렇게 하면 에이전트의 편집 범위가 해당 컴포넌트에 고정됩니다.
명시적 제약 조건 추가 — 변경되면 안 되는 것을 분명히 적으세요. 예: "헤더 배경색만 #1A365D로 변경하세요. 탐색 바, 푸터 또는 다른 어떤 컴포넌트도 수정하지 마세요."
프롬프트당 하나의 변경 — 한 번에 하나의 변경만 하고, 결과를 확인한 뒤 다음으로 진행하세요.

에이전트가 반복적으로 다른 요소를 망가뜨린다면 안정적인 버전에서 리믹스한 뒤, 더 좁은 범위의 지시로 다시 접근하세요.

왜 Preview에 빌드 오류나 누락된 의존성이 표시되나요?

Preview 패널에 빌드 오류, 빨간 오류 배너 또는 누락된 패키지에 대한 메시지가 표시된다면:

Resolve 버튼 사용 — App 뷰어에 문제 신고 알림이 나타나면 Resolve를 클릭하세요. AI가 식별된 모든 오류를 자동으로 분석하고 수정합니다. Resolve 버튼이 보이지 않으면 Console 패널의 정확한 오류 메시지를 복사해 에이전트에게 다음과 같이 붙여 넣으세요: "이 빌드 오류를 수정해 주세요: [error message]."
최근 변경 사항 확인 — 특정 편집 후 오류가 나타났다면 History로 이동해 마지막으로 정상 작동하던 버전과 비교하여 어떤 변경이 문제를 일으켰는지 확인하세요.
마지막 정상 버전에서 리믹스 — 오류를 해결하기 어렵다면 마지막으로 성공한 체크포인트에서 리믹스하고 변경 사항을 점진적으로 다시 적용하세요.
패키지 호환성 확인 — 오류가 특정 패키지를 가리킨다면 에이전트에게 다음과 같이 요청하세요: "[package name]이 현재 프로젝트 설정과 호환되는지 확인하고 버전 충돌이 있으면 수정해 주세요."

참고: 오류 메시지에 플랫폼 컴포넌트(App 뷰어, 시작 스크립트, Publish, 배포 기록) 또는 서드파티 패키지 내부 파일(예: @vue/compiler-core, vite)이 언급된다면, 이는 에이전트 문제가 아니라 플랫폼 문제일 수 있습니다. 전체 오류 메시지와 함께 Support에 문의하세요.

문제가 계속되면 전체 오류 메시지, Chat Link, 오류 스크린샷을 제공해 주세요.

왜 글꼴, 색상 또는 간격 변경이 적용되지 않나요?

에이전트가 변경이 완료되었다고 확인했지만 시각적 결과가 바뀌지 않았다면:

강력 새로고침 — Cmd+Shift+R(Mac) 또는 Ctrl+F5(Windows)를 누르세요. CSS 변경 사항은 브라우저에 자주 캐시됩니다.
CSS 우선순위 충돌 확인 — 에이전트가 추가한 스타일이 기존 규칙에 의해 덮어써졌을 수 있습니다. 에이전트에게 다음과 같이 요청하세요: "내가 요청한 스타일이 다른 CSS 규칙에 의해 덮어써지고 있는지 확인하고, 필요하다면 우선순위를 수정해 주세요."
Design Mode로 검사 — Design Mode로 전환하고 요소를 클릭하세요. 왼쪽의 비주얼 에디터에는 현재 적용된 색상, 간격, 타이포그래피, 레이아웃 속성이 표시되므로 요청한 변경이 적용되었는지 확인할 수 있습니다.
올바른 파일 확인 — 전역 스타일시트와 컴포넌트 수준 스타일이 모두 있는 프로젝트에서는 에이전트가 잘못된 파일을 편집했을 수 있습니다. 다음과 같이 물어보세요: "변경을 어디에 적용했나요? 파일 경로와 줄 번호를 보여 주세요."

문제가 계속되면 Chat Link, 변경되지 않은 요소의 스크린샷, 요청한 정확한 스타일 값을 제공해 주세요.

클릭했을 때 왜 Design Mode가 잘못된 컴포넌트를 선택하나요?

Design Mode는 시각적 레이아웃을 사용해 어떤 컴포넌트를 대상으로 하는지 판단합니다. 중첩되거나 겹치는 요소 때문에 잘못 선택될 수 있습니다.

확대하기 — 클릭하기 전에 해당 영역을 확대하세요. 이렇게 하면 가까이 중첩된 컴포넌트를 더 잘 구분할 수 있습니다.
보조 수단으로 텍스트 설명 사용 — 계속 클릭해도 잘못된 요소가 선택된다면 대신 채팅에서 설명하세요. 예: "오른쪽 열의 가격 카드 안에 있는 두 번째 버튼을 선택해 주세요."
파일 경로로 참조 — 어떤 파일에 해당 컴포넌트가 있는지 알고 있다면 에이전트에게 직접 알려 주세요: "src/components/PricingCard.tsx의 42번째 줄에 있는 요소를 편집해 주세요."

선택 문제가 계속되면 원하는 요소를 강조한 스크린샷과 Chat Link를 제공해 주세요.

이 페이지가 도움이 되었나요?