강의

멘토링

로드맵

Programming

/

AI Coding

바이브 コーディングで作ってみる自分だけのランディングページ(with Cursor)

開発はよく分からないけれどVIBE CODING(vibe coding)を始めてみたい方々、自分のお店(飲食店、カフェなど)や自分のサービス(弁護士・税理士・病院など)を宣伝できるランディングページを自分で直接作ってみたい方々のための講座です。VIBE CODINGのスタート地点をきちんとご案内いたします。

  • dongkid111
바이브코딩
vibecoding
커서
cursor
git
Git
vercel
Cursor AI
Vibe Coding

こんなことが学べます

  • Cursorでバイブコーディングする方法

  • バイブコーディングを上達させるコツ

  • バイブコーディングに必須のGit&GitHub基礎

  • ランディングページ公開のために知っておくべき最低限の知識

  • Vercel, Supabaseの基本的な使い方

  • 簡単なMCP経験

バイブコーディングの時代、遅くなる前に参加してみてください!🔥

深い開発知識がなくても、望むサービスを作ることができる時代になりました。

バイブコーディング(vibe coding)で自分だけのランディングページを作りながら

  • Cursorの使い方

  • Git&GitHub基礎

  • Vercel/Supabase使用

  • MCP(Model Context Protocol) 使用

を自然に身につけてみましょう。

皆さんが必ず知っておくべき事実3つ 🔍

💡 バイブコーディングは魔法の杖ではありません。
バイブコーディングをしていると、エラーなどによって行き詰まる場合が必ず発生します。

これをAIと対話しながら解決することはできますが、開発を全く知らないと問題解決の速度が非常に遅くなってしまいます。

そして、開発を全く知らなければ、バイブコーディングをしても一定レベル以上のサービスを実装するのが現実的に困難です。

そのため、開発の勉強をある程度されるか、エラーや問題状況を自分で解決できる程度の最低限の開発知識だけでも継続的に学習していかれることをお勧めします。

まずはこの講義と一緒にバイブコーディングをうまく行うために必要最小限の開発知識が何なのか感覚を掴み、今後の学習計画を立ててみてください!

バイブコーディング学習前に覚えておくべき事項

💡 Gitはバイブコーディングの基本です。
バイブコーディングを上手に行うには、Git(ソフトウェアのバージョン管理のためのツール)の基本的な使い方を知っておく必要があります。

バイブコーディングをしていると

「あ、前のデザインの方がもっと綺麗だったのに😢」、

「元々はちゃんと動作していたのに、今回の作業をAIがやってからかえって動作しなくなった、元に戻したい。」

と考えるようになる場合が多いのですが。

Gitを学ぶことで、自分の作業履歴から望む地点にいつでも戻ることができます。

Gitは開発者の方々も最初は少し難しく感じる内容でもあり、しっかりと学ぼうとすると学ぶべき内容が膨大ですが、この講義で学ぶGitの基礎知識だけでも、バイブコーディングを十分にうまく進めていくことができます。

Git主要コマンドの説明

💡 AIをうまくリードすることがバイブコーディングの核心です。
バイブコーディングの核心はAIをうまくリードすることです。

AIが私の望む方向で、正確で満足度の高い成果物を作り上げていけるようにすることが重要ですね。

  • PRD(製品要求仕様書)、TRD(技術要求仕様書)

  • カーソルルール(Cursor rule)

  • コンテキスト(Context)

  • LLMの選択など


AIを上手にリードするのに役立つとされる様々な方法があります。この講義ですべて見てみましょう。

もちろん開発知識が豊富であるほど、AIにより明確で具体的な指示を出すことができるのでそれが一番良いですが、まだ開発初心者であっても最低限のバイブコーディング品質を維持するための方法を一緒に見てみましょう!

PRD(Product Requirements Document)とは?

バイブコーディングの出発点をしっかりと掴んでみましょう 🏃🏻

バイブコーディングは一見簡単そうに見えますが、実際には開発のあらゆる知識が総集合される領域でもあります。

そのため、最初は道に迷わないよう、最低限の開発関連知識、AIをうまく扱うコツなど、その出発点をしっかりと掴む必要があり、今すぐ簡単な成果物を作ってみたという驚きと喜びをエネルギーにして、その次の段階へとさらに進んでいけるようにならなければなりません。

次のステップと言うなら

  • CursorなどのAIコーディングツールの言葉をより理解し、より適切に指示できるよう開発の勉強をしてみる

  • サービスデプロイのための様々な方法(Vercelなど)の学習

  • Supabase等の外部サービスの使用方法学習

  • MCPを活用してCursorで行う開発作業の効率性を最大化など

