구글 AI Studio 활용하여 AI 영화 제작 강의 사이트 웹디자인 완성해보기

소개

2주차 스터디 주제인 Front 페이지 만들기 수업 강의 교안과 녹화본을 다시 보면서 AI 영화 제작 강의 사이트의 전체 디자인을 완성하는 것을 목표로 진행했습니다.

1주차에서 웹사이트 기획한 문서를 바탕으로 클로드와 구글 AI STUDIO 를 적극적으로 활용해 웹사이트 기획부터 디자인까지 빠르게 완성하는 경험을 쌓는 데 집중했습니다.

진행 방법

1. 웹사이트 기획 정리 (I-P-O 기반)

• thinking partner와의 대화를 기반으로 I-P-O(Input-Process-Output) 분석 템플릿에 맞게 기획 문서 완성

• 웹사이트 구축에 필요한 기획 문서를 MD 파일 형태로 정리

2. AI 도구 활용 디자인

• Claude AI를 활용해 웹사이트 디자인 생성

ALT

한국어 웹사이트 스크린샷

• Google AI Studio를 활용해 랜딩페이지 및 강의 소개 페이지 제작

ALT

한국영화학교 - 한국영화학교 한국영화학교 한국영화학교 한국어

3. 디자인 비교 및 개선

• Claude Code를 활용해 웹사이트 디자인 생성

ALT

학교를 위한 검정색과 녹색 웹사이트

ALT

검정색과 녹색 웹사이트 디자인

• Google AI Studio를 활용해 웹사이트 디자인 생성

4. 문제 해결

• 오류 및 레이아웃 문제 발생 시

  • Claude AI

  • Google AI Studio 를 활용하여 해결

결과와 배운 점

👍 성과

• 클로드와 Google AI Stuido를 활용해 웹사이트 프론트 디자인을 빠르게 완성

• 기획 → 디자인 → 비교 → 개선의 흐름을 경험

💡 배운 점

• AI 도구는 각각 강점이 다르므로 비교 활용이 중요

• 기획 문서(I-P-O 기반)가 구체적이고 명확할수록 웹사이트 결과물의 퀄리티가 높아짐

• 오류 해결에도 AI를 적극 활용 가능