📳 바이브 코딩, 아이디어를 말하면 제품이 된다고요?

📳 이번 주제는 '바이브 코딩’이에요.

바이브 코딩(Vibe Coding)은 '코딩'이라는 개념을 새롭게 정의하고 있어요. 전통적인 코드 작성 대신, 직관적인 AI 기반 프롬프트를 활용해 소프트웨어를 개발할 수 있도록 돕기 때문인데요. 복잡한 문법이나 개발 환경에 얽매이지 않고, 자연어로 원하는 기능과 아이디어를 설명하면 AI가 이를 구현해주는 방식이죠.

특히, 로우/노코드 인터페이스와 AI 지원 기능, 그리고 빠른 반복 주기를 결합, 엔지니어가 아니더라도 누구나 쉽게 아이디어를 시제품으로 만들 수 있어요. 마치 디자이너가 캔버스 위에 그림을 그리듯, 제품을 직접 만들어가며 실험할 수 있는 환경을 제공하는 셈이죠.

아이디어가 떠오르면 바로 시도하고, 결과물을 눈으로 확인하고, 또 수정하는 과정 등이 바이브 코딩 안에서는 자연스럽게 이루어지고 있어요. 오늘은 두 에디터가 각각 ‘Replit’, ‘Tempo’를 활용해 아이디어를 구체화하는 여정을 살펴볼게요!

✍️ 바이브 코딩에도 사전 준비는 필요해요!

4주 동안 문제 정의부터 검증까지 일련의 과정에서 AI를 적극적으로 활용하며 새로운 업무 방법에 대한 감각을 익힐 수 있어요. 여기까지 작업이 되었다면? 오늘 소개할 툴을 포함, 바이브 코딩으로 자연스레 이어갈 수 있어요! 

PH 클럽 상세 소개 확인

👀 오늘 소개할 서비스와 내용

코딩, 협업, 배포까지 가능한 AI 기반 클라우드 개발 플랫폼 Replit

Replit은 브라우저 기반의 통합 개발 환경(IDE)으로, 코드 작성부터 배포까지 소프트웨어 개발의 전 과정을 단일 플랫폼에서 제공해요. 최근 주목받고 있는 AI 기반 코딩 도구인 'Replit Agent'를 통해 자연어 명령만으로도 앱을 개발할 수 있어 개발 경험이 없는 사람들에게도 문턱을 낮췄다는 점이 가장 큰 장점이죠. 설치나 복잡한 설정 없이도 50개 이상의 프로그래밍 언어를 지원하며, 실시간 협업과 AI 코딩 보조 기능을 통해 개발 생산성을 높여주는 것이 핵심이에요.

주요 기능과 특징

팁스터 뉴스레터를 운영하면서 늘 아쉬웠던 점은, 발행된 뉴스레터와 관련된 추가 자료나 대화를 기존 서비스에서는 충분히 활용할 수 없다는 점이었어요. 그래서 저는 뉴스레터 리스트를 기본으로 태그와 카테고리에 따라 내용을 살펴볼 수 있으며, 상세 페이지를 통해 뉴스레터별 연관 자료를 살펴볼 수 있는 소소한(?) 서비스를 ‘Replit’으로 만들기로 했죠.

‘Replit’ 서비스의 기본 모습이에요. 이제는 제법 익숙해진 ‘프롬프트’를 입력하는 방법으로 시작할 수 있어요. 여기서 한 가지 팁은, 서비스의 주요 기능을 한 번에 입력하지 않는 방법인데요. 여러 기능을 한 번에 구현할 경우 디테일한 수정을 진행하기 어렵고, 중간중간 발생하는 에러를 아무리 잘 잡아 스스로 해결한다 하더라도 코딩에 익숙하지 않은 경우 혼란스럽게 느껴질 수 있기 때문이에요.

제가 생각한 화면은 크게 뉴스레터 리스트를 볼 수 있는 메인화면과 뉴스레터별 자료를 추가로 볼 수 있는 상세화면인데요. 일단은 메인화면에 대한 요청을 프롬프트로 입력했어요.

프롬프트를 입력하면, 만들고자 하는 서비스와 관련된 플랜을 확인할 수 있는데요. 입력한 내용을 수정하는 개념이라기보다, 검색 기능을 활용할 것인지, 카테고리나 태그 기능을 포함할 것인지 등을 선택하고 추가하는 방법에 가까워요. 저는 검색 기능과 태그, 카테고리 기능을 선택했고 회원 관리 기능은 제외한 채 시작 버튼을 선택했어요.

이제, 본격적으로(?) 코딩을 진행하게 되는데요. 뷰는 두 개로 나뉘며, 왼쪽은 코딩을 포함한 작업 현황을 오른쪽은 작업에 따른 실제 화면을 미리 볼 수 있도록 구성되어 있어요.

물론, 아직 디테일한 요청은 하지 않은 상태라 ‘뉴스레터 허브’라던지 ‘검색창 내 플레이스 홀더’등은 어색하지만 제가 바라는 메인화면의 기능을 빠르게 구현해서 보여주고 발견한 문제를 스스로 해결하는 걸 알 수 있었어요.

위 이미지를 보면, 관련 콘텐츠 타이틀 하단의 버튼이 선택된 것을 알 수 있는데요. 미리 보기 영역에서 원하는 대상을 선택해 요청을 남길 수 있어요. 지금 관련 콘텐츠를 추가하는 버튼이 2개 적용된 것을 알 수 있는데 버튼 하나를 삭제해 달라는 내용을 영역 지정 + 텍스트로 남길 수 있는 거죠. 텍스트로만 요청하려면 상황에 따라 설명이 어려울 수 있기에 디테일한 수정 작업을 할 때 특히 유용하게 활용할 수 있어요.

