AI 스튜디오로 IPO 기획서 기반 프론트 구현하기

AI 스튜디오로 IPO 기획서와 컬러셋을 기반으로 프론트 구현하기

소개

• 시도한 내용: IPO 기획서와 컬러셋을 Markdown 형태로 정리한 뒤, 이를 기반으로 AI 스튜디오를 활용해 웹사이트 프론트를 구현하고 GitHub에 등록

• 동기:

  • 프론트엔드 구현 역량을 빠르게 실험하고 싶었음

  • AI 기반 개발 흐름을 직접 경험해보고자 함

진행 방법

1. 기획 및 디자인 준비

• IPO 기획서를 구조화하여 Markdown 문서로 작성

• 컬러셋 정의 (Primary / Secondary / Background 등)

# IPO 기획 구조
- Problem
- Solution
- Target
- Value Proposition

# Color Set
- Primary: #000000
- Secondary: #FFFFFF
- Accent: #FF5733

2. AI 스튜디오를 활용한 프론트 생성

• AI 스튜디오에 Markdown 기반 기획과 컬러셋을 입력

• 웹사이트 UI를 자동 생성

"이 IPO 구조와 컬러셋을 기반으로 웹사이트 프론트를 생성해줘"

3. 결과물 관리 및 배포

• 생성된 코드를 GitHub에 업로드

• 버전 관리 및 추후 확장 가능하도록 구조 정리

결과와 배운 점

👍 인상 깊었던 점

• AI 스튜디오를 통해 한 번의 입력으로 프론트가 생성되는 경험이 매우 인상적이었음

• 기획 → UI로 바로 연결되는 흐름을 체감

🤔 고민 및 인사이트

• 생성된 결과물이 항상 원하는 디자인과 일치하지는 않음

• 자연스럽게 "이걸 어떻게 디벨롭하지?"라는 다음 단계에 대한 고민이 생김

💡 핵심 배움

• 프론트 구현 속도는 AI로 크게 향상될 수 있음

• 하지만 원하는 결과를 얻기 위해서는:

  • 레퍼런스 수집

  • 컬러셋 설계

  • 기획 구조 정리
    가 매우 중요함

🚀 앞으로의 계획

• 레퍼런스 기반 프롬프트 개선

• 디자인 시스템 정리 후 재적용

• AI 생성 코드의 커스터마이징 능력 향상