Build $10,000 Websites using ChatGPT (Ultimate Guide)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

ChatGPT의 Codex와 전용 스킬을 중심으로 고객 조사, 스크롤 영상 제작, 품질 개선, 배포를 연결하면 영상에서 말하는 ‘1만 달러급’ 웹사이트를 만드는 과정을 단계적으로 따라갈 수 있다.

📌 핵심 요점

1. 제작의 중심은 Codex와 무료 10K Websites 스킬이다. 스킬은 사업 질문, 고객 조사, 장면 제안, 코드 작성, 브라우저 점검, 배포까지 이어지는 작업 절차를 제공한다.
2. 고급스러운 인상은 영상 하나로 완성되지 않는다. 영상은 관점, 타이포그래피, 색상, 시각적 위계, 이미지, 움직임, 모바일 대응, 세부 완성도라는 여덟 기준을 제시한다.
3. 오프닝은 스크롤에 따라 펼쳐지는 짧은 이야기로 설계한다. 고객 조사와 장면 구성을 먼저 확정하고, 시작·핵심 사건·마지막 장면의 이미지를 만든 뒤 OpenArt로 영상을 제작한다.
4. 예산은 제작 수준과 재작업 범위에 따라 달라진다. Full Throttle, Studio, Focused Budget 중 하나를 선택하며, 영상 생성 전에 구성과 예상 비용을 검토중요하다.
5. 초안 이후의 검토가 결과를 좌우한다. 시연에서는 자체 평가가 80점 만점에 63점에서 69점으로 개선됐으며, 모바일 확인과 임시 주소 배포, Lighthouse 점검을 거쳐 개인 도메인을 연결한다.

🧩 배경과 문제 정의

영상은 스크롤할 때 짧은 이야기가 펼쳐지는 브랜드 웹사이트를 사례로 보여 주며, ChatGPT로 고급스러운 사이트를 제작하고 공개하는 과정을 설명한다. 일반적인 AI 웹사이트가 비슷한 글꼴·배치·색상을 반복한다는 문제의식에서 출발해, 제작자가 만든 무료 스킬로 조사와 디자인 판단, 생성 작업과 검수를 연결한다.

시연 대상은 Holden Audio의 헤드폰 제품 Holden Arc다. 사용자는 사업 정보와 참고 이미지, 제품 사진을 제공하고 제작 수준과 장면을 선택한다. Codex가 사이트를 만들고, OpenArt가 이미지와 영상을 생성하며, Hostinger를 통해 배포와 도메인 연결을 진행하는 구성이 제시된다.

🕒 시간순 섹션별 상세정리

1. 스크롤로 이야기를 전하는 웹사이트와 전체 제작 흐름

• 헤드폰을 집어 도시로 나가는 장면, 식당 안으로 들어가는 카메라, 초콜릿 조형물과 숨은 정원 등 스크롤에 따라 이야기가 전개되는 사례를 보여준다. [00:43]
• 무료 스킬이 사업 질문, 고객 조사, 오프닝 제안, 제작과 브라우저 테스트, 오류 수정과 공개까지 안내한다고 보여준다. [01:17]
• 전체 과정은 환경과 스킬 설정, 사업 정보 입력과 아이디어 선택, 움직이는 오프닝 제작, 체크리스트 평가와 개선, 개인 도메인 공개의 다섯 단계다. [01:49]

2. 고급스러운 웹사이트를 판단하는 여덟 기준

• 분명한 개성, 의도적인 타이포그래피, 절제된 색상, 시선의 우선순위를 만드는 위계를 제시한다. [02:22]
• 맞춤 이미지, 방해하지 않는 부드러운 움직임, 모바일 대응, 빠르고 완성된 느낌을 주는 세부 마감이 나머지 기준이다. [02:38]
• 스킬이 여덟 항목을 점검하고 점수를 매기며, 초안과 개선 이후를 같은 체크리스트로 비교한다고 보여준다. [02:53]

3. 데스크톱 앱과 Codex 프로젝트 설정

