생성형 AI로 웹 사이트 만들기

생성형 AI가 웹 사이트도 만든다? 다재다능한 Gemini 

 

현재 운영 중인 회사 사이트는 어떻게 만드셨나요? 사내 인력을 투입해 직접 만들거나, 외주로 개발을 하거나 웹사이트 제작 플랫폼을 활용하는 방법이 일반적입니다. 대다수의 회사들이 공식 사이트를 만들기 위해 초기에 시간과 비용을 투자하여 사이트를 구축한 다음 몇 년 간 쭉 사용하는 형태로 운영하였습니다. 

 

요즘에는 조금 달라지는 분위기입니다. 브랜드 사이트, 마이크로 사이트 등 공식 홈페이지와 별개로 필요에 따라 사이트를 만들기도 하고, 없애기도 합니다. 전담 팀이나 인력이 없을 경우 필요할 때마다 사이트를 만든다는 것은 부담스러운 일이라 생각들을 많이 합니다. 디자인 컨셉을 실제 웹사이트로 구현하는 과정이 쉽지 않기에 실제로 웹사이트를 만드는 것은 생각보다 쉽지 않습니다. 

 

앞으로는 웹사이트 구축에 생성형 AI의 도움을 많이 받아, 웹사이트 디자인 및 구축 과정을 자동화할 수 있을 것으로 보여집니다. 물론, 아직 완벽한 웹사이트를 스스로 만들 수 있는 수준은 아니지만 생성형 AI 기술의 발전 속도를 고려할 때 코드를 모르는 사람도 간편하게 원하는 웹 사이트와 기능을 구현하는 것이 가능한 시대가 빨리 올 것 같습니다. 

 

😎 Code Lab에 올라온 흥미로운 실습 

Google Cloud는 클라우드를 활용 중이거나 사용할 예정인 조직과 개인을 위해 Google Cloud Platform(GCP)의 다양한 서비스와 기능을 직접 사용해 볼 수 있는 무료 온라인 실습인 Code Lab을 제공합니다. Code Lab에는 다양한 주제에 대한 단계별 지침과 예제 코드를 제공합니다. 비용 부담 없이 실제 GCP 콘솔에 연결하여 다양한 기능을 직접 사용해 볼 수 있습니다. 최근 Code Lab에 웹 사이트 구축 관련 흥미로운 실습이 올라왔습니다. 

Draw a Web Site 실습은 Vertex AI의 제너레이티브 AI 모델을 사용하여 손으로 그린 와이어프레임을 웹사이트 코드로 변환하는 방법을 배우는 데 좋은 기회입니다. 이 실습을 통해 사용자는 생성형 AI를 활용한 웹사이트 구축 도구의 작동 방식을 이해하고, 간단한 웹 애플리케이션을 만들 수 있습니다.

 

☘️ ‘Draw a Web Site’ 실습 도전! 

‘Draw a Web Site’ 실습은 누구나 쉽게 체험할 수 있습니다. 이 실습을 통해 Vertex AI의 제너레이티브 AI 모델 (Gemini 1.5 Flash, Gemini 1.5 Pro 등)을 사용하여 와이어 프레임과 사용자가 입력한 프롬프트로부터 웹사이트 코드(HTML, CSS, 자바스크립트)를 생성하는 웹 애플리케이션을 만듭니다. 이 애플리케이션은 인기있는 파이썬 웹 프레임워크인 Flask를 사용하여 구축되고, Vertex AI 클라이언트 라이브러리를 사용하여 제너레이티브 모델 서비스와 상호 작용합니다. 실습을 마치면 와이어프레임과 프롬프트로부터 이미지를 생성하는 웹 애플리케이션을 완성하게 됩니다. 

 

 

이 웹 애플리케이션은 다음과 같이 동작합니다. 

• 손으로 그린 와이어프레임 업로드: 사용자는 자신의 손으로 그린 와이어프레임 이미지를 앱에 업로드할 수 있습니다.
• 모델 선택: 앱은 다양한 디자인 스타일을 위해 사전 훈련된 제미니 모델을 제공합니다.
• 프롬프트 제공 (선택적): 사용자는 선택적으로 텍스트 프롬프트를 제공하여 모델 생성을 안내할 수 있습니다.
• 웹사이트 코드 생성: 앱은 와이어프레임과 프롬프트를 제미니에게 전송하여 해당 웹사이트 코드를 생성합니다.
• 결과 표시: 생성된 코드는 앱의 응답 페이지에 표시됩니다.

 

‘Draw a Web Site’ 실습에 대한 상세 내용은 Code Lab 페이지 또는 다음 소개 영상을 참조바랍니다.