코딩 몰라도 내 홈페이지를 만들 수 있을까? AI로 시작하는 첫 제작

AI로 만드는 나만의 디지털 서비스 ① — 아이디어를 홈페이지로 구현하는 첫걸음

“우리 모임을 소개하고, 프로그램과 신청 방법을 한곳에 모아 보여줄 홈페이지가 있으면 좋겠다.”

작은 가게나 모임을 운영하다 보면 이런 생각이 듭니다. 하지만 제작을 맡기려니 비용이 걸리고, 직접 만들려니 어디서부터 배워야 할지 막막합니다.

AI를 활용하면 첫 시도를 시작하는 방식이 달라집니다. 원하는 홈페이지를 말로 설명하고, 생성된 화면을 보며 수정해 나갈 수 있습니다.

코드를 직접 입력하지 않고도 홈페이지의 첫 버전을 만들어 볼 수 있다는 뜻입니다. 다만 AI가 뒤에서 코드를 만들고 수정하는 것이므로, 기술적인 문제가 모두 사라지는 것은 아닙니다.

이 연재에서는 홈페이지를 출발점으로 삼아 웹앱, 예약 시스템, 업무 자동화 도구로 범위를 넓혀 갑니다. 첫 편의 목표는 단순합니다. 소개 페이지 하나를 기획하고, 직접 확인한 뒤, 다른 사람에게 보여줄 수 있는 상태까지 만들어 보는 것입니다.

이번 실습에서 만들 것

결과물: 모임을 소개하는 한 페이지 홈페이지
준비할 정보: 모임 이름, 소개, 프로그램, 장소, 신청 링크
완료 기준: 휴대폰에서 내용이 잘 읽히고, 신청 버튼이 올바른 곳으로 연결되는 상태

아래의 ‘우리동네 AI 실전모임’은 제작 과정을 설명하기 위한 예시입니다. 실제 일정이나 장소, 운영 중인 홈페이지를 재현한 사례는 아닙니다.

1. AI로 홈페이지를 만든다는 것은?

기존에도 코딩 없이 홈페이지를 만드는 도구는 있었습니다. AI 제작 도구의 특징은 원하는 결과를 일상적인 말로 설명하며 화면과 기능을 수정할 수 있다는 점입니다.

처음에는 이렇게 요청할 수 있습니다.

AI를 처음 배우는 사람을 위한 모임 홈페이지를 만들어 줘. 모임 소개, 프로그램, 장소, 참여 신청 버튼을 넣고, 휴대폰에서도 읽기 쉽게 구성해 줘.

화면이 만들어지면 결과를 보며 다시 요청합니다.

“첫 화면의 제목을 더 크게 해 줘.”

“프로그램 설명을 초보자가 이해하기 쉬운 말로 바꿔 줘.”

“휴대폰에서 신청 버튼이 잘리니 화면 안에 들어오도록 수정해 줘.”

기본 흐름은 설명 → 제작 → 확인 → 수정입니다. 한 번의 요청으로 완성하려 하기보다, 내가 원한 결과와 실제 화면의 차이를 줄여 가는 과정에 가깝습니다.

2. 첫 홈페이지는 한 페이지로 충분합니다

처음부터 로그인, 결제, 회원 관리까지 넣으면 확인해야 할 일이 크게 늘어납니다. 우선 방문자가 필요한 정보를 얻고 다음 행동을 할 수 있는 홈페이지부터 만들어 보세요.

예를 들어 다음 네 구역이면 모임 소개에 필요한 기본 틀을 갖출 수 있습니다.

구역	방문자가 확인할 내용
모임 소개	누구를 위한 모임이고 무엇을 배우는가
프로그램	어떤 활동을 하며 무엇을 준비해야 하는가
장소·안내	어디서 진행하고 궁금한 점은 어떻게 문의하는가
참여 신청	어디에서 신청하고 신청 후 무엇을 확인하는가

여러 페이지로 나누기보다 한 페이지를 아래로 내려 보며 확인할 수 있게 구성하면 제작과 수정이 수월합니다. 이런 구성을 가게 소개, 개인 포트폴리오, 행사 안내, 상품 홍보 페이지에도 적용할 수 있습니다.

