스토어프론트 테마 설정

설정 > 홈페이지 설정 > AI 웹빌더에서 숍의 스토어프론트 디자인을 조정할 수 있습니다. 설정 화면에서는 랜딩 템플릿을 직접 선택하지 않으며, 페이지·템플릿 선택과 실제 반영은 웹빌더의 게시 기능에서 관리합니다.

메인 헤더의 상자 아이콘은 라이브러리, 창 아이콘은 웹빌더로 전환합니다. 데스크톱에서는 가운데 내용만 전환되며, 왼쪽 라이브러리 메뉴는 웹빌더에서도 사용할 수 있습니다. 저장된 선택이 없으면 웹빌더에서는 사이드바가 접힌 상태로, 라이브러리에서는 펼쳐진 상태로 시작합니다. 기존 접기 버튼과 접힌 상태의 플로팅 버튼으로 열고 닫으며, 사용자가 직접 선택한 상태는 화면 전환과 새로고침 후에도 유지됩니다. 웹빌더에서 왼쪽 메뉴의 항목을 누르면 가운데에 해당 라이브러리 콘텐츠가 열립니다. 데스크톱에서는 어느 화면에서든 AI 편집을 눌러 오른쪽 프롬프트 창을 열 수 있습니다. 라이브러리와 웹빌더를 전환해도 열린 대화와 입력 중인 내용은 유지되므로, 블록 예제를 보면서 프롬프트를 작성할 수 있습니다. 기존 대화를 불러오는 데 시간이 걸리면 같은 영역의 가운데에 작은 스피너가 표시됩니다. 대화가 없으면 입력창 위 대화 영역의 가운데에 시작 안내가 표시됩니다. 메시지를 보내면 안내가 사라지고 대화가 이어집니다. 홈 카드의 열 수와 여백은 가운데 콘텐츠 너비에 맞춰 바뀝니다. Create 시안의 안쪽 여백도 프롬프트 창을 열고 닫을 때 미리보기 너비에 맞춰 조정됩니다. 선택한 작업 공간은 버튼 배경으로 표시되며, 마우스를 올리거나 키보드로 초점을 맞추면 이름이 나타납니다.

모바일 화면(너비 768픽셀 미만)에서는 웹빌더 편집은 데스크톱에서 이용해 주세요 안내가 표시됩니다. 미리보기 보기를 누르면 현재 랜딩을 확인할 수 있습니다. 모바일 미리보기에는 편집·저장·게시 도구가 없으며, 뒤로 버튼으로 안내 화면에 돌아갑니다.

현재 제공되는 수동 설정은 다음과 같습니다.

• 컬러 프리셋과 컬러 단계
• 직접 입력하는 커스텀 컬러
• 라운드 규격
• 본문·제목 폰트
• 라이트·다크 모드
• 데스크톱·태블릿·모바일 미리보기

외부에서 가져온 완성형 랜딩에 자체 컬러가 있으면 테마 컬러 목록 맨 위에 Original이 표시됩니다. 새 랜딩은 원본 컬러로 시작하며, 다른 프리셋이나 커스텀 컬러를 선택하면 Fixvalley 디자인 시스템 토큰으로 전환됩니다. Original을 다시 선택하면 등록 당시의 라이트·다크 컬러 스냅샷을 복원합니다. 라운드·폰트·아이콘은 템플릿 등록 시 확정된 호환 설정으로 시작합니다.

컬러 강도에서는 Auto 또는 100~900 단계를 선택할 수 있습니다. 숫자를 선택하면 Original이 해제되고 그 값이 현재 숍의 현재 랜딩에만 Primary 오버라이드로 저장됩니다. 라이트 모드는 선택한 단계, 다크 모드는 한 단계 진한 값을 사용합니다. Auto를 선택하면 강도 오버라이드를 제거하고 현재 shadcn Create 프리셋의 기본 토큰으로 돌아갑니다. 직접 입력한 커스텀 컬러와 Monochrome에서는 컬러 강도를 별도로 선택하지 않습니다.

