디자인 및 미리보기

Design는 실시간 미리보기 옆에서 열리며, 코드를 작성하지 않고도 프로젝트의 모양을 변경할 수 있게 해줍니다.

이 가이드에서는 Theme로 전역 스타일을 설정하는 방법, Visual Editor로 개별 요소를 편집하는 방법, Library에서 이미지를 교체하는 방법, 일반적인 언어로 변경 사항을 설명하는 방법, 그리고 게시 전에 여러 기기에서 작업 결과를 확인하는 방법을 다룹니다.

Design 작동 방식

AI 에이전트가 작업을 완료하면 페이지 상단에 App 뷰어 가 표시됩니다. Design을 선택하면 화면 왼쪽에 디자인 패널이 열리고, 그 옆에 실시간 미리보기가 표시됩니다. 여기에는 세 개의 탭이 있습니다.

• Theme는 전체 앱에 대한 전역 규칙(색상, 글꼴, 효과)을 설정합니다. 빌드 전에 사용하는 것이 가장 좋습니다.
• 비주얼 에디터 는 선택한 요소를 조정합니다. 어떤 프로젝트에서든, 언제든지 사용할 수 있습니다.
• Library는 이미지를 교체하거나 새 이미지를 생성합니다.

Theme가 규칙을 설정하고, Visual Editor가 세부 사항을 다듬습니다. 패널을 닫으려면 Exit를 선택하세요.

Design 패널은 왼쪽에서 열립니다. 무언가를 선택하기 전까지는 Visual Editor가 요소를 선택하라고 안내합니다.

시작하기 전에

Design를 열기 전에 다음을 확인하세요.

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

Theme로 전역 스타일 설정하기

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

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

테마 선택하기

Theme 탭은 Search Themes 필드와 함께 열리며, 테마를 섹션별로 그룹화합니다.

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

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

Theme 탭. 상단에는 적용된 테마가, 그 아래에는 저장된 테마가 표시됩니다.

적용하려면 다음과 같이 하세요.

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

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

참고: Visual Editor에 저장되지 않은 변경 사항이 있으면 Atoms가 Unsaved Changes를 표시하고, 새 테마를 적용하기 전에 저장하거나 버릴지 묻습니다.

적용된 테마 업데이트하기

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

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

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

참고: 앱이 선택한 테마처럼 보이지 않는다면, 개별 요소가 Visual Editor에서 재정의되었을 수 있습니다. 이러한 재정의는 특정 콘텐츠를 대상으로 하며, 테마를 변경해도 유지됩니다.

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가 있습니다. 테마를 파일로 내보낸 다음 다른 프로젝트로 가져오면 같은 디자인 방향을 재사용할 수 있고, 팀원에게 전달해 그들의 프로젝트도 동일하게 맞출 수 있습니다.

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

테마 적용은 호환성 검사와는 다르므로, 일반적으로 실패하지 않습니다. 테마는 앱이 기반으로 하는 공유 스타일 값을 교체하므로, 선택기에서 보이는 어떤 테마든 보통 어떤 프로젝트에도 적용할 수 있습니다.

대신 볼 수 있는 것은 테마가 성공적으로 적용되지만 모든 곳에 반영되지는 않는 경우입니다. 이때는 오류 메시지가 표시되지 않고, 단지 보기만 이상해집니다.

앱의 일부가 이전 모양을 유지합니다. 가장 흔한 문제입니다. 앱의 공유 스타일 중 하나가 아니라, 특정 색상이나 글꼴처럼 해당 요소에 직접 설정된 고정 값을 가진 요소는 테마 변경의 영향을 받을 수 없습니다. 그래서 이전 모양을 유지하고 주변 요소와 어울리지 않을 수 있습니다. Visual Editor에서 수정하거나, 채팅에서 에이전트에게 고정 값을 테마 스타일로 바꾸도록 요청하세요.

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

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

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

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

편집하려면 미리보기에서 요소를 선택하세요. 여러 요소를 한 번에 작업하려면 Windows에서는 Ctrl을 누른 채 클릭하고, Mac에서는 Cmd를 누른 채 클릭하세요.

중요: 아래에 설명된 속성 컨트롤은 한 번에 하나의 요소에만 적용됩니다. 여러 요소를 선택한 경우에는 대신 채팅에서 원하는 내용을 설명해 변경하세요. 아래의 클릭하는 대신 변경 사항 설명하기를 참조하세요.

선택 영역 위의 배지는 요소 이름과 크기(텍스트의 경우 글꼴 크기, 컨테이너의 경우 치수)를 표시하므로, 컨테이너가 아니라 의도한 요소를 선택했는지 확인할 수 있습니다.

그다음 비주얼 에디터 탭에 해당 요소에 사용할 수 있는 속성이 섹션별로 표시됩니다.

• Layout — margin 및 padding.
• Appearance — 배경색, 불투명도, 모서리 반경. Radius는 None에서 Small, Medium, Large, XL, 2XL, 3XL, Full까지 제공됩니다.
• Content — 요소의 텍스트.
• Style — 글꼴 패밀리, 굵기, 크기, 텍스트 정렬, 장식.
• Class — 요소에 적용된 스타일링 클래스이며, 기본적으로 접혀 있습니다.

표시되는 섹션은 선택한 항목에 따라 다릅니다. 텍스트 요소는 Content와 Style을 제공하지만, 컨테이너는 Layout, Appearance, Class만 표시될 수 있습니다.

선택 영역 위에는 자주 사용하는 컨트롤을 바로 사용할 수 있는 플로팅 툴바도 표시됩니다. 여기에는 텍스트용 글꼴, 굵기, 정렬, 색상과 함께 삭제 컨트롤, 그리고 아래에서 설명하는 프롬프트 필드가 포함됩니다.