3. 제작 도구는 하나를 골라 전체 흐름을 경험하세요

AI로 웹사이트와 웹앱을 만드는 도구의 예로 Bolt.new와 Lovable이 있습니다.

Bolt.new는 자연어 요청으로 웹사이트와 웹앱을 제작하고 수정할 수 있는 도구입니다. 공식 안내에서 제작부터 미리보기, 공개 주소로 배포하는 흐름을 확인할 수 있습니다. Bolt 시작 가이드

Lovable 역시 대화하며 앱을 만들고 수정하는 도구입니다. 제작한 프로젝트를 공유 가능한 주소로 배포할 수 있습니다. Lovable 배포 안내

이번에는 어느 도구가 더 좋은지 비교하는 것보다, 하나를 선택해 만들기부터 공개까지 한 차례 경험하는 것을 목표로 삼으세요.

가입 전에는 무료 사용량, 수정에 쓰이는 크레딧이나 토큰, 배포 한도, 프로젝트 공개 범위를 확인해야 합니다. 제작 도구의 사용료와 별도 도메인·외부 서비스 비용이 구분될 수도 있습니다. 이 글에서는 바뀔 수 있는 요금과 무료 한도를 고정된 숫자로 안내하지 않습니다.

4. 원하는 내용을 먼저 다섯 줄로 정리하세요

AI에게 “예쁜 홈페이지를 만들어 줘”라고만 요청하면 그럴듯한 화면은 나올 수 있습니다. 하지만 방문자에게 필요한 정보가 빠지거나, 쓰지 않을 기능이 붙을 수도 있습니다.

다음 다섯 줄을 먼저 적어 보세요.

이름: 우리동네 AI 실전모임
대상: AI를 처음 배우는 사람과 1인 창업 준비생
목적: 모임을 이해하고 참여 신청으로 이어지게 하기
핵심 내용: 모임 소개, 프로그램, 장소·안내, 참여 신청
분위기: 친근하고 차분하게, 큰 글씨와 간단한 구성

일정, 장소, 연락처, 신청 링크처럼 아직 정하지 않은 정보는 빈칸으로 남겨 두면 됩니다. AI가 임의의 값으로 채우도록 두지 않는 것이 좋습니다.

5. 복사해서 사용할 첫 제작 요청문

아래 요청문에서 대괄호 안의 정보를 바꾼 뒤 제작 도구에 입력해 보세요. 설명이 부족하다면 필요한 정보를 먼저 물어보도록 요청할 수도 있습니다.

아래 기획을 바탕으로 한 페이지 소개 홈페이지의 첫 버전을 만들어 줘.

이름: [모임 또는 사업 이름]

방문자: [누가 볼 홈페이지인지]

목적: [방문자가 이해하거나 하길 바라는 일]

구성: 소개, 프로그램·서비스, 장소·안내, 참여 신청

디자인: 한국어로, 큰 글씨와 충분한 여백을 사용해 줘. PC와 휴대폰 화면에 맞게 배치가 조정되는 반응형으로 만들어 줘.

참여 신청 버튼은 [실제 신청 링크]로 연결해 줘. 링크를 아직 입력하지 않았다면 버튼을 비활성화하고 ‘신청 준비 중’이라고 표시해 줘.

제공하지 않은 일정, 가격, 연락처와 고객 후기는 임의로 만들지 말아 줘. 예시 이미지를 사용한다면 교체할 부분을 알려 줘.

이번 버전은 소개 페이지로 만들어 줘. 로그인, 결제, 개인정보 저장 기능은 제외해 줘.

먼저 미리보기로 확인할 수 있게 만들고, 내가 제공해야 할 정보와 아직 작동하지 않는 부분을 알려 줘.

여기서 ‘반응형’은 화면 크기에 맞춰 글과 이미지, 버튼의 배치가 바뀌는 방식을 뜻합니다. 휴대폰에서도 같은 홈페이지를 편하게 이용하기 위한 기본 조건입니다.

6. 수정할 때는 위치와 문제를 함께 알려 주세요

첫 화면이 마음에 들지 않더라도 “전체적으로 별로야”라고만 말하면 수정 방향이 흐려집니다.