신규 숍은 다크 모드로 시작합니다. 필요하면 액션바의 화면 모드 버튼에서 라이트 모드로 변경할 수 있습니다. AI 편집을 시작하기 전에는 가운데 미리보기를 아래로 스크롤하면 상단 소개 영역이 먼저 올라가고, 테마 툴바가 웹빌더 헤더 아래에 도달하면 고정됩니다. 위로 돌아올 때는 미리보기 상단에 도달한 뒤 소개 영역이 다시 나타납니다.

AI 편집 중에는 가운데 미리보기를 스크롤한 거리만큼 테마 툴바가 위로 이동해 캔버스 공간을 넓힙니다. 미리보기를 위로 올리면 툴바도 같은 거리만큼 다시 나타납니다. 왼쪽 라이브러리와 오른쪽 대화 패널의 스크롤은 테마 툴바 위치에 영향을 주지 않습니다.

Create 테마 설정 (로컬 통합 시험)

새 라이브러리가 연결된 로컬 웹빌더는 shadcn Create의 설정기를 사용합니다. 보조 헤더에서 베이스 컬러, 테마 컬러, 라운드, 본문·제목 폰트를 선택합니다. 베이스 컬러는 배경·카드 같은 기본 색감을, 테마 컬러는 버튼과 강조 요소의 색감을 정합니다. 메인 헤더 오른쪽의 편집 화면 테마 해·달 버튼은 웹빌더와 라이브러리의 헤더·사이드바·설정 패널을 라이트·다크 모드로 전환합니다. 이 선택은 브라우저에 기억되며 작업 중인 랜딩의 저장된 테마는 바꾸지 않습니다. 테마 툴바의 랜딩 테마 해·달 아이콘은 현재 페이지의 라이트·다크 모드만 전환합니다. 다크·라이트, 랜덤 조합, 더보기는 왼쪽 테마 선택기 바로 뒤에 개별 아이콘 버튼으로 배치됩니다. 오른쪽에는 화면 크기 선택과 전체 화면 버튼이 있습니다. 공간이 좁아지면 제목 폰트, 본문 폰트, 라운드 순으로 더보기 안으로 이동합니다. 화면이 넓어지면 다시 툴바에 나타나며, 선택값과 잠금 상태는 유지됩니다. 기기 버튼은 왼쪽 사이드바와 오른쪽 프롬프트 패널을 제외한 가운데 캔버스의 가용 너비를 기준으로 표시합니다. 1024픽셀 이상이면 모든 기기 버튼을 표시하고, 768~1023픽셀이면 데스크톱 버튼을 숨기며, 768픽셀 미만이면 모바일 버튼만 표시합니다. 좌우 패널을 열고 닫거나 창 크기를 바꿔 구간이 달라지면 해당 구간의 기기가 자동 선택됩니다. 구간에 진입하면 미리보기를 현재 가용 공간의 최대 너비로 채웁니다. 같은 구간 안에서는 기기를 직접 선택하거나 조절기로 줄인 너비가 유지됩니다. 모바일 미리보기를 직접 선택했다고 태블릿·데스크톱 버튼이 숨겨지지는 않습니다. 태블릿·모바일 미리보기는 공간이 부족하면 함께 좁아지고, 다시 넓히면 설정한 너비까지 돌아옵니다. 브라우저 화면 자체가 768픽셀 미만인 경우에는 기존처럼 데스크톱 이용 안내와 미리보기만 제공합니다. 랜덤 조합 아이콘은 잠근 항목을 유지하고 나머지 테마 설정을 무작위로 바꿉니다.

테마 컬러 목록의 구분선 위에는 Monochrome과 현재 베이스에서 선택한 중립색이 표시되고, 아래에는 나머지 색상이 표시됩니다. 웹빌더의 테마 컬러 → Monochrome을 선택하면 베이스와 테마를 함께 Neutral로 맞추고, 다크 모드는 검정 배경, 라이트 모드는 흰색 배경과 무채색 버튼을 사용합니다. Monochrome 선택 중에는 베이스 컬러 선택과 자물쇠가 비활성화됩니다. 다른 테마 컬러를 선택하면 다시 사용할 수 있습니다. 이때 기존 커스텀 강조색은 해제됩니다. 다른 테마 색을 고르면 모노크롬 프리셋에서 벗어나며, 변경은 실행 취소와 저장에 포함됩니다.

