[코딩 0%] 구글 제미나이 Replit으로 평생 무료 포트폴리오 웹사이트 만들기

구글 제미나이 Replit 꿀조합: 코딩 1도 몰라도 10분 만에 내 사이트 무료 배포하기

내 사업을 소개하거나 포트폴리오를 보여줄 멋진 웹페이지가 필요한데, 견적을 받아보고 놀라신 적 없나요? 제작비만 수백만 원을 부르거나, 윅스(Wix) 같은 툴을 쓰자니 매달 나가는 월 결제 비용이 부담스러워 망설이셨을 겁니다.

“돈은 쓰기 싫고, 코딩은 모르지만, 결과물은 그럴싸했으면 좋겠다.”

이 솔직한 욕망, 오늘 제가 100% 해결해 드립니다. 지금부터 소개할 ‘AI(제미나이) + Replit’ 조합을 활용하면, 개발 지식이 전혀 없어도 단 10분 만에, 평생 무료로, 모바일에서도 완벽한 웹사이트를 만들 수 있습니다.

이 글을 다 읽을 때쯤이면 여러분은 전 세계 어디서나 접속 가능한 ‘나만의 사이트 주소(URL)’를 갖게 될 것입니다.

목차 (Table of Contents)

도구 소개: 왜 윅스(Wix) 대신 Replit인가? (압도적 가성비)
준비물: 구글 제미나이와 Replit 계정 단 두 가지
실전 가이드: 3단계로 끝내는 내 사이트 배포 (따라하기)
FAQ: 도메인 연결과 수정 방법
결론: 이제 당신도 웹 제작자입니다.

1. 왜 윅스(Wix) 대신 Replit인가? (비용 및 자유도 비교)

보통 웹사이트를 만들려면 ‘호스팅(서버)’ 비용이 듭니다. 하지만 우리는 Replit(레플릿)이라는 도구를 사용할 것입니다.

[필수 상식] Replit이란 무엇인가?

Replit(레플릿)은 복잡한 서버 구축이나 프로그램 설치 없이, 인터넷 브라우저상에서 바로 코딩하고 즉시 웹사이트를 무료로 배포할 수 있는 클라우드 코딩 플랫폼입니다. 쉽게 말해 ‘공짜로 내 홈페이지를 띄워주는 인터넷 공간’입니다.

많은 분이 사용하는 기존 방식과 비교해 볼까요?

비교 항목	윅스 (Wix) / 아임웹	워드프레스 (WordPress)	AI + Replit (추천)
비용	월 1~2만 원 (유료)	호스팅 비용 발생	평생 0원 (무료 플랜)
난이도	쉬움 (드래그 앤 드롭)	어려움 (서버 세팅 필요)	매우 쉬움 (AI 복붙)
자유도	제한적 (템플릿 의존)	높음	무한대 (원하는 대로)
소요 시간	1시간 이상	며칠 소요	10분 내외

이 방식은 최근 1인 창업 아이템이나 수익형 랜딩페이지를 테스트하려는 스마트한 기획자들 사이에서 ‘비밀 병기’처럼 쓰이고 있는 노코드 툴 활용법입니다.

2. 준비물: 딱 2가지만 켜두세요.

복잡한 설치? 전혀 필요 없습니다. 딱 두 사이트에 로그인만 해두세요.

구글 제미나이 (Gemini): 코드를 짜주는 우리의 천재 개발자입니다. (구글 계정만 있으면 무료)
Replit (replit.com): 코드를 실행시켜 줄 무료 서버입니다. (회원가입 필수)

3. [실전] 3단계로 끝내는 내 사이트 배포

이제부터 실전입니다. 딱 3단계만 따라오세요.

1단계 – 제미나이에게 “코드 짜줘” 명령하기

우리는 코딩 언어(HTML, CSS)를 모릅니다. 하지만 괜찮습니다. 제미나이에게 한국어로 명령하면 알아서 작성해 줍니다.

[핵심 전략]

제미나이에게 요청할 때 가장 중요한 것은 “모바일에서도 예쁘게 보이도록(반응형)” 해달라고 하는 것입니다. 아래 프롬프트를 그대로 복사해서 제미나이에게 입력하세요.

[프롬프트 예시 – 그대로 복사하세요]

“너는 세계 최고의 웹 프론트엔드 개발자야. 나의 ‘개인 포트폴리오 웹사이트’를 만들고 싶어.

[요구사항]

내 직업은 ‘프리랜스 디자이너’야.

전체적으로 모던하고 심플한 ‘다크 모드’ 디자인으로 해줘.

상단에는 자기소개, 중간에는 프로젝트 갤러리(이미지 3개), 하단에는 이메일 연락처 섹션을 넣어줘.

