WONA_IN_IT

안녕하세요.

지난 포스팅에서는 AI를 활용하여 아이디어를 발굴하는 방법을 같이 알아보았습니다.

https://wonhwa.tistory.com/79

만약 여러분이 저번 포스팅으로 아이디어를 발굴했다면 이번에는 AI가 해야할 일을 알아들을 수 있도록 PRD(제품 요구사항 명세서) 작성을 해야할 것입니다.

"나는 코딩도 모르는데 PRD를 어떻게 작성하지?"라고 걱정할 수 있지만 걱정하지 않으셔도 됩니다.

우리는 질문만 던지고, 전문적인 내용은 AI가 채우게 만들면 되기 때문입니다.

그럼 AI와 함께 PRD를 완성해 볼까요?

0. PRD 핵심 항목 7가지

PRD로 작성되어야할 항목은 아래와 같습니다.

① 프로젝트 개요 (Overview)
② 사용자 타겟 (Target Audience)
③ 핵심 기능 (Core Features - MVP(Minimum Valuable Product=최소기능제품))
④ 사용자 흐름 (User Flow)
⑤ 화면 설계 (UI/UX)
⑥ 기술 스택 (Tech Stack)
⑦ 제약 사항(Constraints & Limitations)

이제부터 위의 항목들을 어떻게 작성하는지 하나씩 알아보도록 하겠습니다.

1. 프로젝트 개요(Overview)

프로젝트 개요는 "서비스의 정체성을 한 문장으로 정의하는 것" 입니다.

저번 글에서 예시로 저는 아래의 아이디어를 생각해 보았습니다.

- 아이디어(예시):
"나는 바쁜 직장인들(누가)이
영양제를 번거로움 없이 챙겨 먹도록(왜)
, 기존 앱보다 훨씬 단순한 원터치 기록 방식(차별점)을 가진 
체크리스트 대시보드(무엇을)를 만들 거야."

그러면 프로젝트 개요에 대해 아래와 같이 AI(ChatGPT, Gemini, Claude 등)에게 물어볼 수 있겠죠.

"나는 바쁜 직장인들이 영양제를 번거로움 없이 챙겨 먹도록 돕는 '원터치 체크리스트' 앱을 만들 거야. 이 서비스의 핵심 가치를 담은 프로젝트 개요를 작성해 줘."

여러분들은 아래의 프롬프트를 활용해서 물어봐도 좋습니다.

[프롬프트 예시]

#1.프로젝트 개요(Overview) 작성 프롬프트 예시
"내가 [아이디어]를 만들려고 해. 이 서비스의 핵심 가치를 담은 멋진 한 줄 정의와 프로젝트 요약을 작성해 줘."

2. 사용자 타겟(Target Audience)

사용자 타겟은 "누가, 왜 이 서비스를 써야 하는지 구체화 하는 것" 입니다.

예시로는 아래와 같습니다.

"이 앱의 주 사용자는 '영양제를 샀지만 매번 까먹는 30대 직장인'이야. 이들이 겪는 불편함 3가지를 정리해 주고, 우리 앱이 그걸 어떻게 해결할지 적어줘."

[프롬프트 예시]

#2.사용자 타겟(Target Audience) 작성 프롬프트 예시
"이 서비스를 주로 이용할 가상의 사용자(페르소나) 2명을 설정해 주고, 
그들이 겪고 있는 가장 큰 불편함 3가지를 분석해 줘."

3. 핵심 기능(Core Features - MVP)

핵심 기능은  "반드시 있어야 할 최소한의 기능 목록"을 말합니다.

내 서비스에서 어떤 기능이 반드시 필요한지 본인 아이디어의 차별점을 가지고 아래처럼 프롬프트를 작성해 볼 수 있습니다.

"기존 앱보다 훨씬 단순한 '원터치 기록'이 차별점이야. 메인 대시보드에서 버튼 하나로 기록하는 기능, 오늘 먹었는지 확인하는 상태 표시 등 최소 기능 3가지만 상세히 정의해 줘."

[프롬프트 예시]

#3.핵심 기능(Core Features-MVP) 작성 프롬프트 예시
"[아이디어 차별점]이 나의 차별점이야.초보 개발자인 내가 1주일 안에 완성할 수 있는 핵심 기능(MVP) 3가지만 골라줘. 
너무 복잡한 기능은 제외해 줘."

4. 사용자 흐름(User Flow)

사용자 흐름은 "사용자가 내가 만든 서비스에 접속해서 목표를 달성하기까지의 과정"을 보여주는 것입니다.

"사용자가 아침에 눈을 떠서 앱을 켜고, 영양제를 먹고 기록을 완료하기까지의 동선을 가장 짧고 간결하게 짜줘. 단계별로 무엇을 클릭해야 하는지 알려줘."

[프롬프트 예시]

#4.사용자 흐름(User Flow) 작성 프롬프트 예시
"사용자가 앱에 접속해서 [핵심 기능]을 완료하기까지의 전체 단계를 아주 상세하게 순서대로 나열해 줘."

5. 화면 설계(UI/UX)

화면 설계는 "각 페이지의 구성과 디자인 분위기를 정하는 것" 입니다.

"바쁜 아침에 쓰는 앱이니까 매우 직관적이어야 해. 화면 중앙에 큰 체크 버튼이 있고, 완료하면 성취감을 주는 애니메이션 효과가 있으면 좋겠어. 이 화면 구성을 상세히 묘사해 줘."

[프롬프트 예시]

#5.화면설계(UI/UX) 작성 프롬프트 예시
"[스타일]로 만들고 싶어. 메인 화면과 상세 화면에 각각 어떤 버튼과 컴포넌트가 들어가야 할지 리스트업 해줘."

6. 기술 스택(Tech Stack)

기술 스택은 "어떤 기술을 사용해서 만들지 정하는 것"입니다.

본인 수준을 AI에게 알려주며 기술 스택을 추천받을 수 있습니다.

"나는 초보자야. 이 앱을 만들때 필요한 기술 스택을 추천해주고 그 이유를 알려줘."

[프롬프트 예시]

#6.기술스택(Tech Stack) 작성 프롬프트 예시
"나는 [본인의 수준]이야. 
이 서비스를 만들 때 학습 곡선이 낮으면서 배포까지 쉬운 최신 기술 스택을 추천하고 그 이유를 알려줘."

7. 제약사항(Constraints & Limitations)

마지막 항목인 예외사항은 "프로젝트의 개발 범위와 기술적 한계를 명확히 선언하는 것" 입니다.

이 항목에서는 AI가 너무 복잡한 기능을 제안하거나, 현재 내 환경에서 불가능한 코드를 짜는 것을 방지하는 역할을 합니다.

