GitHub Spark를 사용하여 AI 기반 앱 빌드 및 배포

소개

GitHub Spark를 사용하여 자연어로 원하는 내용을 설명하고 데이터 스토리지, AI 기능 및 GitHub 인증이 기본 제공된 전체 스택 웹앱을 가져올 수 있습니다. 프롬프트, 시각적 도구 또는 코드를 사용하여 반복한 다음, 클릭하여 완전 관리형 런타임에 배포할 수 있습니다.

Spark는 GitHub와 원활하게 통합되므로 고급 편집을 위해 Copilot과 동기화된 GitHub 코드스페이스를 통해 Spark를 개발할 수 있습니다. 팀 공동 작업을 위한 리포지토리를 만들고 GitHub의 도구 및 통합 에코시스템을 활용할 수도 있습니다.

이 자습서에서는 Spark를 사용하여 앱을 빌드 및 배포하고 해당 기능을 탐색하는 방법을 안내합니다.

필수 조건

• Copilot Pro(프로)+가 있는 GitHub 계정

1단계: 웹앱 만들기

이 자습서에서는 다음과 같은 간단한 마케팅 도구 앱을 만듭니다.

• 사용자가 마케팅하려는 제품에 대한 설명을 입력합니다.
• 앱은 마케팅 복사본을 생성하고 시각적 전략 및 대상 그룹을 추천합니다.

1. https://github.com/spark(으)로 이동합니다.

2. 입력 필드에 앱에 대한 설명을 입력합니다. 예시:

   Text

   Build an app called "AI-Powered Marketing Assistant."
   
   The app should allow users to input a brief description of a product or service. When the user submits their brief, send this information to a generative AI model with a prompt that asks the AI to return the following:
      - Persuasive and engaging marketing copy for the product or service.
      - A visual strategy for how to present the product/service (e.g., suggested imagery, colors, design motifs, or mood).
      - A recommendation for the ideal target audience.
   The app should display these three elements clearly and in an organized manner.  The app should look modern, fresh and engaging.
   

   팁

   • 구체적으로 지정하고, 최상의 결과를 위해 가능한 한 많은 세부 정보를 제공합니다. Copilot Chat을 사용하여 초기 프롬프트를 미세 조정하고 개선 사항을 제안할 수 있습니다.
   • 또는 입력 필드에 Markdown 문서를 가져와 빌드하려는 항목에 대한 더 많은 컨텍스트를 Spark에 제공합니다.

3. 필요에 따라 이미지를 업로드하여 앱에 대한 시각적 참조를 Spark에 제공합니다. 모의, 스케치 또는 스크린샷은 모두 빌드하려는 항목에 대한 아이디어를 Spark에 제공하는 데 사용됩니다.

4. 을 클릭하여 앱을 빌드합니다.

   참고 항목

   Spark는 항상 Typescript 및 React 앱을 생성합니다.

2단계: 앱 개선 및 확장

Spark가 앱을 생성하면 실시간 미리 보기 창에서 테스트할 수 있습니다. 여기에서 자연어, 시각적 편집 컨트롤 또는 코드를 사용하여 앱을 반복하고 확장할 수 있습니다.

1. 자연어를 사용하여 앱을 변경하려면 왼쪽 사이드바의 "반복" 탭 아래에서 주 입력 필드에 지침을 입력한 다음, 제출합니다.
2. 필요에 따라 "반복" 탭의 입력 필드 바로 위에 있는 "제안" 중 하나를 클릭하여 앱을 개발합니다.
3. Spark는 감지된 오류를 자동으로 경고합니다. 오류를 해결하려면 "반복" 탭의 입력 필드 위에 있는 모두 수정을 클릭합니다.
4. 필요에 따라 코드를 클릭하여 기본 코드를 보고 편집합니다. 코드 편집 패널에는 Copilot 코드 완성이 기본 제공되어 있습니다.
5. 앱의 특정 요소를 변경하려면 오른쪽 위 모서리에 있는 대상 아이콘을 클릭한 다음, 마우스로 가리키고 실시간 미리 보기 창에서 요소를 선택합니다.

3단계: 앱 스타일 사용자 지정

다음으로 Spark의 기본 제공 도구를 사용하여 앱의 스타일을 변경해 보겠습니다. 또는 코드를 직접 편집할 수 있습니다.