어디에서, 어떤 문제가 생기며, 어떻게 바뀌면 좋은지를 함께 알려 주세요.

휴대폰 첫 화면에서 제목이 네 줄로 나뉘어 소개 문구가 아래로 밀립니다. 제목을 두세 줄로 읽히게 조정하고, 신청 버튼이 소개 문구 바로 아래에 오도록 배치해 줘.

문구나 디자인을 바꿀 때는 관련된 부분을 묶어서 요청해도 좋습니다. 기능 오류를 고칠 때는 한 가지 문제를 수정한 뒤 다시 확인하면 원인을 파악하기 쉽습니다.

7. 공개하기 전, 직접 눌러 보세요

AI가 “완성했습니다”라고 답해도 실제 결과를 확인해야 합니다. 최소한 다음 다섯 가지는 직접 살펴보세요.

내용: 이름, 프로그램, 일정, 장소에 잘못된 정보가 없는가?
연결: 신청·문의 버튼을 누르면 의도한 곳으로 이동하는가?
모바일: 제목과 이미지가 잘리지 않고 버튼을 누르기 편한가?
이미지: 예시 사진이나 문구가 남아 있지 않고, 사용할 권한이 있는가?
신청: 외부 신청 링크를 쓴다면 다른 사람도 접근하고 제출할 수 있는가?

특히 버튼이 눌린다는 사실과 신청이 실제로 접수된다는 사실은 다릅니다. 외부 신청서를 연결했다면 테스트 신청을 해 보고 운영자 쪽에서 확인되는지까지 살펴보세요.

8. 미리보기와 인터넷 공개는 다릅니다

제작 도구 안에서 화면을 보는 것은 미리보기입니다. 다른 사람이 자신의 기기에서 주소를 열어 볼 수 있게 하려면 배포 과정을 거쳐야 합니다.

Bolt와 Lovable은 공식 문서에서 배포 기능을 안내하고 있습니다. 공개 전에는 어떤 버전을 배포하는지, 누구나 접속할 수 있는지, 사용량 한도와 비용은 어떤지 확인하세요.

공개 주소가 생기면 휴대폰이나 다른 브라우저에서 다시 열어 보세요. 홈페이지를 수정한 뒤에도 변경 내용을 다시 배포해야 할 수 있으므로, 편집 화면과 실제 공개 화면을 각각 확인하는 습관이 필요합니다.

주소가 만들어졌다고 검색 결과에 바로 노출되는 것은 아닙니다. 첫 실습에서는 링크로 방문한 사람이 필요한 정보를 확인하고 신청 페이지로 이동할 수 있는지를 기준으로 삼으면 충분합니다.

테크모라의 관점: 첫 제작은 판단을 연습하는 과정입니다

이 실습에서 얻을 수 있는 것은 홈페이지 한 장만이 아닙니다.

내가 무엇을 원하는지 설명하고, AI가 만든 결과를 살펴보고, 부족한 점을 다시 요청하는 경험을 쌓을 수 있습니다. 이 과정에서 “방문자가 가장 먼저 알아야 할 것은 무엇인가?”, “지금 꼭 필요한 기능은 무엇인가?” 같은 질문도 하게 됩니다.

완벽한 결과를 기다리기보다 작은 페이지 하나를 만들고, 다른 사람 한 명에게 사용해 달라고 부탁해 보세요. 내가 설명하지 않아도 모임의 목적을 이해하고 신청 버튼을 찾는지 관찰하는 것만으로도 다음 수정 방향이 보일 수 있습니다.

첫 목표는 많은 기능을 넣는 일이 아니라, 방문자가 해야 할 행동 하나를 끝까지 할 수 있게 만드는 것입니다.

② 홈페이지 다음은 웹앱! 내 아이디어를 실제 서비스로 만드는 5단계

소개 페이지에 기능을 추가하려면 무엇이 달라질까요? 모임 신청 도구를 예시로 기획, 화면 구성, 제작, 검증, 배포·운영을 살펴보겠습니다.

참고 자료

도구의 제작·배포 기능은 공식 문서를 기준으로 확인했습니다. 확인일: 2026년 10월 25일. 화면 구성, 제공 기능과 요금 조건은 이후 변경될 수 있습니다.