비주얼 편집 및 미리보기

비주얼 편집은 App 뷰어에서 직접 작동합니다. 미리보기 아래의 툴바를 사용해 요소를 선택하고, 텍스트를 편집하고, 이미지를 교체하고, 테마를 적용하고, 게시 전에 변경 사항을 미리 볼 수 있습니다.

AI 지원 변경에는 Select element 를, 직접 텍스트를 변경할 때는 Edit Text를, 색상, 글꼴, 효과와 같은 전역 스타일에는 Theme를 사용하세요.

비주얼 편집 작동 방식

AI 에이전트가 작업을 완료하면 프로젝트 상단에 App 뷰어 가 표시됩니다. 비주얼 편집 툴바는 미리보기 아래에 있습니다.

• Select element 를 사용하면 하나 이상의 요소를 선택하고 에이전트에게 수정을 요청할 수 있습니다.
• Edit Text 를 사용하면 미리보기에서 텍스트를 직접 편집할 수 있습니다.
• Theme 는 전역 스타일을 위한 테마 컨트롤을 엽니다.

필요하지 않을 때는 툴바를 접을 수 있습니다.

시작하기 전에

편집을 시작하기 전에 다음을 확인하세요:

• 프로젝트에 완료된 빌드가 있어야 합니다. 비주얼 편집 도구는 에이전트가 작업을 마친 후 App 뷰어에서 사용할 수 있습니다.
• 변경 사항은 게시하기 전까지는 라이브가 아닙니다. 업데이트된 버전을 게시하기 전까지 공개 URL에는 영향을 주지 않습니다.
• 테마는 공유 스타일에만 적용됩니다. 고정된 값으로 만들어진 요소는 테마를 변경한 후에도 기존 모양을 유지합니다. 아래의 테마가 올바르게 보이지 않는 경우 를 참조하세요.

Theme로 전역 스타일 설정하기

테마는 프로젝트의 디자인 시스템입니다. 하나의 요소에 대한 설정이 아니라, 앱 전체에 적용되는 전역 변수(팔레트, 타이포그래피, 간격)를 정의합니다.

Theme는 빌드를 시작하기 전 준비 단계에서 사용하는 것이 가장 좋습니다. 초기에 하나를 적용하면 에이전트가 생성하는 모든 것이 처음부터 그 테마를 따르게 됩니다.

테마 선택하기

App 뷰어 아래 툴바에서 Theme 를 선택하세요. Theme 패널에는 Search Themes 필드가 있으며, 테마는 다음 섹션으로 그룹화됩니다:

• Current Theme — 현재 프로젝트에서 사용 중인 테마입니다. 아무것도 적용하기 전에는 No theme applied yet 로 표시되며, 그 옆의 + 버튼으로 새 테마를 만들 수 있습니다.
• Featured Theme — 디자이너가 엄선한 15개의 프리셋입니다. 각 테마는 해당 테마로 만든 페이지 미리보기, 이름, 그리고 팔레트를 보여주는 색상 견본 행과 함께 표시됩니다. 이 테마들은 삭제할 수 없습니다.
• Your Theme — 사용자가 만들거나 사용자 지정한 테마입니다. 이름을 바꾸거나 삭제할 수 있습니다.

모든 테마는 해당 테마로 만든 페이지 미리보기, 이름, 그리고 팔레트를 보여주는 색상 견본 행과 함께 표시되므로, 적용하기 전에 방향성을 판단할 수 있습니다.

상단에 적용된 테마가 있고 그 아래에 저장된 테마가 표시된 Theme 탭.

적용하려면:

1. 원하는 테마를 선택합니다.
2. Atoms가 "Do you want to apply theme name?" 라고 묻습니다.
3. 확인하려면 Apply 를, 돌아가려면 Cancel 을 선택합니다.
4. 미리보기를 확인합니다.

예상 결과: 미리보기가 선택한 테마로 업데이트되며, 이제 해당 테마가 Current Theme 아래에 표시됩니다.

참고: 저장되지 않은 텍스트 또는 이미지 변경 사항이 있으면, Atoms는 새 테마를 적용하기 전에 저장하거나 버릴지 묻습니다.

적용된 테마 업데이트하기

Theme 탭에 점이 표시되면 현재 적용된 테마의 더 새로운 버전을 사용할 수 있다는 뜻입니다.

