← 갤러리로 돌아가기

🧭 AI 홈페이지 제작 스택 추천기

8가지 질문에 답하면 노코드·Next.js 중 어떤 쪽이 맞는지, 어디에 배포하면 좋을지, Claude Code에 바로 붙여넣을 시작 프롬프트까지 나와요
💡 아래 질문에 하나씩 답하면서 진행해보세요. 마지막에 나오는 추천 결과와 시작 프롬프트는 owncharm lecter 강의용 진단 로직을 그대로 반영한 것으로, 실제 프로젝트를 시작하기 전 방향을 잡는 데 참고하시면 돼요.

📝 진단 설문

1 / 8
1. 이 사이트로 뭘 하려고 하나요?
포트폴리오 / 소개(움직이는 기능 없음)
정보제공형(회사소개, 서비스안내)
예약 / 상담 접수
온라인 판매 · 결제
2. 방문자가 회원가입하거나 로그인해야 하나요?
로그인이 필요하면 회원정보 저장(DB)도 자동으로 필요해져요.
필요없음
필요함(소셜로그인 포함)
⚠ 로그인이 필요하면 4번 질문(DB 저장)이 자동으로 "있음"으로 설정돼요.
3. 결제(유료 상품 · 서비스 판매)가 필요한가요?
아니오
예
4. DB에 저장해야 할 정보가 있나요?
예약내역, 회원정보, 신청내역 등
없음
있음
5. 메일이나 알림을 자동으로 보내야 하나요?
예약확인메일, 리마인더 등
아니오
예
6. 이 사이트로 수익을 낼 예정인가요, 개인용 · 연습용인가요?
비상업(개인 · 연습 · 포트폴리오)
상업(제품 · 서비스 판매 · 광고 포함)
7-1. 예상 방문자 규모는 어느 정도인가요?
하루 수십 명 이하
수백 ~ 수천 명
그 이상
7-2. 이미지 · 영상 용량은 어느 정도인가요?
가벼움(사진 위주)
무거움(영상 다수 포함)
8. 완성 후 직접 텍스트 · 이미지를 수정하고 싶으신가요, 전문가에게 계속 맡기고 싶으신가요?
직접 수정하고 싶음(비개발자)
전문가에게 계속 의뢰해도 괜찮음 / 직접 코드를 만질 수 있음
9. (동적 사이트 확정) DB · 메일 서비스로 뭘 쓰실 예정인가요?
기술적으로 낯선 질문이면 "잘 모르겠어요"를 골라도 괜찮아요 — 안전한 쪽으로 추천해드려요.
일반 PostgreSQL/MySQL, Nodemailer 등(TCP 기반)
Upstash Redis, Resend, Supabase(HTTP 클라이언트) 등(HTTP 기반)
잘 모르겠어요

✅ 추천 결과

🧭
-
-

🚀 Claude Code에 붙여넣을 시작 프롬프트

위 진단 결과와 입력한 답변을 반영해서 자동으로 채워진 프롬프트예요. 그대로 복사해서 Claude Code(또는 다른 AI 코딩 도구)에 붙여넣으면 프로젝트 초기 세팅부터 시작할 수 있어요.


  

  





  
🗺️ 참고: 프레임워크 · 배포처 지형도

  
Next.js가 강의 표준이지만, 유일한 선택지는 아니에요. 언어 생태계마다 성격이 다른 프레임워크가 있고, 결과물 성격(정적이냐 동적이냐)에 따라 어울리는 배포처가 갈려요.

  

  

    
프레임워크기반성격자연스러운 배포처

    
Next.jsReact가장 대중적인 풀스택 프레임워크, Vercel이 직접 만듦Vercel(네이티브), Cloudflare(어댑터 필요)

    
React Router v7React구 Remix 역할을 이어받음(Remix는 신규 프로젝트에 비추천)Cloudflare, Vercel, Netlify, Fly.io

    
NuxtVueVue 진영의 Next.js 격Vercel, Netlify, Cloudflare(공식 어댑터)

    
SvelteKitSvelte어댑터 구조라 배포처를 거의 안 가림사실상 다 됨(전부 공식 어댑터)

    
Astro프레임워크 무관기본이 정적, 필요한 부분만 동적으로(아일랜드 아키텍처)거의 모든 곳(상업이면 GitHub Pages 제외)

    
순수 HTML/CSS/JS—가장 단순, 빌드 과정 없음Cloudflare Pages/Netlify(상업 가능), GitHub Pages는 비상업만

    
WordPressPHP가장 널리 쓰이는 CMS, 플러그인 생태계 방대카페24/가비아 등 전통 호스팅, WP Engine

    
DjangoPython"배터리 포함" 풀스택, 완전 커스텀 백엔드에 강점Render, Railway, Fly.io

    
FastAPIPython비동기 지원, AI·데이터 API 서빙에 인기Render, Railway, Fly.io, Vercel(서버리스)

    
FlaskPython마이크로프레임워크, 최소구성 + 필요한 것만 추가Render, Railway, Fly.io, PythonAnywhere

  

  

  
⚠ GitHub Pages는 상업적 이용이 공식적으로 금지돼 있어요(GitHub 공식 문서 명시) — 상업용 사이트에는 추천하지 않아요. 완전 비상업(개인 · 연습용) 프로젝트에만 후보로 고려하세요.






  
💬 한 줄 정리

  

    홈페이지를 만들 때 가장 먼저 정해야 할 건 "노코드로 갈지, AI 코딩으로 갈지"이고, 그다음은 "정적 사이트로 충분한지, 로그인 · 결제 · DB가 필요한 동적 사이트인지"예요. 이 두 갈림길만 순서대로 짚으면 배포처(Vercel · Cloudflare · 노코드 플랫폼)는 자연스럽게 정해집니다. 직접 수정하고 싶은 비개발자라면 노코드가 정답이고, 로그인 · 결제 · DB · 자동 메일 중 하나라도 필요하면 Next.js 같은 풀스택 프레임워크로 넘어가야 해요. 이 페이지의 진단 로직은 조건을 표처럼 병렬로 비교하지 않고 정해진 순서(우선순위 트리)로 하나씩 확인하도록 설계돼 있어서, "상업이니까 A, 그런데 DB가 필요하니까 B"처럼 결론이 꼬이는 일이 없어요.
  






  
