> For the complete documentation index, see [llms.txt](https://guide.hypercape.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide.hypercape.com/brand-guide/ai.md).

# AI 홈페이지 수정

Shopify 스토어의 홈페이지 섹션을 AI로 수정합니다.

브랜드가 수정할 섹션을 선택하고 요청을 작성합니다. 이후 AI가 코드를 수정하고, 관리자가 검수한 뒤 라이브 스토어에 적용합니다.

**워크플로우**

```
스토어 연결 → 수정 요청 → AI 처리 → 프리뷰/검수 → 배포
```

### 요청 상태

| 상태                     | 브랜드 표시 | 설명                    |
| ---------------------- | ------ | --------------------- |
| **Submitted**          | 요청 접수  | 요청 제출 직후              |
| **AI Processing**      | 처리 중   | AI 처리 중               |
| **AI Completed**       | 처리 중   | AI 처리 완료 (다음 단계 진행 전) |
| **AI Failed**          | 처리 중   | AI 처리 실패              |
| **Internal Review**    | 검수 중   | 결과 검토 중               |
| **Revision Requested** | 수정 요청  | 재처리 필요                |
| **Delivered**          | 결과 전달  | 전달 완료                 |
| **Deployed**           | 적용 완료  | 라이브 적용됨               |
| **Rolled Back**        | 원복됨    | 이전 상태로 되돌림            |

> 💡 브랜드 대시보드에서는 **AI Processing / AI Completed / AI Failed**를 모두 **처리 중**으로 표시합니다. 세부 상태는 관리자만 확인합니다.

***

### 스토어 연결 \[브랜드]

홈페이지 수정 기능을 사용하려면 먼저 Shopify 스토어를 연결해야 합니다.

{% hint style="warning" %}
현재 **자동 연결 기능**을 개발 중입니다. 현재 스토어 연결은 관리자가 수동으로 진행합니다.
{% endhint %}

#### 스토어 연결하기

브랜드 대시보드의 홈페이지 메뉴에서 연결할 수 있습니다.

* 스토어 이름을 입력 (예: `my-store`, `.myshopify.com`은 자동 추가)
* Shopify 앱 설치를 승인하면 연결 완료

> 💡 하나의 브랜드에 하나의 Shopify 연결만 가능합니다.

#### 연결 관리

\[관리자] 연결 이후 관리자는 Connections 페이지에서 연결 상태 확인, 검증, 비활성화 등을 관리할 수 있습니다.

***

### 수정 요청 \[브랜드]

<figure><img src="/files/HxBYIj3iTB7jB4YuSTfW" alt=""><figcaption></figcaption></figure>

#### 요청 제출

브랜드 대시보드 → 홈페이지에서 "스토어에서 섹션 선택하기"를 선택합니다.

**섹션 선택 (우측 하단 버튼)**:

<figure><img src="/files/R1lTgsxWzptE2erYqR2M" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/n6PnXN8J1GfCyaQyaZHq" alt=""><figcaption></figcaption></figure>

"스토어에서 섹션 선택하기"를 클릭하면 실제 스토어가 열리며, 수정할 섹션을 직접 클릭하여 선택합니다. 여러 섹션을 한 번에 선택한 후 수정 요청을 할 수 있습니다.

**요청 작성**:

<figure><img src="/files/erF3pxDlQNFPr1wWzBuF" alt=""><figcaption></figcaption></figure>

섹션을 선택한 후 각 섹션마다 수정 요청을 작성합니다.

* 한 섹션에 여러 요청이 있다면 **요청 추가** 버튼으로 추가
* 상품명/파일명은 오른쪽의 **상품/파일 이름 조회**에서 검색하여 확인
* 필요하면 참조 이미지/비디오를 첨부 (최대 10개, 이미지 10MB, 비디오 500MB)
* 작성 완료 후 **수정 요청 제출** 클릭

**요청 작성 팁**:

|      | 예시                                          | 이유                   |
| ---- | ------------------------------------------- | -------------------- |
| 좋은 예 | "배너 이미지를 `summer-sale-hero.png`으로 변경"       | 대상과 파일명이 명확          |
| 좋은 예 | "추천 상품에 `Aloe Soothing Emulsion 120ml`를 추가" | 정확한 상품명 사용           |
| 좋은 예 | "'Shop Now' 버튼 링크를 `/new-collection`으로 변경"  | 대상, 변경값 모두 구체적       |
| 나쁜 예 | "배너 이미지 바꿔주세요"                              | 어떤 이미지로 바꿀지 불명확      |
| 나쁜 예 | "추천 상품 변경해주세요"                              | 어떤 상품을 어떤 순서로 할지 불명확 |
| 나쁜 예 | "예쁘게 수정해주세요"                                | AI가 판단할 수 없는 주관적 표현  |

> 💡 정확한 상품명과 파일명은 요청 화면 하단의 **상품/파일 이름 조회**에서 검색 후 복사하세요. AI는 정확한 이름이 있어야 올바르게 처리할 수 있습니다.

**관리자 참고사항**:

* 관리자에게 전달할 추가적인 내용을 작성합니다.

#### 요청 확인 & 피드백

<figure><img src="/files/5imiYGpy6dXUvw5yMPS0" alt=""><figcaption></figcaption></figure>

**\[브랜드]**

* 브랜드 대시보드의 요청 이력 탭에서 상태별로 필터링하여 확인
* 요청 상세에서 추가 피드백 작성 가능 — AI 재처리 시 참고됨

**\[관리자]**

* Admin의 Shopify → Requests에서 모든 브랜드의 요청 관리
* 요청이 모호한 경우 AI 처리 전에 아이템의 memo를 보완 (Edit 버튼)

***

### AI 처리 & 검수 \[관리자]

#### AI 처리

<figure><img src="/files/w7khrUzho0I8SKsNuox8" alt=""><figcaption></figcaption></figure>

요청 상세에서 **Run AI** (AI 실행)를 클릭하면 AI가 각 섹션을 독립적으로 처리합니다.

* 화면이 3초마다 자동 갱신되어 진행 상황을 실시간으로 표시
* 페이지를 닫아도 백그라운드에서 계속 진행

**AI가 수정할 수 있는 것**:

| 대상     | 예시                |
| ------ | ----------------- |
| 테마 코드  | 배경색, 레이아웃, CSS 변경 |
| 상품 정보  | 상품 설명, 태그, SEO    |
| 메뉴     | 항목 추가/삭제/순서       |
| 페이지    | 제목, 본문 수정         |
| 메타필드   | 커스텀 상품 설명, 성분 정보  |
| 컬렉션 순서 | 상품 순서 변경          |

> 💡 위 항목 외에도 Shopify 테마와 스토어 데이터 범위 내에서 다양한 수정이 가능하니, 필요한 내용을 구체적으로 요청해 주세요.

하나의 섹션이 실패해도 나머지에 영향을 주지 않습니다. 실패 시 에러 메시지를 확인하고, memo를 보완한 뒤 **Run AI**로 재시도합니다.

#### 프리뷰

<figure><img src="/files/KFooSIXBdpUOfiU62ntn" alt=""><figcaption></figcaption></figure>

AI 처리가 완료되면 **Preview** (미리보기)를 클릭하여 프리뷰 테마에 결과를 적용한 URL을 생성할 수 있습니다.

* 프리뷰는 라이브 스토어에 영향을 주지 않음
* 방문자에게 보이지 않음

#### 검수

<figure><img src="/files/TCsNPmdxC3C14ygbDAdV" alt=""><figcaption></figcaption></figure>

AI 결과가 만족스러우면 **Move to Internal Review** (내부 검수로 이동) → 프리뷰와 요청 사항을 대조하여 검수합니다.

**검수 체크리스트**:

* [ ] 요청 사항이 모두 반영되었는가
* [ ] 레이아웃/디자인이 깨지지 않았는가
* [ ] 링크, 상품이 올바르게 연결되었는가
* [ ] 모바일에서도 정상 표시되는가

검수 결과에 따라:

* 문제 없음 → **Mark Delivered** (브랜드에 결과 전달)
* 수정 필요 → **Request Revision** (수정 요청 — memo 보완 후 Run AI 재시도)

#### 상태별 액션

| 상태                                             | 가능한 액션                                    |
| ---------------------------------------------- | ----------------------------------------- |
| **Submitted / AI Failed / Revision Requested** | Run AI                                    |
| **AI Completed**                               | Move to Internal Review, Preview          |
| **Internal Review**                            | Request Revision, Mark Delivered, Preview |
| **Delivered**                                  | Deploy to Live, Preview                   |
| **Deployed**                                   | Roll Back                                 |

***

### 배포 & 롤백 \[관리자]

#### 배포

<figure><img src="/files/wW6Y4uBJCqrCc3TzoMMA" alt=""><figcaption></figcaption></figure>

Delivered 상태에서 **Deploy to Live** → **Confirm Deploy**를 클릭하면 라이브 스토어에 적용됩니다.

배포 시 시스템이 자동으로:

* 라이브 테마 파일을 백업
* 임시 리소스를 실제 데이터에 반영
* 수정된 파일을 라이브 테마에 적용

동시 배포가 시도되면 먼저 시작한 것만 진행되며, 실패 시 변경된 데이터가 자동 복구됩니다.

#### 롤백

<figure><img src="/files/2Tb7YKQBa3GCCJPziJbe" alt=""><figcaption></figcaption></figure>

Deployed 상태에서 **Roll Back** → **Confirm Rollback**을 클릭하면 배포 직전 상태로 되돌립니다.

롤백 시 시스템이 자동으로:

* 백업 파일로 라이브 테마를 복원
* 컬렉션 순서와 임시 리소스를 정리

> ⚠️ 배포 후 Shopify에서 직접 수정한 내용은 롤백에 포함되지 않습니다.