• 영상에서는 컴퓨터 파일을 다루기 위해 ChatGPT 데스크톱 앱을 사용한다. 화면이나 명칭은 업데이트로 바뀔 수 있지만 전체 흐름은 유지된다고 안내한다. [03:33]
• 촬영 당시 설명으로는 Codex 사용에 유료 요금제가 필요하며, Plus는 월 20달러, 발표자가 쓰는 Pro는 월 100달러로 묶인다. [04:08]
• Codex에서 웹사이트 폴더를 프로젝트로 선택하고 사용 가능한 상위 모델과 높은 작업 강도를 설정한다. 사용 한도에 도달하면 같은 대화에서 이어서 진행하라고 안내한다. [05:04]

4. 무료 스킬 설치와 실행 도구 확인

• 스킬은 작업 전에 읽는 전문 지침으로 드러난다. 제작자는 일반적인 AI 사이트의 반복적인 디자인을 개선하기 위해 만든 10K Websites 스킬을 보여준다. [05:27]
• GitHub에서 ZIP 파일을 내려받아 대화에 첨부하고 설치를 요청한 뒤, 프로젝트의 새 대화에서 해당 스킬을 선택해 실행한다. [06:43]
• 스킬이 필요한 도구를 확인하며 권한 설정에 따라 설치를 진행하거나 승인을 요청한다. Node.js와 FFmpeg는 사이트 미리보기와 영상 준비를 돕는 도구로 드러난다. [07:21]

5. OpenArt 가입과 크레딧 및 계정 연결

• 이미지와 오프닝 영상을 만들기 위해 OpenArt를 사용한다. 영상에서는 OpenArt의 별도 크레딧을 이용하면 ChatGPT 사용 한도를 아낄 수 있다고 보여준다. [07:59]
• 무료 계정의 40크레딧은 이번 오프닝 제작에 부족하다고 보여준다. 발표자는 추가 충전이 가능한 Plus를 선택하고, Starter는 추가 충전이 불가능하다는 조건을 안내한다. [08:56]
• 가입과 구독 후 ChatGPT의 계정 접근을 허용한다. 연결 완료 화면에서는 12,000크레딧 잔액을 확인하며, 접근 권한은 OpenArt 설정에서 해제할 수 있다고 보여준다. [10:15]

6. 사업 정보와 디자인 참고 자료 입력

• Holden Audio의 Holden Arc를 사례로 제품명, 블루투스와 케이블 옵션, 목재 장식, 검은색 대안, 249달러 가격을 입력한다. [10:44]
• 자체 사업용인지 고객 납품용인지 선택한다. 고객용에는 미리보기 링크와 인계 자료를 제공한다고 설명하며, 원하는 분위기와 참고 디자인을 받는다. [11:31]
• 여러 각도에서 찍은 제품 사진을 제공한다. 휴대전화 사진도 가능하며, OpenArt로 자동 전달되지 않으면 별도 업로더를 사용하도록 안내한다. [12:05]

7. 예산에 맞는 제작 수준 선택

• Full Throttle은 각 단계에 강한 모델을 사용하고 여러 시안을 탐색하며, 필요하면 휴대전화용 영상을 따로 만든다. 가장 높은 비용의 선택지로 묶인다. [12:23]
• Studio는 디자인 결정과 구현에 서로 다른 모델 수준을 배치하고, Focused Budget은 정해진 금액 안에서 탐색과 재작업 여지를 줄이는 방식이다. [12:42]
• 발표자는 Full Throttle을 선택한다. Plus 이용자에게는 Studio로 시작하고, 고정 예산이 있으면 Focused Budget과 금액을 지정하라고 권한다. [12:56]

8. 고객 조사와 이야기 구성 및 비용 검토

• 디자인 전에 리뷰와 포럼을 조사해 고객이 사용하는 표현으로 문구를 작성한다. 시연에서는 유사 헤드폰에 관한 Reddit 대화를 참고한다. [13:09]
• 시작, 큰 사건, 마지막 장면으로 구성된 오프닝 세 가지를 제안한다. 선택한 이야기를 스크롤별 장면과 문구로 정리하며, 이 단계의 변경은 크레딧을 쓰지 않는다고 보여준다. [13:50]
• 생성과 재작업을 고려한 예상 비용과 잔액을 제시한다. 예산을 줄이려면 추가 시안을 생략하거나 모바일 영상을 기존 영상의 크롭으로 대체하고, 장면을 단순화할 수 있다. [14:09]

9. 히어로 이미지와 초기 화면 미리보기

