마법처럼 AI 코딩 어시스턴트로 전체 스택 앱 만들기(FREE)

AI 코딩 어시스턴트

오늘은 여러분께 내가 지금까지 경험해본 가장 훌륭한 AI 코딩 어시스턴트를 소개하려고 합니다. 그리고 이 어시스턴트는 이 영상의 후원사인 Wasp Lang에서 선보입니다. Wasp Lang은 풀 스택 웹 개발 프레임워크로서, JavaScript를 위한 Ruby on Rails 정도로 설명할 수 있습니다. 이 프레임워크를 사용하면 풀 스택 애플리케이션을 아주 빠르게 작성할 수 있습니다. 그리고 WASP 팀은 WASP 언어를 사용하여 AI 코딩 어시스턴트를 개발했는데, 이 어시스턴트를 통해 단 한 번의 프롬프트로 풀 스택 웹 애플리케이션을 생성할 수 있습니다. 다른 AI 코딩 어시스턴트와 비교할 때 WASP 언어와 구성 파일을 활용하는 방식 때문에 다른 어시스턴트와 차별화되며 훨씬 좋은 성능을 보여줍니다. 다른 어시스턴트는 복잡한 코드베이스를 생성할 때 종종 문제가 발생하는데, 그 이유는 프론트엔드와 백엔드가 서로 다른 언어로 구축되거나 호환되지 않기 때문입니다. 하지만 WASP는 이러한 모든 문제를 제거했습니다. 그럼 이제 어떻게 동작하는지 살펴보겠습니다.

GPT 웹 앱 생성기

이것은 GPT 웹 앱 생성기입니다. 우리는 오늘 이 예제 애플리케이션 중 하나를 사용할 것입니다. 이번에는 To-Do 앱을 만들어 보겠습니다. 앱 이름은 "To-Do"로 하고, 오른쪽 버튼을 클릭하면 "To-Do 앱"을 사용할 수 있습니다. 이 앱은 사용자의 모든 작업을 나열하는 메인 페이지가 있는 간단한 To-Do 앱으로, 사용자는 작업의 설명을 제공함으로써 새 작업을 생성하거나 기존 작업을 토글하고 설명을 편집할 수 있습니다. 사용자는 자신의 작업만 볼 수 있으며 테스크는 데이터베이스에 저장됩니다. 그리고 우리는 앱 브랜드 색상을 선택할 수 있습니다. 저는 "Sky"로 남겨둡니다. 이 creativity level은 온도의 대리인입니다. conventional은 낮은 온도를, creative는 높은 온도를 의미합니다. 물론 온도는 출력의 창의성과 고유성을 조절하게 됩니다. 저희는 지금은 balanced 옵션을 유지하겠습니다. 아직은 사용자 이름과 비밀번호만 지원하지만 나중에는 이메일과 비밀번호, 소셜 로그인도 지원할 예정입니다. 이제 앱을 생성해 보도록 하겠습니다. WASP는 앱을 구성 파일에 정의하여 전체 애플리케이션을 한 곳에서 관리한다는 점이 장점입니다. 이것은 AI 코딩 어시스턴트를 사용할 때 매우 효과적입니다. 왜냐하면 구성 파일을 통해 AI 어시스턴트가 프론트엔드와 백엔드를 동시에 이해할 수 있기 때문입니다. 다른 AI 코딩 어시스턴트로는 프론트엔드를 작성하고, 백엔드를 작성하면서 서로 연동을 하지 못하는 경우가 많은데, WASP와 구성 파일을 사용하면 이 문제를 해결할 수 있습니다. 이곳에서 실시간으로 파일이 생성되는 것을 볼 수 있습니다. 정말 멋지죠? 그리고 가장 좋은 점은 완전히 무료라는 것입니다. 여기서 앱을 생성하는 중입니다. 실제 웹 애플리케이션 생성에는 GPT 4와 GPT 3.5가 사용됩니다. 가장 중요한 파일인 "main.was" 파일입니다. 이 파일은 애플리케이션의 라우팅과 페이지 정의가 모두 이루어지는 곳입니다. 모든 내용은 매우 간편하게 정의할 수 있습니다. 다시 한 번 말씀드리지만, WASP와 AI 코딩 어시스턴트를 사용하면 프론트엔드와 백엔드 간의 원활한 대화가 가능하다는 점이 탁월하게 잘 나타나는 것입니다. 몇 가지 주의사항이 있지만, 각자의 컴퓨터에 WASP를 설치해야만 앱을 실행할 수 있습니다. 그러나 WASP는 정말 멋진 도구이므로 이는 문제가 되지 않습니다. 현재는 Mac 또는 Windows의 WSL에서만 실행할 수 있습니다. 일반적인 코딩 에러가 자주 발생하는데, WASP 창시자에게 이에 대한 속성을 추가하여 이 문제를 해결했습니다. 이제 대시보드와 로그인 등의 기능이 생성되었습니다. 다시 한 번 사용자 이름과 비밀번호를 입력해 로그인해 보겠습니다. 그리고 새 작업을 추가할 수 있습니다. 그리고 완료되면 로그아웃도 할 수 있습니다. 이제 여러분은 여러 사용자를 추가할 수 있으며, 각 사용자는 자신만의 작업을 가지게 됩니다. 아주 쉽죠? 생성된 앱은 몇 분 만에 준비되었으며, 단 한 번의 프롬프트로 생성되었습니다. 이제 이렇게 생성된 전체 앱을 어떻게 활용해야 할까요? 몇 가지 아이디어를 소개해 드리겠습니다. WASP는 Node.js와 ReactJS를 함께 사용하는 풀 스택 프레임워크이므로 어디서든 배포할 수 있습니다. 그렇지만 Fly.io과 함께 사용하면 한 명령으로 앱을 배포할 수 있는 편리한 기능이 있습니다. 이제 실제로 어떻게 배포하는지 살펴보겠습니다.