테마 툴바와 더보기의 버튼에 마우스를 올리거나 키보드로 초점을 맞추면 역할을 설명하는 툴팁이 나타납니다. 자물쇠 툴팁에서는 랜덤 조합에서 해당 설정을 고정하거나 해제하는 동작을 확인할 수 있습니다. 메인 헤더의 화면 전환, 컬러 선택 방식, 모바일·태블릿·데스크톱 그룹은 동일한 선택 배경으로 현재 선택한 버튼을 표시합니다.

툴바 끝의 더보기 메뉴 아이콘에는 스타일, 아이콘, 메뉴 표현, 프리셋 불러오기, 테마 초기화가 있습니다. 설정 선택기는 Create와 같은 카드 형태로 이름과 선택값을 함께 보여줍니다. 툴바에서 이동한 폰트와 라운드도 같은 형태로 표시됩니다. 실행 취소·다시 실행은 메인 헤더에서 사용합니다. 테마 초기화를 누르면 Create와 같은 확인창이 열립니다. Cancel은 설정을 유지하고, Reset을 눌러야 초기화됩니다. 초기화도 실행 취소로 되돌릴 수 있습니다. 항목의 자물쇠를 잠그면 랜덤 조합에서 해당 선택을 유지합니다. 배경과 강조색을 함께 무채색으로 맞추려면 테마 컬러 목록의 Monochrome을 선택합니다.

컬러 프리셋 / 커스텀 컬러 전환은 유지됩니다. 커스텀 컬러는 주요 강조색을 직접 지정하며 기본 바탕색은 선택한 베이스를 따릅니다. 커스텀 컬러 모드에서는 테마 컬러 프리셋만 숨겨지고, 베이스 컬러·라운드·폰트는 계속 사용할 수 있습니다. 프리셋 모드로 돌아오면 테마 컬러 선택기가 다시 나타납니다. 차트 컬러와 개발 프로젝트 생성은 웹빌더에 표시하지 않습니다. 라이브러리 사이드바는 Home → Docs → Typeset → Create → Components → Blocks → Pages 순서입니다. 라이브러리 검색에서는 컴포넌트와 블록 분류를 찾을 수 있습니다. 사이드바에 표시된 Hero, Category, Gallery, Testimonials, FAQ, CTA를 검색해 해당 분류로 이동하고, 개별 시안은 분류 페이지 안에서 선택합니다. 글꼴·테마 도구를 먼저 확인하고, 아래에서 컴포넌트와 블록을 탐색할 수 있습니다. 라이브러리 Create의 샘플과 설정 카드는 그대로 유지됩니다.

기존 페이지를 열기만 해서는 테마가 변경되지 않습니다. 처음 테마 항목을 변경하면 Create의 지원 설정으로 전환하며, 기존 작업본으로 돌아가려면 실행 취소를 사용할 수 있습니다. 선택기를 가리켜 보는 임시 미리보기는 저장되지 않고, 실제로 선택한 설정만 작업본에 반영됩니다.

원본 스타일 클래스와 메뉴 표현을 지원하는 컴포넌트에는 해당 설정이 적용됩니다. 기존 템플릿에 직접 지정한 색상·스타일은 자동으로 교체되지 않습니다. 일반 아이콘은 선택한 라이브러리에 맞춰 바뀌며 로고와 브랜드 이미지는 유지됩니다. 기존 호환 웹빌더 경로는 기존 설정기를 유지하며, 이 통합은 아직 프로덕션에 배포되지 않았습니다.

페이지와 템플릿 만들기

상단 선택기에는 현재 페이지 / 현재 템플릿이 표시됩니다. 메뉴를 열면 /, /about, /contact 같은 URL 페이지와 각 페이지 아래의 기본 템플릿, 커스텀 템플릿, 복제본을 함께 볼 수 있습니다.

