앱의 모양을 조정한 다음, 게시하기 전에 결과를 미리 확인하세요.

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가 "테마 name을(를) 적용하시겠습니까?"라고 묻습니다.
3. 확인하려면 Apply를, 돌아가려면 Cancel을 선택합니다.
4. 미리보기를 확인합니다.

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

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

적용된 테마 업데이트하기

Theme 탭의 점 표시는 적용된 테마의 최신 버전이 उपलब्ध함을 의미합니다.

업데이트하려면 현재 테마에서 Update를 선택하고, 테마 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를 사용하세요. 여전히 모든 것은 요소별로 구현할 수 있습니다.

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

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, 그리고 지속되는 오류를 보고하는 방법은 빌드 및 미리보기 문제 해결을 참조하세요.

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

변경 사항 게시하기

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

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

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