그렇게 ‘Replit Agent’를 통해, 뉴스레터를 준비하며 만든 서비스의 메인화면이에요.

등이 포함되어 있으며, 뉴스레터별 상세 화면도 함께 구현했어요. 저는 조금 더 가다듬어 실제 배포 후 운영까지 해보고 싶어 진행 중인 내용을 보실 수 있는 URL을 공유드릴게요. (다만, 이 URL은 늘 열려있는 게 아니라 제가 프로젝트에서 ‘RUN’ 상태를 해놔야 하기에 연결이 되지 않을 수도 있어요!)

한 번의 프로젝트를 마치며 얻은 팁

어떤 걸 만들고 싶은지 ‘구체적으로’ 정리해보세요

작업 요청은 ‘한 번에’ 하지 말고, ‘나눠서’ 해보세요

문구나 디자인은 따로 ‘한번에 정리’ 요청하세요

새로운 작업을 할때마다 테스트와 점검을 요청하세요

좋은 점

아쉬운 점

학습 난이도 ⭐️⭐️

가격 정책

Replit 바로가기

PRD부터 코드까지 제품 개발 전체를 아우르는, Tempo

최근, 엔지니어가 아닌 사람들을 위한 AI 기반 개발 도구들이 빠르게 등장하며 주목받고 있는데요. 그 중 최근 흥미로운 솔루션으로 주목받고 있는 Tempo.new를 소개해보고자 합니다.

Tempo는 사용자 프롬프트를 바탕으로 아키텍처 계획과 다이어그램을 먼저 제안하고, 이를 기반으로 PRD 초안과 사용자 흐름 을 만들어내는 구조화된 접근 방식을 가지고 있는 것이 특징입니다. PRD부터 코드까지, 제품 개발의 전체 라이프사이클을 아우르는 워크플로우를 지원한다는 점이 특징인데요. 초기에는 React 기반 프론트엔드 중심의 지원에 머물렀지만, 최근 Supabase와의 통합으로 백엔드 연결까지 가능한 풀스택 툴로 확장되며 실용성이 한층 강화됐습니다.

주요 기능과 특징

Tempo의 핵심 기능들은 실용성에 초점을 맞추고 있습니다.

템포를 활용해 제작한 📌 회고 기반 인사이트 서비스

제작 시도 과정

저는 Notion에 회고를 기록하고 있는데요, 이 노션 문서와 연동해 인사이트를 제공하는 서비스를 만들고 싶었어요. 코드 관련 지식이 전혀 없어 구현까지는 어렵겠지만, 이 툴을 활용해 얼마큼 동작하는 서비스를 구현해 낼 수 있을지 스터디하고자 했습니다.

서비스 골자에 대한 간단한 프롬프트를 입력했고, Tempo가 주요 화면을 생성해 주기 시작했습니다. 좌측 패널에서는 진행 상황을, 중앙에는 구조도를 기반으로 디자인이 실시간으로 만들어지는 과정을 확인할 수 있었습니다.

❶ PRD & Userflow

중앙 PRD 탭을 클릭하면 기본적인 요구사항과 User flow를 확인할 수 있습니다. PRD를 업데이트하고 싶다면 내용을 수정도 가능하며, 해당 내용을 기반으로 다이어그램도 함께 업데이트할 수 있어요.

❷ 디자인 편집

디자인된 화면에서 드래그 앤 드롭을 통해 요소를 추가하고, Figma와 유사하게 우측 패널에서 스타일을 쉽게 편집할 수 있습니다. 또 Storybook에서 디자인 시스템 구성 요소를 가져와 재사용할 수도 있습니다.

완성된 제품을 커스터마이징 해볼 차례입니다. 우측 패널을 활용해 일부 스타일과 구성된 콘텐츠를 수정하고 싶었습니다. 한 화면 내에 중복된 내용이 있어 하나를 지우고 싶었거든요.

그런데 비개발자인 저에게는 패널 조작이 조금 까다롭게 느껴졌습니다. 익숙한 UI라 호기롭게 시작했지만, 디자인 파일이 아니라 실제 개발된 화면 기반이다 보니, 원하는 부분이 정확히 수정되지 않아 어떤 섹션에서 어떤 값을 수정해야 할지 감이 잘 오지 않았죠.

그래서 좌측 대화창에서 원하는 바를 자연어 프롬프트로 입력했습니다.

위 단계를 거쳐 최종적으로 도출된 화면입니다. 한글로 번역되었고, 요청한 컬러를 CTA에 적절히 반영한 모습입니다.

➌ 손쉬운 배포

결과는 Vercel 또는 베타 기능인 Tempo 자체 배포 중 선택해 짧은 시간 안에 실제로 동작하는 서비스를 바로 확인할 수 있습니다.

실제 결과물을 보았을 때 다음과 같은 부분이 인상 깊었습니다.

좋은 점

아쉬운 점

학습 난이도 ⭐️⭐️⭐️

가격 정책

Tempo 바로가기

팁스터 신규 멤버십 오픈! (7일 무료 체험 가능)

팁스터 멤버십 7일 무료 체험

팁스터 뉴스레터의 공식 오픈채팅방에 참여해보세요!