깃허브의 새로운 AI 기반 코딩 플랫폼인 깃허브 스파크(Spark)는 꽤 오랜 시간 동안 소규모 비공개 베타 단계에 머물러 있었다. 그러나 이제 깃허브 코파일럿+ 구독자라면 누구나 사용할 수 있고, 이후 차차 공개 범위도 더 넓어질 것으로 예상된다. 기존의 깃허브 코파일럿은 스마트한 인텔리센스(IntelliSense) 역할, 즉 개발자가 입력한 코드를 기반으로 아이디어를 제안하는 역할을 했지만 스파크는 비주얼 스튜디오 코드의 코파일럿 에이전트에 내장된 툴에 더 가깝다. 프롬프트를 사용해 질문에 대한 답을 작성하고 개발자의 아이디어를 실제로 구현하는 코드를 생성한다.

스파크의 코드 뷰에서 출력을 수정할 수도 있지만 그보다는 대부분 프롬프트를 변경하거나 다듬는 방식으로 원하는 애플리케이션을 구현하게 된다는 면에서 바이브 코딩의 정점이라고 할 수 있다. 즉, 설계부터 시작하는 것이 아니라 아이디어부터 시작해서 스파크의 툴을 활용해 빠르게 그 아이디어를 코드로 전환할 수 있으며, 생성되는 자바스크립트와 직접 상호작용할 필요도 없다.

깃허브 스파크에서 애플리케이션 빌드하기

필자는 깃허브의 넥스트(Next) 플랫폼에서 현재는 초대를 받아야 이용할 수 있는 프리뷰 서비스를 실험적으로 사용하고 있다. 이전까지는 바이브 코딩을 해본 적이 없고, 익숙하지 않은 API(예를 들어 마스토돈(Mastodon)에 액세스 권한을 부여한 다음 콘텐츠를 게시하는 API)의 구문을 파악하기 위해 가끔 깃허브 코파일럿을 사용하는 정도였다. 익히는 과정은 재미있었다. 먼저 “던전 앤 드래곤(Dungeons & Dragons) 게임의 주사위를 굴리는 애플리케이션. 여러 개의 주사위를 함께 굴릴 수 있음”이라는 프롬프트로 시작한 다음 이후 주사위의 색을 바꾸고 주기적으로 사용하는 주사위 조합을 저장하고 주사위 굴림과 그 결과의 기록을 저장할 수 있는 앱으로 발전시켜 나갔다.

각 반복은 생성된 코드를 기반으로 하며, 새 프롬프트를 사용해 디자인과 기능을 개선한다. 애플리케이션과 현재 코드의 미리보기는 볼 수 있었지만 아쉽게도 코드를 리포지토리에 저장하는 옵션은 제공되지 않았다. 비주얼 스튜디오 코드 또는 비슷한 다른 편집기에 코드를 복사해서 붙여넣은 다음 로컬이나 깃허브에 저장하는 방법을 사용할 수 있는데, 이 경우 생성된 코드는 저장되지만 기반 스파크 플랫폼이 제공하는 라이브러리와 기능에 의존하므로 깃허브 외부로 완벽하게 이식할 수는 없다.

다섯 번의 프롬프트로 만족스러운 웹 애플리케이션을 만들어 다른 깃허브 스파크 사용자들과 공유할 수 있었다. 공유 옵션은 두 가지다. 기본값은 읽기 전용 액세스 권한이지만 다른 사용자들이 동일한 디자인 공간 내에서 협업할 수 있게 해주는 옵션도 있다. 미리보기에서 생성된 자바스크립트는 JSX 형식을 사용하므로 체계적인 코드 보기를 통해 더 쉽게 읽고 이해할 수 있다.

깃허브 스파크 환경의 내부

깃허브 스파크 개발 공간은 3개의 패널로 구성된 웹 애플리케이션이다. 가운데 패널은 코드 영역이며, 오른쪽에는 실행 중인 앱과 코드 생성 애니메이션이 표시되고 왼쪽에는 다양한 툴이 위치한다.

이런 툴은 여러 기능을 제공한다. 먼저, 애플리케이션의 현재 버전이 마음에 들지 않을 경우 이전 프롬프트로 되돌아갈 수 있다. 또한 입력란을 사용해 현재 생성된 코드를 기반으로 새 프롬프트를 추가할 수 있다. 스크린샷을 선택할 수도 있고 기반 깃허브 코파일럿 서비스에서 사용 중인 현재 LLM을 변경할 수도 있다. 필자는 기본값인 앤트로픽의 클로드 소네트(Claude Sonnet) 3.5를 사용했다. 프롬프트와 관련된 개념을 기반으로 코드 개선을 제안하는 몇 가지 선택 옵션도 이 기능의 일부로 제공된다.

그 외에 현재 테마, 글꼴 또는 애플리케이션 아이콘에 사용되는 스타일을 비롯한 저수준 애플리케이션 디자인 옵션을 변경할 수 있는 컨트롤도 제공된다. 또한 디자인 툴을 사용해서 그래픽 요소의 테두리, 배율을 조정하거나 프로그레시브 웹 앱(PWA) 기반의 코드 설치를 위한 애플리케이션 아이콘도 선택할 수 있다.

깃허브 스파크에는 빌드와 세션이 넘어가도 지속되는 애플리케이션 데이터를 위한 내장 키/값 저장소가 있다. 툴바에는 현재 키와 값 저장소에 사용되는 데이터 구조의 목록이 표시된다. 정의를 클릭하면 현재 저장된 데이터가 편집할 수 있는 형태로 표시되므로 여기서 원치 않는 내용을 제거할 수 있다. 코드가 LLM을 호출하는 경우 사용되는 프롬프트 목록도 확인할 수 있다.

