퀘스트

개요

Quests 블록은 웹샵 솔루션에서 퀘스트를 카드 형태로 보여줍니다. 각 카드는 다음을 표시합니다.

• 퀘스트 이미지
• 퀘스트 이름
• 설명
• 리워드
• 버튼

사용자는 퀘스트 조건을 완료하고 리워드를 받습니다. 퀘스트 조건은 인게임 이벤트를 기반으로 합니다. 즉, 레벨 도달이나 일정 횟수 승리처럼 게임에서 퀘스트 플랫폼으로 전송하는 플레이어 행동입니다.

이 블록은 AI toolkit으로 추가하거나 웹사이트 빌더에서 수동으로 추가하세요. 퀘스트 자체는 엑솔라 AI toolkit에서만 생성하고 수정할 수 있습니다.

이점

Quests 블록은 다음과 같은 이점이 있습니다.

• Engagement: Quests는 사용자가 웹샵 솔루션과 게임으로 다시 돌아오도록 목표를 제공합니다.

• No coding: 웹사이트 빌더에서 블록을 추가하고 구성하거나, AI toolkit으로 AI 에이전트가 처리하게 할 수 있습니다.

• Control over what is shown: 어떤 퀘스트를, 어떤 순서로, 몇 개까지 보여줄지 선택할 수 있습니다.

• Customization: 웹샵 솔루션 디자인에 맞추어 카드의 텍스트, 이미지, 레이아웃을 모두 편집할 수 있습니다.

요구 사항

Quests 블록을 사용하려면 다음을 확인하세요.

• 엑솔라 웹사이트 빌더로 웹샵 솔루션을 만들었습니다.
• 사이트에 엑솔라 로그인을 구성했습니다.
• 엑솔라 AI toolkit으로 프로젝트에 사용할 퀘스트를 만들었습니다. 블록은 이미 존재하는 퀘스트만 표시합니다.

사용자 플로

1. 사용자가 웹샵 솔루션을 열고 퀘스트 카드가 있는 Quests 블록을 봅니다.
2. 사용자가 퀘스트 카드의 버튼을 클릭하고, 아직 로그인하지 않았다면 엑솔라 로그인으로 로그인합니다.
3. 사용자가 퀘스트 조건을 완료합니다.
4. 퀘스트 카드는 진행도에 따라 상태가 바뀝니다.
5. 퀘스트를 완료하면 사용자가 리워드를 받습니다.

AI toolkit으로 퀘스트 설정

퀘스트는 엑솔라 AI toolkit에서만 생성하고 변경할 수 있습니다. 이 툴킷은 Claude Code, OpenAI Codex, Gemini CLI 같은 AI 코딩 도구와 함께 동작합니다. AI 에이전트가 사이트에 Quests 블록을 추가하고 업데이트할 수도 있습니다.

AI toolkit으로 퀘스트와 블록을 설정하려면:

1. AI 에이전트로 퀘스트를 생성하거나 변경하세요.
2. AI 에이전트에게 사이트에 Quests 블록을 추가하거나 업데이트하도록 요청하세요. 에이전트는 생성하거나 변경한 블록을 초안으로 저장합니다.
3. 웹사이트 빌더에서 초안을 검토하세요.
4. 사이트를 게시해 변경 사항을 반영하세요.

웹사이트 빌더에서 Quests 블록 설정

Quests 블록을 추가하려면:

3. 사이트에 여러 페이지가 있다면, 빌더 상단의 드롭다운 목록에서 필요한 페이지를 선택하세요.
4. Add block을 클릭하고 Quests를 선택하세요.
5. 블록을 클릭해 설정 패널을 열고 설정을 구성하세요.
6. 블록 텍스트를 편집하세요.
7. 오른쪽 상단에서 Preview를 클릭해 변경 사항을 검토하세요.
8. 사이트를 게시하세요.
   1. 웹사이트 빌더 오른쪽 상단에서 Publish를 클릭하세요.
   2. 게시하려는 페이지 옆의 체크박스를 선택하세요.
   3. Publish를 클릭하세요.

블록 설정 구성

블록의 설정 패널에는 다음 설정 그룹이 있습니다: Quests, Layout, Preview state.

Quests

Quests 그룹에서 블록에 표시할 퀘스트와 순서를 구성하세요.

• Selected quests — AI toolkit으로 프로젝트에 만든 퀘스트입니다. 퀘스트를 찾으려면 검색 입력란에 이름을 입력하세요. 각 퀘스트에 대해 다음을 수행할 수 있습니다.
  • 토글을 켜서 블록에 퀘스트를 표시하세요. 토글이 꺼진 퀘스트는 표시되지 않습니다.
  • 핸들을 드래그해 위아래로 이동하여 순서를 변경하세요. 가장 위에 있는 퀘스트가 왼쪽부터 먼저 표시됩니다.
  • 퀘스트를 확장하고 카드에 표시할 이미지를 업로드하세요. 리워드 이미지나 퀘스트 테마 일러스트 등 아무 이미지를 사용할 수 있습니다.
• Maximum quests shown — 블록에 표시할 퀘스트 카드 최대 개수입니다.

Layout

Layout 그룹에서 블록과 카드의 표시 방식을 설정하세요.

• Show heading — 블록 제목을 표시하거나 숨깁니다.
• Show card descriptions — 각 카드의 퀘스트 설명을 표시하거나 숨깁니다.
• Show card images — 각 카드의 이미지를 표시하거나 숨깁니다.
• Image fit — 카드 이미지 영역을 채우는 방식:
  • Fill image area — 이미지가 전체 영역을 덮으며 일부가 잘릴 수 있습니다.
  • Fit whole image — 이미지를 자르지 않고 전체를 표시합니다.
• Card text alignment — 카드 텍스트 정렬: 왼쪽, 가운데, 오른쪽.
• Button style — 사이트 테마에서 가져온 각 카드의 버튼 스타일: Primary, Secondary, Tertiary 또는 Theme default.
• Block background — 모든 카드 뒤의 배경: Transparent 또는 사이트 테마의 Primary/Secondary 색상.
• Card background — 각 카드의 배경: Transparent 또는 사이트 테마의 Primary/Secondary 색상.

Preview state

Preview state 그룹에서 웹사이트 빌더에 퀘스트 카드가 표시되는 방식을 선택하세요.

• Editor simulation — 다양한 카드 상태에서 블록의 표시를 확인할 수 있습니다. 에디터에서는 카드에서 시뮬레이션된 동작이 비활성화됩니다.
• Live — 실제 데이터를 표시합니다.

블록 텍스트 편집

웹사이트 빌더에서 블록 위에서 다음 텍스트를 직접 편집할 수 있습니다.

• 블록 제목
• 퀘스트 이름
• 퀘스트 설명
• 버튼 텍스트

텍스트를 편집하려면:

1. 변경할 텍스트를 클릭하세요.
2. 새 텍스트를 입력하세요.
3. 도구 모음을 사용해 텍스트 서식을 지정하세요(선택 사항). 텍스트 스타일을 변경하고, 번호 매기기/글머리 기호 목록을 만들고, 굵게/기울임/밑줄을 적용하고, 정렬을 설정하고, 링크를 추가하고, 텍스트 색상을 변경할 수 있습니다.