라이브러리의 Pages에는 완성된 전체 페이지가 표시됩니다. 원하는 페이지를 미리 본 뒤 이 페이지로 시작을 누르면 현재 URL 페이지에 독립적인 템플릿 복사본이 생성됩니다. 원본 라이브러리 페이지와 기존 템플릿은 변경되지 않으며, 새 복사본은 게시하기 전까지 고객 화면에 노출되지 않습니다. 이때 페이지 레코드만 연결해 두지 않고, 등록된 코드·이미지 자산·원본 테마를 현재 페이지 소유 스냅샷으로 즉시 저장합니다. 이후 블록 추가와 AI 편집은 이 독립 복사본만 수정하며, 첫 편집 시점에 전체 랜딩을 뒤늦게 변환하지 않습니다. 현재 첫 페이지는 MIT 라이선스의 Shadcn Landing Page입니다.

외부 랜딩은 라이브러리에 등록하기 전에 Fixvalley의 shadcn Base UI 기준으로 호환 작업을 마칩니다. 메뉴·시트·선택기·아코디언·폼 같은 상호작용은 Base UI 구성으로 정규화하고, 원본 레이아웃·이미지·반응형 동작과 컬러 스냅샷은 보존합니다. 따라서 웹빌더로 가져온 뒤 다른 프리미티브로 뒤늦게 변환하지 않으며, 등록 검수를 통과한 실행본이 그대로 페이지 전용 복사본이 됩니다.

페이지를 추가하면 샘플에 등록된 베이스 컬러, 테마 컬러, 라운드, 본문·제목 폰트와 화면 모드가 새 초안과 상단 테마 툴바에 함께 적용됩니다. 툴바에서 값을 변경하면 가운데 캔버스에 즉시 반영되고, 변경한 값은 해당 템플릿 초안에만 저장됩니다. 현재 Shadcn Landing Page는 원본의 Orange 컬러를 Original로 보존합니다. 라이트 모드는 Orange 500, 다크 모드는 Orange 600을 사용합니다. 다른 테마 컬러를 선택하면 shadcn Create 기반 Fixvalley 토큰으로 전환되며, 테마 초기화로 원본 컬러를 복원할 수 있습니다. Pages 미리보기 툴바의 해·달 버튼과 페이지 안의 테마 버튼은 같은 미리보기 모드를 함께 전환합니다. 이 전환은 해당 미리보기에만 적용되며 웹빌더와 라이브러리 화면의 테마는 바꾸지 않습니다.

템플릿을 선택한 뒤 같은 탭을 새로고침하면 작업하던 템플릿으로 돌아옵니다. AI 편집을 시작한 상태라면 편집 화면과 열린 프롬프트 패널도 복원됩니다. 패널을 직접 닫았다면 닫힌 상태를 유지합니다. 여러 탭에서 서로 다른 템플릿을 작업할 수 있으며, 삭제되었거나 현재 숍에서 접근할 수 없는 템플릿은 기본 진입 화면으로 돌아갑니다. 이 기능은 작업 위치를 기억하며, 아직 전송하지 않은 프롬프트나 저장되지 않은 변경 내용을 새로고침 후 복구하는 기능은 아닙니다.

AI가 이미 접수한 요청은 새로고침 후 같은 대화의 진행 중인 응답에 다시 연결합니다. 로그인이 만료됐다면 로그인 후 대화를 다시 불러오세요. 같은 요청을 새로 전송할 필요는 없습니다.

• 새 페이지: 목록 하단 버튼에서 페이지 이름과 URL을 입력합니다. 새 URL을 소유하는 페이지 카테고리만 만들어지며, 템플릿은 해당 페이지 행의 더보기 메뉴에서 별도로 추가합니다. URL 입력 중 형식 오류, 시스템 예약 경로, 이미 존재하는 페이지 경로를 바로 확인할 수 있습니다.

• 페이지 삭제: Home을 제외한 추가 페이지는 더보기 메뉴에서 삭제할 수 있습니다. 6자리 보안 PIN을 입력하고 OTP 확인을 선택한 뒤 최종 확인을 거치며, 해당 페이지의 하위 템플릿도 모두 함께 삭제됩니다.

• 새 템플릿: 원하는 페이지 행의 더보기 메뉴에서 새 템플릿을 선택합니다. 해당 URL에 적용할 독립 템플릿을 빈 캔버스로 만듭니다. 기존 템플릿을 바탕으로 작업하려면 해당 템플릿의 복제를 사용합니다.

