v0에 효과적인 프롬프트를 작성하는 기술은 lovable과 같은 다른 AI 프로그래밍 도구에도 적용될 수 있습니다. 핵심 프레임워크: 세 가지 핵심 입력 요소 광범위한 테스트 끝에 v0 팀은 가장 효과적인 추천 단어들이 모두 세 가지 구성 요소를 포함하고 있다는 사실을 발견했습니다. 1. 제품 표면 정확히 무엇을 해야 하나요? 2. 사용 사례 (사용 맥락) 누가 언제 사용하며, 어떤 문제를 해결하는가? 3. 제약 조건 및 취향 어떻게 해야 하며, 어떤 제약 사항이 있을까요? 템플릿은 다음과 같습니다. [특정 구성 요소, 데이터 또는 함수]를 생성합니다. 누구를 위해서요? [어떤 상황에서], 어떤 목표를 달성하기 위해서인가요? 강제: - 플랫폼/기기 - 시각적 스타일 - 레이아웃 요구 사항 파트 1: 제품 표면 단순히 "대시보드를 만들어라"라고 말하지 말고, 대시보드 안에 무엇이 있는지 명확하게 설명하세요. 예를 들어: 대시보드 화면: - 최고 판매원 5명의 이름과 실적 - 팀 성과 대 목표 달성률 - 영업 퍼널 (잠재 고객 → 적격 고객 → 제품 시연 → 계약 체결) - 지난 6개월간의 성능 추세 차트가 구체적일수록 v0이 근거 없는 추측을 하거나 사용하지 않을 기능을 잔뜩 만들어낼 가능성이 줄어듭니다. 파트 2: 사용 사례 이 부분은 가장 쉽게 간과되지만 가장 큰 영향을 미칩니다. 다음 질문들을 고려해 보세요: - 누가 사용하고 있나요? - 언제 사용해야 하나요? - 어떤 결정을 내려야 할까요? - 시간이 얼마나 있으신가요? 대시보드 예시를 다시 살펴보겠습니다. (기술에 대해 잘 모르는) 영업 관리자가 아침 회의에서 이것을 사용했습니다. 사무실의 대형 모니터로 본 모습 실적이 저조한 사람들을 신속하게 파악하고, 좋은 성과를 낸 사람들에게는 칭찬을 아끼지 마세요. 차이점을 아시겠어요? 동일한 대시보드라도 영업 관리자의 아침 회의용과 데이터 분석가의 심층 분석용으로 완전히 다른 디자인을 가질 수 있습니다. 전자는 핵심 사항을 한눈에 파악할 수 있어야 하는 반면, 후자는 세부적인 필터링 및 드릴다운 기능이 필요합니다. Vercel 팀은 비교 테스트를 실시했습니다. 사용 사례가 명시되지 않은 버전: - 검색 기능은 가짜입니다 (그냥 상자일 뿐입니다). - 장바구니를 클릭할 수 없습니다 - 휴대폰으로 보면 엉망이에요 사용 사례가 설명된 버전: - 검색 기능과 장바구니 기능 모두 이용 가능합니다. - 휴대폰과 완벽하게 호환됩니다 - 또한 빠른 미리보기 및 카테고리 필터링 기능이 자동으로 추가되었습니다. 생성하는 데 26초가 더 걸렸지만, 이후 수정 작업을 1~2회 줄일 수 있었습니다. 결과적으로는 더 빨랐습니다. 제3부: 제약 조건 포함하다: - 스타일 선호도 - 장비 관련 가정 사항 - 레이아웃 기대사항 - 색상 구성표 - 반응형 요구사항 예를 들어: 전문적이면서도 친근한 느낌. 카드 형식 레이아웃은 명확한 계층 구조를 제공합니다. 색상 체계: 녹색은 정상, 노란색은 경고, 빨간색은 비상 상황을 나타냅니다. 주로 대형 스크린에서 사용됩니다. 진정한 SaaS 제품처럼 느껴져야 합니다. v0의 기본 설정은 이미 훌륭하지만, 특정 제약 조건을 적용하면 더욱 개선되고 코드가 더 간결해질 수 있습니다. 실제 테스트 비교 베르셀 팀은 각 세트마다 하나의 변수만 변경하면서 세 가지 비교 테스트를 수행했습니다. 테스트 1: 사용 시나리오의 영향 흐릿한 버전: "전자상거래 웹사이트를 만들려면 제품 목록, 필터링 기능, 쇼핑 기능이 필요합니다." 깨끗한 버전: "패션 전자상거래 웹사이트는 주로 25~35세의 젊은 층을 대상으로 하며, 이들은 주로 출퇴근 시간에 휴대폰으로 웹사이트를 둘러보고 여러 제품을 빠르게 비교한 후 주문합니다." 스크롤 가능한 이미지, 제품명, 가격, 설명, 사이즈 및 색상 선택, 장바구니 담기 버튼이 포함된 제품 페이지를 만드세요. 상단에는 뒤로 가기 버튼과 장바구니 아이콘만 있습니다. 깔끔하고 세련된 느낌입니다. 결과: 선명한 버전은 첫 시도에 바로 완성되었습니다. 흐릿한 버전은 1~2회 추가 수정이 필요합니다. 테스트 2: 제품 표면에 미치는 영향 좀 더 모호한 표현으로는 "사용자 프로필 페이지를 만드세요."입니다. 깨끗한 버전: "아바타, 닉네임, 사용자 이름, 이메일, 자기소개, 가입일, 활동 통계(게시물 수, 댓글 수, 팔로워 수), 최근 활동 목록(타임스탬프 포함), 편집 및 설정 버튼을 표시하는 사용자 프로필 페이지를 만드세요." 테스트 3: 제약 조건의 영향 기본 버전: "고객 서비스 티켓 대시보드를 생성합니다. 표시되는 항목: 대기 중인 티켓, 응답 시간, 고객 서비스 성과 및 최근 활동." 상세 버전: 고객 서비스 티켓 대시보드를 생성합니다. 표시되는 항목: 대기 중인 티켓, 응답 시간, 고객 서비스 성과 및 최근 활동. 모바일 우선(관리자는 현장에서 모바일 폰을 사용하여 콘텐츠를 확인합니다). 밝은 색상에 높은 대비를 적용한 테마. 색상 체계: 빨간색은 응급 상황(24시간 이상), 노란색은 중간 정도, 녹색은 정상 상황을 나타냅니다. 최대 3열 레이아웃을 지원합니다. 로딩 상태를 반드시 포함해야 합니다. 주요 차이점은 기본 버전은 "모바일 기기에서만 볼 수 있는" 버전(데스크톱 레이아웃은 더 작음)인 반면, 상세 버전은 진정한 "모바일 우선" 버전이라는 점입니다. 후속 반복 세대가 지난 후에는 두 가지 방법으로 개선할 수 있습니다. 1. 제시된 단어들을 계속 적어보세요. 기능 추가 또는 구조 변경과 같은 기능적 수정에 적합합니다. 2. 디자인 모드: 디자인 모드를 클릭하고 조정할 요소를 직접 선택하세요. 색상, 간격, 글꼴 등의 시각적 세부 사항을 빠르게 변경하는 데 적합합니다. 명심하세요: 논리와 구조를 위해 단서를 활용하고, 시각적 조정을 위해 디자인 패턴을 사용하세요. 마지막으로, 완전한 예시를 보여드리겠습니다. 다음 내용을 표시하는 고객 서비스 대시보드를 만드세요: - 보류 중인 작업 주문 수 - 평균 응답 시간 - 작업 지시는 우선순위(높음/중간/낮음)에 따라 분류됩니다. - 고객 서비스 실적 목록 (현재 업무량 표시) - 최근 티켓 활동 흐름 고객 서비스 관리자(5~10명의 고객 서비스 담당자를 관리하는 관리자)는 순찰 중 상황을 모니터링하기 위해 휴대폰을 사용하여 고객 서비스 과부하를 방지하고 응답 시간 목표를 달성해야 합니다. 30분마다 점검하여 고객 서비스 직원이 과부하 상태인지 확인하고 다른 업무로 재배치하십시오. 강제: - 모바일 우선, 밝은 색상 테마, 높은 대비 - 우선순위에 따른 색상 체계: 긴급 상황은 빨간색, 중간 상황은 노란색, 일반 상황은 녹색입니다. - 고객 서비스 상태 표시기(통화 중/가능)를 표시합니다. - 모바일 기기에서는 최대 2열까지만 표시됩니다. 결론적으로 좋은 프롬프트는 더 나은 결과와 더 빠른 속도를 가져옵니다. 다음번에 v0을 사용하실 때는 내용을 좀 더 자세히 작성해 보세요. 누구를 위한 것인지, 왜 필요한지, 그리고 어떻게 사용하는지 명확하게 설명해 주세요. -- 원문은 댓글란에서 확인하실 수 있습니다.
원문 vercel.com/blog/how-to-pr…LaJK