1. 다음과 같이 앱의 전반적인 모양을 변경합니다.

   • 테마 탭을 클릭하여 입력 체계, 색, 테두리 반경, 간격 및 기타 시각적 요소를 조정합니다.
   • 미리 생성된 테마 중에서 선택하여 앱의 전체 스타일을 쉽게 업데이트합니다.

2. 특정 구성 요소에서 시각적 편집을 대상으로 지정하려면 대상 아이콘을 클릭한 다음, 미리 보기 창에서 앱의 요소를 선택합니다. 해당 특정 요소와 관련된 스타일 컨트롤이 왼쪽 사이드바에 표시됩니다.

3. 필요에 따라 코드에서 스타일을 편집합니다.

   • 를 클릭하여 코드 편집기를 엽니다.

   • 세분화된 컨트롤(예: 패딩, 간격, 글꼴, 색)을 위해 CSS, Tailwind CSS 또는 사용자 지정 변수를 수정합니다.

     팁

     사용자 지정 글꼴(예: Google 글꼴)을 가져오거나 Spark 코드 편집기에서 직접 고급 스타일을 추가할 수 있습니다. 구문 스타일 지정에 익숙하지 않은 경우 Copilot Chat에 단계별 지침을 요청하세요.

4. 자산 탭을 클릭하여 앱에 표시할 자산을 업로드합니다.

   • 이미지, 로고, 비디오, 문서 또는 기타 자산을 추가하여 앱을 개인 설정합니다.
   • 업로드되면 "반복" 탭에서 해당 자산을 앱에 통합하는 방법을 Spark에 알려줍니다.

4단계: 데이터 저장 및 관리

Spark가 앱에 데이터를 저장할 필요성을 감지하면 키-값 저장소를 사용하여 자동으로 데이터 스토리지를 설정합니다.

마케팅 앱의 경우 사용자가 선호하는 마케팅 복사본을 저장하고 나중에 쉽게 다시 액세스할 수 있도록 데이터 스토리지를 추가해 보겠습니다.

1. "반복" 탭에서 다음 지침을 사용하여 Spark를 안내합니다.

   Text

   Add a "Favorites" page where users can save and view their favorite marketing copy results.
   

2. 생성이 완료되면 앱과 상호 작용하여 즐겨찾기를 저장하고 검색하는 과정을 테스트해 보세요.

3. 저장된 값을 보고 편집하려면 "데이터" 탭을 선택합니다.

4. 명시적으로 Spark가 데이터를 저장하지 않게 하려면 Spark에 "로컬로 데이터를 저장하거나" "데이터 유지하지 않도록" 요청하세요.

5단계: AI 기능 미세 조정

다음으로, 앱에 포함되어 있으며 GitHub Models에서 지원하는 AI 기능을 반복해 보겠습니다.

Spark는 앱의 기능에 AI가 필요한 시점을 자동으로 감지합니다. 각 AI 기능에 대한 프롬프트를 자동으로 생성하고, 가장 적합한 모델과 통합하고, 사용자를 대신하여 API 통합 및 LLM 추론을 관리합니다.

1. 프롬프트 탭을 클릭합니다.
2. 앱에 사용되는 각 AI 기능을 지원하기 위해 생성된 Spark 프롬프트를 검토합니다.
   • 마케팅 앱의 경우 Spark가 생성한 세 가지 프롬프트가 있습니다(마케팅 복사 생성, 시각적 전략 권장 및 대상 그룹 권장).
3. 코드로 이동하지 않고도 각 프롬프트를 클릭하여 보고 편집합니다. 사용 사례에 맞게 조정합니다.
4. 앱을 테스트하여 업데이트된 결과를 확인합니다.

6단계: 코드 및 Copilot을 사용하여 편집 및 디버그

Spark에서 또는 동기화된 GitHub 코드스페이스를 통해 직접 앱 코드를 보거나 편집할 수 있습니다.

1. Spark에서 코드를 편집하려면 다음을 수행합니다.
   • 코드를 클릭합니다.
   • 편집기에서 Copilot 코드 완성에 액세스하여 파일 트리를 탐색하고 편집합니다. 변경 내용은 실시간 미리 보기 창에 즉시 반영됩니다.
