웹사이트 개발자들 멘붕! 이젠 레디AI가 코딩부터 디자인까지 자동으로 합니다

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

레디AI로 코딩부터 디자인까지 자동화하자

이제 코딩 지식 없이도 레디AI를 활용해 전문가 수준의 웹사이트를 만들 수 있는 시대가 열렸습니다. 이 콘텐츠는 '레디 AI'를 통해 단 몇 줄의 프롬프트 입력만으로 고가의 웹 개발 비용을 절감하고, 단시간에 고품질의 웹사이트를 구축하는 방법을 상세히 보여줍니다. 단순히 웹사이트를 만드는 것을 넘어, 동적인 애니메이션 추가, 개별 페이지 생성, 심지어 고객 문의 데이터베이스 연동까지 실용적인 기능들을 손쉽게 구현하는 과정을 직접 확인할 수 있습니다. 웹 개발에 대한 부담 없이 자신만의 아이디어를 현실화하고 싶은 개인이나 소상공인에게 혁신적인 웹사이트 제작 솔루션을 제시하며, 시간과 비용을 절약하는 방법을 알려줄 것입니다.

1. AI 웹사이트 자동 제작 시대의 도래 및 기존 방식과의 비교

1. AI를 활용한 웹사이트 자동 제작 시대의 도래: 프롬프트 입력만으로 웹사이트가 자동으로 만들어지는 시대가 도래하였다.

1. 기존 웹사이트 제작 비용의 문제점:
   1. 프리랜서 플랫폼 '파이버'의 웹사이트 제작 비용:
      1. 기본 시작가는 464달러(약 45만 원)이다.
      2. 이 비용으로 페이지 하나짜리 랜딩 페이지만 제작 가능하다.
      3. 더 많은 페이지를 원할 경우 가격은 기하급수적으로 상승한다.
      4. 스탠더드 버전은 약 150만 원, 프리미엄 버전은 600만 원까지 상승한다.
   2. 개인 또는 소상공인의 웹사이트 제작 부담: 음식점이나 헤어샵 등 로컬 비즈니스 사장님들은 웹사이트 제작을 잘 몰라 50만 원, 100만 원, 200만 원을 주고 맡기는 경우가 많다.

1. AI 웹사이트 제작의 장점: 단순한 프롬프트 한 줄 입력으로 AI가 사용자의 요구를 이해하고 웹사이트를 자동으로 제작한다.

2. 랜딩 페이지의 이해 및 기존 제작 방식의 한계

1. 랜딩 페이지의 개념: 한 페이지로 이루어진 웹사이트에서 특정 내용을 소개하는 것을 랜딩 페이지라고 한다.
   1. 예시: AI 노코드 마스터 클래스커뮤니티 소개 웹사이트는 커뮤니티 구성, 멤버 수, 가격, 혜택 등을 한 페이지로 설명한다.
   2. 정보 전달을 위해 간단하게 제작된 경우에도 외주 제작 시 최소 수십만 원 이상의 비용이 발생한다.

1. 기존 코딩 툴의 한계:
   1. '커서'와 같은 바이브 코딩 툴을 활용하는 방법도 있다.
   2. 하지만 코드를 짜면서 웹사이트가 어떻게 만들어지는지 바로 확인하기 어렵다는 단점이 있어 초보자에게는 사용이 어렵다.

3. '레디 AI'를 활용한 웹사이트 제작 과정

3.1. '레디 AI'의 기본 기능 및 템플릿 활용

1. 다양한 템플릿 제공: '레디 AI'는 다양한 웹사이트 템플릿을 제공한다.
   1. 애니멀 쉘터 사이트 템플릿 예시:
      1. 미리 만들어진 웹사이트 포맷을 그대로 가져가서 사용할 수 있다.
      2. 강아지, 고양이 등 특정 동물만 볼 수 있는 필터링 기능이 탑재되어 있다.
      3. 블로그 기능도 포함되어 있어 구조된 동물들의 이야기를 공유할 수 있다.
      4. 이러한 템플릿은 멀티 페이지로 활용 가능하다.
   2. 비즈니스 웹사이트 템플릿 예시:
      1. 음식점이나 헤어샵 등 로컬 비즈니스에 필요한 웹사이트 템플릿을 제공한다.
      2. 메뉴 설정 기능이 포함되어 있으며, 기존 내용을 수정하여 쉽게 사용할 수 있다.

1. 템플릿 불만족 시 대안: 마음에 드는 템플릿이 없을 경우 직접 프롬프트를 입력하여 웹사이트를 생성할 수 있다.

3.2. 프롬프트 기반 웹사이트 생성 및 초기 결과 확인

1. 프롬프트 입력 공간: '레디 AI' 상단에 웹사이트 디자인 및 내용을 설명하는 프롬프트를 입력할 수 있는 공간이 있다.