• 스크롤에 반응하는 페이지 상단을 시작·핵심 사건·마지막 장면의 세 이미지로 설계한다. Full Throttle에서는 마지막 장면의 여러 분위기를 먼저 제안한다. [14:30]
• 방문자가 스크롤을 멈췄을 때 보는 마지막 장면부터 만들고, 세 이미지가 서로 다른 구도이면서 같은 대상을 유지하는지 점검한다. [14:42]
• 영상 생성 전에 이미지 위로 움직이는 제목, 아래쪽 섹션과 휴대전화 화면을 포함한 초기 미리보기를 승인한다. [14:55]

10. 생성 영상 검토와 구체적인 수정 요청

• 생성한 영상은 프레임 단위와 여러 재생 속도로 검토할 수 있다. 시연에서는 인물이 헤드폰을 집어 착용하고 도시로 나가는 장면을 확인한다. [15:18]
• 움직임과 장면의 일관성을 보고 승인하거나 재생성을 요청한다. 수정할 때는 특정 시점에 부품이 갑자기 나타나는 식으로 발생 시각과 문제를 정확히 설명하라고 권한다. [15:50]

11. 사이트 초안 제작과 첫 품질 평가

• 영상 승인 뒤 전체 사이트를 만들고 Chrome에서 스크롤하며 가독성과 오류를 확인한다. 폼과 버튼은 실제 이메일, 상점 또는 예약 페이지로 연결할 수 있지만 시연에서는 데모를 선택한다. [16:18]
• 초안에는 움직이는 제목, 제품 마감 전환, 고정 열을 활용한 설명, FAQ와 결제 미리보기, 브라우저 아이콘과 공유 이미지가 포함된다. 발표자는 제목 움직임의 떨림을 발견한다. [17:12]
• 자체 점수는 80점 만점에 63점이며 위계가 약점으로 지적된다. 여러 수정 사항을 한 메시지로 모아 요청하고, 예산을 넘는 새 이미지가 필요하면 먼저 묻는다고 보여준다. [17:43]

12. 수정 결과와 모바일 구성 확인

• 수정 후 점수는 69점으로 오른다. 제목 움직임과 시각적 위계가 개선되고 검은색 제품 이미지도 다시 확인한다. [18:18]
• 모바일은 기존 영상의 세로 크롭을 쓰거나 별도 세로 영상을 제작하며, 제목 움직임도 따로 구성한다. 브라우저 개발자 도구에서 기기 화면을 바꿔 미리보는 방법을 보여 준다. [19:27]
• 결과를 승인한 뒤 다른 제품이나 색상의 페이지, 두 번째 언어를 추가할 수 있다고 보여준다. 시연에서는 한 페이지 사이트로 마무리한다. [19:53]

13. 호스팅 선택과 배포 준비

• 인터넷 공개에는 호스팅과 도메인이 필요하다. Hostinger는 첫해 도메인·이메일 제공과 ChatGPT 연결 기능을 이유로 소개되며, 할인 링크도 안내된다. [20:38]
• Hostinger 계정을 연결한 뒤 Premium 요금제를 추천받는다. 영상에서는 최대 세 사이트와 도메인·사업용 이메일을 포함하며, 무료 도메인과 추가 할인은 12개월 이상에 적용된다고 보여준다. [21:56]
• 결제를 마친 뒤 별도 온보딩을 종료하고 ChatGPT에 호스팅 준비가 끝났다고 알려 업로드 절차를 이어 간다. [22:27]

14. 임시 주소 공개와 실제 사이트 검사

• 개인 도메인을 고르기 전에 무료 임시 Hostinger 주소로 사이트를 공개하고, 발급된 링크에서 실제 접속을 확인한다. [23:00]
• 데스크톱과 휴대전화에서 공개된 사이트를 확인한다. Lighthouse로 속도, 접근성, 권장사항, 검색 항목을 점검하며 모바일 성능은 98%로 묶인다. [23:26]

15. 개인 도메인 연결과 공개 이후 유지보수