Fly.io를 통한 앱 배포

Fly.io로 이동하여 계정에 로그인합니다. 계정이 없다면 먼저 가입하고, 로그인하신 다음 fly command line interface를 설치해야 합니다. 설치는 맥 유저인 경우에는 Brew를 사용하여 설치할 수 있습니다. 설치 명령어는 "Brew install fly CTL"입니다. 설치가 완료되면 fly off login 명령어를 실행하여 Fly에 로그인합니다. Fly.io에 앱을 배포하려면 신용 카드 정보를 입력해야 하지만, 배포 및 테스트는 무료로 진행할 수 있습니다. 드디어 로그인하여 다시 터미널로 돌아와 앱을 배포하기 위한 명령을 실행합니다. "wasp deploy fly launch to-do-Mia"라는 명령을 입력하면 됩니다. 단순히 "to-do"를 앱 이름으로 변경하시면 됩니다. 잠시 후에 에러가 발생한 경우에는 SQ Lite가 Fly에서 지원되지 않기 때문입니다. 이 문제를 해결하기 위해 다음 단계를 진행하겠습니다. 먼저, Visual Studio Code를 열고 main.was 파일을 열어 다음 내용을 추가합니다. 이는 Fly.io에서 사용할 PostgresSQL 데이터베이스입니다. 파일을 저장한 후 명령을 다시 실행해 보면 됩니다. 이제 배포가 완료되면 URL을 얻어서 웹 브라우저로 전환합니다. 이제 우리의 To-Do 앱이 완성되었습니다. 아주 쉽죠? 이제 앱이 웹에서 동작하고 있습니다. 다양한 앱을 만들어보고 완전히 무료입니다. 특히 프론트엔드와 백엔드 간의 원활한 통신에 대해 말씀드리려면 꼭 사용해보시기 바랍니다. 이를 위해 후원사인 Wasp에 다시 한 번 감사 인사 드립니다. 설명란에는 모든 링크를 제공해 드리겠습니다. 이 영상이 마음에 드셨다면 좋아요와 구독 부탁드립니다. 다음 영상에서 뵙겠습니다.