AI는 때때로 의욕이 앞선 나머지, 초보자가 감당하기 힘든 복잡한 라이브러리를 가져오거나 대규모 시스템에나 어울리는 설계를 제안하곤 합니다.

때문에 하지 말아야 할일을 제약 사항에 명시해 두는 것만으로도 AI 사용량(크레딧)을 아끼고 프로젝트가 산으로 가는 것을 막을 수 있습니다.

제약 사항에는 개발 범위,기술적 제약, 디자인 제약, 보안 여부 등을 넣을 수 있습니다.

"나는 이 프로젝트에서 유료 API등 유료로 사용해야하는 기술은 사용하지 않고, 웹이랑 모바일 환경에서도 앱을 사용할 수 있도록 하고 싶어. 또한 간편함을 위해 별도의 회원가입은 추가로 만들지 않을거야. 위의 내용을 을 참고해서 제약 사항을 작성해줘."

[프롬프트 예시]

#7.제약사항(Constraints & Limitations) 작성 프롬프트 예시
"이 프로젝트를 진행할 때 반드시 지켜야 할 제약 사항을 정리해 줘. 아래 기준을 참고해서 prd에 추가할 내용을 작성해 줘.

1. 개발 범위: 복잡한 관리자 페이지나 유료 결제 기능은 이번 MVP(최소 기능 제품)에서 제외해 줘.

2. 기술적 제약: 외부 유료 API는 사용하지 않고, 무료 라이브러리로만 구현할 거야.

3. 디자인 제약: 모바일 웹 환경에서도 깨지지 않게 '반응형'으로 설계해야 해.

4. 보안/성능: 별도의 회원가입 없이 브라우저의 로컬 스토리지만 활용해서 데이터를 저장할 거야.

이 제약 조건들을 바탕으로 AI가 코딩할 때 주의해야 할 점들을 명확히 기술해 줘."

PRD.md 파일 만들기

마지막으로 아래 프롬프트를 입력해서 지금까지 나온 내용들을 한번에 PRD.md파일에 작성해서 관리할 수 있도록 합니다.

#PRD.md로 정리하기
"지금까지 정리한 PRD 항목들을 PRD.md 파일을 만들어 한 번에 정리해줘."

전체 PRD 작성 프롬프트

지금까지 나온 프롬프트를 다시 한눈에 볼 수 있도록 아래에 공유해 두겠습니다.

#1.프로젝트 개요(Overview) 작성 프롬프트 예시
"내가 [아이디어]를 만들려고 해. 이 서비스의 핵심 가치를 담은 멋진 한 줄 정의와 프로젝트 요약을 작성해 줘."

#2.사용자 타겟(Target Audience) 작성 프롬프트 예시
"이 서비스를 주로 이용할 가상의 사용자(페르소나) 2명을 설정해 주고, 
그들이 겪고 있는 가장 큰 불편함 3가지를 분석해 줘."

#3.핵심 기능(Core Features-MVP) 작성 프롬프트 예시
"[아이디어 차별점]이 나의 차별점이야.초보 개발자인 내가 1주일 안에 완성할 수 있는 핵심 기능(MVP) 3가지만 골라줘. 
너무 복잡한 기능은 제외해 줘."

#4.사용자 흐름(User Flow) 작성 프롬프트 예시
"사용자가 앱에 접속해서 [핵심 기능]을 완료하기까지의 전체 단계를 아주 상세하게 순서대로 나열해 줘."

#5.화면설계(UI/UX) 작성 프롬프트 예시
"[스타일]로 만들고 싶어. 메인 화면과 상세 화면에 각각 어떤 버튼과 컴포넌트가 들어가야 할지 리스트업 해줘."

#6.기술스택(Tech Stack) 작성 프롬프트 예시
"나는 [본인의 수준]이야. 
이 서비스를 만들 때 학습 곡선이 낮으면서 배포까지 쉬운 최신 기술 스택을 추천하고 그 이유를 알려줘."

#7.제약사항(Constraints & Limitations) 작성 프롬프트 예시
"이 프로젝트를 진행할 때 반드시 지켜야 할 제약 사항을 정리해 줘. 아래 기준을 참고해서 prd에 추가할 내용을 작성해 줘.

1. 개발 범위: 복잡한 관리자 페이지나 유료 결제 기능은 이번 MVP(최소 기능 제품)에서 제외해 줘.

2. 기술적 제약: 외부 유료 API는 사용하지 않고, 무료 라이브러리로만 구현할 거야.

3. 디자인 제약: 모바일 웹 환경에서도 깨지지 않게 '반응형'으로 설계해야 해.

4. 보안/성능: 별도의 회원가입 없이 브라우저의 로컬 스토리지만 활용해서 데이터를 저장할 거야.

이 제약 조건들을 바탕으로 AI가 코딩할 때 주의해야 할 점들을 명확히 기술해 줘."

#PRD.md로 정리하기
"지금까지 정리한 PRD 항목들을 PRD.md 파일을 만들어 한 번에 정리해줘."

위의 프롬프트를 활용하면 PRD도 어렵지 않게 작성할 수 있을 것입니다.

마무리

오늘 AI를 활용하여 PRD작성하는 방법을 알아 보았습니다.

이렇게 하면 초보자들도 PRD.md 파일을 손쉽게 만들 수 있습니다.

이제 이 파일을 가지고 바이브 코딩을 해서 나의 앱을 만들어 보는 것이 어떨까요?

안녕하세요.

지난 포스팅에서 바이브코딩에서 중요한 기획서인 PRD 작성하는 방법에 대해 같이 알아보았습니다.

https://wonhwa.tistory.com/78

하지만 바이브 코딩을 처음으로 하는 사람들에게는 기획에 대한 아이디어 자체를 떠올리기가 어려울 수도 있습니다.

이럴 때 우리가 자주 사용하는 ChatGPT, Gemini, Claude 등을 사용한다면 브레인 스토밍에 도움이 되지 않을까요?

때문에 오늘 포스팅은 위와 같은 AI를 활용해서 기획 아이디어를 발굴하는 방법을 알아보도록 하겠습니다.

1. 아이디어는 '불편함'에서 시작된다.

처음부터 "나는 아주 혁신적이고 완벽한 앱을 만들거야!" 라고 한다면 어떨까요?

모든 게 다 완벽히 준비되어야 한다는 강박으로 시작조차 하기 어려울 수 있습니다.

에어비앤비(Airbnb)의 창업자도 처음에는 월세 낼 돈이 부족했고,

마침 살던 지역이 큰 컨퍼러스로 인해 모든 호텔 예약이 꽉 차는 것으로 보면서