• 빈 페이지 가이드: 캔버스에는 헤더·바디·푸터 위치를 나타내는 세 개의 점선 영역이 표시됩니다. 라벨은 페이지 위치를 이해하기 위한 가이드일 뿐, 배치 가능한 템플릿이나 앱 컴포넌트 종류를 제한하지 않습니다.

• 라이브러리 블록 추가: 라이브러리의 블록 미리보기에서 이 블록 추가를 누른 뒤, 캔버스의 섹션 사이에 표시되는 여기에 추가를 선택합니다. 구조형 블록은 해당 위치에 바로 추가되고 현재 랜딩의 테마를 상속합니다. 코드형 랜딩도 등록된 블록을 선택한 위치에 즉시 복제합니다. 이때 페이지를 가져올 때 이미 만들어진 페이지 소유 코드·자산 초안에서 선택한 위치만 변경하며, 헤더·푸터와 기존 섹션은 다시 생성하거나 교체하지 않습니다.

• 템플릿 이름 변경: 해당 페이지의 템플릿을 선택하고 이름을 변경합니다.

• 템플릿 복제: 해당 템플릿의 저장된 문서와 테마를 새 템플릿으로 복사합니다. 원본은 그대로 유지됩니다.

• 템플릿 순서 변경: 같은 페이지 안의 템플릿은 드래그해 원하는 위치로 정렬할 수 있습니다. 게시 중 배지는 현재 공개 상태만 표시하며 목록 순서를 바꾸지 않습니다. 기본 템플릿은 항상 목록 맨 위에 고정되고, 페이지 카테고리 자체는 드래그되지 않습니다.

• 템플릿 이동: 게시 중이 아니고 기본 템플릿도 아닌 경우, 템플릿을 다른 페이지 행으로 드래그하거나 더보기 메뉴의 다른 페이지로 이동을 사용할 수 있습니다. 문서·테마·버전 이력은 유지되며, 대상 페이지에서 다시 게시하기 전까지 고객 화면에는 노출되지 않습니다. 같은 이름이 이미 있으면 번호가 자동으로 붙습니다.

• 게시 중: 해당 URL 페이지에서 고객에게 노출되는 템플릿을 뜻합니다.

• 템플릿 삭제: 기본 템플릿이나 게시 중인 템플릿이 아닌 경우 6자리 보안 PIN을 입력하고 OTP 확인을 선택한 뒤 최종 확인하면 목록에서 제거할 수 있습니다. 마지막 템플릿도 삭제할 수 있어 페이지 카테고리만 남길 수 있으며, 내부 버전 이력은 보관됩니다.

페이지의 기본 템플릿은 삭제할 수 없습니다. 게시 중인 템플릿을 삭제하려면 같은 페이지의 다른 템플릿을 먼저 게시해야 합니다. 섹션이 하나도 없는 빈 템플릿은 게시할 수 없습니다.

변경사항은 잠시 후 자동 저장됩니다. 자동 저장은 현재 초안을 보호하지만 버전 이력을 계속 늘리지는 않습니다. 장기 보관할 지점은 초안 저장으로 직접 체크포인트를 남기세요. 복제 후 원본과 복제본은 별도 템플릿으로 저장되므로 한쪽의 수정이 다른 쪽에 영향을 주지 않습니다. 상단에는 저장 중이거나 실패했을 때 상태를 표시하고, 저장 완료 문구는 잠시 표시한 뒤 자동으로 사라집니다.

캔버스 편집과 복구

섹션을 선택하면 이동, 복제, 숨김, 잠금, 삭제 작업을 사용할 수 있습니다. 잠근 섹션은 실수로 이동·복제·숨김·삭제되지 않으며, 이후 AI 편집에서도 보존 대상으로 전달됩니다.