1. 프롬프트 작성 예시: 자동화 솔루션에 관심 있는 사람들이 포트폴리오를 보고 컨설팅을 신청할 수 있는 포트폴리오 겸 컨설팅 웹사이트를 만들고자 한다.

1. 한글 프롬프트 지원: AI 기술 발전으로 이제는 한글로 설명하더라도 충분히 괜찮은 결과물을 얻을 수 있다.

1. 이미지 업로드 기능: 레이아웃 이미지를 업로드하면 AI가 그에 맞춰 웹사이트를 제작하여 결과물의 정확도를 높일 수 있다.

1. 웹사이트 생성 과정: 간단한 프롬프트 입력 후 엔터를 누르면 '레디 AI'가 자동화 컨설팅 랜딩 페이지를 생성하기 시작한다.
   1. '레디 AI'는 리액트 넥스트 JS를 사용하여 웹사이트를 구축하며, 이는 가장 현대적인 웹사이트 프레임워크이다.

1. 초기 웹사이트 결과물:
   1. 히어로 섹션: 가장 상단에 히어로 섹션이 보인다.
   2. 주요 기능 버튼: '무료 상담받기', '포트폴리오 보기' 버튼이 있다.
   3. 서비스 카드: 자동화 서비스에 대한 여섯 가지 카드(예: 대기업 HR 자동화, 금융사 리포트, 마케팅 데이터 분석, 병원 예약 시스템 등)가 제공된다.
   4. 포트폴리오 섹션: 포트폴리오 섹션이 생성되었으며, 실제 포트폴리오 내용으로 변경하거나 직접 업로드할 수 있다.
   5. 문의 양식 (Contact Form): 관심 있는 고객이 무료 상담을 신청할 수 있도록 문의 양식이 하단에 만들어져 있다.

1. 초기 결과물의 특징: 이 웹사이트는 단 세 줄의 프롬프트 입력만으로 생성되었으며, 이후 수정 및 개선이 필요하다.

3.3. 웹사이트 개선 및 동적 요소 추가

1. 개선 요청 사항:
   1. 포트폴리오마다 개별 페이지가 있었으면 좋겠다.
   2. 히어로 섹션의 버튼 클릭 시 이동 기능이 있었으면 좋겠다.
   3. 웹사이트 부분마다 애니메이션을 추가하여 활기를 더하고 싶다.

1. 개선된 두 번째 버전 확인:
   1. 애니메이션 추가: 히어로 이미지의 캐릭터가 깜빡거리는 애니메이션이 추가되었다.
   2. 스크롤 인디케이터: 하단에 스크롤 인디케이터가 추가되었다.
   3. 버튼 이동 기능: '무료 상담받기' 버튼 클릭 시 스크롤이 자동으로 내려가 고객이 정보를 입력할 수 있게 한다.
   4. '포트폴리오 보기' 버튼 클릭 시 포트폴리오 섹션으로 이동한다.
   5. 개별 포트폴리오 페이지 생성: '금융사 리포트 자동화 자세히 보기'를 클릭하면 해당 포트폴리오의 개별 페이지로 이동한다.
      1. 개별 페이지에서는 프로젝트에 대한 자세한 정보(기술 스택, 참여 인원, 소요 기간, 솔루션 등)와 스크린샷, 성과를 확인할 수 있다.
      2. 고객이 자동화에 관심이 생기면 무료 상담을 받을 수 있는 버튼도 추가되어 있다.

3.4. AI의 오류 자동 수정 기능 및 추가 개선

1. AI의 오류 자동 수정: '레디 AI'는 코드를 작성하다가 에러를 만나면 사용자가 설명하지 않아도 스스로 에러를 감지하고 수정한다.
   1. 예시: '스트링 컨스턴트 에러' 발생 시 "문자열 오류를 수정해 드리겠습니다"라고 하며 코드를 자동으로 수정한다.

1. 개선된 웹사이트의 동적 요소:
   1. 히어로 이미지 변화: 처음보다 훨씬 역동적으로 달라졌다.
   2. 텍스트 애니메이션: '비즈니스 자동화' 밑의 텍스트가 계속 바뀐다.
   3. 배경 애니메이션: 배경에 코드가 떠다니는 애니메이션이 추가되었다.
   4. 버튼 호버 이펙트: '무료 상담받기' 및 '포트폴리오 보기' 버튼에 호버 이펙트가 적용되었다.
   5. 버튼 이동 기능: 버튼 클릭 시 해당 섹션으로 이동하는 기능이 정상 작동한다.

3.5. 특정 요소 수정 및 고객 문의 데이터베이스 연동

1. 특정 요소 수정 기능 (셀렉터):
   1. 문제점: '데이터 자동화', '성과 모니터링' 카드에는 아이콘이 있지만 '워크플로우 최적화' 카드에는 아이콘이 없는 문제가 발생했다.
   2. 해결 방법: 우측 하단의 '셀렉터' 버튼을 눌러 웹사이트에서 원하는 부분(예: '워크플로우 최적화' 카드)을 선택한다.
   3. 선택 후 "해당 부분에 아이콘을 추가해 줘"라고 프롬프트를 입력하면, '레디 AI'는 다른 부분을 건드리지 않고 해당 부분만 수정하여 아이콘을 생성한다.

