HeoBrain - 프리미엄 지식 PDF 마켓플레이스 : 제가 만든 홈페이지 사이트입니다! 7일만에 퀄리티 높은 홈페이지를 만들었습니다! 저는 처음에 무료로 툴을 쓰느라 시간이 더 걸렸지만 정말 제가 추천하는 툴을 이용해서 만드신다면 훨씬 더 시간을 절약하실 수 있으실 겁니다!
여러분은 혹시 코딩 때문에 홈페이지를 만드는 것을 포기하신 적 있으신가요? 저도 코딩 실력이 부족해 4년 전부터 홈페이지를 정말 만들고 싶었지만 항상 미뤄왔습니다. 이제는 원하는 기능을 입력하면 AI 툴이 알아서 해결해주기 때문에 누구나 개인 홈페이지를 만들 수 있습니다. 하지만 많은 초보자들이 어디서부터 시작해야 할지, 어떤 플랫폼을 선택해야 할지, 또는 디자인 요소를 어떻게 조합해야 할지 고민합니다. 그래서 이 글에서 홈페이지 제작 과정부터 도메인 등록, 디자인까지 홈페이지 제작의 모든 단계를 쉽게 설명해보도록 하겠습니다.
1. 홈페이지, 왜 만드는 걸까요?
직히 처음엔 외부 플랫폼에서 제 콘텐츠를 팔려고 했어요.
크몽이나 아이디어스 같은 데서 PDF 팔면 되지 않나 싶었거든요. 근데 수수료가 진짜 아깝더라고요. 10,000원짜리 팔면 20% 정도의 수수료를 가져갑니다. 그래서 개인 홈페이지를 구축하여서 결제 연동 시스템을 통해 수수료를 절감했습니다.
게다가 유튜브, 인스타, 티스토리 다 운영하는데 홈페이지를 통해 한 곳에 링크를 모으고 싶었습니다.
또한 저는 과거에 KAIST 인턴을 하면서 뇌공학 분야로 대학원을 진학하려고 했으나 AI 툴도 소개하는 1인 크리에이터가 되고 싶은 마음도 있었습니다. 그래서 저는 ‘HeoBrain Marketplace’라는 AI와 뇌과학 콘텐츠 홈페이지를 만들었는데, 이젠 누구나 나만의 공간에서 콘텐츠를 판매하고 소통할 수 있는 첫 발걸음을 내딛을 수 있었습니다!
웹빌더? CMS? 자체 개발? 무엇이 좋을까?
1. 웹빌더 (Wix, 아이웹 등)
장점: 진짜 쉽습니다. 드래그 앤 드롭으로 쉽게 홈페이지를 만들 수 있습니다.
단점: 템플릿의 한계가 있고, 월 구독료가 나갑니다. 그리고 커스터마이징에 제약이 있습니다.
2. CMS (워드프레스)
장점: 플러그인 많고 확장성 좋습니다.
단점: 설정 복잡하고, 호스팅비 따로 나갑니다. 처음 쓰는 사람은 2주는 학습하는데 시간이 걸립니다.
3. 자체 개발
장점: 내 맘대로 원하는 기능 및 디자인을 다 만들 수 있습니다.
단점: 과거에는 개발자 아니면 불가능했는데, 좋은 AI 툴들이 많이 나오면서 초보자들도 쉽게 만들 수 있게 되었습니다.
저는 3번을 선택했어요.
자체 개발은 개발자가 처음부터 코딩하여 홈페이지를 제작하는 방식입니다. 이 방법은 더 많은 컨트롤과 자유를 제공하지만, 개발 지식과 시간이 요구되며 초기 비용이 높을 수 있습니다. 하지만 저는 바이브코딩으로 정말 쉽게 코드를 입력하지 않고, 아무런 개발 지식을 가지지 않았지만 퀄리티 있는 홈페이지를 7일 만에 완성할 수 있었습니다!
2. 🧩 홈페이지 제작 4단계 프로세스
🥇 1단계: 기획 : AI와 함께 아이디어 구체화하기
홈페이지를 만들 때 가장 중요한 건 기획이에요. ‘무엇을 담을지’, ‘어떤 기능이 필요할지’ 명확하게 해야 하죠. 저는 Claude, ChatGPT 같은 AI 모델에게 요구사항을 설명하고, 시스템 구조 설계부터 ERD, API 명세서, UI 와이어프레임까지 AI가 도와줬어요. 덕분에 기획 완성도가 훨씬 높아졌습니다.
➡️ AI에게 요구사항만 말하면 전체 시스템 설계도가 완성됩니다.
🎨 2단계: 디자인 – 프로트엔드 UI
디자인도 AI 덕분에 훨씬 수월했어요. Vercel의 v0.dev에 제가 작성한 프롬프트를 넣으면 쉽게 디자인과 기능을 만들어줍니다! 덕분에 figma을 통해 직접 디자인을 만드는 시간을 대폭 줄일 수 있었답니다. 무료로 어느정도 홈페이지 디자인을 완성을 진행할 수 있으니 추천드립니다! 써보고 괜찮으시면 유료로 결제하시는 걸 추천드립니다!
➡️ 클릭 몇 번으로 프로페셔널한 홈페이지 디자인 완성 가능합니다!
💻 3단계: 개발 - Cursor AI와 함께 코딩 속도 10배 UP
코딩은 Cursor AI를 썼어요. 실시간으로 코드를 생성하고 에러를 자동으로 수정해주니까 개발 속도가 10배나 빨라졌습니다. 덕분에 프로덕션 레벨의 코드 15,000줄 이상을 빠르게 완성할 수 있었습니다!
➡️ 95% 이상의 코드 생성에 AI가 기여했습니다!
🌐 4단계: 배포 및 확장
완성된 홈페이지는 Vercel을 이용해 바로 배포했어요. 별도의 복잡한 과정 없이도 클릭 몇 번으로 내 사이트가 전 세계에 공개되는 경험, 정말 짜릿하더라고요. 도메인은 가비아, 카페24 등 사이트에서 구매해서 사용할 수 있습니다!
➡️ 콘텐츠가 곧 수익 모델이 되는 구조를 완성했습니다!
💰 수익 모델
- 직접 판매형: PDF, 동영상 콘텐츠 직접 판매
- 플랫폼 연동형: YouTube · Tistory · Instagram과 자동 연결
➡️ 수수료 절감 + 확장성 확보 + 즉시 수익 가능
5. 정리하며: AI 도구 활용이 만드는 새로운 가능성
개발 지식이 없는 초보자인 저는 이렇게 AI 도구를 적극 활용해 홈페이지를 빠르고 완성도 높게 만들었어요. 이제는 코딩이나 디자인이 어렵게 느껴지는 분들도 AI의 도움을 받으면 충분히 나만의 홈페이지를 만들 수 있는 시대입니다.
🔑 하고 싶은 메시지
AI는 인간을 대체하지 않습니다.
대신 AI를 잘 활용하는 사람에게 대체됩니다.
여러분들도 여러분이 만들고 싶은 홈페이지를 AI툴을 이용해 쉽게 제작해봐요! 이제는 아이디어가 중요한 시대이므로 AI를 이용해 빠르게 여러분의 창의적 결과물을 만드는 것이 중요하다고 생각합니다!
'ai' 카테고리의 다른 글
| AI 기반 웹브라우저 : Perplexity Comet 기능 총 정리 (0) | 2025.10.16 |
|---|---|
| 5년 넘게 쓴 나만 알고 싶은 디지털 디톡스 앱 10종 추천(feat.스마트폰 중독에서 벗어나고 싶다면? StayFree, BlockerX, BlockP...) (0) | 2025.10.16 |
| AI PPT 제작 도구 3대장 완전 비교: Skywork vs Genspark vs Gamma (0) | 2025.10.15 |
| Pc to Pc 프로그램 전송 소프트웨어 : EaseUS Todo PCTrans, 방법, 기타 (0) | 2025.04.07 |
| 윈도우에서 삼성노트 사용하는 법 초간단!! (1) | 2025.02.27 |