• 실행 취소·다시 실행: 현재 작업 세션에서 문서와 테마 변경을 되돌립니다. 버튼 또는 Command/Ctrl + Z, Command/Ctrl + Shift + Z 단축키를 사용할 수 있습니다.
• 버전 기록: 상단의 버전 기록 버튼을 누르면 팝오버 목록에서 수동 저장, 복제, AI 적용, 게시, 복원처럼 의미 있는 시점을 확인합니다.
• 버전 복원: 과거 기록을 지우거나 덮어쓰지 않고, 선택한 상태를 새로운 초안으로 복원합니다.
• 숨김: 편집 캔버스에는 흐리게 남지만 게시 화면에서는 보이지 않습니다.

컴포넌트 살펴보기

컴포넌트 라이브러리가 연결된 데스크톱 빌더에서는 상단 컴포넌트를 눌러 shadcn의 문서와 미리보기를 볼 수 있습니다. Base UI 문서가 먼저 열리며, 원본 문서 탭에서 Radix 예제도 볼 수 있습니다. 코드는 전체가 표시되고 길면 코드 안에서 스크롤할 수 있습니다.

컴포넌트를 다시 누르면 작업 화면으로 돌아옵니다. 메뉴를 오가는 동안 보던 문서와 AI 대화는 유지됩니다. 문서의 설치 명령과 코드는 원본 개발 예제이며, 문서를 보는 것만으로 현재 템플릿에 컴포넌트가 설치되거나 적용되지는 않습니다. AI가 만드는 랜딩은 Base UI를 기준으로 하며, 현재 저장을 지원하는 컴포넌트부터 사용합니다. 새 랜딩·코드번들 생성에는 shadcn의 조합·스타일 지침과 지원되는 예제를 함께 전달합니다. 문서에 있는 모달·입력폼 등 모든 동작을 AI 편집에서 곧바로 사용할 수 있는 것은 아닙니다.

저장과 게시

1. 상단 액션바에서 원하는 값을 선택합니다.
2. 미리보기에서 화면 크기별 결과를 확인합니다.
3. 저장 중 또는 실패 상태가 없는지 확인하고, 보관할 지점이면 초안 저장을 누릅니다.
4. 실제 스토어프론트에 반영하려면 게시를 누릅니다.

초안 저장만으로는 고객이 보는 사이트가 바뀌지 않습니다. 게시가 완료된 설정만 실제 스토어프론트에 적용됩니다.

게시 전에는 빈 페이지, 모든 섹션 숨김, 연결되지 않은 카테고리 그리드나 빈 갤러리를 검사합니다. 차단 오류가 있으면 게시할 수 없습니다. SEO 제목·설명 누락 같은 경고는 향후 검색 노출 품질을 위한 안내이며 게시 자체를 막지는 않습니다.

다른 템플릿에서 게시를 누르면 해당 템플릿이 소속 URL 페이지의 새로운 게시 템플릿이 됩니다. 이전 템플릿은 목록에 남아 다시 선택할 수 있고, 게시 버전은 해당 템플릿의 내부 이력으로 보관됩니다.

게시된 브랜드 컬러는 토큰을 지원하는 메인·카테고리·예약·접수·조회 화면의 버튼, 선택 상태, 입력 포커스, 강조색에 공통 적용됩니다. 기존 커스텀 템플릿에서 자체 색상을 직접 지정한 일부 영역은 해당 템플릿을 스토어프론트 토큰으로 전환할 때까지 기존 디자인을 유지할 수 있습니다.

커스텀 컬러 사용

컬러 프리셋 또는 커스텀 컬러 중 한 가지 방식을 사용합니다. 커스텀 컬러는 6자리 HEX 값으로 입력합니다. 예: #4F46E5.

주의사항

• 여러 창에서 동시에 같은 초안을 수정하면 최신 버전을 다시 불러오라는 안내가 표시될 수 있습니다.
• 게시 전 데스크톱·태블릿·모바일 미리보기를 모두 확인하세요.
• 화면 초기화 후에도 실제 사이트는 게시하기 전까지 변경되지 않습니다.

AI 코드의 브라우저 미리보기 (내부 시험)

