기획서 없어도 괜찮아! AI와 함께 프로젝트 구조 설계하고 Next.js 초기 세팅까지

완벽한 기획서를 기다리지 마세요

지난 포스팅에서 바이브 코딩의 첫걸음을 떼어봤다면, 이제 본격적으로 프로젝트를 시작할 차례예요! 하지만 막상 시작하려니 "기획서가 완벽하지 않은데..." "구조를 더 정리해야 하는데..." 하며 망설이게 되죠.

결론부터 말하자면: 기획서 없어도 괜찮습니다! AI와 함께라면 아이디어 하나로도 충분히 시작할 수 있어요.

AI에게 프로젝트를 설명하는 방법

1단계: 핵심 아이디어 던지기

완벽한 문서 대신 이렇게 시작해보세요:

안녕! 사이드 프로젝트 아이디어가 있어.
디자이너들을 위한 포트폴리오 피드백 커뮤니티를 만들고 싶어.

- 포트폴리오를 업로드하면
- 다른 디자이너들이 피드백을 줄 수 있고
- 좋은 피드백을 준 사람은 포인트를 받는 시스템

어떻게 생각해?

2단계: AI와 함께 구조 다듬기

AI는 이런 식으로 도와줄 거예요:

AI의 응답 예시:

좋은 아이디어네요! 몇 가지 질문이 있어요:

1. 메인 사용자는 주니어/시니어 구분이 있나요?
2. 피드백 형태는 댓글? 아니면 구조화된 폼?
3. 포인트로 뭘 할 수 있게 하고 싶나요?

이 과정에서 여러분은 자연스럽게 프로젝트의 핵심 기능들을 정리하게 되고, AI는 놓친 부분들을 질문으로 채워줄 거예요.

3단계: 기능 우선순위 정하기

좋은 질문들이야! 정리해보면:

**1차 MVP:**
- 회원가입/로그인 (구글 소셜로그인)
- 포트폴리오 업로드 (이미지 + 간단 설명)
- 피드백 댓글 시스템
- 기본 포인트 시스템

**나중에 추가:**
- 구조화된 피드백 폼
- 포인트 리워드 시스템
- 카테고리별 분류

기술스택은 Next.js + Tailwind로 가고 싶어. 어떻게 시작하면 될까?

Next.js + Tailwind 초기 세팅 함께 하기

1단계: 프로젝트 구조 설계

AI에게 이렇게 요청해보세요:

위 기능들을 바탕으로 Next.js 프로젝트 구조를 제안해줘.
App Router 사용하고, 각 폴더의 역할도 설명해줘.

AI가 제안하는 구조:

design-feedback/
├── app/
│   ├── (auth)/
│   │   ├── login/
│   │   └── signup/
│   ├── portfolio/
│   │   ├── [id]/
│   │   └── upload/
│   ├── profile/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   ├── portfolio/
│   └── common/
├── lib/
│   ├── auth.ts
│   └── utils.ts
└── types/
    └── index.ts

2단계: 실제 프로젝트 생성

터미널에서 함께 따라해보세요:

# Next.js 프로젝트 생성
npx create-next-app@latest design-feedback --typescript --tailwind --eslint --app

# 프로젝트 폴더로 이동
cd design-feedback

# 필요한 패키지 설치
npm install @headlessui/react @heroicons/react clsx

3단계: 기본 레이아웃 구성

AI에게 "메인 레이아웃 컴포넌트를 만들어줘"라고 요청하면:

// components/layout/MainLayout.tsx
import { ReactNode } from 'react'
import Header from './Header'
import Footer from './Footer'

interface MainLayoutProps {
  children: ReactNode
}

export default function MainLayout({ children }: MainLayoutProps) {
  return (
    <div className="min-h-screen bg-gray-50">
      <Header />
      <main className="container mx-auto px-4 py-8">
        {children}
      </main>
      <Footer />
    </div>
  )
}

실전 팁: AI와 효율적으로 작업하기

🔥 꿀팁 1: 단계별로 요청하기

한 번에 모든 걸 요청하지 말고:

❌ "전체 프로젝트 코드를 다 만들어줘"
✅ "먼저 헤더 컴포넌트부터 만들어줘"
✅ "이제 포트폴리오 카드 컴포넌트 만들어줘"

🔥 꿀팁 2: 디자인 레퍼런스 활용하기

Dribble에서 본 이런 느낌의 포트폴리오 카드를 만들고 싶어:
- 깔끔한 화이트 배경
- 좌측에 이미지, 우측에 정보
- 호버시 살짝 shadow 효과

Tailwind로 구현해줘.

🔥 꿀팁 3: 오류 해결도 함께

에러가 나면 그대로 AI에게 보여주세요:

이런 에러가 났어:
[에러 메시지 복사-붙여넣기]

뭐가 문제일까?

첫 페이지 완성하기

기본 구조가 잡혔다면, 메인 페이지부터 만들어보세요:

// app/page.tsx
export default function Home() {
  return (
    <div className="text-center">
      <h1 className="text-4xl font-bold text-gray-900 mb-4">
        디자이너를 위한 포트폴리오 피드백
      </h1>
      <p className="text-xl text-gray-600 mb-8">
        함께 성장하는 디자인 커뮤니티
      </p>
      <button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">
        시작하기
      </button>
    </div>
  )
}

다음 단계는?

이제 기본 구조와 첫 페이지가 완성됐어요! 완벽하지 않아도 괜찮습니다. 중요한 건 시작했다는 것이에요.

다음 포스팅에서는:

• 실제 데이터 연결하기
• 컴포넌트 단위로 기능 구현하기
• 디자인 시스템 만들어가기

를 다뤄볼 예정이에요.

기억하세요: 완벽한 기획서를 기다리지 말고, AI와 함께 만들어가면서 배우는 게 바이브 코딩의 진짜 매력입니다! 🚀