업데이트하려면 현재 테마에서 Update 를 선택하고 Do you want to re-apply theme name? 를 확인하세요. 그러면 프로젝트가 더 새로운 버전을 사용하게 됩니다.

업데이트는 필수가 아닙니다. 그대로 두면 프로젝트는 적용한 버전을 계속 사용합니다.

참고: 참고: 앱이 선택한 테마처럼 보이지 않는다면, 개별 요소에 테마를 덮어쓰는 스타일이 있을 수 있습니다. 이러한 덮어쓰기는 특정 콘텐츠를 대상으로 하며 테마 변경 후에도 유지됩니다.

Theme Manager에서 테마 만들기 또는 편집하기

Current Theme 옆의 + 를 선택해 처음부터 새로 만들거나, 기존 테마를 열어 변경할 수 있습니다. 어느 쪽이든 Theme Manager 가 열리며, 여기서 라이브 미리보기를 보면서 테마를 세밀하게 조정할 수 있습니다.

설정은 세 개의 탭으로 구성됩니다:

• Color — 앱에서 사용하는 색상 역할로, 용도별로 Base Colors, Card, Popover, Primary, Secondary 등으로 그룹화됩니다. 각 역할은 고유한 값을 가지므로 Primary 를 변경하면 이를 사용하는 모든 요소에 적용됩니다.
• Fonts — Serif, Sans-serif, Mono 서체입니다.
• Effects — 모서리 Radius 와 색상, 불투명도, 블러, 확산, 오프셋으로 제어하는 Shadow 입니다.

옆의 미리보기는 실제 컴포넌트(로그인 양식, 버튼, 입력 필드, 본문 텍스트, 고정폭 텍스트)로 구성되어 있어 추측하지 않고도 변경 사항을 즉시 판단할 수 있습니다. 그 아래의 라이트/다크 전환을 사용해 둘 다 확인하세요. 밝은 배경에서는 잘 작동하는 팔레트가 어두운 배경에서는 대비를 잃을 수 있기 때문입니다.

미리보기 아래에는 변경 사항을 단계별로 되돌리거나 다시 적용할 수 있는 Undo 와 Redo, 그리고 테마를 시작 상태로 되돌리는 Reset 도 있습니다.

Theme Manager. 값을 변경하면 미리보기가 업데이트되며, 그 아래 컨트롤에는 실행 취소, 다시 실행, 내보내기, 가져오기, 초기화가 포함됩니다.

테마 저장하기

1. Save 를 선택합니다.
2. Theme Name 을 입력하거나 제안된 이름을 그대로 사용합니다.
3. 확인하려면 Save 를 선택합니다.

예상 결과: 테마가 Theme 탭의 My Theme 아래에 팔레트 색상 견본과 함께 표시됩니다. 다른 테마와 같은 방식으로 적용할 수 있습니다.

참고: 저장하기 전까지는 편집 내용이 유지되지 않습니다. 저장되지 않은 변경 사항이 남아 있는 상태에서 다른 테마를 적용하려고 하면, Atoms가 이를 막고 저장하거나 버리도록 안내합니다.

프로젝트 간에 테마 재사용하기

Theme Manager에는 미리보기 아래에 Export 와 Import 가 있습니다. 테마를 파일로 내보낸 다음 다른 프로젝트로 가져와 동일한 디자인 방향을 재사용하거나, 팀원에게 전달해 그들의 프로젝트도 동일하게 맞출 수 있습니다.

테마가 올바르게 보이지 않는 경우

테마 적용은 호환성 검사 방식이 아니므로 일반적으로 실패하지 않습니다. 테마는 앱이 기반으로 하는 공유 스타일 값을 교체하므로, 선택기에서 고른 거의 모든 테마를 대부분의 프로젝트에 적용할 수 있습니다.

대신 적용은 성공했지만 모든 곳에 반영되지 않는 테마를 보게 될 수 있습니다. 이 경우 오류 메시지는 없으며, 단지 보기만 이상해집니다.

앱의 일부가 이전 모양을 유지합니다. 이것이 가장 흔한 문제입니다. 앱의 공유 스타일 중 하나가 아니라 해당 요소에 직접 설정된 고정값, 특정 색상 또는 글꼴이 있는 요소는 테마 변경의 영향을 받을 수 없으므로 이전 모양을 유지하고 주변 요소와 어울리지 않을 수 있습니다. 영향을 받은 요소를 선택하고 프로젝트 채팅에서 원하는 변경 사항을 설명하세요.

