목록으로

0원! 무료 스택으로 웹사이트 하나 바로 만들기

Kai 40 2 1

요즘은 웹사이트 하나 만드는 데 꼭 돈이 필요한 건 아닙니다.

 

기획부터 디자인, 개발, 배포까지 무료 도구만 잘 조합해도 꽤 그럴듯한 웹사이트를 만들 수 있습니다.

 

제가 추천하는 조합은 이렇습니다.

  • 개발: Claude Code, Codex, Gemini CLI 등
  • 프론트엔드: Next.js 또는 Vite
  • UI: Tailwind CSS
  • 디자인 참고: getdesign.md
  • 배포: Vercel, Cloudflare Pages, GitHub Pages
  • 데이터베이스가 필요하면: Supabase 또는 Neon 무료 요금제

핵심은 도구보다 AI에게 어떻게 시키느냐입니다.

1. 먼저 사이트의 목적을 설명합니다

AI에게 그냥

“웹사이트 하나 만들어줘”

라고 하면 흔히 보던 뻔한 결과가 나올 가능성이 큽니다.

대신 아래처럼 구체적으로 요청하는 것이 좋습니다.

1인 개발자가 만든 SaaS 소개용 랜딩페이지를 만들어줘.

필요한 섹션은 다음과 같아.

- 상단 내비게이션
- 강한 한 줄 소개
- 서비스 주요 기능 3개
- 실제 사용 화면
- 요금제
- 자주 묻는 질문
- 회원가입 버튼
- 푸터

모바일과 PC 모두 자연스럽게 보이도록 반응형으로 만들어줘.

이 정도만 명확하게 말해도 사이트의 기본 구조는 꽤 빠르게 만들어집니다.

2. 기술 스택도 미리 지정합니다

기술 스택을 정하지 않으면 AI가 익숙한 방식으로 제각각 만들 수 있습니다.

Next.js와 Tailwind CSS로 만들어줘.

불필요한 라이브러리는 추가하지 말고,
정적 페이지 중심으로 구성해줘.

나중에 Vercel에 바로 배포할 수 있게 만들어줘.

간단한 소개 페이지라면 굳이 서버나 데이터베이스가 없어도 됩니다.

정적 페이지로 만들면 관리도 쉽고 무료 배포 서비스를 사용하기도 좋습니다.

3. 디자인은 getdesign.md를 활용합니다

AI가 만든 웹사이트가 어딘가 밋밋해 보인다면 디자인 기준이 없기 때문일 가능성이 큽니다.

getdesign.md에는 유명 서비스의 컬러, 타이포그래피, 여백, 컴포넌트 스타일 등을 분석한 DESIGN.md가 정리되어 있습니다.

원하는 디자인 파일을 프로젝트에 넣고 AI에게 참고하도록 시킬 수 있습니다.

예를 들어 Apple 스타일의 디자인을 사용하고 싶다면 다음 명령어를 사용할 수 있습니다.

npx getdesign@latest add apple

그다음 AI에게 이렇게 요청합니다.

프로젝트에 있는 DESIGN.md를 읽고
해당 디자인 규칙을 전체 UI에 적용해줘.

Apple의 디자인 언어를 참고하되
문구와 구성은 현재 서비스에 맞게 새롭게 만들어줘.

Apple의 사이트를 그대로 복제하는 것이 아니라, 넓은 여백과 절제된 색상, 큰 타이포그래피 같은 디자인 원칙을 참고하는 방식입니다. getdesign.md의 Apple 디자인 자료도 프리미엄 제품 페이지나 단색 중심의 랜딩페이지에 적합하다고 설명합니다.

4. 한 번에 다 만들지 말고 순서대로 시킵니다

AI에게 전체 사이트를 한 번에 완성하라고 하면 디자인과 코드 품질이 쉽게 흐트러집니다.

아래처럼 단계별로 요청하는 것이 좋습니다.

