"이걸 제미나이3로 만들었다고?" 개발자 없이 혼자서 웹사이트 만드는 과정 공개 | gemini, ai studio

1. 웹사이트 제작의 새로운 접근법

웹사이트를 만들기로 마음먹었다면, 첫 단계로 서비스의 정의가 필요해요. 단순히 "홈페이지를 만들고 싶다"는 생각만으로는 부족합니다. 내가 제공할 서비스가 무엇인지, 어떤 가치를 전달할 것인지 구체적으로 정리해보세요. 예를 들어, '커머스 OS'라는 서비스를 기획하면서 타겟 고객과 그들에게 줄 가치를 명확히 설명해야 합니다. 이 단계에서 AI에게 구체적인 내용을 입력하면, 홈페이지에 적합한 문구를 제안해 주지요.

하지만 AI가 제안한 문구를 그대로 사용하는 것보다는, 개인의 톤에 맞게 수정하는 것이 중요합니다. 예를 들어, "직원 뽑지 마세요"라는 문구는 너무 공격적으로 느껴질 수 있습니다. 대신 "혼자서도 팀처럼 일하세요"라는 긍정적인 메시지로 바꾸는 것이 좋겠죠.

이렇게 텍스트가 확정되면, 디자인 단계로 넘어가야 합니다. 디자인 감각이 부족하다고 걱정하지 마세요. 프레이머 같은 템플릿을 활용하면 퀄리티 높은 사이트를 만들 수 있습니다. 프레이머 템플릿 사이트에서 마음에 드는 디자인을 찾아 캡처한 후, AI에게 "이 디자인 스타일로 코딩해 주세요"라고 요청하면 됩니다. 이렇게 하면, 내가 쓴 글과 전문가의 디자인이 결합된 완벽한 1차 코드가 생성됩니다.

2. AI와의 효과적인 협업 방법

이제 1차 코드를 가지고 AI 스튜디오로 넘어갑니다. AI 스튜디오는 더 긴 코드를 다룰 수 있어 홈페이지 제작에 최적화되어 있죠. 하지만 AI가 만든 코드가 항상 완벽하지는 않습니다. 예를 들어, 텍스트 가독성 문제가 발생할 수 있습니다. PC 버전에서는 괜찮지만 모바일에서는 글자가 끊기는 경우가 많아요. 이는 AI가 한글의 줄바꿈 규칙을 잘 이해하지 못하기 때문입니다.

이럴 때는 "모바일에서 텍스트를 이렇게 줄 바꿈해 주세요"라고 구체적으로 요청하는 것이 좋습니다. 또한, 디자인이 뒤죽박죽일 경우에는 명확한 디자인 가이드라인을 제시해야 합니다. "모든 강조하는 글꼴은 그라데이션 효과로 넣어 주세요"와 같은 규칙을 정해주면 AI가 전체적인 톤을 깔끔하게 잡아줄 수 있습니다.

더욱이 홈페이지에 동적인 요소를 추가하면 사용자 경험이 좋아집니다. 예를 들어, 파트너사의 로고를 롤링 형태로 움직이게 하거나, 신청 버튼 클릭 시 설문지나 뉴스레터 페이지로 넘어가도록 링크 기능을 추가할 수 있습니다. 이렇게 하면 홈페이지가 더 매력적으로 보이죠.

3. 홈페이지 제작 후 주의사항 및 개선점

이제 만든 코드를 세상에 공개할 차례입니다. 완성된 코드를 저장하고 랠리파이라는 사이트에 드래그하여 업로드하면 무료로 이용할 수 있습니다. 하지만 도메인 설정과 SEO 최적화는 다음 영상에서 다룰 예정이니 참고해 주세요.

많은 분들이 프레이머 같은 노코드 툴과 AI 방식의 차이를 궁금해하시는데요. 프레이머는 템플릿이 많아 시작은 쉽지만, 수정 과정에서 시간이 많이 소요됩니다. 반면 AI 방식은 말로 요청할 수 있어 툴 사용법을 익힐 시간에 기획에 집중할 수 있는 장점이 있습니다.

하지만 AI로 직접 쇼핑몰을 만드는 것은 권장하지 않아요. 결제 시스템과 보안 문제는 전문적인 솔루션이 필요합니다. 대신 하이브리드 전략을 추천합니다. 카페24나 아이 같은 전문 솔루션을 사용하여 뼈대를 만들고, 디자인적인 부분만 AI로 적용하는 것입니다. 이렇게 하면 효율적이고 안전하게 홈페이지를 구축할 수 있습니다.

마지막으로, AI 스튜디오를 사용할 때 발생할 수 있는 문제도 있습니다. 예를 들어, 프로필 사진을 넣으라고 했더니 이미지가 깨지는 경우가 있죠. 이는 AI가 저장 기능이 없기 때문입니다. 이럴 땐 안티 그래비티 같은 실제 개발 환경으로 코드를 가져와야 합니다. 버튼이 눌러도 작동하지 않는 경우도 있는데, 이때는 API 키와 백엔드 연동이 필요합니다.

이런 문제를 피하고 완벽한 홈페이지를 만들기 위해서는 3단계 워크플로를 사용하는 것이 좋습니다. 첫 단계는 재미나이로 설계도를 그리고, 두 번째 단계는 AI 스튜디오로 모형을 만들며, 마지막 단계는 안티 그래비티를 활용하여 파일을 넣고 AI 기능을 연동하는 것입니다. 이렇게 하면 실패 확률을 줄일 수 있습니다.