2. 고급 편집을 수행하려면 다음을 수행합니다.
   • 오른쪽 위 모서리에서 을 클릭한 다음, codespace 열기(전기능 클라우드 IDE)를 클릭하여 새 브라우저 탭에서 코드스페이스를 시작합니다.
   • 코드스페이스 내에서 을 클릭하여 Copilot을 열고, 더 나은 방식으로 변경합니다.
     • 프롬프트 상자에서 에이전트 모드를 선택하여 Copilot에서 코드를 자율적으로 빌드, 검토하고 문제를 해결할 수 있도록 합니다.
     • Copilot에 대한 편집 모드를 선택하여 앱의 코드를 검토하고 개선 사항 및 수정 사항을 제안합니다.
     • Copilot에 대한 요청 모드를 선택하여 Spark에 표시되는 코드 또는 오류를 설명하고 이해하는 데 도움을 줍니다.
   • codespace에서 변경한 내용은 Spark에 자동으로 동기화됩니다.

7단계: 앱 배포 및 공유

Spark에는 한 번의 클릭으로 앱을 배포할 수 있는 완전히 통합된 런타임 환경이 제공됩니다.

1. 오른쪽 위에 있는 게시를 클릭합니다.

2. 기본적으로 Spark는 비공개이며 사용자만 액세스할 수 있습니다. "표시 유형"에서 Spark를 비공개로 유지할지 또는 모든 GitHub 사용자가 사용할 수 있도록 할지 선택합니다.

   

3. 사이트 방문을 클릭하여 배포된 실시간 앱으로 이동합니다. 사이트의 URL을 복사하여 다른 사용자와 공유합니다.

   참고 항목

   앱을 게시할 때 Spark에는 통합 런타임의 일부로 사용할 애플리케이션에 대한 클라우드 기반 스토리지 및 LLM 추론이 자동으로 포함됩니다.

   Spark의 URL은 Spark의 이름을 기준으로 생성됩니다. 앱의 이름을 편집할 수 있으며 Spark는 최신 URL로의 이전 URL 재라우팅을 자동으로 관리합니다.

8단계: 리포지토리를 사용하여 협력자 초대

이제 배포된 작동 앱이 있으므로 GitHub 리포지토리를 만들고 Spark에 연결하여 다른 GitHub 프로젝트와 동일한 방식으로 앱에서 계속 빌드하고 공동 작업할 수 있습니다.

1. 오른쪽 위 모서리에서 을 클릭한 다음, 리포지토리 만들기를 클릭합니다.
2. 열리는 대화 상자에서 만들기를 클릭합니다.

GitHub의 개인 계정 아래에 spark 이름을 딴 리포지토리 이름을 사용해서 새 프라이빗 리포지토리가 만들어집니다.

리포지토리를 만들기 전에 수행한 Spark 변경 내용은 리포지토리에 추가되므로 만들어진 후에 Spark에 대해 수행된 모든 변경 내용 및 커밋에 대한 전체 레코드가 표시됩니다.

Spark와 리포지토리 간에 양방향 동기화가 있으므로 Spark 또는 리포지토리의 주 분기에서 변경한 내용이 두 위치에 자동으로 반영됩니다.

리포지토리에서 이슈를 만들고 Copilot 코딩 에이전트에 할당하여 수정 및 개선에 대한 끌어오기 요청을 초안으로 작성할 수도 있습니다.

다음 단계

Spark를 사용하여 구축할 수 있는 더 많은 아이디어에 대해 알아보세요.

• 신속하게 새로운 아이디어의 프로토타입 작성: 기능 또는 앱에 대한 구체적인 아이디어가 있는 경우 모형, 스케치, 스크린샷을 업로드하거나 Markdown 문서를 Spark에 붙여넣고 Spark에 아이디어를 구현해 달라고 요청하세요.
• 사용자 자신과 팀을 위한 내부 도구 빌드: 현재 문서 또는 스프레드시트에 있는 일반적인 워크플로 또는 프로세스를 보유하고 있는 경우 워크플로 또는 프로세스를 Spark에 설명합니다. 그러면 Spark에서 대화형 웹앱으로 전환할 수 있습니다.

추가 참고 자료

• 책임 있는 GitHub Spark 사용
• GitHub Spark에 대한 청구 정보
• GitHub 시험판 사용 조건