첫 App 만들기

이 가이드는 Canvas 워크플로로부터 App을 만드는 과정을 안내합니다. 끝까지 따라 하면 누구나 사용할 수 있는 재사용 가능한 도구를 갖게 됩니다.

준비 사항(Prerequisites)

App을 만들기 전에 다음이 필요합니다:

• ✅ 동작하는 Canvas 워크플로
• ✅ 충분히 테스트되어 좋은 결과를 내는 워크플로
• ✅ 어떤 입력을 사용자가 바꿀 수 있게 할지에 대한 이해

Step 1: 워크플로 만들기(Build Your Workflow)

먼저 Canvas 워크플로를 만들고 테스트합니다.

예시 워크플로(Example Workflow)

간단한 제품 사진 생성기를 만들어 봅시다:

[Upload Node] → [BG Remover] → [Image Node (Flux Kontext)] → [Upscaler]
                                        ↑
                              [Text Node: "on marble surface, studio lighting"]

테스트(Test It)

1. 샘플 입력으로 워크플로를 실행합니다
2. 출력 품질을 확인합니다
3. 만족할 때까지 설정을 조정합니다
4. Canvas를 저장합니다

Step 2: App Builder 열기(Open the App Builder)

접근 방법(How to Access)

1. Canvas 워크플로를 엽니다
2. 툴바(또는 사이드바)에서 App Builder 버튼을 찾습니다
3. 클릭해 App Builder 패널을 엽니다

App Builder 패널(The App Builder Panel)

다음이 보입니다:

• App list — 이 Canvas에 연결된 기존 Apps
• Create New — 새 App을 시작하는 버튼
• Settings — 구성 옵션

Step 3: App 이름 정하기(Name Your App)

App Name

명확하고 설명적인 이름을 선택하세요:

✅ 좋은 이름 예시:

• “Product Photo Generator”
• “Social Media Post Creator”
• “Video Ad Maker”

❌ 피해야 할 예시:

• “My App”
• “Test”
• “Workflow 1”

Description

App이 무엇을 하는지 짧게 설명하세요:

Generate professional product photos with custom backgrounds. 
Upload your product image, describe the desired background, 
and get a polished, high-resolution result.

Step 4: 입력 구성(Configure Inputs)

가장 중요한 단계입니다. 워크플로 중 사용자가 변경할 수 있는 부분을 선택하는 과정입니다.

사용 가능한 입력 찾기(Finding Available Inputs)

App Builder는 입력을 받을 수 있는 모든 노드를 보여줍니다:

• Text 노드(프롬프트용)
• Upload 노드(파일용)
• 수정 가능한 설정들

노출할 입력 선택(Selecting Inputs to Expose)

노출하려는 각 입력에 대해:

1. 토글 ON — App 사용자에게 보이게 함
2. 라벨 설정 — 사용자가 보는 이름(예: “Product Photo”)
3. 타입 설정 — Text, image, video, audio
4. 필수 여부 표시 — 반드시 제공해야 하는 입력인지

예시 구성(Example Configuration)

제품 사진 워크플로의 경우:

입력 라벨(Input Labels)

명확하고 사용자 친화적인 라벨을 작성하세요:

✅ 좋은 라벨 예시:

• “Product Photo”
• “Background Description”
• “Brand Name”

❌ 피해야 할 예시:

• “input_1”
• “Text for node 3”
• “Upload here”

Step 5: 썸네일 추가(Add a Thumbnail)

썸네일은 사용자가 App을 식별하는 데 도움을 줍니다.

옵션(Options)

1. 이미지 업로드 — 직접 만든 썸네일
2. 워크플로 결과 사용 — 생성 결과 중 하나
3. 자산에서 선택 — Gallery에서 선택

베스트 프랙티스(Best Practices)

• 워크플로에서 나온 결과물을 사용하세요
• App이 무엇을 만드는지 보여주세요
• 시각적으로 명확하게 유지하세요
• 정사각형 또는 4:3 비율이 잘 어울립니다