먼저 전체 페이지 구조와 섹션 순서만 설계해줘.
아직 코드는 작성하지 마.

구조가 마음에 들면

이제 상단 내비게이션과 히어로 섹션만 구현해줘.

그다음

기능 소개 섹션과 사용 화면 섹션을 추가해줘.
기존 디자인 톤은 그대로 유지해줘.

마지막으로

모바일 화면에서 글자가 너무 크거나
간격이 어색한 부분을 전부 점검하고 수정해줘.

이렇게 작은 단위로 나누면 수정하기도 쉽고 결과도 안정적입니다.

5. AI 특유의 디자인을 없애달라고 요청합니다

AI가 만든 사이트는 비슷한 디자인이 반복되는 경우가 많습니다.

  • 과도한 그라데이션
  • 의미 없는 둥근 카드
  • 지나치게 많은 그림자
  • 뻔한 문구
  • 불필요한 애니메이션

그래서 마지막에 이런 요청을 한 번 더 넣어주는 것이 좋습니다.

AI가 만든 전형적인 랜딩페이지처럼 보이지 않게 수정해줘.

과도한 그라데이션과 그림자를 줄이고,
카드 남발을 피하고,
여백과 타이포그래피 중심으로 정돈해줘.

문구도 추상적인 표현 대신
사용자가 실제로 얻는 효과가 드러나게 작성해줘.

6. 무료로 배포합니다

정적 웹사이트나 Next.js 프로젝트는 Vercel이나 Cloudflare Pages 같은 서비스를 이용해 무료로 시작할 수 있습니다.

GitHub에 코드를 올린 뒤 배포 서비스와 연결하면, 코드가 업데이트될 때마다 자동으로 다시 배포되도록 구성할 수도 있습니다.

AI에게 아래처럼 요청하면 됩니다.

이 프로젝트를 GitHub에 올리고
Vercel 무료 요금제로 배포할 수 있도록
필요한 설정과 순서를 알려줘.

환경변수가 필요하다면
코드에 직접 넣지 말고 .env.example 파일을 만들어줘.

한 번에 복사해서 사용할 프롬프트

Next.js와 Tailwind CSS를 사용해서
1인 개발자가 만든 SaaS 소개용 랜딩페이지를 만들어줘.

필요한 섹션은 다음과 같아.

- 상단 내비게이션
- 강한 한 줄 소개와 CTA
- 핵심 기능 3개
- 실제 사용 화면
- 이용 방법
- 요금제
- 자주 묻는 질문
- 마지막 회원가입 CTA
- 푸터

프로젝트에 있는 DESIGN.md를 먼저 읽고
해당 디자인 규칙을 전체 UI에 일관되게 적용해줘.

모바일과 PC에서 모두 자연스럽게 보이도록 반응형으로 만들고,
과도한 그라데이션, 그림자, 둥근 카드 사용은 피해주세요.

AI가 만든 흔한 랜딩페이지처럼 보이지 않게
여백과 타이포그래피 중심으로 깔끔하게 구성해줘.

불필요한 라이브러리는 추가하지 말고,
Vercel 무료 요금제로 바로 배포할 수 있게 만들어줘.

먼저 전체 구조를 제안하고
내 확인 후 섹션별로 구현을 진행해줘.

결론

웹사이트를 만드는 비용은 거의 0원까지 낮아졌습니다.

이제 중요한 것은 코드를 얼마나 잘 작성하느냐보다

  • 무엇을 만들 것인지
  • 어떤 구조로 보여줄 것인지
  • 어떤 디자인 규칙을 사용할 것인지
  • AI에게 얼마나 구체적으로 요청할 것인지

를 정하는 일입니다.

무료 스택에 DESIGN.md 하나만 잘 활용해도, 기능만 동작하는 웹사이트가 아니라 디자인까지 꽤 괜찮은 결과물을 빠르게 만들 수 있습니다.

, , , ,
게시물 메뉴