• Hostinger에서 도메인을 등록하거나 기존 도메인을 연결한다. 등록 후 14일 안에 이메일 인증이 필요하고, 새 도메인이 작동하기까지 수 시간에서 최대 이틀이 걸릴 수 있다고 안내한다. [24:11]
• 연결한 도메인을 ChatGPT에 알리면 새 주소에 맞춰 사이트를 갱신한다. 같은 프로젝트 폴더에서 스킬을 다시 선택해 수정할 수 있으며, 제목 변경이 공개 사이트에 반영되는 예를 보여 준다. [24:42]
• 문의 폼을 실제 수신함에 연결하면 메시지를 호스팅에 저장하고 이메일 알림과 비공개 수신 페이지를 제공한다고 보여준다. 마지막에는 호스팅 할인과 첫해 도메인·이메일 혜택을 다시 안내하며 마친다. [25:08]

🧾 결론

• 이 영상의 핵심은 사업 정보와 제품 사진을 입력하고, 제안된 방향을 선택하며, 결과를 검토하는 제작 흐름이다. 사용자는 기획 승인과 품질 판단에 계속 참여한다.
• 생성 전에 이야기와 화면 문구를 수정하면 영상 제작 크레딧을 쓰기 전 방향을 바로잡을 수 있다. 생성 이후에는 문제의 위치와 발생 시점을 구체적으로 전달하는 방식이 제시된다.
• 완성의 기준에는 화면 디자인뿐 아니라 모바일 구성, 버튼과 문의 경로, 실제 배포 상태, 도메인 연결이 포함된다. 시연에서는 구매·예약 기능을 기존 페이지로 연결할 수 있다고 설명하며, 실제 연결 대신 데모를 선택했다.
• ‘1만 달러급’은 영상이 제시하는 디자인 수준의 표현이다. 실제 판매 가격, 고객 계약, 매출 또는 전환 성과를 입증하는 자료는 제공되지 않는다.

📈 투자·시사 포인트

• 웹 제작 서비스의 제공 범위가 코드 작성에서 고객 조사, 시각 기획, 생성형 영상, 배포와 수정까지 확장되는 사례다. 제작자는 결과를 선택하고 검수하는 역량을 함께 갖춰야 한다.
• 무료 스킬과 유료 실행 비용을 구분해야 한다. 영상의 흐름에는 ChatGPT 구독, OpenArt 크레딧, 호스팅과 도메인 조건이 포함되지만 전체 제작비 합계는 제시되지 않는다.
• 제작 수준을 나누고 모바일 영상을 별도로 만들지 결정하는 구조는 예산에 따른 납품 범위 설계에 참고할 수 있다. 다만 영상에는 수준별 결과와 비용을 비교한 실측 자료가 없다.
• Hostinger는 연결 기능과 할인 혜택을 중심으로 소개된다. 다른 호스팅과의 비교 자료나 갱신 비용을 확인해야 서비스 선택의 경제성을 판단할 수 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 요금제, Codex 포함 여부, 모델 이름, 화면 구성은 영상 촬영 당시의 설명이다. 영상도 서비스 변화 가능성을 언급하므로 현재 이용 조건으로 단정할 수 없다.
• ‘1만 달러급’이라는 표현과 여덟 항목의 자체 점수는 시장 가격이나 사업 성과를 검증한 지표가 아니다. 점수 산정 방식과 독립적인 평가 결과도 제시되지 않는다.
• OpenArt의 최종 사용 크레딧, 실패와 재생성 횟수, 전체 작업 시간은 공개되지 않는다. 제품 외형을 그대로 유지한다는 설명 역시 별도 검증 자료가 없다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사업명, 제품 특징, 가격, 옵션, 원하는 분위기, 참고 디자인과 여러 각도의 제품 사진을 준비한다.
• 현재 ChatGPT의 Codex 이용 조건과 OpenArt의 크레딧·추가 충전 조건을 확인하고 제작 예산을 정한다.
• 무료 스킬을 설치한 뒤 필요한 도구와 외부 계정 연결 요청의 내용을 확인한다.
• 영상 생성 전에 스크롤별 장면, 화면 문구, 마지막 이미지와 재작업을 포함한 예상 비용을 검토한다.

❓ 열린 질문

• 구독료, 영상 생성과 재작업, 호스팅을 합친 실제 총비용과 제작 시간은 어느 정도인가?
• Full Throttle, Studio, Focused Budget 사이의 품질 차이는 실제 고객 평가에서도 뚜렷한가?
• 스크롤 영상과 움직이는 제목이 구매·문의 전환에 어떤 영향을 주는가?