입력창의 파일 첨부 버튼으로 참고 자료를 선택하거나, 파일을 입력창에 끌어놓거나 이미지를 붙여넣을 수 있습니다. 선택한 파일과 함께 원하는 작업을 입력하고 전송하세요. 파일 선택만으로 AI 요청이 전송되지는 않습니다. 이미지·PDF·DOCX·XLSX·텍스트·코드·ZIP·영상·음성 등 공식 지원 형식의 자료를 첨부할 수 있습니다. 일반 첨부는 파일당 20MB, ZIP은 50MB까지 받으며, 숍의 남은 저장 용량과 연결된 v0 계정의 한도도 적용됩니다. 소스와 압축 파일은 참고 자료로 전달하며, 첨부 자체가 현재 랜딩의 코드를 교체하지는 않습니다. 숍에 저장된 이미지는 공개 URL을 사용하고, 문서·소스 등 참고 파일은 비공개로 보관합니다. 업로드된 파일은 랜딩 사용 여부와 관계없이 저장 용량에 포함됩니다. 사용하지 않는 첨부를 자동 삭제하지는 않습니다. 전송한 메시지가 대화에 올라갈 때 입력창의 문구와 첨부 목록은 비워집니다. 전송에 실패하면 문구와 첨부가 복구되며, 처리 상태를 확인한 후 다시 시도할 수 있습니다. AI가 작업하거나 계획 승인을 기다리는 동안에는 기존 랜딩이 유지됩니다. 새 미리보기가 준비되면 교체되며, 준비에 실패해도 이미 열린 랜딩은 유지됩니다.

AI 편집 패널은 대화와 입력창을 중심으로 표시합니다. 개발용 조작 버튼과 내부 검증 안내는 표시하지 않습니다. 선택한 랜딩의 기존 대화는 자동으로 불러옵니다. 새 대화에서는 첫 메시지를 보내면 현재 초안을 연결한 뒤 AI 편집을 시작합니다. 연결에 실패하면 입력 내용을 유지하므로, 오류 안내에 따라 대화를 다시 불러와 처리 상태를 확인하세요. 채팅에는 대화와 AI 생성 진행 상태가 표시됩니다. 로그인·접근 권한·사용량 제한은 입력창 바로 위의 보조 액션 영역에 표시됩니다. 계획 승인·재시도·로그인처럼 조작이 필요할 때만 이 영역이 나타나며, 대화를 스크롤해도 입력창 위에 유지됩니다. 안내는 두 줄까지 표시하고 긴 안내와 세부 내용은 자세히 보기로 펼칩니다. 전체 계획은 대화에서 확인합니다. 로그인은 새 탭에서 열려 편집 화면을 유지합니다. 미리보기 준비와 실행 오류는 가운데 미리보기에서 확인하고, 생성 결과의 미리보기·초안 적용은 메인 헤더에서 진행합니다. 내부 파일 검토 내역과 반복 안내는 채팅에 표시하지 않습니다.

AI 초안은 헤더의 게시를 누르면 필요한 게시 후보를 준비합니다. 검토할 미리보기가 나타나면 내용을 확인한 뒤 게시를 다시 눌러 운영에 반영합니다. 후보 준비만으로는 게시되지 않습니다.

지원 대상으로 등록된 기존 랜딩은 첫 메시지에서 원본 코드를 자동으로 연결하고, AI 수정 후 생성 결과를 검토해 브라우저 미리보기를 준비합니다. 중앙 캔버스에서 정상 실행된 결과는 복사본 초안 저장으로 보관합니다. 저장한 복사본을 다시 선택하면 보관된 코드로 미리보기를 다시 실행합니다. 원본과 게시 중인 랜딩은 바뀌지 않습니다.

대화를 불러오거나 계획 승인을 기다리는 동안에는 현재 랜딩을 유지합니다. 새 미리보기를 준비하는 동안에도 기존 화면을 볼 수 있으며, 준비에 실패하면 기존 화면과 재시도 안내를 함께 표시합니다.

미리보기와 AI 대화는 같은 오류 분류를 사용하되, 미리보기에는 오류 카드, 입력창에는 짧은 안내를 표시합니다. 로그인·권한, 자료 누락, 저장 상태 변경, 사용량 제한, 연결·시간 초과, 코드 검증·컴파일·실행 오류에 따라 안내가 달라집니다. 원인을 확인할 수 없는 오류는 일반적인 재확인 안내를 표시합니다.