🧾 이 페이지, 이런 프롬프트로 만들었어요

  
아래 프롬프트를 복사해서 Claude·ChatGPT(GPT)·Gemini 어디에든 붙여넣고 직접 시도해보세요. 참고로 이건 예시 없이 지시만 담은 제로샷(zero-shot) 프롬프트예요 — 원하는 결과물의 예시를 1개 넣으면 원샷(one-shot), 여러 개 넣으면 퓨샷(few-shot) 프롬프팅이 되는데, 예시를 더할수록 결과가 원하는 스타일에 더 가까워지는 경우가 많아요.

  

    
홈페이지 제작 스택(노코드 vs AI코딩, 배포처)을 추천해주는 인터랙티브 진단 설문 웹페이지를 만들어줘.

- 8개 질문(사이트 목적, 로그인 필요 여부, 결제 필요 여부, DB 저장 필요 여부, 메일/알림 자동화 필요 여부, 상업/비상업 여부, 예상 방문자 규모, 미디어 용량, 직접수정 vs 전문가의뢰)을 한 번에 하나씩 보여주는 단계별 설문 형태로 만들어줘. 진행률 바도 같이 보여줘.
- "로그인이 필요함"을 선택하면 "DB 저장이 필요함"이 자동으로 선택된 것으로 처리하고, 그 사실을 사용자에게 안내해줘.
- 모든 질문에 답하면, 아래 우선순위 순서대로 로직을 적용해서 결과를 계산해줘:
  1) "전문가에게 의뢰해도 괜찮음"이 아니라 "직접 수정하고 싶음(비개발자)"을 선택했으면 → 노코드 플랫폼(아임웹/카페24) 추천, 종료
  2) 그렇지 않고 DB 저장 또는 메일 자동화 중 하나라도 필요하면 → Next.js 풀스택(동적 사이트)으로 확정하고, DB/메일 도구가 TCP 기반인지 HTTP 기반인지 추가로 물어봐서 Vercel 또는 Cloudflare Workers를 추천
  3) 둘 다 필요없으면(정적 사이트) → 상업 목적이면 Cloudflare Pages, 비상업이면 Cloudflare Pages/Vercel Hobby/Netlify/GitHub Pages 아무거나 추천
  4) 영상 용량이 무겁다고 답했으면 Cloudflare Stream 관련 비용 안내 문구를 추가해줘
- 결과 화면에는 추천 이유를 화살표 리스트로 보여주고, 사용자의 답변을 반영해서 자동으로 채워진 "Claude Code에 붙여넣을 시작 프롬프트" 예시도 복사 버튼과 함께 보여줘.
- 하단에는 참고용으로 Next.js/Nuxt/SvelteKit/Astro/WordPress/Django/FastAPI/Flask 같은 프레임워크별 성격과 배포처를 정리한 비교표도 추가해줘.
- CSS·JS 전부 인라인으로 넣은 단일 HTML 파일로, 한국어로 출력해줘

  

  




이 페이지는 AI(Claude)가 만든 예시 자료입니다 — 강의 데모용