집에 남는 공간을 빌려주고 호텔보다 적은 숙박비를 받으면 돈을 벌수 있겠다는 작은 아이디어로 시작했습니다.

지금은 세계적인 유명한 기업이 되었죠.

이처럼 내가 실생활에서 느끼는 불편함이 뭐고,

이를 해결할 수 있는 방법이 뭐가 있을지를 생각하다 보면 좋은 아이디어가 생각날 수 있습니다.

또한 아래 처럼 AI를 활용해서 아이디어를 얻을 수도 있습니다.

예시: "내가 매일 하는 영단어 암기가 너무 귀찮은데, 이걸 좀 편하게 할 방법은 없을까?"
        "매일 영양제를 식후에 먹어야 하는데 항상 까먹어. 이를 도와주는 서비스가 없을까?"
       "초등학교 선생님이 겪는 어려움에는 어떤 것들이 있을까? 그리고 이걸 해결할 수 있는 간단한 해결방법이 있을까?
       "내가 현재 하는 업무는 ~이야. 이거를 효율적으로 자동화할 수 있는 방법은 없을까?"

2. AI와 대화하며 아이디어 찾기 - 프롬프트에 페르소나 기법 사용하기

혼자 고민하면 시간이 많이 걸릴 수도 있지만, AI에게 "베테랑 기획자" 라는 역할을 주고(페르소나 기법) 대화하면,

AI가 실제 기획자가 된 것처럼 아이디어가 많이 나옵니다.

아래의 프롬프트를 복사해서 ChatGPT, Gemini, Claude 등에게 던져 보세요.

실전 프롬프트 예시:
"너는 10년 차 IT 서비스 기획자야. 
나는 바이브코딩 초보자이고, '매일 먹는 영양제를 까먹지 않게 도와주는 서비스'를 만들고 싶어. 
요즘 트렌드에 맞춰 초보자도 1주일 안에 만들 수 있는 작고 알찬 서비스 아이디어 3가지만 제안해 줘."

이렇게 물어본다면 AI는 단순한 알람 앱부터, 영양제를 먹으면 귀여운 캐릭터를 키울 수 있는 방식까지 다양한 선택지를 줄 것입니다.

3. AI로 시장 조사 및 차별점 찾기

만약 아이디어를 찾았다고 해 봅시다.

초보자들이 아이디어를 떠올린 후 그 다음으로 하는 행동은 인터넷으로 비슷한 서비스가 있는지 검색(시장 조사)해보는 것일 겁니다.

만약 시장에 이미 나와 비슷한 아이디어나 앱이 있다면 금새 의욕을 잃기도 합니다.

하지만 모든 서비스가 사용자의 니즈를 전부 채워 주는 것은 아닐 겁니다.

이때 AI를 활용하면 기존 서비스의 빈틈을 찾아 틈새 시장을 노릴 수도 있습니다.

AI에게 시장 조사를 시키는 프롬프트:
"내가 '영양제 기록 앱'을 만들고 싶어. 
현재 시장에 나와 있는 비슷한 앱 3가지만 알려주고, 
사용자들이 리뷰에서 가장 많이 불평하는 '단점'이나 '부족한 기능'이 뭔지 분석해 줘."

AI는 수많은 데이터를 바탕으로 다음과 같은 힌트를 줄 것입니다.

• "기존 앱들은 기능이 너무 많아 무겁고 복잡하다는 평이 많아요."
• "노인들이 쓰기에는 글씨가 너무 작다는 불만이 있어요."

4. 나만의 차별화 전략 세우기

3번에서의 AI의 분석을 토대로 나의 앱이 기존 앱과 무엇이 다른지 정의할 수 있습니다.

기존에 있는 서비스에서의 "불편함의 해소"가 나의 주요 차별점입니다.

예시
- 기존 앱: 기능이 많고 유료 결제가 복잡함.
- 나의 앱(차별점): "3초 만에 기록 끝!" 버튼 하나로 작동하는 세상에서 가장 간단한 영양제 기록 앱.

이 단계에서 AI에게 다시 한번 물어보세요.

프롬프트 예시:
"기존 앱들의 단점을 보완해서, 
'복잡한 설정 없이 버튼 하나로 영양제 섭취를 기록하는 기능'에만 집중하려고 해. 
이게 사용자들에게 매력적인 차별점이 될까?
다른 아이디어도 있다면 추천해 줘."

5. 실현 가능성 확인하기

이제 아이디어가 어느 정도 나왔다면, 그 다음 벽은 "내가 이걸 만들 수 있을까?" 하는 걱정일 것입니다.

이때 AI에게 기술적 난이도를 필터링해달라고 요청해 보세요.

프롬프트 예시:
"제시해 준 3가지 아이디어 중에서, 
Next.js와 Tailwind CSS만 공부한 초보자가 가장 빠르게 완성할 수 있는 건 뭐야? 
(또는
코딩에 대해 아무것도 모르는 초보자가 가장 빠르게 완성할 수 있는 건 뭐야?)
그 이유와 필요한 핵심 기술 스택도 알려줘."

이 단계를 거치면 막연한 걱정이 사라지고, "이정도면 나도 할 수 있겠는걸?"이라는 자신감이 생기고 동기 부여가 될 것입니다.

6. 아이디어 확정하기 - 누가? 왜? 어떤 차별점으로? 무엇을?

이제 기획을 위한 모든 정보가 모였습니다.

PRD 작성의 뿌리가 될 한 문장을 완성해 보세요.

예시:
"나는 바쁜 직장인들(누가)이 영양제를 번거로움 없이 챙겨 먹도록(왜), 기존 앱보다 훨씬 단순한 원터치 기록 방식(차별점)을 가진 체크리스트 대시보드(무엇을)를 만들 거야."

이렇게 누가 사용하고, 왜 필요한지, 어떤 차별점을 가지고 무엇을 만들것인지 정하면 기본 아이디어는 다 만들어졌다고 할 수 있습니다.

이제 남은건 이 아이디어를 AI가 실제 코드로 구현할 수 있게 PRD를 작성하는 일 뿐입니다.

오늘 알려준 전체 프로세스를 그림으로 보면 아래와 같습니다.

마무리

오늘은 이렇게 AI를 활용해서 아이디어를 발굴하는 방법을 알아보았는데 어떠셨나요?

아이디어를 찾는 데 시간이 많이 걸리는 초보자분들께 도움이 되셨길 바랍니다.

그럼 다음 포스팅에서는 오늘 만든 나의 아이디어 기반으로 PRD를 AI를 활용하여 작성하는 방법에 대해 알아보도록 하겠습니다.