코드 컴파일이나 화면 실행 오류에는 AI에 오류 전달을 사용할 수 있습니다. 오류 내용을 현재 랜딩의 입력창에 추가하며, 기존 입력은 유지합니다. 직접 전송하기 전에는 AI 수정 요청이 실행되지 않습니다. 로그인이나 권한 오류에는 이 버튼이 표시되지 않습니다. 세부 내용은 오류 내용을 펼쳐 확인합니다. 공개 랜딩에는 내부 진단 내용을 표시하지 않습니다. 미리보기 자체를 불러오지 못한 경우에는 안내의 다시 불러오기로 미리보기만 다시 요청합니다. 작성 중인 초안과 대화는 유지됩니다. 미리보기 자체는 유료 Sandbox를 호출하지 않습니다. AI 코드 생성 비용과 숍 저장공간은 계속 사용되며, 미리보기 소스 준비는 시간당 10회·하루 100회로 제한됩니다.

이 기능은 지원 대상으로 설정된 숍과 템플릿에서 사용할 수 있습니다. 운영 게시 권한과 기능 활성화 상태는 별도로 확인합니다. 여러 파일로 구성된 템플릿도 파일별로 검토하며, 복사본 초안에는 수정 가능한 소스 전체가 함께 저장됩니다. 예약과 전화는 해당 숍의 실제 예약 화면과 전화번호로 연결됩니다. 지도·다운로드 등은 미리보기 실행 환경에 따라 제한될 수 있습니다. 동적 복사본도 게시 후보 검증을 통과하면 게시할 수 있으며, 새 정적 코드의 검증 경로는 기존 방식으로 유지됩니다.

아이콘 스타일

더보기 → 아이콘에서 라이브러리를 고르면 기존 랜딩의 일반 아이콘이 같은 의미의 다른 모양으로 바뀝니다. 검색·전화·기기·수리 아이콘 등에 적용되며, 로고·브랜드 이미지·직접 그린 장식은 유지됩니다. 선택한 라이브러리에 대응하는 특수 아이콘이 없으면 기존 아이콘을 유지합니다. 아이콘 선택은 테마와 함께 저장되고 실행 취소할 수 있습니다. 예약·접수 같은 운영 화면과 내부 시험용 AI 코드 미리보기는 이 아이콘 전환 대상에 포함되지 않습니다.

라이브러리에서 기존 블록 보기

라이브러리의 Blocks에서 메인 배너, 카테고리, 갤러리, 고객 후기, 자주 묻는 질문, 행동 유도 등 6개 분류의 블록 시안 12개를 볼 수 있습니다. 각 미리보기 툴바에서 새로고침, 라이트·다크 전환, 모바일·태블릿·데스크톱 화면 전환과 전체 보기를 사용할 수 있습니다.

라이트·다크 전환은 선택한 블록 미리보기에만 적용됩니다. 라이브러리와 웹빌더 화면의 전역 테마, 작업 중인 랜딩의 저장된 테마는 바뀌지 않으며 다른 페이지로 이동하면 전환 상태가 초기화됩니다.

샘플의 문구와 이미지는 예시이며, 미리보기를 여는 것만으로 작업 중인 랜딩에 추가되지는 않습니다. 원하는 시안에서 이 블록 추가를 누르면 웹빌더 캔버스로 돌아가며, 각 섹션 사이의 여기에 추가 버튼으로 삽입 위치를 정할 수 있습니다. 구조형·코드형 랜딩 모두 등록된 블록이 해당 위치에 즉시 추가됩니다. 코드형 랜딩은 현재 페이지 소유 코드로 분리한 뒤 저장하므로 레지스트리 원본이나 다른 페이지에는 영향을 주지 않습니다. 추가한 뒤 문구나 구성을 더 바꾸고 싶을 때만 AI 편집을 사용합니다.

블록 미리보기 안에서 스크롤하면 샘플이 먼저 움직입니다. 맨 위나 아래에 닿으면 바깥 블록 목록으로 스크롤이 이어집니다. 샘플 내부의 메뉴나 모달을 조작할 때는 해당 영역의 스크롤을 유지합니다.