텍스트를 읽기 어려워집니다. 밝은 배경용으로 설계된 레이아웃에 어두운 테마를 적용하면 텍스트 대비가 너무 낮아질 수 있습니다. 비주얼 에디터에서 영향을 받은 요소를 조정하거나, 기존 디자인에 더 가까운 테마를 선택하세요.

Atoms가 테마를 적용할 수 없다고 알립니다. 드문 경우이며, 프로젝트 인터페이스가 Atoms 테마 시스템을 기반으로 만들어지지 않았다는 뜻입니다. 대신 비주얼 에디터를 사용하세요. 여전히 모든 작업을 요소별로 수행할 수 있습니다.

중요: 가능하면 초기에 테마를 선택하세요. 에이전트가 이미 테마가 적용된 상태에서 빌드하면 처음부터 그 공유 스타일을 사용하므로, 나중에 테마를 변경해도 적용되지 않는 고정값 요소가 더 적어집니다.

비주얼 에디터로 요소 편집하기

1. 비주얼 편집 툴바 위로 마우스를 올리고 Select element 를 선택합니다.
2. 툴바에 Click to select, Ctrl/Cmd + Click for multiple 가 표시됩니다.
3. 미리보기에서 요소를 선택합니다. 여러 요소를 선택하려면 Windows에서는 Ctrl, Mac에서는 Cmd 를 누른 채 선택합니다.
4. 선택한 항목이 프로젝트 채팅에 첨부됩니다. 툴바에는 Edit 1 selection in chat window 와 같이 선택 개수가 표시됩니다.
5. 프로젝트 채팅에서 원하는 변경 사항을 설명하고 메시지를 전송합니다.
6. 선택 모드를 종료하려면 Select element 를 다시 선택합니다.

레이아웃, 색상, 간격, 스타일링 또는 여러 선택 요소에 영향을 주는 변경 사항에는 프로젝트 채팅을 사용하세요.

텍스트 직접 편집하기

1. App 뷰어 아래 툴바에서 Edit Text 를 선택합니다.
2. Click text content to edit 가 표시되면 변경하려는 텍스트를 선택합니다.
3. 미리보기에서 텍스트를 직접 편집합니다.
4. 저장하기 전에 여러 텍스트 요소를 편집할 수 있습니다. 툴바에는 1 text change 또는 2 text changes 와 같이 보류 중인 편집 수가 표시됩니다.
5. 보류 중인 모든 텍스트 변경 사항을 유지하려면 Save 를, 제거하려면 Discard 를 선택합니다.

Select element 를 사용하는 동안 텍스트를 더블클릭해 직접 편집을 시작할 수도 있습니다.

변경 사항 저장 또는 버리기

직접 텍스트 및 이미지 변경 사항은 저장하기 전까지 적용되지 않습니다. 변경 사항이 보류 중이면 툴바에 변경 개수와 함께 Discard 및 Save 가 표시됩니다.

• Save 는 보류 중인 모든 직접 편집을 적용합니다.
• Discard 는 보류 중인 편집을 제거하고 영향을 받은 요소를 이전 상태로 되돌립니다.

보류 중인 변경 사항이 있는 상태에서 편집 모드를 벗어나려고 하면 Atoms가 다음을 표시합니다:

저장되지 않은 변경 사항

저장되지 않은 변경 사항이 있습니다. 편집 모드를 종료하기 전에 변경 사항을 저장하거나 버려 주세요.

계속 편집하려면 Cancel 을, 변경 사항을 유지하지 않고 나가려면 Discard 를 선택합니다.

저장하면 작업 중인 프로젝트가 업데이트됩니다. 게시하기 전까지는 라이브 사이트가 업데이트되지 않습니다.

이미지 교체하기

1. Select element 모드로 들어갑니다.
2. 교체하려는 이미지를 선택합니다.
3. 이미지 라이브러리에서 이미지를 선택하거나, 선택한 이미지의 업로드 컨트롤을 사용합니다.
4. 미리보기에서 교체 결과를 확인합니다.
5. 이미지 변경 사항을 적용하려면 Save 를, 제거하려면 Discard 를 선택합니다.

