software

Replit와 함께 Vibe Coding 포켓몬 검색 앱

발행: (2026년 2월 2일 오후 07:42 GMT+9)
10 분 소요
원문: Dev.to

Source: Dev.to

번역을 원하는 전체 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.

Source: …

코드 한 줄도 작성하지 않고 포켓몬 검색 앱 만들기

“우리는 포켓몬 검색 앱을 만들 거예요. 하지만 코드를 한 줄도 쓰지 않을 거예요.” 🤨

모든 코드를 직접 손수 작성하던 개발자 입장에서는 이 말이 신성 모독처럼 들릴 수 있죠. 저와 함께 이 도구들이 지난 1년 사이에 얼마나 발전했는지 확인해 보세요.

우리는 바이브 코딩 방식으로 앱을 만들 겁니다: 원하는 기능을 자연어로 설명하면 AI가 무거운 작업을 대신해 줍니다. 여러분은 결과물을 검토하고, 재프롬프트하고, 최종 제품이 만족스러울 때까지 안내합니다 (🤞).

이번 포스트에서는 Replit 을 사용할 예정입니다. 다음 포스트에서는 Cursor 와 Claude Code 같은 다른 도구들을 다룰 예정이에요.

편집: Cursor 로 만든 버전 – Cursor 로 포켓몬 검색 앱을 바이브 코딩하기.

보너스 포인트를 위해서는 코드를 전혀 입력하지 않을 겁니다. 대신 WhisprFlow 같은 음성‑코드 변환 도구나 SuperWhisper, VoiceTypr 와 같은 유사 서비스를 사용할 거예요 (네, 모음 탈락 네이밍 트렌드가 계속되고 있네요 🤷‍♂️).

이전 “클래식” 튜토리얼

  • Vue 3 시작하기 – 포켓몬 검색 애플리케이션 만들기
  • React 시작하기 – 포켓몬 검색 애플리케이션 만들기

그 튜토리얼들은 “구식”(이제는 구식이라고 말해도 될까요?)이었죠. 이번은 다릅니다: 같은 포켓몬 검색 앱이지만 타이핑은 적고 바이브는 더 많습니다 (😂 제 말장난이 형편없다는 건 인정합니다).

따라서 따라하고 싶다면 Replit에 계정을 만들세요.

프로 팁: 아래 프롬프트를 복사·붙여넣고, 모험심이 있다면 약간 수정해 보세요.

1️⃣ 코드 작성 전에 계획 세우기

바이브 코딩이라 할지라도, 먼저 계획을 세워야 합니다. 이것이 바로 **TheWayToDoIt™**가 “일반” 개발 시에 강조하던 방식이며, 지금도 마찬가지입니다.

  1. Replit에서 Plan mode를 선택합니다 (아래 스크린샷 참고).
  2. 다음 프롬프트를 추가합니다:
Our task is to build a Pokémon search web app. Before writing any code, produce a detailed PRD (product requirement document) (pages, components, state, API calls, error states, loading states, accessibility, folder structure, and a deployment plan for GitHub Pages).

After the PRD, list a numbered implementation checklist.

Do NOT write code yet.

Improve Prompt 버튼을 클릭하면 (저는 클릭했습니다) 다음과 같이 다듬어진 버전을 얻을 수 있습니다:

A comprehensive web‑based Pokémon search application that allows users to search and view detailed information about Pokémon using the PokéAPI.

Core Features:
- Search Pokémon by name or ID with autocomplete suggestions
- Display detailed Pokémon information (stats, types, abilities, sprites)
- Browse and filter Pokémon list with pagination
- Responsive design that works on mobile and desktop devices

Visual References:
- Style Guide:
  - Colors: Primary #FFCB05 (Pokémon yellow), Secondary #3D7DCA (Pokémon blue), Accent #FF0000 (Pokéball red), Background #F8F8F8 (light grey), Text #2A2A2A (dark grey), Card Background #FFFFFF (white)
  - Design: Flexi/Poppins/Roboto fonts, card‑based grid layout, rounded corners (12 px radius), smooth transitions, mobile‑first responsive design, clean search interface with prominent search bar

Special Requirements:
- Must include a detailed PRD covering: pages, components, state management, API calls, error states, loading states, accessibility considerations, folder structure, and deployment plan for GitHub Pages
- Provide a numbered implementation checklist after the PRD
- DO NOT include actual code implementation – documentation and planning only

