요즘 "코딩 몰라도 AI로 사이트 만들었다"는 이야기가 정말 많이 보이죠. 저도 처음엔 반신반의했는데, 직접 이것저것 붙여보면서 어떤 도구가 실제로 시간을 줄여주고 어떤 게 그냥 신기하기만 한지 감이 잡히더라고요. 그래서 오늘은 AI로 웹개발을 할 때 실제로 손이 자주 가는 사이트들을, 개발 단계별로 정리해봤습니다.
목차
AI 웹개발, 어디까지 가능할까
① 코드를 직접 짜주는 AI 도구
② 화면·디자인을 빠르게 잡는 사이트
③ 이미지·아이콘·폰트 구하는 곳
④ 만든 사이트를 배포하는 곳 자주 하는 실수와 주의할 점 실전 팁
1. AI 웹개발, 어디까지 가능할까
결론부터 말하면, 개인 프로젝트나 간단한 서비스 정도는 충분히 만들 수 있습니다. 다만 "말만 하면 알아서 다 만들어준다"는 건 아직 과장입니다. AI는 코드를 대신 타이핑해주는 아주 빠른 손에 가깝지, 무엇을 만들지 결정해주는 기획자는 아니거든요.
실제로 써보면 이런 차이가 있습니다. 화면 하나 만드는 데 걸리던 두세 시간이 십몇 분으로 줄어드는 건 맞습니다. 그런데 "왜 이 버튼이 여기 있어야 하는지", "이 기능이 정말 필요한지"는 여전히 사람이 판단해야 해요. 그래서 AI 도구를 아무리 좋은 걸 써도, 기획이 없으면 화면만 예쁜 껍데기가 나오기 쉽습니다.
그러니까 정확히는 "AI로 웹개발을 하는 것"이 아니라 "AI를 도구로 써서 웹개발 속도를 올리는 것"에 가깝다는 걸 먼저 짚고 가는 게 좋겠습니다.
2. ① 코드를 직접 짜주는 AI 도구
가장 먼저 필요한 건 코드를 실제로 만들어주는 도구입니다. 크게 두 갈래로 나뉩니다.
대화하면서 코드를 만드는 방식
| Claude Code | 터미널에서 명령하듯 쓰는 방식. 파일 여러 개를 한 번에 수정하는 작업에 강합니다 |
| Cursor | 코드 에디터 자체에 AI가 붙어 있는 형태. 기존 에디터가 익숙하다면 적응이 빠릅니다 |
| GitHub Copilot | 코드를 치는 중간중간 다음 줄을 제안해주는 방식. 보조 역할에 가깝습니다 |
말로 설명하면 사이트가 통째로 나오는 방식
| v0 | 화면(UI) 만들기에 특화. 컴포넌트 단위로 뽑아 쓰기 좋습니다 |
| Bolt.new | 브라우저에서 바로 프로젝트 전체를 만들고 실행까지 해봅니다 |
| Lovable | 완성된 웹앱 형태로 뽑아주는 쪽에 무게가 실려 있습니다 |
| Replit | 개발 환경부터 배포까지 브라우저 안에서 해결됩니다 |
처음이라면 두 번째 갈래로 시작해서 결과물을 눈으로 보고, 익숙해지면 첫 번째 갈래로 넘어가는 흐름이 편합니다. 두 번째 갈래는 시작이 빠른 대신, 세밀하게 고치려 할수록 답답해지는 순간이 오거든요.
3. ② 화면·디자인을 빠르게 잡는 사이트
AI가 코드를 만들어줘도, 디자인 감각까지 대신해주지는 않습니다. 그래서 "이미 잘 만들어진 것"을 가져다 쓰는 게 훨씬 빠릅니다.
- 21st.dev — 버튼, 카드, 폼 같은 UI 조각들을 모아둔 곳입니다. 마음에 드는 걸 고르면 AI에게 넘길 수 있는 형태로 복사할 수 있어서, AI 도구와 궁합이 좋습니다.
- shadcn/ui — 요즘 많이 쓰이는 컴포넌트 모음입니다. 그대로 쓰기보다 프로젝트에 복사해서 고쳐 쓰는 방식이라 자유도가 높습니다.
- Tailwind CSS 공식 문서 — 스타일을 클래스 이름으로 지정하는 방식인데, AI가 이 방식으로 코드를 만들어주는 경우가 많아서 문서를 켜두면 이해가 빠릅니다.
- Figma — 코드를 짜기 전에 화면을 그려보는 도구입니다. 그림으로 먼저 정리하면 AI에게 설명할 때도 훨씬 정확해집니다.
- Coolors — 색 조합을 자동으로 뽑아주는 사이트입니다. 색 고르다 시간 다 보내는 걸 막아줍니다.
디자인은 특히 "직접 고민하는 시간"보다 "잘 된 걸 가져와서 조금 바꾸는 시간"이 훨씬 짧습니다.
4. ③ 이미지·아이콘·폰트 구하는 곳
사이트를 만들다 보면 생각보다 이미지와 아이콘이 많이 필요합니다. 여기서 중요한 게 저작권인데, 아무 이미지나 가져다 쓰면 나중에 문제가 될 수 있습니다.
| 사진 | Unsplash, Pexels, Pixabay | 상업적 이용이 폭넓게 허용됩니다 |
| 아이콘 | Lucide, Heroicons, Tabler Icons | 무료로 쓸 수 있는 아이콘 세트입니다 |
| 폰트 | Google Fonts, 눈누(한글 폰트) | 사용 범위를 꼭 확인하세요 |
| 그림·다이어그램 | Excalidraw | 손그림 느낌의 도식을 빠르게 그립니다 |
특히 한글 폰트는 무료라도 "웹폰트로는 사용 불가" 같은 조건이 붙는 경우가 있으니, 눈누에서 라이선스 항목을 한 번 확인하고 쓰는 습관을 들이는 게 좋습니다.
5. ④ 만든 사이트를 배포하는 곳
코드를 다 만들었으면 인터넷에 올려야 다른 사람이 볼 수 있습니다. 예전엔 서버를 직접 빌려야 했지만, 요즘은 훨씬 간단해졌습니다.
- Vercel — 코드를 올리면 알아서 주소를 만들어줍니다. 개인 프로젝트라면 무료 범위로도 충분한 경우가 많습니다.
- Netlify — Vercel과 비슷한 성격입니다. 취향에 따라 고르면 됩니다.
- Cloudflare Pages — 무료 제공 범위가 넉넉한 편이라 트래픽이 걱정될 때 고려해볼 만합니다.
- Supabase — 회원가입이나 데이터 저장 기능이 필요할 때 씁니다. 데이터베이스를 직접 만들지 않아도 됩니다.
여기서 한 가지 주의할 점이 있습니다. 무료 요금제는 대부분 개인적·비상업적 용도를 전제로 합니다. 광고를 붙이거나 수익이 발생하는 사이트라면 유료 요금제로 올려야 하는 경우가 있으니, 시작 전에 약관을 한 번 확인해두는 게 좋습니다.
6. 자주 하는 실수와 주의할 점
AI로 개발할 때 초보자가 자주 겪는 문제들을 정리했습니다.
- AI가 만든 코드를 검토 없이 그대로 쓰는 경우 — 잘 돌아가는 것처럼 보여도 보안이나 성능에 문제가 있을 수 있습니다. 특히 로그인이나 결제 관련 코드는 반드시 한 번 더 확인해야 합니다.
- API 키를 코드에 그대로 적어두는 경우 — 이건 정말 흔한 실수인데, 남에게 공개되면 요금이 그대로 청구될 수 있습니다. 환경변수로 분리하는 습관이 필요합니다.
- 비용 개념 없이 AI 기능을 붙이는 경우 — 사이트에 AI 기능을 넣으면 이용자가 쓸 때마다 요금이 나갑니다. 이용자가 늘수록 비용도 늘어나니, 무료로 풀기 전에 계산을 해보는 게 좋습니다.
- AI 도구를 여러 개 동시에 쓰는 경우 — 처음부터 이것저것 다 붙이면 오히려 헷갈립니다. 하나씩 익숙해진 뒤에 늘리는 편이 낫습니다.
반대로 잘 쓰는 분들의 공통점은 "AI에게 한 번에 다 시키지 않는다"는 점입니다. 작은 단위로 쪼개서 요청하고, 중간중간 확인하면서 진행합니다.
7. 실전 팁 — 이 순서대로 쓰면 편합니다
도구는 알겠는데 뭐부터 해야 할지 막막하다면, 아래 순서를 참고해보세요.
- 뭘 만들지 한 문장으로 적기 — "영어 단어를 사진으로 찍으면 정리해주는 사이트" 정도면 충분합니다. 이게 없으면 AI도 헤맵니다.
- 화면을 대충이라도 그려보기 — Figma나 Excalidraw로 네모 몇 개만 그려도 됩니다. 그림이 있으면 설명이 훨씬 정확해집니다.
- UI 조각부터 가져오기 — 21st.dev나 shadcn/ui에서 비슷한 걸 찾아둡니다.
- AI에게 작은 단위로 요청하기 — "사이트 만들어줘"보다 "이 화면의 업로드 버튼 만들어줘"가 훨씬 잘 나옵니다.
- 일단 배포해보기 — 완성도가 낮아도 한 번 올려보면 남은 할 일이 훨씬 선명해집니다.
결국 AI 웹개발도 다른 개발과 마찬가지로, 도구가 좋아졌다고 해서 저절로 되는 건 아닙니다. 다만 예전엔 몇 주 걸리던 걸 며칠 만에 눈으로 확인할 수 있게 된 건 분명하니, 부담 없이 작은 것부터 하나 만들어보시길 바랍니다.
자주 묻는 질문 (Q&A)
Q. 코딩을 전혀 몰라도 AI로 사이트를 만들 수 있나요?
A. 간단한 사이트라면 가능합니다. 다만 문제가 생겼을 때 원인을 찾으려면 기본적인 개념은 알아두는 게 좋습니다.
Q. 어떤 도구부터 써봐야 하나요?
A. 결과물을 빨리 보고 싶다면 Bolt.new나 v0처럼 바로 화면이 나오는 도구부터, 코드를 다뤄본 적 있다면 Cursor나 Claude Code부터 시작해보세요.
Q. 비용이 얼마나 드나요?
A. 무료로 시작할 수 있는 도구가 많습니다. 유료 구독은 대체로 월 몇만 원 선이고, 배포도 개인 프로젝트 수준이면 무료 범위로 가능한 경우가 많습니다.
Q. AI가 만든 코드, 저작권 문제는 없나요?
A. 도구마다 약관이 다릅니다. 특히 상업적으로 쓸 계획이라면 해당 서비스의 이용약관을 확인해보는 게 안전합니다.
Q. 만든 사이트로 수익을 낼 수 있나요?
A. 광고나 유료 기능을 붙이는 방법이 있습니다. 다만 이 경우 무료 요금제 약관에 어긋나지 않는지, 사업자 등록이 필요한지 등을 함께 확인해야 합니다.
Q. AI가 만든 코드가 자꾸 오류가 나요.
A. 오류 메시지를 그대로 복사해서 AI에게 보여주는 게 가장 빠릅니다. 한 번에 안 되면 요청을 더 작게 쪼개보세요.
마무리하며
AI로 웹개발을 하는 건 이제 개발자만의 이야기가 아닙니다. 다만 화려한 후기 뒤에는 여전히 "무엇을 만들지 고민하는 시간"과 "만든 걸 다듬는 시간"이 남아 있다는 것도 함께 봐야, 시작한 뒤에 실망하지 않을 수 있습니다.
오늘 정리한 사이트들을 참고해서, 거창한 프로젝트보다 작고 단순한 것부터 하나씩 만들어보시길 바랍니다. 완성해본 경험이 하나 생기면 그다음은 훨씬 수월해집니다.