# GitHub Spark를 사용하여 AI 기반 앱 빌드 및 배포
를 사용하여 GitHub Spark자연어를 사용하여 지능형 웹앱을 빌드하고 배포하는 방법을 알아봅니다.
> \[!NOTE]
>
> * GitHub Spark는 [데이터 보호를](https://gh.io/dpa) 사용하여 공개 미리 보기에 있으며 변경될 수 있음을 유의하십시오.
> * 공용 코드와 일치하는 제안을 차단하는 설정은 GitHub Copilot 사용 Spark시 의도한 대로 작동하지 않을 수 있습니다.
> [GitHub Copilot 정책을 개별 구독자로 관리](/ko/copilot/how-tos/manage-your-account/managing-copilot-policies-as-an-individual-subscriber#enabling-or-disabling-suggestions-matching-public-code)을(를) 참조하세요.
## 소개
GitHub Spark를 사용하여 자연어로 원하는 내용을 설명하고 데이터 스토리지, AI 기능 및 GitHub 인증이 기본 제공된 전체 스택 웹앱을 가져올 수 있습니다. 프롬프트, 시각적 도구 또는 코드를 사용하여 반복한 다음, 클릭하여 완전 관리형 런타임에 배포할 수 있습니다.
Spark는 GitHub와 원활하게 통합되므로 고급 편집을 위해 GitHub과 동기화된 Copilot codespace를 통해 Spark를 개발할 수 있습니다. 팀 공동 작업을 위한 리포지토리를 만들고 GitHub의 도구 및 통합 에코시스템을 활용할 수도 있습니다.
이 자습서에서는 Spark을 사용하여 앱을 빌드하고 배포하는 전체 수명 주기를 안내하고, 해당 기능을 탐색합니다.
### 필수 조건
* GitHub개의 계정에 Copilot Pro+개 또는 Copilot Enterprise개의 라이선스가 부여된 계정.
## 1단계: 웹앱 만들기
이 자습서에서는 다음과 같은 간단한 마케팅 도구 앱을 만듭니다.
* 사용자가 마케팅하려는 제품에 대한 설명을 입력합니다.
* 앱은 마케팅 복사본을 생성하고 시각적 전략 및 대상 그룹을 추천합니다.
1. ```
https://github.com/spark로 이동하십시오.
```
2. 입력 필드에 앱에 대한 설명을 입력합니다. 예시:
```copilot copy
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.
```
> \[!TIP]
>
> * 구체적으로 지정하고, 최상의 결과를 위해 가능한 한 많은 세부 정보를 제공합니다. 초기 프롬프트에 대한 개선 사항을 구체화하거나 제안하도록 요청할 [공동 파일럿 채팅](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) 수 있습니다.
> * 또는, 입력 필드에 markdown 문서를 끌어다 놓아 Spark에게 구현하려는 내용에 대한 더 많은 컨텍스트를 제공할 수 있습니다.
3. 필요에 따라 이미지를 업로드하여 앱에 대한 시각적 참조를 제공합니다 Spark . 모의, 스케치 또는 스크린샷은 모두 빌드하려는 항목에 대한 아이디어를 제공하기 Spark 위해 작동합니다.
4. 앱을 빌드하려면 클릭합니다 **** .
> \[!NOTE]
```
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 또는 사용자 지정 변수를 수정합니다.
> \[!TIP]
> 사용자 지정 글꼴(예: Google 글꼴)을 가져오거나 Spark 코드 편집기에서 직접 고급 스타일을 추가할 수 있습니다.
> 스타일 지정 구문에 익숙하지 않은 경우 단계별 지침을 요청 [공동 파일럿 채팅](https://github.com/copilot?ref_product=copilot\&ref_type=engagement\&ref_style=text) 합니다.
4. ```
**자산** 탭을 클릭하여 앱에 표시할 자산을 업로드합니다.
```
* 이미지, 로고, 비디오, 문서 또는 기타 자산을 추가하여 앱을 개인 설정합니다.
* 업로드가 완료되면 "반복" 탭에서 Spark 에게 해당 에셋을 앱에 어떻게 반영하고 싶은지 지시하십시오.
## 4단계: 데이터 저장 및 관리
앱에 데이터를 저장해야 할 필요성이 감지되면 Spark 키-값 저장소를 사용하여 자동으로 데이터 스토리지가 설정됩니다.
마케팅 앱에 사용자가 선호하는 마케팅 문구를 저장하고 나중에 쉽게 접근할 수 있도록 데이터를 저장할 기능을 추가하겠습니다.
1. "Spark을(를) 안내하려면 '반복' 탭에서 다음 명령을 사용하십시오."
```copilot copy
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 코드 영역을 통해 앱의 코드를 보거나 편집할 수 있습니다.
> \[!NOTE]
> \*
> Spark 는 안정성을 위해 의견 스택(**React**, **TypeScript**)을 사용합니다.
>
> * 최상의 결과를 위해 **SDK 및 핵심 프레임워크 내에서 Spark작업** 해야 합니다.
> *
```
**외부 라이브러리를 추가**할 수 있지만 호환성이 보장되지는 않으므로 철저히 테스트해야 합니다.
```
> * React 코드를 직접 편집하면 유효한 구문 및 \*\*\*\* 프레임워크를 따르는 한 Spark 있습니다.
1. 에서 Spark코드를 편집하려면:
* 코드를 클릭합니다\*\*\*\*.
* 편집기에서 Copilot 인라인 제안에 액세스하여 파일 트리를 탐색하고 편집합니다. 변경 내용은 실시간 미리 보기 창에 즉시 반영됩니다.
2. 고급 편집을 수행하려면 다음을 수행합니다.
* 오른쪽 위 모서리에서 클릭하고 **코드스페이스 열기(완전한 기능을 갖춘 클라우드 IDE)를 클릭하여\*\*\*\*** 새 브라우저 탭에서 코드스페이스를 시작합니다.
* 코드스페이스에 접속한 후, **** 아이콘을 클릭하여 Copilot 을 열고 고급 설정 변경을 할 수 있습니다.
* 프롬프트 상자에서 **에이전트** 모드를 선택하여 코드를 자율적으로 빌드, 검토 및 문제를 해결할 수 있습니다 Copilot .
* ```
**편집** 모드를 Copilot 선택하여 앱의 코드를 검토하고 개선 사항 및 수정 사항을 제안합니다.
```
* **Ask** 모드를 선택하여 Copilot 가 코드나 Spark에서 발생하는 오류를 설명하고 이해할 수 있도록 하십시오.
* 코드스페이스에서 변경한 내용이 자동으로 동기화됩니다 Spark.
## 7단계: 앱 배포 및 공유
```
Spark 는 한 번의 클릭으로 앱을 배포할 수 있는 완전히 통합된 런타임 환경과 함께 제공됩니다.
```
> \[!NOTE]
>
> * Spark를 배포할 때 다른 사용자에게 표시하도록 선택한 경우, 앱의 데이터는 앱에 접근할 수 있는 모든 사용자에게 **공유됩니다**. 표시 유형 설정을 업데이트하기 전에 Spark에 중요한 데이터가 포함되어 있지 않은지 확인합니다.
> * 또한 Spark를 **Read-only**로 공유하도록 선택할 수도 있습니다. 이 경우 다른 사용자는 앱의 콘텐츠를 볼 수만 있고, 콘텐츠를 편집하거나 파일 또는 레코드를 삭제하거나 새 항목을 만들 수는 없습니다.
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 설명하고 대화형 웹앱으로 전환할 수 있습니다.
## 추가 참고 자료
* [GitHub Spark의 책임 있는 사용](/ko/copilot/responsible-use-of-github-copilot-features/responsible-use-of-github-spark)
* [GitHub Spark 청구](/ko/copilot/concepts/copilot-billing/about-billing-for-github-spark)
* [GitHub 시험판 사용 조건](/ko/site-policy/github-terms/github-pre-release-license-terms)