웹사이트를 하나 만들고 싶다고 하면 보통 이런 생각부터 합니다.
“코딩을 배워야 하나?”
“HTML부터 공부해야 하나?”
“디자인은 어떻게 하지?”
그런데 이번에 KINGKONG.nz를 만들면서 저는 순서를 완전히 반대로 해봤습니다.
코딩부터 시작하지 않았습니다.
먼저 ChatGPT에게 제가 원하는 것을 말했습니다.
1. 처음부터 완벽하게 설명하지 않았습니다
처음에는 이 정도면 충분했습니다.
“AI로 직접 만들어보고, 써보고, 괜찮으면 판매하는 사이트를 만들고 싶어.”
여기서 시작했습니다.
ChatGPT와 이야기하면서 사이트의 역할을 하나씩 정했습니다.
무엇을 첫 화면에 보여줄지,
Blog와 Shop을 어떻게 나눌지,
우리가 만든 프로젝트를 어디에 보여줄지 정리했습니다.
처음부터 완벽한 기획서를 만들 필요는 없었습니다.
대화하면서 구체화했습니다.
2. 말로 화면을 설계했습니다
다음은 화면이었습니다.
“진한 네이비로 하자.”
“모바일에서도 멋있어야 해.”
“메인에는 우리가 뭘 하는지 바로 보여줘.”
“카드가 너무 많아.”
이런 식이었습니다.
전문적인 UI 용어를 전부 알아야 하는 것도 아니었습니다.
화면을 보고 이상하면 그냥 말하면 됩니다.
“이건 너무 커.”
“여기가 비어 보여.”
“이건 좀 촌스러워.”
그 말을 다시 실제 수정 작업으로 바꿔갔습니다.
3. ChatGPT와 Cursor의 역할을 나눴습니다
이번 작업에서 저는 두 AI를 같은 방식으로 사용하지 않았습니다.
ChatGPT와는 주로 생각하고 설계했습니다.
사이트 구조, 문구, 콘텐츠, 화면 구성과 수정 방향을 정했습니다.
실제 코드를 수정하고 실행하는 작업은 Cursor에서 진행했습니다.
쉽게 말하면,
ChatGPT와 설계하고 → Cursor에서 만들고 → 브라우저에서 확인했습니다.
그리고 마음에 들지 않으면 다시 돌아왔습니다.
4. 화면을 보면서 계속 고쳤습니다
여기가 중요했습니다.
AI에게 한 번 명령하고 끝내지 않았습니다.
실제 브라우저에서 사이트를 열어봤습니다.
메인 이미지가 잘리면 다시 고쳤고,
카드가 너무 많으면 줄였고,
글자가 흐리면 밝게 했고,
빈 공간이 많으면 간격을 조절했습니다.
KINGKONG.nz의 첫 화면도 여러 번 바뀌었습니다.
결국 웹사이트를 만드는 가장 쉬운 방법은 완벽한 프롬프트 하나를 찾는 것이 아니었습니다.
만들기 → 보기 → 고치기
이걸 빠르게 반복하는 것이었습니다.
5. 가장 간단한 공식
제가 이번 작업에서 사용한 방법을 다섯 단계로 줄이면 이렇습니다.
- 원하는 것을 말한다
무슨 사이트를 만들고 싶은지 설명합니다. - ChatGPT와 구조를 잡는다
메뉴, 페이지, 콘텐츠와 화면 구성을 정합니다. - 개발 AI에게 구현시킨다
정리된 작업 지시를 Cursor 같은 도구에 전달합니다. - 실제 화면을 본다
PC와 모바일에서 직접 확인합니다. - 마음에 안 들면 다시 말한다
그리고 수정합니다.
끝입니다.
코딩을 몰라도 모든 것이 해결되는 것은 아닙니다
물론 AI가 있다고 해서 서버, 도메인, SSL, 배포 같은 문제가 사라지는 것은 아닙니다.
실제로 사이트를 운영하려면 예상하지 못한 문제도 생깁니다.
AI가 틀린 답을 줄 때도 있습니다.
그래서 중요한 것은 AI에게 모든 것을 맡기는 것이 아니라 결과를 직접 확인하는 것입니다.
모르면 물어보고,
확인하고,
실행하고,
다시 확인합니다.
그리고 지금 보고 있는 사이트가 결과물입니다
KINGKONG.nz도 그렇게 만들었습니다.
완벽한 설계도를 먼저 그리고 시작한 사이트가 아닙니다.
대화하면서 만들고,
실제로 화면을 보고,
마음에 들지 않으면 다시 고쳤습니다.
그래서 제가 생각하는 ChatGPT로 웹사이트 만드는 가장 간단한 방법은 이것입니다.
코딩부터 시작하지 마세요.
먼저 만들고 싶은 것을 말하세요.
그리고 AI와 함께 하나씩 화면으로 옮겨보세요.
말하기 → 만들기 → 보기 → 고치기.
그렇게 웹사이트 하나가 실제로 만들어지기 시작합니다.
KINGKONG.nz
AI로 만들고, 써보고, 팝니다.