마지막 옵션은 사용자별 설정 모음으로, 모든 애플리케이션에 사용할 수 있는 기본 프롬프트도 포함된다. 이 설정을 통해 애플리케이션을 맞춤 구성하고, AI가 생성한 코드에 자기만의 스타일을 추가할 있다. 다른 사용자들과 대화할 수 있는, 깃허브가 후원하는 디스코드 서버 링크도 제공된다.

필자가 만든 기초적인 프로토타입 스타일의 리액트 앱의 경우 기본 설정으로도 충분히 잘 작동했다. 생성된 프롬프트 중 몇 개를 사용했지만 프롬프트를 제출하기 전에 의도를 더 잘 반영하도록 편집했다. 점점 더 세부적인 부분까지 개선해 나가면서 애플리케이션 생성 시간도 함께 길어졌지만 500줄 정도의 리액트 자바스크립트를 생성하는 데 최대 3~4분밖에 걸리지 않았다. 직접 코딩에 비하면 훨씬 빠른 속도다.

기업용 깃허브 스파크

깃허브 코파일럿+ 라이선스(사용자당 월 39달러)가 있는 경우 기업에 더 잘 맞는 깃허브 스파크 버전을 사용할 수 있다. 이 버전은 필자가 사용한 프리뷰를 바탕으로 하지만 자바스크립트 리액트 코드가 아닌 강력한 타입스크립트를 사용하며, 코드를 수정하고 테스트할 수 있는 코드스페이스(Codespace)와 통합된다. 팀 작업도 지원된다. 리포지토리를 통해 코드를 저장 및 공유할 수 있고 두 환경 간의 양방향 동기화도 가능하다.

이 깃허브 스파크 역시 필자가 사용한 미완성 버전과 마찬가지로 프롬프트 중심의 개발 방식을 사용하며 복잡한 다중 프롬프트를 지원한다. 여러 번의 프롬프트 반복을 통해 코드를 다듬을 수 있고, 이미지를 업로드해 사용자 인터페이스를 더 효과적으로 배치할 수도 있다. 스케치 또는 화이트보드 디자인을 촬영한 사진도 업로드가 가능하다.

코드가 생성되면 테스트하거나 추가로 반복하거나 내장된 코드 편집기를 사용해 수정하고, 미리보기 패널을 통해서는 특정 표시 요소를 집중적으로 살펴보고 편집기로 전환해 세밀하게 조정할 수 있다. 따라서 표준 테마와 스타일 툴을 사용해서 전체 애플리케이션과 함께 모양과 느낌을 편집할 수 있다. 생성된 코드에는 디자이너가 더 정밀하게 편집할 수 있도록 CSS도 포함된다. 내장된 테마 툴 외에 자기만의 시각적 재료를 업로드해서 앱에 추가하는 것도 가능하다. 미리보기와 동일한 툴을 통해 내장 키/값 저장소와 AI 통합 및 서드파티 API에 사용되는 모든 프롬프트를 관리할 수 있다.

다른 많은 프롬프트 기반 코딩 툴과 마찬가지로 깃허브 스파크에도 제한이 있다. 구독에는 월 375개의 스파크 프롬프트와 반복이 포함되며, 이를 초과해 추가되는 프롬프트에는 건당 0.16달러의 요금이 붙는다. 게시된 애플리케이션을 저장하고 실행하는 데는 비용이 들지 않지만 사용량 한도를 초과하면 다음 청구일이 될 때까지 애플리케이션이 차단된다.

깃허브 스파크가 유용한 영역은?

이런 툴은 개발자의 툴킷에서 한 자리를 차지할 수 있겠지만 코드가 아무리 좋다 해도 직접 작성하는 코드를 대체할 수는 없다. “내 코드”가 아니므로 그 구조와 스타일도 익숙하지 않다. 깃허브 스파크에서 생성된 코드를 편집해 재사용하는 과정은 오픈소스 프로젝트의 어느 코드 섹션 또는 낯선 사람이 작성한 코드를 가져와 이해하는 과정과 비슷하다. 개발자가 특정 의사 결정을 내린 이유를 먼저 이해해야 한다.

깃허브 스파크는 어느 부분에 사용해야 할까? 가장 확실한 용도는 프로토타이핑 툴이다. 아이디어를 실제 작동하는 예시로 빠르게 구현할 수 있기 때문이다. 최종 솔루션을 코딩하는 데 시간을 투자하기 전에 애플리케이션의 목업을 제작하고 데이터와 서비스에 액세스할 수 있는 백엔드를 갖추고 애플리케이션을 시연하고 공유하기 위한 좋은 방법이다.

이는 마이크로소프트 파워 플랫폼과 같은 노코드 또는 로우코드 툴로 구축된 애플리케이션에 프런트엔드를 추가하는 방법으로 이러한 툴을 사용할 수 있는 가능성을 보여준다. 사용자 프롬프트와 코드 분석을 조합하면 UI 컨셉을 빠르게 생성하고 반복을 통해 공유 가능한 최종 애플리케이션을 만들 수 있다.

깃허브 스파크와 같이 리액트와 타입스크립트를 기반으로 한다는 것은 생성된 코드를 리포지토리에 추가하고 프런트엔드 팀이 수정할 수 있음을 의미한다. 이는 전문 개발자와 이해관계자, 주제 전문가, 그리고 로우코드 개발자가 혼합되는 마이크로소프트의 퓨전 팀 개념을 구현하는 사례다. 그 결과는 잘 설계되고 기능적인 코드를 제공하는 AI 기반 개발 툴이다. 이제 생성된 코드와 깃허브 스파크 런타임을 사용해 자체 시스템, 즉 온프레미스 또는 클라우드에 배포하는 방법만 있으면 된다.
dl-itworldkorea@foundryco.com