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

소개

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

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

이 자습서에서는 Spark을 사용하여 앱을 빌드하고 배포하는 전체 수명 주기를 안내하고, 해당 기능을 탐색합니다.

필수 조건

• GitHub개의 계정에 Copilot Pro+개 또는 Copilot Enterprise개의 라이선스가 부여된 계정.

1단계: 웹앱 만들기

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

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

1.        https://github.com/spark로 이동하십시오.
   

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

   Copilot prompt

   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.
   

   팁

   • 구체적으로 지정하고, 최상의 결과를 위해 가능한 한 많은 세부 정보를 제공합니다. 초기 프롬프트에 대한 개선 사항을 구체화하거나 제안하도록 요청할 공동 파일럿 채팅 수 있습니다.
   • 또는, 입력 필드에 markdown 문서를 끌어다 놓아 Spark에게 구현하려는 내용에 대한 더 많은 컨텍스트를 제공할 수 있습니다.

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

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

   참고

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

2단계: 앱 개선 및 확장

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

1. 자연어를 사용하여 앱을 변경하려면 왼쪽 사이드바의 "Iterate" 탭 아래에서 주 입력 필드에 지침을 입력한 다음, 제출합니다.

1. 필요에 따라 "Iterate" 탭의 입력 필드 바로 위에 있는 "Suggestions" 중 하나를 클릭하여 앱을 개발합니다.

2.        Spark 는 감지된 오류를 자동으로 경고합니다. 오류를 해결하려면 "Iterate" 탭의 입력 필드 위에 있는 **Fix All**을 클릭합니다.
   

3. 필요에 따라 코드 를 클릭하여 코드의 내용을 보고 수정할 수 있습니다. 코드 편집 패널에는 Copilot 인라인 제안이 기본 제공되어 있습니다.
4. 앱의 특정 요소를 변경하려면 오른쪽 위 모서리에 있는 대상 아이콘을 클릭한 다음, 마우스로 가리키고 실시간 미리 보기 창에서 요소를 선택합니다.

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

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

1. 다음과 같이 앱의 전반적인 모양을 변경합니다. * Theme 탭을 클릭하여 입력 체계, 색, 테두리 반경, 간격 및 기타 시각적 요소를 조정합니다.

   • 미리 생성된 테마 중에서 선택하여 앱의 전체 스타일을 쉽게 업데이트합니다.

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

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

   • 코드 편집기를 열려면 클릭합니다 .

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

     팁

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

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

   • 이미지, 로고, 비디오, 문서 또는 기타 자산을 추가하여 앱을 개인 설정합니다.
   • 업로드가 완료되면 "반복" 탭에서 Spark 에게 해당 에셋을 앱에 어떻게 반영하고 싶은지 지시하십시오.

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

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

마케팅 앱에 사용자가 선호하는 마케팅 문구를 저장하고 나중에 쉽게 접근할 수 있도록 데이터를 저장할 기능을 추가하겠습니다.

1. "Spark을(를) 안내하려면 '반복' 탭에서 다음 명령을 사용하십시오."

   Copilot prompt

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

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

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

4. 명시적으로 데이터를 저장 하지 않 으려 Spark 면 "로컬로 데이터 저장" 또는 "데이터 유지 안 함"을 요청 Spark 합니다.

5단계: AI 기능 미세 조정

다음으로 GitHub Models으로 구동되는 당사 앱에 포함된 AI 기능을 반복 수행해 보겠습니다.

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

1. Prompts 탭을 클릭합니다.

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

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

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

          **외부 라이브러리를 추가**할 수 있지만 호환성이 보장되지는 않으므로 철저히 테스트해야 합니다.

• React 코드를 직접 편집하면 유효한 구문 및 **** 프레임워크를 따르는 한 Spark 있습니다.

1. 에서 Spark코드를 편집하려면:
   • 코드를 클릭합니다****.
   • 편집기에서 Copilot 인라인 제안에 액세스하여 파일 트리를 탐색하고 편집합니다. 변경 내용은 실시간 미리 보기 창에 즉시 반영됩니다.
2. 고급 편집을 수행하려면 다음을 수행합니다.
   • 오른쪽 위 모서리에서 클릭하고 코드스페이스 열기(완전한 기능을 갖춘 클라우드 IDE)를 클릭하여**** 새 브라우저 탭에서 코드스페이스를 시작합니다.
   • 코드스페이스에 접속한 후, 아이콘을 클릭하여 Copilot 을 열고 고급 설정 변경을 할 수 있습니다.
     • 프롬프트 상자에서 에이전트 모드를 선택하여 코드를 자율적으로 빌드, 검토 및 문제를 해결할 수 있습니다 Copilot .

     •   **편집** 모드를 Copilot 선택하여 앱의 코드를 검토하고 개선 사항 및 수정 사항을 제안합니다.
       

     • Ask 모드를 선택하여 Copilot 가 코드나 Spark에서 발생하는 오류를 설명하고 이해할 수 있도록 하십시오.
   • 코드스페이스에서 변경한 내용이 자동으로 동기화됩니다 Spark.

7단계: 앱 배포 및 공유

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

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

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

   

3. "데이터 접근"에서 다른 사용자에게 앱을 읽기 전용으로 접근하게 할지 아니면 쓰기 권한을 줄지 선택합니다.

          **Read-only**를 선택하면 다른 사용자가 앱을 볼 수만 있고, 콘텐츠를 생성, 편집, 삭제할 수는 없습니다.
   

   예를 들어, 가족 일정 앱을 만들어 다른 사용자가 앱을 볼 수만 있고, 이벤트를 만들거나 편집하거나 삭제할 수는 없도록 하려면, Read-only를 선택하면 됩니다. 이렇게 하면 다른 사용자가 Spark의 데이터 저장소를 수정할 수 없습니다.

4.        **Visit site**를 클릭하여 배포된 실시간 앱으로 이동합니다. 사이트의 URL을 복사하여 다른 사용자와 공유합니다.
   

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

   Spark의 URL은 Spark 이름에 따라 생성됩니다. 앱의 이름을 편집할 수 있으며 Spark 이전 URL을 최신 URL로 다시 라우팅하는 작업을 자동으로 관리합니다.

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

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

1. 오른쪽 위 모서리에서 클릭하고 ****리포지토리 만들기를 클릭합니다.
2. 열리는 대화 상자에서 Create를 클릭합니다.

개인 계정 GitHub 아래에 새 프라이빗 리포지토리가 생성되며, 이 리포지토리는 Spark의 이름을 따서 명명됩니다.

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

Spark와 리포지토리 간에 양방향 동기화가 이루어지므로, Spark 또는 리포지토리의 메인 브랜치 중 어느 한 곳에서 변경 사항이 발생하면 양쪽 모두에 자동으로 반영됩니다.

리포지토리에서 이슈를 만들고 Copilot 클라우드 에이전트에 할당하여 수정 및 개선을 위한 끌어오기 요청의 초안을 작성할 수 있습니다.

다음 단계

          Spark을(를) 사용하여 구축할 수 있는 더 많은 아이디어를 탐색하세요.

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

추가 참고 자료

•         [AUTOTITLE](/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)
  

•         [AUTOTITLE](/copilot/concepts/copilot-billing/about-billing-for-github-spark)
  

•         [AUTOTITLE](/free-pro-team@latest/site-policy/github-terms/github-pre-release-license-terms)