원래 제가 작성한 프롬프트보다 훨씬 나은 버전이네요 😬, 이제 이 프롬프트를 사용합시다. 필요에 따라 계획을 자유롭게 조정해도 됩니다.

2️⃣ AI의 자율성 설정

  • High 자율성을 선택하세요 (이 경우에 적합합니다).
  • App testing을 활성화하세요 – 이렇게 하면 AI가 발생할 수 있는 명백한 버그를 해결합니다.

선택에 만족하면 Start building을 클릭하세요.

3️⃣ Let the AI do its thing

내가 실행했을 때, Replit은 모든 작업을 마치는 데 21 분이 걸렸고 (앱 테스트를 활성화하면 더 오래 걸립니다) $7.27을 사용했습니다. 프라푸치노 가격의 스타벅스 커피에 대해 무엇을 얻었는지 살펴보겠습니다… ☕

Replit의 멋진 점은 모든 것이 웹 인터페이스에 통합되어 있다는 것입니다: 데이터베이스, 인증, 비밀키, 도메인 구매, Stripe 연동 등 원하는 모든 기능이 포함됩니다. 또한 실시간으로 앱이 구축되는 모습을 볼 수 있는 Preview pane도 제공합니다.

[생성된 앱 레이아웃의 스크린샷 또는 설명 삽입]

4️⃣ 앱 게시

  1. (서브)도메인을 선택하세요 – 저는 pokedex-nikolabreznjak.replit를 사용했습니다.
  2. Publish now 버튼을 클릭합니다.

앱이 이제 라이브됩니다:

https://pokedex-nikolabreznjak.replit.app/

⚠️ 불편한 진실

AI 코딩 도구를 여전히 “부정행위”라거나 “아직은 안 된다”고 생각하는 사람들은 손해를 보고 있습니다. MVP를 더 빠르게 출시하든, 익숙하지 않은 코드베이스에 빨리 적응하든, 혹은 전반적인 학습이든, 기회비용은 실감나는 현실입니다.

중요: “그냥 분위기대로 코딩”하고 자신이 만든 것이 어떻게 동작하는지 전혀 모른 채 (그리고 배우려는 의지도 없는) 경우, 핵심을 놓치고 있는 것입니다.

YOLO‑코딩 없이 품질을 원한다면?

  1. 모델에 말하기: “코드를 작성하지 말고, 당신이 하려는 일을 설명해 주세요.”
  2. 긴 사양 문서 요청 (아키텍처, 엣지 케이스, 테스트 플랜).
  3. 그 문서를 다듬으며 충분히 견고해질 때까지 반복하기.
  4. 그런 다음 이렇게 말하기: “이제, 이 사양을 완벽히 구현해 주세요.”

🎉 Final thought

나는 가장 뜨거운 새로운 프로그래밍 언어가 **[insertLanguageHere]**일 줄은 상상도 못했다. 이렇게 말하는 이유는, 기술적으로는 어떤 언어로든 작성할 수 있기 때문이며—AI가 처리해줄 것이다.

Happy vibe coding! 🚀

…그리고 대부분의 도구가 당신을 이해할 것이다. 만약 그렇지 않다면, ChatGPT(또는 유사한 도구)에 넣어 번역한 뒤 번역된 프롬프트를 AI 도구에 전달하면 된다.

아니, 세상이 개발자를 멸종시키지는 않겠지만, 확실히 많은 비개발자들이 실제 돈을 버는 무언가를 만들 수 있게 할 것이다. 당신이 옆에서 지켜볼지, 직접 뛰어들어 어떻게 도움이 되는지 보고 싶을지는 당신의 선택이다 – 어쩌면 지금이 시간이 없어서 못 했던 프로젝트를 할 때일지도 모른다.

나는 당신을 응원한다, 행운을 빌어!

Links prepended with a * are referral links.

내용이 마음에 들어 그 링크를 통해 가입한다면, 내 카페인 중독을 도와주는 셈이 된다 ☕️

정말 고마워, 멋진 인간이여! 🙌

끝까지 읽어줬다, 여기 🎖️

P.S. 혹시 궁금했을까 싶어, 최근 스타일은 Dungeon Crawler Carl이라는 놀랍도록 상쾌한 litRPG 책 시리즈에 영향을 받았다.

Enjoy! 👋

Back to Blog

관련 글

더 보기 »