프로젝트 채팅에 지시 사항도 입력하면 이미지 교체와 채팅 지시를 함께 제출할 수 있습니다.

이미지 카테고리와 Popular Images가 있는 Library 탭.

이미지 출처

Image 는 기본 제공 컬렉션입니다. 특정 항목을 찾으려면 Search assets 를 사용하거나, 카테고리(Backgrounds, Nature, Education, Health, Fashion, Science, Feelings, People)를 둘러보세요. 나머지는 More tags 에서 볼 수 있습니다. 카테고리를 선택하면 해당 카테고리가 열리고, 뒤로 화살표를 사용해 돌아갈 수 있습니다. 아래의 Popular Images 는 일반적인 선택 항목을 보여줍니다. 이미지 위에 마우스를 올리고 Use asset 을 선택하면 적용됩니다.

Generate 는 설명을 바탕으로 새 이미지를 만들며, Pro 또는 Max 플랜이 필요합니다. Describe the image you want to generate 아래에 원하는 내용을 입력하고 Generate 를 선택하세요. 결과는 필드 아래에 표시됩니다. 완성된 썸네일을 선택하면 요소에 적용됩니다.

Upload 는 드래그 앤 드롭, 붙여넣기 또는 클릭으로 직접 파일을 추가합니다. 이미지는 JPEG, PNG, GIF, BMP, TIFF 또는 WEBP 형식일 수 있으며 최대 4MB까지 지원됩니다. 업로드한 이미지는 드롭 영역 아래에 표시되며, 하나를 선택해 적용할 수 있습니다.

참고: Use asset 은 기본 제공 이미지에만 표시됩니다. 생성하거나 업로드한 이미지는 대신 해당 썸네일을 선택해 적용합니다.

채팅에서 변경 사항 설명하기

Select element 로 하나 이상의 요소를 선택한 후, 프로젝트 채팅에서 원하는 결과를 설명하세요.

예:

• "이 섹션을 더 차분하게 만들고, 여백을 늘리고, 제목을 더 작게 해 주세요."
• "이 버튼들을 가격 페이지의 스타일에 맞춰 주세요."

원하는 결과를 구체적으로 설명하세요. "더 보기 좋게 만들어 줘" 같은 지시는 예측하기 어려운 결과를 낼 수 있습니다.

변경 사항 미리보기

미리보기 위의 툴바를 사용하세요:

• Device view — 화면 크기를 전환해 반응형을 테스트합니다. 데스크톱에서 잘 보이는 테마와 타이포그래피 변경이 모바일에서는 깨지는 경우가 많으므로, 게시 전에 항상 모바일을 확인하세요.
• Page selector — 앱의 페이지 사이를 이동합니다.
• Refresh — 미리보기가 오래된 것처럼 보이면 다시 로드합니다.
• Open in a new tab — 별도의 브라우저 탭에서 앱을 전체 너비로 봅니다.
• Console — 문제가 있어 보일 때 로그 패널을 엽니다.

예상 결과: 지원하려는 모든 페이지와 모든 디바이스 너비에서 변경 사항이 보입니다.

미리보기 문제 복구하기

미리보기가 오래된 것처럼 보이거나, 계속 로드되거나, 빨간 오류가 표시되면 문제는 비주얼 편집이 아니라 App 뷰어에 있을 수 있습니다. 문제 해결 단계인 Refresh, Console 패널, Resolve, 그리고 지속되는 오류를 보고하는 방법은 Build and preview troubleshooting 을 참조하세요.

직접 텍스트 또는 이미지 편집이 사라진 것처럼 보인다면 저장했는지 확인하세요. 저장되지 않은 변경 사항은 편집 모드를 벗어날 때 버려질 수 있습니다. 변경 사항 저장 또는 버리기를 참조하세요.

변경 사항 게시하기

비주얼 편집 내용은 게시할 때까지 작업 중인 프로젝트에만 유지됩니다. 오른쪽 상단에서 Publish 를 선택하거나, 프로젝트가 이미 라이브 상태라면 Update 를 선택하세요.

참고: 프로젝트가 Always Latest 대신 Specify Version 을 사용하면, 라이브 사이트는 선택한 버전에 고정되며 새 버전을 게시하기 전까지 디자인 변경 사항이 공개되지 않습니다.

빌드 중 에이전트가 보고하는 오류는 문제 신고 를 참조하세요.