안녕하세요.

지난 포스팅에서 바이브 코딩에서 기획이 중요한 이유에 대해 알아보았습니다.

https://wonhwa.tistory.com/77

오늘은 이에 이어서, 바이브 코딩을 할 때 도움이 되는 기획서, 즉 PRD(제품 요구사항 명세서) 작성하는 방법을 알아보도록 하겠습니다.

1. PRD란?

먼저 PRD라는 용어를 알아보면,

PRD는 Product Requirements Document의 약자로,  제품 요구사항 명세서를 말합니다.

저번 포스팅에 기획이 '설계도'라고 했다면, PRD는 그 설계도를 실현하기 위한 구체적인 지침서라고 볼 수 있습니다.

기획과 PRD의 간단한 예시를 보자면 아래와 같습니다.

• 그냥 기획: "모던한 2층 집을 지어줘."
• PRD 작성: "1층 거실 바닥은 대리석으로 하고, 창문은 남향으로 크게 내줘. 2층에는 방 3개와 화장실 2개가 필요해."

위의 예시를 보면 내가 원하는 것에 대해 더 구체적으로 작성이 되어있는 것을 알 수 있습니다.

사람도 지시를 받을 때 자세하게 설명을 받는다면 업무를 수행하는데 요구자가 원하는 결과물을 얻기 쉬운 것처럼,

AI(Cursor, Claude, Lovable 등)에게도 "이런 서비스 만들어줘"라고 한마디 던지는 것보다,

잘 정리된 PRD 한 장을 건네는 것이 개발 속도를 10배 이상 높여줍니다.

2. 바이브 코딩에서 PRD가 중요한 이유

① AI의 '환각(Hallucination)' 방지

AI는 모호한 설명을 들으면 자기 마음대로 빈칸을 채우기 시작합니다.

PRD로 명확한 가이드라인을 주면 AI가 엉뚱한 기능을 만드는 '배가 산으로 가는 상황'을 막을 수 있습니다.

② '컨텍스트(Context)'의 효율적 관리

바이브 코딩의 최대 적은 대화가 길어지는 것입니다.

PRD 파일 하나를 AI에게 읽혀두면(예: Cursor의 @PRD.md),

AI는 프로젝트 내내 이 문서의 맥락을 유지하며 일관된 코드를 작성합니다.

③ 자원 절약의 극대화

이미 약속된 사양(Spec)대로 만들기 때문에, 중간에 구조를 뒤엎으며 크레딧(사용량)을 낭비할 일이 최소화됩니다.

3. PRD 내용에는 어떤 것들이 들어가야 할까?

간단하게 PRD가 어떤 내용을 가지고 있어야 하는지 단계별로 적어보자면 아래와 같습니다.

4. PRD 작성 예시 - AI 뉴스 요약 레터 서비스

그럼 이번에는 PRD 작성 예시를 한번 보도록 하겠습니다.

예시로 내가 관심있는 주제의 뉴스를 매일 아침 요약해 메일로 보내주는 AI 뉴스 요약 레터 서비스를 만든다고 할때, 

PRD는 아래와 같습니다.

#PRD.md
1. 개요

- 한 줄 정의: 사용자가 설정한 키워드 뉴스를 AI가 3줄 요약해 매일 아침 메일로 보내주는 서비스.

- 해결하려는 문제: 너무 많은 정보 속에서 나에게 필요한 뉴스만 골라 읽기 힘든 점.

- 핵심 목표: 3분 안에 오늘의 주요 이슈를 파악하게 함.

2. 핵심 기능 (MVP)

- 뉴스 수집: 네이버 뉴스 검색 API를 통해 특정 키워드(예: '생성형 AI', '테슬라')의 최신 기사 5건 수집.

- AI 요약: GPT-4o를 활용하여 수집된 기사 본문을 분석 후, 핵심 내용 3줄 요약 생성.

- 구독 관리: 사용자가 자신의 이메일과 관심 키워드를 등록/수정/삭제할 수 있는 기능.

- 메일 발송: Resend 또는 Nodemailer를 사용하여 매일 오전 8시에 요약된 내용을 자동 발송.

3. 사용자 흐름 (User Flow)

- 메인 페이지 접속: 서비스 소개 확인 및 구독 폼 발견.

- 구독 신청: 이메일 주소와 원하는 뉴스 키워드(최대 3개) 입력 후 제출.

- 인증: 입력한 메일로 전송된 확인 링크 클릭 (구독 확정).

- 데일리 레터: 매일 아침 요약된 뉴스를 메일함에서 확인.

4. 화면 구성 (UI/UX)

- 랜딩 페이지: 중앙에 큰 헤드라인과 '이메일 입력란', '키워드 태그 선택창' 배치.

- 성공 페이지: "구독이 완료되었습니다! 내일부터 아침 8시에 만나요." 메시지 출력.

- 메일 템플릿: 깔끔한 카드 레이아웃. 기사 제목(링크), AI 요약 3줄로 구성.

5. 기술 스택 (Tech Stack)

- Framework: Next.js (App Router)

- Database/Auth: Supabase (사용자 정보 저장 및 관리)

- AI Model: OpenAI API (gpt-4o-mini)

- Deployment: Vercel (Cron Jobs 기능 활용하여 정기 발송 구현)

예시로 위와 같이 PRD를 작성하면 되지만,

 바이브코딩 입문자에게는 처음부터 위와 같은 형태로 한번에 작성하는 것이 힘들 수 있습니다.

그래서 실제로 여러분들이 PRD를 작성하거나 AI로 PRD를 작성할 때 도움이 될 만한 PRD 템플릿도 보여드리도록 하겠습니다.

 5. PRD 템플릿(복사해서 사용)

# Project PRD: [서비스 이름]

## 1. 개요 (Overview)
- **한 줄 정의:** 이 서비스는 무엇인가?
- **해결하려는 문제:** 기존의 어떤 불편함을 해결하는가?
- **핵심 목표:** 이 프로젝트의 성공 기준은 무엇인가?

## 2. 사용자 타겟 (Target Audience)
- 누구를 위한 서비스인가? (예: 주식 초보자, 1인 가구 등)

## 3. 핵심 기능 (Core Features) - MVP 기준
- **기능 A:** [상세 설명]
- **기능 B:** [상세 설명]
- **기능 C:** [상세 설명]

## 4. 사용자 흐름 (User Flow)
- [시작] -> [중간 과정] -> [최종 목적지]
- 예: 접속 -> 키워드 입력 -> 요약 결과 확인 -> 이메일 저장