스마트폰에서도 깨지지 않고 예쁘게 보이는 ‘반응형 웹(Responsive Web)’으로 만들어야 해.

HTML, CSS 코드를 하나의 파일(index.html)에 모두 합쳐서 작성해 줘.”

제미나이가 순식간에 알 수 없는 영어(코드)를 뱉어낼 것입니다. 당황하지 마세요! 우리는 이 코드를 읽을 필요가 없습니다. 그저 코드 상단에 있는 [복사(Copy)] 버튼만 누르면 됩니다.

2단계 – Replit에 복사/붙여넣기 및 미리보기

이제 Replit으로 이동합니다.

Replit 메인 화면에서 파란색 [+ Create Repl] 버튼을 클릭합니다.
Template 검색창에 ‘HTML, CSS, JS’를 선택하고 제목을 대충 지은 뒤 [Create Repl]을 누릅니다.
화면이 열리면 왼쪽에 파일 목록, 가운데에 코드 입력창, 오른쪽에 미리보기 화면이 뜹니다.
가운데 입력창에 있는 기존 내용을 싹 지우고, 방금 제미나이에서 복사한 코드를 ‘붙여넣기(Ctrl+V)’ 하세요.

쉽게 비유하자면?

제미나이가 써준 ‘외계어(코드) 편지’를 복사해서, Replit이라는 ‘마법 우체통’에 넣기만 하면 되는 원리입니다. 내용은 몰라도 우체통에 넣으면 배달(웹사이트 구동)이 됩니다!

상단 중앙의 초록색 [Run] 버튼을 눌러보세요. 오른쪽 화면(Webview)에 여러분이 주문한 디자인의 웹사이트가 짠! 하고 나타날 것입니다.

3단계 – Publish 버튼으로 전 세계에 공개하기

오른쪽 미리보기 화면은 나한테만 보입니다. 이제 이걸 남들에게 보여줄 수 있는 ‘진짜 사이트’로 만들어야겠죠?

오른쪽 미리보기 화면 위쪽에 있는 주소창 옆 [New Tab] 아이콘을 누르거나, 우측 상단의 [Publish] 버튼을 찾습니다.
Replit은 기본적으로 https://내아이디.replit.co 같은 형태의 고유 주소(URL)를 무료로 생성해 줍니다.
이 주소를 복사해서 카카오톡이나 인스타그램 프로필에 올려보세요. 친구가 스마트폰으로 접속해도 완벽하게 보일 것입니다.

축하합니다! 여러분은 방금 10분 만에 웹 개발자가 되셨습니다.

4. FAQ: 자주 묻는 질문

많은 분이 궁금해하시는 3가지 질문을 정리했습니다.

Q1. 정말 평생 무료인가요?

A: 네, 맞습니다. Replit의 ‘Starter 플랜(무료)’은 개인적인 학습이나 포트폴리오 용도로 평생 무료로 사용할 수 있습니다. 단, 접속자가 폭주하는 대형 사이트가 되면 유료 업그레이드가 필요할 수 있지만, 초기 단계에서는 걱정할 필요가 없습니다.

Q2. ‘.com’ 같은 내 도메인을 연결할 수 있나요?

A: 네, 가능합니다. 가비아나 GoDaddy에서 도메인을 구입한 뒤 Replit 설정에서 연결할 수 있습니다. (단, 도메인 연결 기능은 Replit의 정책 변경에 따라 일부 유료 플랜이 필요할 수도 있습니다.)

Q3. 디자인이나 내용을 수정하고 싶으면 어떻게 하나요?

A: 아주 쉽습니다. 다시 제미나이에게 가서 “배경색을 파란색으로 바꿔줘” 혹은 “프로젝트 사진을 6개로 늘려줘”라고 명령하세요. 그리고 새로 나온 코드를 다시 Replit에 ‘덮어쓰기’만 하면 됩니다. 이것이 바로 노코드 툴의 매력입니다.

결론: 시작이 반입니다.

오늘 배운 내용을 요약하면 딱 3줄입니다.

제미나이에게 원하는 사이트 모습을 설명하고 코드를 받는다.
Replit에 코드를 붙여넣고 [Run] 버튼을 누른다.
생성된 무료 URL을 복사해서 세상에 공유한다.

더 이상 기술의 장벽 때문에 아이디어를 묵혀두지 마세요. HTML, CSS, 서버… 이런 골치 아픈 용어는 AI에게 맡겨버리세요.

도경

삶을 풍요롭게 만드는 모든 것에 관심이 많은 큐레이터, [도경]입니다. 여행, 기술, 라이프스타일의 경계를 넘나들며, 직접 경험하고 엄선한 좋은 것들만 모아 여러분의 일상에 제안합니다.