첫 번째 Spark

앱에 대한 좋은 아이디어가 있었지만 앱을 빌드할 도구가 없었던 적이 있나요? AI의 도움으로 이제 자연어만 사용하여 몇 분 안에 앱 아이디어를 실현할 수 있습니다. 이 문서에서는 GitHub Spark를 사용하여 한 줄의 코드도 직접 작성하지 않고 단어 검색 앱을 빌드, 개선, 공유합니다.

앱의 프로토타입 만들기

먼저 나중에 빌드할 수 있는 앱의 초기 기본 버전을 생성해 보겠습니다.

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

2. 앱의 첫 번째 반복을 생성하려면 다음 프롬프트를 보냅니다.

   Copilot prompt

   Please create a word search game. The game should take in a set of words from the user, then create a word search puzzle containing those words, as well as a word bank listing the words. Words in the puzzle can be horizontal, vertical, diagonal, forwards, and backwards, and are "found" when the user clicks and drags their mouse across them. Once all words are found, give the user the option to create a new puzzle.
   

3. Spark가 실시간으로 앱을 빌드하는 모습을 지켜보세요! 미리 보기가 표시되면 앱 생성이 완료된 것을 알 수 있습니다.

4. 앱을 테스트하려면 미리 보기를 사용하여 퍼즐을 만들고 해결합니다.

앱 개선

그런 식으로, 작업 앱을 준비합니다. 그러나 여전히 몇 가지 조정이 필요합니다. Spark에 프로젝트를 다듬기 위한 몇 가지 추가 프롬프트를 제공해 보겠습니다.

1. 페이지 왼쪽의 Iterate 탭에서 다음 프롬프트를 보냅니다.

   Copilot prompt

   Please add a leaderboard and a timer to the game. The timer should start when the user generates a new puzzle, then stop when all words are found. The user should then be able to enter their name, and their name, time, and the number of words in their puzzle should be displayed on the leaderboard. The leaderboard should be sortable in ascending and descending order by each of the three categories.
   

2. 앱이 업데이트되면 다른 퍼즐을 만들고 해결하여 새로운 기능이 작동하는지 확인합니다.

3. 창의력을 발휘하고 앱을 직접 개선하세요! 막막한 느낌이 들 경우 Spark가 프롬프트 텍스트 상자 위에 제공하는 제안 중 하나를 선택합니다. 코드를 수정하지 않고도 "Theme", "Data", "Prompts" 탭의 시각적 편집 컨트롤을 사용하여 변경할 수도 있습니다.

앱 디버깅

앱을 빌드하는 동안 몇 가지 오류가 발생할 수 있습니다. Spark는 이러한 이슈를 식별하고 프롬프트 텍스트 상자 위의 "Errors" 팝업에 나열합니다. 오류를 해결하려면 Fix all을 클릭합니다.

Spark 자체적으로 플래그를 지정하지 않은 오류가 발견되면 해결하라는 프롬프트를 작성합니다. 최상의 결과를 얻으려면 오류에 대한 자세한 설명과 이상적인 해결 상태를 제공합니다. 예를 들어 특정 수의 문자 위에 단어를 추가할 경우 퍼즐이 잘못 렌더링되면 다음 프롬프트를 보냅니다.

Please prevent users from entering words longer than the number of rows or columns in the puzzle. Additionally, add an option to change the size of a puzzle. If the user tries to enter a word that's longer than the current size of the puzzle, display an error message telling them that provided words must be less than or equal to the size of the puzzle.

Please prevent users from entering words longer than the number of rows or columns in the puzzle. Additionally, add an option to change the size of a puzzle. If the user tries to enter a word that's longer than the current size of the puzzle, display an error message telling them that provided words must be less than or equal to the size of the puzzle.

앱 공유

이제 앱에 만족했으므로 다른 사용자와 공유할 수 있도록 게시해 보겠습니다. 또한 Spark를 Read-only로 공유하도록 선택할 수도 있습니다. 이 경우 다른 사용자는 앱의 콘텐츠를 볼 수만 있고, 콘텐츠를 편집하거나 파일 또는 레코드를 삭제하거나 새 항목을 만들 수는 없습니다.

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

2. 기본적으로 Spark는 비공개로 게시되며 사용자에게만 액세스할 수 있습니다. 다른 GitHub 사용자가 앱에 액세스할 수 있도록 하려면, 게시 드롭다운의 표시 유형 섹션에서 조직을 선택하여 선택한 조직의 모든 구성원이 스파크에 액세스할 수 있도록 하거나, 모든 GitHub 사용자를 선택하세요. 이렇게 하면 GitHub 계정이 있는 모든 사용자가 Spark에 액세스할 수 있습니다.

   

3. Spark를 다른 사용자에게 표시할 경우(즉, 프라이빗 이외의 모든 설정) 게시 드롭다운에 "데이터 액세스" 옵션이 나타납니다. 이렇게 하면 Spark에서 콘텐츠 및 데이터를 편집할 수 있는 액세스 권한이 있는 사용자를 제어할 수 있는 옵션이 제공됩니다.

   

          **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-eye" aria-label="eye" role="img"><path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path></svg> 다른** 사용자가 콘텐츠 또는 데이터를 만들거나 편집하거나 삭제할 수 없도록 앱을 볼 수 있도록 읽기 전용을 선택합니다. 
          **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-pencil" aria-label="pencil" role="img"><path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path></svg> 사용자가** Spark의 콘텐츠와 데이터를 편집하고 볼 수 있도록 쓰기 액세스를 선택합니다.
   

   예를 들어 가족 일정 앱을 만들었으나 사용자가 일정에서 이벤트를 만들거나 편집하거나 삭제할 수 없도록 하려면 "읽기 전용"을 선택합니다.

4.        **View site**<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-link-external" aria-label="link-external" role="img"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Zm6.854-1h4.146a.25.25 0 0 1 .25.25v4.146a.25.25 0 0 1-.427.177L13.03 4.03 9.28 7.78a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042l3.75-3.75-1.543-1.543A.25.25 0 0 1 10.604 1Z"></path></svg>를 클릭하여 배포된 앱을 확인한 다음, 앱의 URL을 복사하고 공유합니다.
   

다음 단계

방금 단어 검색 앱을 만들었지만 Spark에서 모든 종류의 웹앱을 만들 수 있습니다. 직접 새 앱을 만들어 보세요. 영감이 필요한 경우 다음과 같은 몇 가지 아이디어로 시작할 수 있습니다.

•         **뉴스 집계 앱** 또는 **지능형 레시피 생성기**를 빌드해 보세요.
  

• 예산을 설정하고, 비용 목록을 작성하고, 남은 총 예산을 표시할 수 있는 예산 추적기를 빌드합니다. 각 비용에 범주와 날짜를 지정한 다음, 여러 범주별로 비용을 정렬할 수 있습니다.

추가 참고 자료

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

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