## 5. 기술 스택 & UI 제약사항 (Tech Stack & UI)
- **프론트엔드/백엔드:** (예: Next.js, Supabase)
- **디자인 컨셉:** (예: 다크 모드, 깔끔한 미니멀리즘)
- **필수 API:** (예: OpenAI API, Google Auth)

## 6. 제외 사항 (Out of Scope)
- 이번 버전에서 만들지 않을 기능 (AI의 과도한 업무 방지)

위와 같이 prd.md 라는 마크다운 파일을 만들어 내용을 채우고,

AI에게 "첨부한 PRD 문서를 읽고 단계별로 실행해줘."라고 프롬프트를 입력하면 단계별로 시행 할 것입니다.

마무리

오늘은 PRD를 작성하는 방법을 알아보았습니다.

내가 어떠한 것을 만들고 싶을 때, 세부 사항을 작성할 수록 생각할 것도 많아집니다.

특히 바이브 코딩 초심자에게는 아이디어를 떠올리는거 자체가 어려울 수도 있고,

아이디어가 있어도 기술 스택이 어떤 것이 있는지 몰라 이를 작성하는 것이 힘들 수 있습니다.

때문에 다음 포스팅에서는 AI를 활용하여 아이디어를 발굴 및 PRD작성을 하는 방법에 대해 차근차근 알아가볼까 합니다.

이상으로 오늘 포스팅 마치도록 하겠습니다.

안녕하세요.

최근 코딩의 패러다임이 '바이브 코딩(Vibe Coding)'으로 넘어가면서,

누구나 아이디어만 있으면 순식간에 서비스를 뚝딱 만들어내는 시대가 되었습니다.

하지만 AI와 대화하며 즐겁게 코딩하다가도,

어느 순간 "어? 왜 코드가 꼬이지?", "분명 수정해달라고 했는데 더 이상해졌네?" 하는 경험 해보신 적 없으신가요?

오늘은 바이브 코딩에서 왜 '기획'이 중요한지, 그 이유를 같이 알아보도록 하겠습니다.

1. 기획은 '설계도'를 만드는 과정이다.

기획이라고 하면 거창하게 들릴 수도 있지만,

사실 "만들기 전에 미리 정리하는 것"일 뿐입니다.

예시로 기획을 건축에 비유해 보겠습니다.

• 기획 없는 코딩: 설계도 없이 일단 벽돌부터 쌓는 격입니다.
  거실을 만들다가 갑자기 "아, 화장실이 필요하네?" 하고 벽을 허뭅니다.
  2층을 올리려니 기초 공사를 안 해서 건물이 흔들립니다.
  뒤늦게 기둥을 보수하고 배관을 쑤셔 넣느라 시간과 자재(AI 사용량)는 두 배로 들고,
  결국 여기저기 기워낸 '누더기 집'이 되어버립니다.
• 기획 있는 코딩: 탄탄한 설계도를 바탕으로 짓는 스마트 홈입니다.
  방의 개수, 전선이 지나갈 위치, 창문의 크기를 미리 정해둡니다.
  AI라는 '초고속 자동 빌더'는 설계도만 있으면 오차 없이 층수를 올립니다.
  기초가 튼튼하니 나중에 인테리어를 바꾸기도 쉽고, 훨씬 안전하고 멋진 건물이 완성됩니다.

AI와 함께하는 바이브 코딩도 마찬가지입니다.

"그냥 너가 알아서 다 해봐"라고 던지는 순간, 여러분의 소중한 시간과 자원은 낭비되기 시작합니다.

2. 기획 없는 바이브 코딩의 단점

① '무한 재공사'의 늪 (끝없는 수정 굴레)

설계도 없이 벽을 세우고 보니 창문 위치가 마음에 안 듭니다. 창문을 옮기니 이번엔 전등 스위치가 가려지네요.

"AI야, 창문 오른쪽으로 10cm만 옮겨줘." "아냐, 그냥 통유리로 바꿔줘."

이런 식으로 눈에 보이는 부분만 그때그때 고치다 보면, 정작 집의 뼈대를 세우는 중요한 작업은 뒷전이 됩니다.

결국 하루 종일 망치질(수정 요청)은 했는데, 아직도 1층 거실에서 벗어나지 못한 자신을 발견하게 됩니다.

② '건축 자재'의 조기 소진 (AI 사용량 증발)

Lovable, Cursor나 Claude 같은 AI 도구들은 여러분에게 주어진 '오늘의 벽돌(크레딧/토큰)' 양이 정해져 있습니다.

기획이 있었다면 100장의 벽돌로 튼튼한 집 한 채를 지었을 시간에,

기획이 없으면 벽을 세웠다 허물었다 반복하느라 벽돌 100장을 다 써버립니다.

정작 지붕을 올려야 할 결정적인 순간에 "더 이상 사용할 벽돌이 없습니다"라는 메시지를 마주하게 되는 것이죠.

돈과 시간, 그리고 기회비용까지 모두 날리는 셈입니다.

③ '설계의 붕괴'와 부실 공사 (AI의 맥락(context) 상실)

이것이 가장 치명적입니다. AI는 작업이 길어질수록 "이 집의 원래 용도가 뭐였지?"라며 혼란에 빠집니다.

"처음엔 단층 카페를 짓는다고 했다가, 갑자기 3층짜리 숙박업소로 바꾸고, 또 거기다 수영장을 넣어달라고?"

AI가 이전 대화 내용을 억지로 끼워 맞추다 보니,

화장실 문을 열었는데 거실이 나오고, 전등 스위치를 켰는데 수돗물이 나오는 식의 '코드 꼬임(Spaghetti Code)' 현상이 발생합니다.

결국 집이 무너질 것 같아 울며 겨자 먹기로 모든 것을 철거하고 처음부터 다시 지어야 하는 상황이 옵니다.

3. 실패 없는 바이브 코딩을 위한 체크리스트

AI에게 첫 프롬프트를 던지기 전, 딱 10분만 투자해서 아래 리스트를 메모장에 적어보세요.

4. 기획 있는 바이브 코드의 장점

바이브 코드에서 기획을 했을 때 장점을 건축적 관점에서 비유하며 설명해 드리겠습니다.

① 명확한 시공 지시 (프롬프트의 고도화)

단순히 "예쁜 집 지어줘"라고 말하면 AI는 혼란에 빠집니다.

하지만 "3인 가족이 살 30평형 단독주택이고, 모던한 스타일의 화이트 톤 거실과 오픈형 주방을 넣어줘"라고 전달하면 어떨까요?

AI는 첫 벽돌을 쌓을 때부터 여러분이 원하는 바로 그 모습으로 시공을 시작합니다. 첫 결과물의 퀄리티 자체가 달라집니다.

