Ship 26 NYC - 워크숍 - 30분 만에 init부터 배포까지
VVercel
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00안녕하세요 여러분, 환영합니다. 제 이름은 고든 디그스이고, 스트라이프에서 엔지니어링 매니저를 맡고 있습니다.
00:00:08저는 콜린 렌입니다. 저 역시 스트라이프의 엔지니어입니다.
00:00:11좋습니다. 이번 해커톤에서는 처음부터 시작하여 다양한 서비스 제공업체를 활용해 배포된 애플리케이션을 빌드해 볼 것입니다
00:00:17빠르면 30~40분 만에 끝내는 것을 목표로 하고 있죠. 하지만 먼저 여기 계신 모든 분이 작업에 필요한 최소한의 요건을 갖추었는지 확인하고자 합니다.
00:00:24우선 노트북이 필요합니다. 그리고 클라우드 코드나 코덱스, 혹은 커서 같은 에이전트 기반 코딩 환경이 필요합니다.
00:00:29폰이나 태블릿으로는 이 작업을 제대로 진행하기 어렵습니다. 따라서 노트북이 없다면.
00:00:35그냥 편하게 구경하셔도 괜찮습니다. 노트북이 없으신 분들은 편하게 구경만 하셔도 좋습니다.
00:00:43좋습니다. 이번 워크숍의 처음 10분 정도는 스트라이프 프로젝트에 대해 이야기하고, 앱 아이디어를 몇 가지 드리며 CLI 설정을 도와드릴 것입니다.
00:00:51그런 다음 이어지는 30분 동안은 여러분의 에이전트를 이용해 애플리케이션을 처음부터 배포까지 구축하게 됩니다.
00:00:56스트라이프 프로젝트로 서비스를 프로비저닝하면서 말이죠. 작업이 끝나면 배포한 앱을 저희 리더보드에 제출하실 수 있습니다.
00:01:02그런 다음 마음에 드는 앱에 투표를 진행하고, 어쩌면 우승자가 나올지도 모릅니다. 한번 지켜보죠.
00:01:09그럼 먼저 스트라이프 프로젝트(Stripe Projects)가 무엇인지 개요부터 살펴보겠습니다.
00:01:16스트라이프 프로젝트는 스트라이프의 새로운 제품으로, 여러분이나 여러분의 에이전트가 빠르고 안전하게 인프라를 프로비저닝할 수 있도록 해줍니다.
00:01:22스트라이프 프로젝트는 스트라이프 CLI용 플러그인으로, 이를 통해 여러분이나 에이전트가 데이터베이스 호스팅, 도메인 이름 등 다양한 서비스를 프로비저닝할 수 있습니다.
00:01:28대부분의 서비스는 무료 티어와 유료 티어를 모두 제공합니다. 따라서 이번 해커톤 동안 반드시 비용을 지불해야 하는 것은 아닙니다.
00:01:36하지만 유료 서비스의 경우, 스트라이프 프로젝트가 결제를 통합된 방식으로 중앙화해 주므로 단일 결제 수단으로 모든 클라우드 서비스 비용을 지불할 수 있습니다.
00:01:44공급업체가 연결되면 프로젝트는 관련 환경 변수를 로컬 머신과 클라우드 양쪽에 저장하며, 언제든 가져와 다른 머신에서도 사용할 수 있습니다.
00:01:51다시 말씀드리지만 이번 워크숍에서는 무료 티어만 사용하셔도 충분합니다. 현재 지원되는 공급업체 카테고리는 다음과 같습니다.
00:01:59콜린, 당신이 QR 코드를 조금 가리고 있는 것 같네요. 아무튼 이것이 저희가 지원하는 카테고리들입니다.
00:02:09전체 공급업체 목록은 CLI에서 `stripe projects catalog`를 실행하거나 이 QR 코드의 공급업체 페이지를 참고하시면 됩니다.
00:02:15좋습니다. 그리고 어떤 프로젝트를 만들고 싶으신지 이미 아이디어가 있으신 분들도 계실 겁니다.
00:02:21아직 아이디어가 없으신 분들을 위해 프로젝트로 만들어진 앱 예시 몇 가지를 소개해 드리고자 합니다.
00:02:28이 앱들을 보시면 주어진 시간(약 30분) 동안 현실적으로 무엇을 빌드하고 배포할 수 있는지 감을 잡으실 수 있을 것입니다.
00:02:35너무 과도한 계획으로 시작하지 않도록 말이죠. 자, 여기 스트라이프 팀원들이 프로젝트를 초기 테스트할 때 만들었던 예시 앱들이 있습니다.
00:02:40이 앱들은 모두 라이브로 배포되어 있으며, 상당수가 호스팅, 데이터베이스, 인증(auth) 제공업체를 사용합니다.
00:02:47첫 번째는 깃허브 분석 대시보드(GitHub analytics dashboard)입니다. 깃허브 API에서 데이터를 가져오는 커스텀 대시보드죠.
00:02:52웹 호스팅, 데이터베이스, 인증 제공업체를 사용합니다. 다음은 해피니스 자(Happiness Jar)입니다.
00:02:58하루 동안 자신에게 남기고 싶은 메모를 적어 항아리를 기쁨으로 채우는 유쾌한 앱입니다. 인증, 데이터베이스, 호스팅을 사용합니다.
00:03:04그리고 마이 가든(My Garden)이 있습니다. 식물을 카탈로그화하고 물 줄 때를 알려주는 소소한 원예 앱으로, 호스팅과 데이터베이스를 사용합니다.
00:03:10마지막으로는 타이니 테일즈(Tiny Tales)가 있습니다. 에이전트를 이용해 다양한 주제에 맞춰 유아에게 적절한 책을 추천해 주는 작은 앱입니다.
00:03:17자, 여기 GitHub 분석 대시보드가 있습니다. 깃허브 API에서 데이터를 가져오는 맞춤형 대시보드인데요.
00:03:22프로젝트 아이디어가 정해지면, 남은 워크숍 시간 동안 에이전트를 사용하여 실제로 앱을 빌드하게 됩니다.
00:03:27에이전트와 작업할 때는 좋은 프롬프트로 시작하는 것이 중요합니다. 특히 어떤 종류의 서비스를 사용하고 싶은지 명시하는 것이 좋습니다.
00:03:33예를 들어 “배포하고 싶다, 데이터베이스를 사용하고 싶다” 같은 식으로 말이죠. 구체적인 서비스 종류를 지정할 수도 있습니다.
00:03:40“호스팅용으로 Vercel을 사용하고 싶다”고 하거나, 혹은 스트라이프 프로젝트 카탈로그에서 에이전트가 직접 선택하도록 맡길 수도 있습니다.
00:03:45“데이터베이스가 필요해”라고만 해도 스트라이프 프로젝트가 알아서 하나를 골라 초기화해 줍니다.
00:03:52그리고 고든이 언급했듯이 워크숍 맨 마지막에는 projects.dev 리더보드에 프로젝트를 제출하고 가장 마음에 드는 프로젝트에 투표하게 됩니다.
00:03:57여기에 프로젝트를 공유하기만 해도 소정의 스트라이프 크레딧을 받으실 수 있습니다.
00:04:02이제 고든이 스트라이프 프로젝트 시작하는 방법을 안내해 드릴 겁니다. 좋습니다, 자 시작해 볼까요.
00:04:08말씀드린 것처럼 이 워크숍을 완료하려면 세 가지가 필요합니다. 노트북까지 포함하면 네 가지네요.
00:04:13에이전트 환경, 스트라이프 계정, 그리고 스트라이프 CLI가 필요합니다.
00:04:17참가자 가이드가 준비되어 있으니 이 QR 코드를 스캔해 주시면 좋습니다.
00:04:21앞으로 몇 장의 슬라이드에 나올 모든 정보가 담겨 있으면서도 언제든 참고하실 수 있습니다.
00:04:26따라서 이 QR 코드는 꼭 스캔하시는 것을 추천합니다. 스캔하실 시간을 잠시 드리겠습니다.
00:04:32발표할 때 다들 스마트폰을 꺼내 들면 정말 식은땀이 나지만.
00:04:38제가 스캔하라고 말씀드린 거니 괜찮습니다. 아직 스트라이프 계정이 없으신 분들도 무료이니 이걸 스캔하시면 됩니다.
00:04:45대략 `[dashboard.stripe.com/register](https://dashboard.stripe.com/register)`로 연결될 겁니다.
00:04:50필요하신 분들은 스캔하실 수 있도록 잠시 기다리겠습니다. 좋습니다.
00:04:58다음으로 필요한 것은 스트라이프 프로젝트 플러그인이 포함된 스트라이프 CLI입니다.
00:05:05여기 유용한 npx 명령어가 있으니 실행하시면 됩니다.
00:05:11추가할 스킬을 물어볼 때 Stripe best practices와 Stripe projects를 꼭 체크해 주세요.
00:05:15그리고 이건 에이전트 환경에서 스트라이프 CLI를 설치할 때 사용할 수 있는 프롬프트입니다.
00:05:21맥(Mac)에서 직접 설치하고 싶다면 `brew install`을 사용하시면 됩니다.
00:05:23윈도우에서는 scoop을 사용할 수 있습니다. 그것도 잘 작동합니다.
00:05:30저는 윈도우에서 개발하지 않아서 scoop을 써본 적은 없지만.
00:05:38Homebrew는 정말 훌륭합니다. 그래서 홈브루에 대해서는 자신 있게 말씀드릴 수 있죠. 좋습니다.
00:05:47이 명령들을 모두 실행했다면 스트라이프 프로젝트 플러그인이 설치되었을 것입니다.
00:05:52여기 보이는 것처럼 `stripe projects --help`를 실행하여 제대로 설치되었는지 테스트할 수 있습니다.
00:05:58설정에 어려움을 겪고 계신 분이 있나요? 스트라이프 프로젝트 CLI를 설치하는 데 시간이 더 필요하신 분은 손을 들어주세요.
00:06:051~2분 정도 더 시간을 드리고 계속 진행하겠습니다.
00:06:13다시 한번 말씀드리지만 `stripe projects --help`를 실행해 보세요. 거기에 유용한 안내 메시지가 뜬다면 제대로 설치되어 바로 시작할 준비가 된 것입니다.
00:06:23여전히 어려움을 겪고 계시다면 잠시후 저희가 직접 찾아가서 도와드리겠습니다.
00:06:27그러니 너무 걱정하지 마세요.
00:06:33좋습니다. 다들 설치를 마치셨기를 바랍니다. 혹시 못 하셨더라도 걱정 마세요.
00:06:40나중에 저희를 불러주시면 기꺼이 도와드리겠습니다.
00:06:44설치가 완료되었다면, 프로젝트를 생성하고자 하는 디렉토리에서 `stripe projects init`을 실행하세요.
00:06:51선택사항으로 프로젝트 이름을 전달할 수도 있습니다. 이름을 지정하지 않으면 디렉토리 이름을 그대로 사용합니다.
00:06:57이 init 명령을 실행하면 몇 가지 핵심 파일이 생성됩니다.
00:07:02`.projects` 폴더 안에 `state.json`과 `state.local.json`이 생성됩니다.
00:07:08이 파일들은 특정 프로젝트에 대해 사용 중인 계정, 공급업체, 리소스 정보에 대한 단일 진실 공급원(Source of Truth) 역할을 합니다.
00:07:13또한 Stripe 프로젝트 CLI 스킬 파일도 보실 수 있습니다.
00:07:14이 스킬은 에이전트에게 스트라이프 프로젝트 CLI 사용법을 알려주는 역할을 합니다.
00:07:26프로젝트에 서비스를 추가하기 시작하면, 해당 서비스의 비밀 키를 가져와 `.env` 파일에 추가해 줍니다.
00:07:35또한 해당 서비스에 대한 에이전트 스킬을 `.agent/skills` 디렉토리에 다운로드하여 에이전트가 해당 서비스를 가장 잘 활용할 수 있도록 학습시킵니다.
00:07:40이제 빌드를 시작하는 데 필요한 모든 준비가 끝났습니다. 다시 마이크를 고든에게 넘기겠습니다.
00:07:45좋습니다. 자, 이제 여러분 차례입니다. 직접 빌드를 시작해 보세요.
00:07:53프로젝트를 만들 수 있는 시간은 약 30분입니다. 스트라이프 프로젝트에 대해 질문이 있으신 분은 언제든 손을 들어주세요.
00:07:59환경 설정에 도움이 필요하시면 찾아가서 도와드리겠습니다.
00:08:08참고하실 수 있도록 몇 가지 유용한 스트라이프 프로젝트 명령어를 화면에 띄워두겠습니다.
00:08:14init은 아까 다루었고, 공급업체를 확인할 수 있는 catalog도 이야기했습니다.
00:08:24공급업체나 서비스를 추가할 때는 `add`를 사용합니다. `open`은 공급업체의 대시보드를 직접 엽니다.
00:08:31환경 변수를 동기화하는 기능도 있죠. 비용을 얼마나 쓰고 있는지 확인하고 싶다면 그에 맞는 명령어유도 있습니다.
00:08:37그리고 작업이 끝나갈 무렵 프로젝트를 공유할 준비가 되면 `stripe project share`를 통해 선택한 스택을 공유할 수 있습니다.
00:08:45즉, 여러분이 선택한 공급업체 목록이 공유되는 것이죠.
00:08:50계정 ID가 필요할 때도 그곳에서 확인할 수 있습니다. 참석해 주셔서 감사합니다.
00:08:57참여해 주셔서 감사합니다. 저희에게는 약 30분이 남아 있습니다. 빌드하고, 배포하고, 질문이 있으시면 손을 들어주세요.
00:09:03그리고 여기에 결과물을 제출해 주세요. 슬라이드를 다시 띄워드리겠습니다.
00:09:10이 화면이 바로 슬라이드 덱의 모든 정보가 담겨 있는 실제 참가자 가이드입니다.
00:09:19자, 혹시 지금 만들고 계신 앱 아이디어를 공유해 주실 분이 있으신가요?.
00:09:24개발을 잠깐 10초만 멈추고 공유해 주셔도 좋습니다.
00:09:29네. 제가 만들고자 생각 중인 앱은 예전에 혼자서 만들려고 시도해 봤던 것인데.
00:09:34이번 기회에 이걸로 다시 만들어보고 싶습니다.
00:09:40기본적으로 주짓수 같은 무술을 함께 연습할 파트너를 찾는 앱입니다.
00:09:46이런 기능은 기존에 없다는 걸 느꼈거든요. 예를 들어 체육관이 문을 닫았거나 주말일 때, 혹은 여행 중이라 운동하고 싶은데 체육관이 모두 닫혀 있는 상황을 가정해 봅시다.
00:09:55주변에 운동을 함께할 사람이 있어도 알 방법이 없죠. 하지만 이 앱이 있다면.
00:10:01마찬가지로 운동 파트너를 찾고 있는 다른 사람과 매칭되어 함께 운동할 수 있게 됩니다.
00:10:08정말 멋지죠. 이것이 제 아이디어입니다. 한번 도전해 보려고요.
00:10:12멋지네요. 행운을 빕니다. 정말 대단한 아이디어예요.
00:10:22완벽합니다. 정말 좋은 예시네요.
00:10:31웹 호스팅도 필요하고, 데이터베이스도 필요하고, 인증도 필요하고, 도메인 이름도 필요할 테니까요.
00:10:36네, 정말 훌륭합니다. 멋지네요.
00:10:40스트라이프 프로젝트나 스트라이프 일반에 대해 궁금한 점이 있으시면.
00:10:43저기 바로 밖에 부스가 있으니 그리로 찾아오세요. 저도 거기 있을 거고 콜린도 있을 겁니다.
00:10:48그러니 편하게 들러서 스트라이프에 대해 이야기도 나누시고 스트라이프 굿즈도 받아 가세요.
00:10:52오늘 와주신 모든 분께 감사드리며, 스트라이프 프로젝트를 즐겁게 사용하셨기를 바랍니다.
00:10:56좋습니다. 모두들 수고하셨습니다. 감사합니다.
00:11:00감사합니다.
00:11:04.
00:11:08.
00:11:12.
00:11:17.