LEVEL 3
⚡ LEVEL 3: 웹 앱 직접 개발과 조립
이제 진짜 웹사이트를 만들 시간입니다! project.md 기획안을 바탕으로 Antigravity AI와 협업하여 현대적인 UI 블록들을 조립해 나갑니다.
무엇을 하나요?
복잡한 코드를 직접 칠 필요는 없어요. 작성한 기획안을 AI에게 전달하고, AI가 실시간으로 코드를 생성하고 화면을 바꾸는 혁신적인 개발 방식을 경험하게 됩니다.
3.1 AI 협업 설정 (품질 가이드)
본격적으로 코드를 짜기 전, 아래 문구를 복사해서 저(Antigravity)에게 전달하세요. 품질 설정을 한 번에 완료해 드립니다!
우리 프로젝트에 Prettier와 ESLint를 설정해줘. .vscode/settings.json에 저장 시 자동 포맷팅 설정을 추가하고, 코드를 수정한 후에는 항상 'npm run cleanup' 명령어를 실행해서 코드를 반듯하게 정돈해줘.3.2 프로젝트 기획 전달 (project.md)
1
AI에게 설계 요청
Next.js (App Router), Tailwind CSS, shadcn/ui(base)를 사용해서 [project.md] 기획안에 맞는 웹 서비스를 만들어줘. 전체 레이아웃은 모바일과 데스크탑에서 모두 잘 보이는 반응형으로 구성하고, 디자인은 세련된 리니어 디자인(Linear Design) 스타일의 다크 모드 컨셉으로 구현해줘.* 위 내용을 복사해서 Antigravity 채팅창에 붙여넣으세요!
* Windows 사용자: npm 실행 권한 오류가 발생하면 Level 0의 스크립트 설정을 다시 확인하세요.
3.3 디자인 적용 & 컴포넌트 활용
1. 디자인 코드 입히기
작성한 기획안과 프롬프트를 바탕으로 AI가 코드를 작성합니다. 저장만 하면 실시간으로 화면이 바뀝니다!
UI 컴포넌트 요청 예시
"shadcn/ui(base)의 Button과 Card 컴포넌트를 추가하고 내 디자인에 어울리게 적용해줘."
AI의 역할
- 필요한 라이브러리 자동 설치 및 코드 작성
- 디자인 버그 및 스타일 충돌 자동 해결