② 자원의 절약(크레딧/토큰 사용 최적화)

설계도가 미리 준비되어 있으면 '불필요한 자재 낭비'가 사라집니다.

한정된 예산 안에서 가장 멋진 집을 짓는 효율적인 건축주가 되는 것이죠.

위에서 언급했듯이, Lovable, Cursor, Claude 같은 도구들은 매달 사용할 수 있는 '공짜 벽돌(크레딧/토큰)'이 정해져 있습니다.

명확한 기획은 AI가 한 번에 정답에 가까운 코드를 짜게 만듭니다.

덕분에 소중한 크레딧을 아끼면서도 훨씬 높은 퀄리티의 결과물을 빠르게 뽑아낼 수 있습니다.

③ 부실 공사 방지 (디버깅의 최소화)

처음부터 배관 위치와 전선 경로를 설계도에 그려두었기 때문에, 나중에 벽을 뜯어낼 일이 없습니다.

건물의 뼈대(데이터 구조)가 탄탄하게 잡힌 상태에서 방(기능)을 하나씩 완성해 가므로,

코드가 꼬여서 발생하는 에러가 비약적으로 줄어듭니다.

④ 완벽한 단지 조성 (결과물의 일관성)

AI가 "이 집은 원래 어떤 스타일이었지?"라고 고민할 필요가 없습니다.

기획서라는 가이드라인이 명확하기 때문에, 거실부터 안방까지 동일한 디자인 철학(코드 스타일)이 유지됩니다.

마치 전문 건설사가 책임 시공한 것처럼 깔끔하고 유지보수가 쉬운 결과물이 탄탄하게 완성됩니다.

마무리

바이브 코딩의 핵심은 '느낌'대로 코딩하는 것이 맞습니다.

하지만 그 느낌이 현실이 되려면 견고한 뼈대가 필요합니다.

AI에게 기획을 도와달라거나 다 써달라고 할 수는 있지만, 기획에 대한 최종 결정권은 나 자신에게 있어야 합니다.

AI가 기획서를 작성해 주었더라도 한번 꼼꼼히 읽어보고 직접 수정도 해보시는것을 추천 드립니다.

오늘 여러분이 구상 중인 아이디어, 바로 AI를 켜기 전에 메모장부터 열어보는 건 어떨까요?

안녕하세요.

오늘은 제미나이에서 노래만들기를 해보도록 하겠습니다.

현재 제미나이에서 사용할 수 있는 Lyria3를 사용하여서 음악 미리듣기처럼 30초 정도 노래를 만들 수 있는데요,

숏폼동영상(shorts, reels)에 배경음악으로 적합할 것 같습니다.

무료 사용자도 이용이 가능하니 지금부터 만드는 방법 간단하게 설명드리도록 하겠습니다.

1. 제미나이 접속 및 로그인

https://gemini.google.com/

위의 사이트인 제미나이에 접속해서 로그인을 해줍니다.

2. 음악 만들기

새 채팅을 열고 하단의 "음악 만들기"를 클릭해 줍니다.

그러면 아래와 같이 여러 트랙들이 예시로 나옵니다.

하나씩 들어보시고 맘에 드는 느낌의 트랙이 있으면 트랙 클릭 후 리믹스 해서 노래를 만들어도 되고,

아니면 프롬프트만으로 어떤 음악을 만들기를 원하는지 설명하셔서 음악 생성을 하셔도 됩니다.

현재 제미나이는 최대 30초 길의의 음악을 생성하는 것이 가능합니다.

2.1 기존 트랙으로 리믹스

기존 트랙으로 리믹스를 할 경우, 해당 트랙 클릭 후 추가하고 싶은 음악 설정 등을 입력하면 됩니다.

예시로 저는 Kpop 트랙을 리믹스 하고 싶어서 아래와 같이 클릭 후 프롬프트를 입력했습니다.

댄스 느낌의 남성 아이돌 Kpop 트랙 생성

모델은 기본으로 되어 있는 '빠른 모델' 을 사용하였습니다.

그후 제미나이가 30초 분량의 노래를 생성을 해 주었습니다.

노래 커버도 제미나이 이미지 생성 프로그램인 나노바나나를 사용해서 잘 만들어 주었습니다.

참고로, 위에 제가 만든 결과물은 아래 링크에서 확인이 가능합니다.

https://gemini.google.com/share/35e3e50d500c

2.2 프롬프트 작성으로 숏폼 노래 생성하기

다음으로는 그냥 프롬프트 입력만으로 숏폼용 노래 생성하는 방법입니다.

시작하기에 앞서 아래 페이지에서 어떻게 하면 내가 원하는 음악을 세부적으로 설정할 수 있는지 확인해 보시길 바랍니다.

https://gemini.google/overview/music-generation/

아래의 사진은 제미나이 에서 알려주는 더 나은 트랙을 만드는 방법입니다.

천천히 읽고 이에 맞춰 프롬프트를 작성해 주시면 됩니다.

저는 간단하게 아래의 프롬프트를 사용해 보았습니다.

발랄한 Kpop 트랙인 첫사랑의 간지러운 설렘을 표현한 청량하고 밝은 분위기의 노래.

위와 같이 결과가 나오며, 아래의 링크에서 들으실 수 있습니다.

https://gemini.google.com/share/1a707416c702

2.3 가사를 지정해서 노래 생성하기

마지막으로, 가사를 지정해서 노래를 생성해 보도록 하겠습니다.

저는 먼저 AI에게 숏폼용 행복에 관한 노래 작사를 요청하여 가사를 생성해서 프롬프트창에 입력하였습니다.

본인이 직접 가사를 쓴것이 있다면 가사를 추가해 달라고 하고 가사를 입력 해주면 됩니다.

아래는 가사 지정 예시 프롬프트입니다.

희망적이고 에너지 넘치는 밴드 트랙을 남성 목소리로 하나 만들어줘. 주제는 행복이고, 가사는 아래와 같아.
-------------
길을 잃어도 괜찮아

천천히 걸어가면 돼
[Chorus]

행복은 멀지 않아

우리 곁에 있잖아

작은 웃음 속에

이미 빛나잖아
너의 오늘도

따뜻하길 바라

늘 네 곁에는

행복이 있기를

저는 밴드 음악을 좋아해서 밴드풍 음악을 만들어 달라고 했습니다.

어떤 노래를 생성했는지는 아래의 링크에서 확인 가능합니다.

https://gemini.google.com/share/823482c57ab8

3. 내가 만든 노래 다운로드 하기

생성한 노래를 다운 받고 싶으시다면 노래 트랙쪽에 마우스 커서를 가져가면 우측 상단에 보이는 트랙 다운로드 버튼을 클릭해 다운받을 수 있습니다.