あると思います。この講義をVibe Codingの堅実なスタート地点として、

将来本当に作りたいサービスのために、どの部分をこれからもっと勉強していくべきか考えてみていただければと思います。

必要な部分については、私も今後継続的に講義として作成していけるようにいたします。🙂

講義関連のQnAはInflearnの質問にお送りいただくか、下記のオープンチャットルームに投稿していただければありがたいです。
みんなで一緒にハッピーなバイブコーディングを続けていきましょう〜🎵


オープンチャットルームリンク) https://open.kakao.com/o/gmcDaOIh

こんな方に
おすすめです

学習対象は
誰でしょう?

  • バイブコーディングをぜひ経験してみたい方

  • VIBEコーディングをすでにしているが、もっと上達するためのコツを知りたい方

  • ランディングページの開発を外注せずに、ご自身で制作してみたい方

  • Lovable, ReplitなどウェブベースのVibeコーディングはしてみたけれど、直接自分のPCでVibeコーディングをしてみたい方

前提知識、
必要でしょうか?

  • 開発のごく基礎概念(クライアント、サーバーが何かなど)は知っておくと良いでしょう。

こんにちは
です。

안녕하세요, 개발자 김현승입니다.

AI의 급격한 발전에 따라 이제 혼자서도 원하는 서비스를 만들고 출시할 수 있는 시대가 되었습니다.

 

저 또한 원래 개발자로 일하다가

1인개발로 아래와 같은 서비스를 운영하고 있고

"직장인&전문직 블라인드 소개팅앱-폴잇"

"나만의 AI 친구-티키토카"

 

1인개발의 강력함과 장점을 알리기 위한 교육을 시작하고 있습니다.

 

1인개발은 개발은 물론 기획/디자인/마케팅 등 다양한 영역을 알아야 합니다.

첫 걸음은 어려울지 몰라도 AI와 체계적인 방향성 제시만 있다면 누구나 시작할 수 있다고 생각합니다.

 

저와 함께 1인개발 제대로 시작해봐요!

 

경력

  • 커넥션밸류 대표

  • 독서기록 및 독서모임 앱-에필 공동창업(SeedTIPS)

  • Knowre 백엔드 개발자

  • 코드잇 테크니컬 라이터

  • SNOW 안드로이드 앱 개발자

     

     

カリキュラム

全体

47件 ∙ (4時間 6分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

2件

5.0

2件の受講レビュー

  • withemars1947님의 프로필 이미지
    withemars1947

    受講レビュー 2

    平均評価 5.0

    5

    53% 受講後に作成

    Wow. Việc anh/chị giải thích một cách tử tế đến từng chi tiết nhỏ thật tuyệt vời. Trước đây tôi đã từng tham gia một khóa đào tạo cursor offline, những thứ đã mờ nhạt giờ lại được nhắc nhở và thấm vào đầu một cách dễ dàng. Chúc thầy phát đạt!!!

    • dongkid111
      知識共有者

      Cảm ơn bạn with.emars, hy vọng bạn sẽ nắm vững điểm khởi đầu của vibe coding thông qua khóa học này và có thể tự do tạo ra những trang web mà mình mong muốn trong tương lai. Từ giờ tôi đang có kế hoạch tăng dần độ khó và thậm chí cả các khóa học về việc tạo ra dịch vụ thực sự hoạt động và kiếm tiền, mong bạn quan tâm nhé :)

  • melody8537582님의 프로필 이미지
    melody8537582

    受講レビュー 1

    平均評価 5.0

    5

    90% 受講後に作成

    Gần đây tôi nghe nói rằng với Vibe Coding thì ngay cả những người không phải là lập trình viên cũng có thể tạo ra những chương trình đơn giản, nên tôi đã thử học và thấy rất có ích. Tôi cảm thấy mình đã hiểu rõ Vibe Coding là gì và làm thế nào để học tốt. Bây giờ điều còn lại chắc là sự nỗ lực của bản thân tôi😊😊 Tôi sẽ tiếp tục chăm chỉ học những bài giảng còn lại. Cảm ơn vì khóa học tuyệt vời~~

    • dongkid111
      知識共有者

      Cảm ơn bạn đã nghe giảng một cách chăm chú. Tôi khuyên bạn nên hoàn thành toàn bộ khóa học này và thử tự tay tạo ra những thứ như trang hồ sơ cá nhân của mình. Thực hành nhiều sẽ giúp kỹ năng của bạn tiến bộ nhanh hơn. Tôi dự định sẽ tạo ra nhiều khóa học đa dạng về lập trình vibe trong tương lai, nên rất mong bạn tiếp tục quan tâm :)

¥6,024

似ている講座

同じ分野の他の講座を見てみましょう!