Step 6: 검토 후 저장(Review and Save)

저장 전 체크(Before Saving)

다음을 확인하세요:

• ✅ 이름이 명확하고 설명적인가?
• ✅ 설명이 App의 기능을 잘 말해주는가?
• ✅ 필요한 입력이 모두 노출되었는가?
• ✅ 라벨이 사용자 친화적인가?
• ✅ 필수 항목이 올바르게 표시되었는가?
• ✅ 썸네일이 App을 잘 대표하는가?

App 저장(Save the App)

Save 또는 Create App을 클릭합니다.

이제 App을 사용할 준비가 되었습니다!

Step 7: App 테스트(Test Your App)

테스트 실행(Run a Test)

1. Apps 섹션으로 이동합니다
2. 새로 만든 App을 찾습니다
3. 입력을 채웁니다
4. Generate를 클릭합니다
5. 출력을 확인합니다

사용자 경험 점검(Check the Experience)

스스로 질문해 보세요:

• 무엇을 입력해야 하는지 명확한가?
• 출력이 기대와 일치하는가?
• 혼란스러운 요소는 없는가?

App 편집하기(Editing Your App)

편집 모드 접근(Accessing Edit Mode)

1. Apps 섹션으로 이동
2. App 찾기
3. Edit 또는 Settings 버튼 클릭

변경 가능한 것(What You Can Change)

• App 이름과 설명
• 노출할 입력 선택
• 입력 라벨과 필수 여부
• 썸네일

변경할 수 없는 것(What You Can't Change)

• 기본 워크플로(대신 Canvas에서 편집)
• 노드 구성(대신 Canvas에서 편집)

워크플로 업데이트(Updating the Workflow)

워크플로를 바꿔야 한다면:

1. 원본 Canvas 열기
2. 변경 적용
3. App Builder 다시 열기
4. 필요하면 App 구성 업데이트

베스트 프랙티스(Best Practices)

단순하게 유지(Keep It Simple)

• 필수 입력만 노출하세요
• 옵션이 너무 많아 사용자에게 부담을 주지 마세요
• 복잡도는 뒤로 숨기세요

라벨을 명확히(Write Clear Labels)

• 쉬운 표현 사용
• 무엇이 필요한지 설명
• 필요하면 예시 포함

충분히 테스트(Test Thoroughly)

• 여러 번 실행해 보세요
• 다양한 입력으로 테스트하세요
• 출력 품질을 검증하세요

사용자 관점에서(Think About Users)

• 누가 이 App을 사용할까요?
• 사용자가 무엇을 알아야 할까요?
• 무엇이 혼란스러울 수 있을까요?

흔한 실수(Common Mistakes)

❌ 너무 많은 입력을 노출

Problem: 사용자가 옵션에 압도됩니다.

Solution: 정말 필요한 입력만 노출하세요. 고급 설정은 숨기세요.

❌ 불명확한 라벨

Problem: 사용자가 무엇을 입력해야 할지 모릅니다.

Solution: 설명적인 라벨을 쓰고 도움이 되는 설명을 추가하세요.

❌ 테스트하지 않음

Problem: App이 기대대로 동작하지 않습니다.

Solution: 공유하기 전 항상 다양한 입력으로 테스트하세요.

❌ 필수 필드 표시를 잊음

Problem: 사용자가 입력을 덜 채운 채 제출합니다.

Solution: 필수 입력은 required로 표시하세요.

예시: 완성된 App 구성(Example: Complete App Setup)

Product Photo Generator

Name: Product Photo Generator

Description: Create professional product photos with custom backgrounds. Upload your product image and describe your ideal setting.

Inputs:

Thumbnail: 대리석 위 제품이 보이는 예시 출력

다음 단계

• Running Apps — Apps 사용법 배우기
• App Ideas for Creatives — 아이디어 얻기
• Multi-Step Workflows — 더 복잡한 Apps 만들기