그러면 아래와 같이 커버 사진이 포함된 동영상 버전, 노래만 있는 Mp3 버전 등 필요한 것으로 다운이 가능합니다.

4. 내가 만든 노래 공유하기

마지막으로 내가 만든 노래 공유하는 방법을 알려드리겠습니다.

노래 생성 화면에 마우스 커서를 올리면 우측 상단에 아이콘 3개가 뜨는데,

그 중 두 번째 '공유하기'버튼을 눌러주시면 바로 링크가 생성되며 링크를 통해 음악 공유가 가능합니다.

마무리

오늘 제미나이 리리아3를 사용해서 음악을 생성해 보았는데요,

 30초 분량의 음악이지만 요즘 숏폼의 배경음악 등으로 만들어 쓸 수 있을것 같습니다.

또한, 가사 없이 BGM만 필요하면 가사를 없이 음악을 생성해 달라는 등으로 프롬프트를 입력하면 여러 배경음악을 생성할 수 있을 것입니다.

무료로 이용할 수 있는 기능이니 여러분들도 한번 자신이 좋아하는 장르로 만들어 보시면 좋을 것 같습니다.ㅎㅎ

안녕하세요. 

Lovable로 코딩을 하다 보면 크레딧 관리가 중요한데요,

특히 무료 버전은 하루에 5 크레딧(2025.03.03 기준)이라는 정해진 크레딧이 있으므로,

한정된 자원에서 크레딧을 사용하는 것이 중요합니다.

이번 포스트에서는 Lovable에서 크레딧 확인하는 방법을 같이 알아보도록 하겠습니다.

1. 전체 크레딧 사용량 확인 방법

lovable.dev

위에서 로그인을 하면 아래와 같은 대시보드가 보일 것입니다.

여기서,

좌측 상단에 "(유저아이디)'s Lovable" 이라고 쓰여 있는 프로필 쪽을 눌러 줍니다.

그러면 위와 같이 세부 정보가 나오면서 "Credits" 부분에 얼만큼 남았는지가 나옵니다.

저는 무료 플랜이라 하루 5 credit을 제공하는데 아직 쓰지 않아 남아있는 것을 확인할 수 있습니다.

여기서, "5 left >" 이쪽 부분을 클릭하면,

위와 같이 Plans & credits 화면이 나타나며, 플랜을 업그레이드 할 수 있습니다.

이 방법은 내가 전체 사용량을 알고 싶을 때 간단하게 볼 수 있는 방법입니다.

다음으로는, 내가 Lovable로 개발했을 때 프롬프트별 사용량을 확인할 수 있는 방법을 알려 드리도록 하겠습니다.

2. 세부 크레딧 사용량 확인 방법

여러분이 바이브 코딩을 한다고 가정하면 chatGPT 새로운 대화창 같이 Lovable에서 새로운 프로젝트를 만들 것입니다.

이 창에서 대화하듯 바이브코딩으로 프로젝트를 완성해 나가는데 

보통 "~이렇게 해줘" 라고 프롬프트를 보내면

Lovable이 작업을 완료 하면서 작업 완료된 내용에 대해 아래와 같이 간략하게 알려줄 겁니다.

저는 저번에 만든 연하장 프로젝트를 예시로 확인해 보겠습니다.

여기에서 보면 맨 아래 하단쪽에  ··· 버튼이 보이는데

이 버튼을 클릭하면 내가 보낸 프롬프트에 대한 실행으로 얼마의 크레딧이 사용되었는지 확인이 가능합니다.

위의 사진에서는 2.9 크레딧이 사용 되었네요.

웹사이트를 한번에 만들어 주어서 무료 사용자들에게는 꽤 많은 사용량이 소비가 되었습니다.

오늘은 Lovable에서 크레딧 사용량 확인 하는 방법을 크게 2가지로 알아 보았는데요,

이처럼 전체 및 세부 크레딧 사용량을 확인할 수 있다면 크레딧 관리를 더 잘 할 수 있을 것입니다.

안녕하세요.

오늘은 저번 포스트 연하장 만들기에 이어,

https://wonhwa.tistory.com/73

러버블로 만든 결과물을 다른 사람에게도 보여줄 수 있는 공유링크를 생성하는 방법을 자세히 알아보도록 하겠습니다.

1. 러버블 프로젝트 들어가기

기존에 만들어 놓은 러버블 프로젝트에 접속해 주세요.

2. 우측 상단에 Publish 버튼 클릭하기

프로젝트 우측 상단에 보면 Publish라는 파란색 버튼이 있습니다. 

그 버튼을 클릭해 주세요.

3. Website address 설정하기

Publish 버튼을 클릭하면 웹사이트 주소(Website adress)를 설정할 수 있습니다. 

끝에는 .lovable.app으로 다 끝나고 앞에 문자는 내가 원하는 문자로 바꿔줄 수 있는데요,

저는 연하장을 만들었기 때문에 newyear2026greetings 로 설정하였습니다.

참고로, 내가 원하는 문자열을 주소로 설정 시 아이디 검증처럼 다른 사람이 이미 내가 원하는 문자열을 쓰고 있으면 사용이 불가능하며, 다른 문자열로 바꾸어야 합니다.

설정이 다 되었으면 Continue 버튼을 눌러 줍니다.

4. 공개 범위 설정

그 다음으로, 누가 나의 웹사이트에 접속이 가능한지 설정하여야 합니다.

저희는 링크를 가지고 있는 사람 모두 보여줄 것이기 때문에 Public을 선택한 후 Continue버튼을 다시 눌러줍니다.

5. 링크 미리보기 정보 설정하기

그러면 링크를 공유할 떄 미리보기할 정보들 작성하는 창이 뜹니다.

Icon&Title은 Preview에서 확인할 수 있듯,

링크를 다른 사람에게 공유했을 때 보이는 웹사이트 아이콘(여기서는 하트모양)과 제목("병오년 연하장")을 설정할 수 있습니다.

Description은 미리보기 링크 아래 웹사이트가 어떤 웹사이트인지 한줄로 설명하는 줄글을 설정할 수 있습니다.

마지막으로, Social Image는 웹사이트의 썸네일 이미지라고 보시면 됩니다. 

직접 사진을 업로드 해도 좋고, 러버블 내에도 관련 이미를 자동 생성해주는 "generate" 버튼을 눌러 이미지를 간단 생성할 수 있습니다.

저는 러버블 내의 이미지 생성 기능을 이용하였습니다.

다 설정이 되었으면 Preview쪽에서 내가 설정하는 것들이 잘 나왔는지 확인 후 Continue를 눌러줍니다.