변경 사항은 작업하는 즉시 미리보기에 반영됩니다. 이를 취소하려면 미리보기 하단의 Discard를 사용하세요.

변경 사항 저장하기

편집 내용은 저장하기 전까지 유지되지 않습니다. 변경을 한 번이라도 하면 미리보기 하단에 Discard와 Save가 표시됩니다.

• Save는 변경 사항을 유지합니다.
• Discard는 변경 사항을 버리고 요소를 원래 상태로 되돌립니다.

예상 결과: 저장하면 버튼이 사라지고, 변경 사항이 이제 프로젝트의 일부가 됩니다.

참고: 저장되지 않은 작업이 남아 있는 상태에서 Design를 벗어나거나, 다른 테마를 적용하거나, 선택하여 채팅 을 사용하려고 하면 Atoms가 Unsaved Changes를 표시하고 계속하기 전에 저장하거나 버리도록 요청합니다.

저장하면 변경 사항이 프로젝트에 유지됩니다. 하지만 라이브 사이트에 반영되지는 않습니다. 변경 사항 게시하기를 참조하세요.

요소를 선택하면 Visual Editor에 해당 속성이 표시됩니다. 선택 영역 위의 플로팅 툴바는 변경 사항 설명 모드와 직접 편집 모드 사이를 전환합니다.

팁:

1. Visual Editor는 외형 변경에 사용하고, 새 페이지, 새 기능, 백엔드 로직 같은 구조적 변경은 채팅을 사용하세요.
2. 카드나 버튼의 한 줄 전체에 같은 변경을 적용하려면 Ctrl-click 또는 Cmd-click으로 모두 선택한 뒤 채팅에서 한 번만 설명하세요. 속성 컨트롤로 각각 편집하면 같은 작업을 반복해야 합니다.

Library로 이미지 교체하기

Library는 선택한 요소에 이미지를 적용하므로, 먼저 이미지가 들어갈 위치를 선택하세요.

1. 미리보기에서 변경하려는 요소를 선택합니다. 선택하기 전까지 Library에는 Select an element to start visual editing이 표시됩니다.
2. Library 탭을 열고 Image, Generate, Upload 중 소스를 선택합니다.
3. 이미지를 적용합니다. 방법은 이미지 출처에 따라 다릅니다. 기본 제공 이미지는 마우스를 올린 뒤 Use asset을 선택합니다. 생성하거나 업로드한 이미지는 완성된 썸네일을 선택합니다.
4. 미리보기를 확인합니다. 이미지가 즉시 선택한 요소에 적용됩니다.
5. 미리보기 하단에서 Save를 선택하거나, 되돌리려면 Discard를 선택합니다.

예상 결과: 선택한 요소에 새 이미지가 적용되고, 저장하면 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은 기본 제공 이미지에만 표시됩니다. 생성하거나 업로드한 이미지는 대신 썸네일을 선택해 적용합니다.

클릭하는 대신 변경 사항 설명하기

클릭해서 처리하는 것보다 설명하는 편이 더 쉬운 변경이라면, 대신 에이전트에게 요청할 수 있습니다. 이를 할 수 있는 위치는 두 곳이며, 둘 다 현재 선택한 항목에 적용됩니다.

• 선택 영역 위의 플로팅 툴바. 선택한 요소 위에 작은 툴바가 표시됩니다. 두 개의 아이콘으로 변경 사항 설명 모드와 속성 직접 편집 모드를 전환할 수 있습니다. **Ask the Atoms to change…**에 입력하고 전송하세요.
• Design 패널 아래의 채팅 입력창. 요소가 선택되어 있으면 입력창에 Design 라벨과 Ask the Atoms team to modify the selected element… 프롬프트가 표시되므로, 에이전트가 전체 프로젝트가 아니라 해당 요소에 지시를 적용합니다.

플로팅 툴바는 선택 영역 위에 표시됩니다. 왼쪽의 칩은 지시가 어떤 요소에 적용될지를 보여줍니다.

방법이 아니라 결과를 설명하세요:

- "이걸 더 차분하게 만들어줘 — 여백을 늘리고, 제목은 더 작게."

- "이 버튼 스타일을 요금제 페이지와 맞춰줘."

"더 보기 좋게 만들어줘" 같은 모호한 지시는 예측하기 어려운 결과를 낳습니다.

참고: Visual Editor에서 속성을 클릭하면 즉시 변경됩니다. 프롬프트를 보내면 에이전트가 작업을 수행하므로 더 오래 걸립니다. 단순한 색상이나 간격 변경이라면 속성을 직접 편집하세요.

변경 사항 미리보기

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

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

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

미리보기 문제 복구하기

미리보기가 오래된 것처럼 보이거나, 계속 로딩되거나, 빨간 오류를 표시한다면 문제는 Design가 아니라 미리보기에 있습니다. 문제 해결 단계(Refresh, Console 패널, Resolve, 그리고 계속되는 오류를 신고하는 방법)는 Build and preview troubleshooting을 참조하세요.

Design에만 해당하는 한 가지는, 편집 내용이 사라진 것처럼 보인다면 저장했는지 확인하는 것입니다. 저장되지 않은 변경 사항은 Design를 벗어날 때 버려집니다. 변경 사항 저장하기를 참조하세요.

변경 사항 게시하기

Design 변경 사항은 게시하기 전까지 작업 중인 프로젝트에만 유지됩니다. 오른쪽 상단에서 Publish를 선택하거나, 프로젝트가 이미 라이브 상태라면 Update를 선택하세요.

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

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