1. 고객 문의 데이터베이스 연동:
   1. 필요성: 웹사이트를 만들었을 때 고객 상담 신청 내용을 모아 놓는 데이터베이스가 필요하다.
   2. '레디 AI'의 자체 해결 기능: '레디 AI'에서 웹사이트를 만들면 데이터베이스 문제가 자체적으로 해결된다.
   3. 연동 방법:
      1. '셀렉터' 버튼을 누르고 문의 양식(이름, 이메일 등 입력 공간)을 클릭한다.
      2. '폼' 버튼이 생성되면 이를 클릭한다.
      3. '데이터 콜렉션' 기능을 통해 정보를 받을 데이터베이스를 생성한다.
      4. 데이터베이스 이름을 설정하고 저장한다 (예: 'AI 솔루션 상담 신청').
   4. 데이터 확인:
      1. 테스트로 문의 양식에 내용을 입력하고 '무료 상담 신청하기' 버튼을 클릭한다.
      2. 문의가 성공적으로 전송되면 우측 상단의 '폼' 버튼을 클릭하여 입력된 모든 값(신청자, 번호, 메시지, 이메일, 회사명, 예산 등)을 한 번에 확인할 수 있다.
      3. 이 기능을 통해 복잡한 데이터베이스 연결 없이도 고객 신청 내용을 직접 확인할 수 있다.

4. 웹사이트 퍼블리싱 및 '레디 AI' 활용 효과

4.1. 웹사이트 퍼블리싱 과정

1. 퍼블리싱 시작: 우측 상단의 '퍼블리시' 버튼을 클릭한다.

1. 도메인 주소 입력: 웹사이트에 적용할 주소를 입력한다. 이 도메인은 사용자가 직접 보유한 도메인이어야 한다.

1. DNS 설정:
   1. '넥스트'를 누르면 DNS 설정을 안내한다.
   2. 가이드에 따라 CNAME 레코드를 설정한다 (예: 솔루션.퍼블리시.레디.사이트).
   3. 설정이 어렵다면 '레디 AI'에서 제공하는 비디오 튜토리얼을 참고할 수 있다.

1. 퍼블리싱 완료:
   1. 레코드가 추가되고 잠시 기다린 후 새로고침하면 'Success' 메시지와 함께 '퍼블리시' 버튼이 활성화된다.
   2. 마지막으로 '퍼블리시' 버튼을 누르면 입력한 주소에 맞게 웹사이트가 성공적으로 퍼블리싱된다.

1. 퍼블리싱된 웹사이트 확인:
   1. 퍼블리싱된 웹사이트 주소(예: solution.successwiki.io)로 이동하여 웹사이트를 직접 확인할 수 있다.
   2. '무료 상담받기' 버튼 클릭 시 하단으로 이동하고, 고객이 정보를 입력하여 상담 신청 시 '레디 AI'에서 해당 데이터를 직접 확인할 수 있다.

4.2. '레디 AI' 활용의 시간 및 비용 효율성

1. 제작 시간 단축: 약 30분 정도 투자하여 고품질의 웹사이트를 만들 수 있다.
   1. 이는 단일 페이지가 아닌, 포트폴리오 클릭 시 새로운 페이지로 이동하는 멀티 페이지 웹사이트이다.
   2. 고객 상담 내용을 폼과 연동하여 직접 확인할 수 있는 기능까지 포함된다.

1. 크레딧 시스템 및 비용 절감:
   1. 영상 제작에 725 크레딧이 사용되었다.
   2. '레디 AI' 프로 버전은 한 달에 6,000 크레딧을 제공하며, 이는 위와 같은 웹사이트를 최소 6개 이상 만들 수 있는 양이다.
   3. 프롬프트를 세밀하게 사용하면 더 많은 웹사이트를 더 좋은 퀄리티로 만들 수 있다.

4.3. '레디 AI' 요금제 안내

1. 스타터 플랜: 간단한 체험을 원하는 사용자에게 적합하다.

1. 프로 버전: 웹사이트를 전문적으로 만들거나 웹사이트 서비스를 제공하려는 사용자에게 추천된다.

1. 요금제 할인: 현재 가격은 월간 결제 기준이며, 연간 결제 시 훨씬 할인된 가격으로 이용할 수 있다.

4.4. 결론 및 권장 사항

1. '레디 AI' 사용 권장: '레디 AI'를 사용하여 웹사이트를 직접 기획하고 디자인하며 최종 결과물까지 만들어 볼 것을 권장한다.

AI “딸깍” 으로 만드는 슈퍼자동화 시나리오! 클로드4+MCP 바로가기

AI "딸깍" 으로 만드는 슈퍼자동화 시나리오! 클로드4+MCP - 하나이프 블로그