6. 링크 정보 최종 점검

그러면 마지막으로 내가 설정한 링크 정보들 최종점검하는 페이지가 나옵니다.

내가 작성한대로 잘 설정이 되어있으면 Publish 버튼을 눌러 배포 해줍니다.

7. 공유링크 생성 완료

그러면 링크 생성이 완료되었다고 나오고 위의 빨간색 박스의 링크를 복사해서 지인과 공유하면 됩니다.

안녕하세요.

이번 주는 바이브 코딩 툴중 하나인 Lovable로 연하장을 만들어 보도록 하겠습니다.

코드를 몰라도 기획만 잘 한다면 간단한 연하장을 만들 수 있습니다.

1. Lovable 로그인

Lovable을 사용하려면 로그인 또는 회원가입을 우선 해야 합니다.

Google 계정으로 간단히 로그인 할 수 있으니 아래 페이지에서 로그인 해 주시면 됩니다.

https://lovable.dev/

2. 연하장 기획하기

코드를 몰라도 간단 웹사이트를 만들 수 있지만 어떤 것을 만들지에 대한 기획 아이디어는 있어야 합니다.

Lovable은 기본으로 50 크레딧을 무료로 주는데요,

Lovable에서 바로 대략적인 아이디어만 던지면 수정할 부분이 계속 생기고,

크레딧을 더 많이 사용하게 되니 우선 ChatGPT나 Google Gemini로 한번 기획을 맡겨 보도록 하겠습니다.

3. ChatGPT 또는 Google Gemini 접속

Chat GPT

https://chatgpt.com/

또는

Google Gemini 

https://gemini.google.com/

위 사이트들중 한 곳에 접속해 로그인을 해 줍니다.

저는 ChatGPT를 사용해서 기획을 하였습니다.

각 사이트에서 로그인을 하면 처음 보이는 입력창에 연하장을 만들고 싶다고 프롬프트를 써 줍니다. 

예시로 저는 아래와 같은 프롬프트를 입력하였습니다.

"2026 병오년 설날 연하장 웹사이트를 Lovable로 만들고 싶어. 연하장은 '2026 새해 복 많이 받으세요.' 라는 메세지를 주제로 하고 붉은 말의 해(병오년)이니까 이것을 테마로 해서 한지 느낌이 나고 모바일에서 스와이프 카드 형식으로 볼 수 있는 간단 연하장 웹사이트 아이디어 구상 부탁해"

그러면 챗 GPT가 사이트 기획안을 뚝딱 만들어 줍니다.

저는 여기에 한지 느낌+ 모바일에서 스와이프 카드 형식으로 보이게 해달라고도 추후에 추가하였습니다.

특히 "Lovable에 바로 넣을 수 있는 완성형 텍스트 버전"도 추가해 달라고 하면

아래와 같이 복사하기 쉽게 텍스트 박스로 프롬프트를 줍니다.

Create a mobile-first Korean New Year greeting website for 2026.

Theme: Traditional Korean hanji paper style. 2026 is the Byeong-o year (Year of the Red Horse). Mood should feel elegant, calm, traditional, and poetic.

Layout: Vertical swipe card layout (like stacked full-screen mobile cards). Users swipe up to move between 4 full-screen sections.

Card 1: Background: soft hanji paper texture. Center brush-style typography:
"2026 병오년"

Below: "새해 복 많이 받으세요"

Add a small red seal stamp style element with text "丙午". Soft red sun circle in background.

Card 2: Title: "병오년(丙午年)"

Text:
"병(丙)은 불의 기운,
태양의 에너지.

오(午)는 말,
힘차게 달리는 추진력.

2026년은
열정과 도전의 해입니다."

Add subtle ink-style horse silhouette in background.

Card 3: Centered poetic message:
"붉은 말처럼 힘차게 달리고

불처럼 뜨겁게 빛나며

원하는 곳까지
멈추지 않고 나아가는

2026년이 되시길 바랍니다."

Add small signature line:

"From. ______"

Card 4:
Title:
"2026 나의 소원"

Add input field:
"2026년 나의 한 문장 소원"

When clicking a button, show the wish written in brush style on a hanji card with a red stamp animation effect.

Design:
Use colors:
#F6F1E8 (hanji cream)
#1A1A1A (ink black)
#9E1B1B (deep red seal)
#BFA76F (muted gold)

Typography should feel traditional but readable.
Soft scroll animation.
Minimal UI.
Focus on whitespace and elegance.
Mobile optimized.

위처럼 사이트가 어떤 구상이어야 하는지, 어떤 디자인을 사용하고 어디에 집중을 해야하는지 잘 정리해서 기획안을 줍니다.

참고로, 같은 프롬프트를 적더라도 생성형 AI 특성상 아주 똑같은 답변을 받지는 않을 겁니다.

다르더라도 복사해서 러버블에서 실행해 보시길 바랍니다.

4. Lovable로 연하장 사이트 만들기

위에서 나온 프롬프트 답변을 가지고 다시 러버블 사이트에 들어와서 

붙여넣기 해서 프롬프트를 실행해 주세요.

그러면 러버블이 아래와 같이 자동으로 코드를 생성후 미리보기를 해 줍니다.

이렇게 미리보기가 나왔으면 한번 스크롤을 내려서 쭉 확인해서 이상한 점이 없는지 디자인 적으로 잘 보이는지 등을 확인해 줍니다.

저 같은 경우는 애니메이션 추가 했던 것을 제거하고, 글자 색 등을 변경하였습니다.

변경할 부분이 있을때에는

"~이 부분을 ~이렇게 변경해줘" 이런 식으로 프롬프트를 입력하면 러버블이 자동으로 수정해 줍니다.

최종 결과물

저는 마지막 부분에 아래 사진과 같은 소원을 적는 칸을 만들었습니다.

여러분들도 아래 페이지에 접속하시면 확인하실 수 있습니다.

https://newyear2026greetings.lovable.app

마무리

오늘 이렇게 연하장을 만들어 보았습니다. 

러버블 크레딧을 토탈 6크레딧 정도 사용했습니다.

무료 버전도 충분히 간단한 사이트는 만들 수 있으니 한번 해보시길 추천 드립니다.

또한 이 연하장을 저처럼 배포하려면 우측 상단에 Publish 버튼을 눌러 진행하면 됩니다.

바로 다음 버튼 눌러서 진행해도 되지만, 더 상세하게 설정하고 싶으신 분들을 위해서

관련한 자세한 설명은 다음 포스트에서 알려드리도록 하겠습니다.

모두들 새해 복 많이 받으세요!