[AI로 소프트웨어 엔지니어 되기?] 볼트(Bolt)로 앱 개발하기


볼트: 영어만으로 풀스택 앱 개발하기

이번 영상에서는 막 발견한 신기한 도구인 볼트(Bolt)를 소개해 드리겠습니다. Vzer와 Cursor를 한데 합친 강력한 버전이라고 생각하시면 됩니다.

데모

오늘은 이 도구의 데모를 통해 누구나 영어 구사 능력만으로 소프트웨어 엔지니어가 되어 최소한의 노력으로 풀스택 앱을 배포할 수 있는 방법을 보여드리겠습니다.

  1. 구독 버튼을 눌러 유용한 콘텐츠를 놓치지 마세요.
  2. 볼트의 메인 페이지는 클로우AI와 유사한 인터페이스를 제공합니다. 프롬프트를 입력하면 즉시 코드를 생성해 줍니다.
  3. 베이커리 웹사이트 구축 데모를 보여드리겠습니다. 프롬프트에 세부 정보를 추가합니다.
  4. 프롬프트를 기반으로 코드를 생성합니다. 오른쪽에 에디터가 열리고 실시간으로 코드가 작성됩니다.
  5. 코드 작성 후 리액트 앱을 시작하는 데 필요한 명령을 자동으로 실행합니다.
  6. 의존 관계가 모두 설치되면 생성된 앱을 미리 볼 수 있는 창이 열립니다.
  7. 전문적인 웹사이트를 생성했습니다. 개선 사항이 몇 가지 있습니다.
  8. 메뉴 버튼은 작동하지만 다른 두 버튼은 작동하지 않습니다. 고치고 개선해 보겠습니다.
  9. 필요한 파일을 정확하게 식별하고 실제 개발자가 하는 것처럼 코드를 작성합니다.
  10. 이미지를 추가했습니다. 하나는 누락된 것 같습니다.
  11. 생성된 세션을 확인해 보세요. 스타일을 유지하면서 멋진 “소개” 및 “연락처” 세션을 생성했습니다.
  12. 웹사이트를 계속 수정하고 놀겠습니다. 버튼에 멋진 효과를 추가합니다.
  13. 코드 탭을 클릭해서 개발 서버를 중지한 것 같습니다. 하지만 도구는 실행할 명령을 알려주므로 아래 터미널에 명령을 실행하면 됩니다.
  14. 콘페티 효과가 잘 작동하지 않는 것 같습니다. 더 구체적으로 표현하겠습니다. 콘페티 효과를 추가합니다.
  15. 도구에서 제공한 이미지 중 일부를 사용할 수 없었습니다. 고쳐 달라고 요청하겠습니다.
  16. 이렇게 AI를 사용하면 선임 개발자가 주니어 개발자에게 변경 사항을 요청하는 것처럼 모든 작업을 AI가 해주고 우리는 감독만 하면 됩니다.
  17. 마침내 모든 이미지가 표시됩니다. 이제 메뉴의 각 항목에 대해 별도의 카드를 생성합니다.
  18. 오류가 발생한 것 같지만 복사하여 도구에 입력하면 해결해 줍니다.
  19. 무료 크레딧이 부족합니다. 직접 해결해야 할 것 같습니다.
  20. 이후에 AI 도구가 생성한 디스플레이를 살펴보겠습니다.
  21. 메뉴의 개별 항목에 대해 생성한 카드입니다. 무료 크레딧이 부족하고 작은 오류가 발생하지 않았다면 AI 도구가 스스로 해결했을 것입니다.

가격

저는 9달러짜리 프로 버전이 누구에게나 충분할 수 있다고 생각합니다. 누구나 상상할 수 있는 앱을 만들 수 있으며 그 앱으로 수백만 달러를 벌 수도 있습니다. 이 도구를 어떻게 활용할지는 여러분의 몫입니다.

오늘은 여기까지입니다. 시청해 주셔서 감사합니다. 다음 영상까지 계속 탐구해 보세요.


Leave a Reply

Your email address will not be published. Required fields are marked *