AI로 웹페이지 개발, ‘AI 티 안 나는’ 랜딩페이지 만들기 가능할까? - 1편

AI 웹페이지 개발, 어디까지 가능할까? Figma·Lovable·Webflow 등 툴을 직접 사용해본 비교 결과와 함께, ‘AI 티 나지 않는’ 랜딩페이지 제작 노하우를 소개합니다. 총 2편으로 구성되어 있습니다.

심규현

Sep 08, 2025

AI로 웹페이지 개발, ‘AI 티 안 나는’ 랜딩페이지 만들기 가능할까? - 1편

쇼핑몰처럼 정형화된 홈페이지는 한국에서는 아임웹(Imweb), 해외 SaaS 중에서는 Webflow를 많이 활용하죠. 쇼핑몰 홈페이지를 만드는 데는 충분할 수도 있지만, 특정 제품이나 이벤트를 위한 맞춤형 페이지를 만들려면 이야기가 달라집니다.

노코드 툴(Webflow 등)을 쓰더라도 원하는 형태와 기능을 구현하려면 꽤 많은 학습과 시간이 필요합니다. 그래서 아예 노코드 전문 외주 업체가 따로 존재할 정도예요. AI 툴을 활용한다고 해도 “딱 이거다” 싶은 퀄리티를 뽑기는 쉽지 않습니다.

실제로 쓸 수 있는 웹페이지, 랜딩페이지 개발을 위해 했던 시도들과 결과를 2편에 나누어서 작성했습니다. 1편에서는 ‘초안 배포’, 2편에서는 ‘디테일’ 높이기와 반응형 UI로 전환하는 것에 대한 이야기를 해보려고 합니다.

이정도가 1단계 과정을 통해서 만들 수 있는 결과였습니다.

이런 분들에게 도움이 될 글입니다.

“AI 티 나는 홈페이지” 말고, 실제 서비스처럼 보이는 결과물이 필요한 경우
빠른 가설검증을 위해 랜딩페이지를 개발하는 리드타임을 줄이고 싶은 경우
BD(사업개발) 관점에서 일정 수준 이상의 홍보용 페이지가 바로 필요한 경우

이미 제품 소개서나, 세일즈용 자료가 있는 상태에서 본격적인 마케팅 혹은 세일즈를 위한 랜딩페이지를 만들고싶은 경우를 전제로 합니다.

ChatGPT로 기획 만들기

딱히 어려운 프롬프트 없이도, 회사소개서 혹은 제품에 대한 정보를 첨부하고 “랜딩페이지 컨텐츠 만들어줘”라고 명령하면 잘 만들어줍니다.

이렇게 아래처럼 섹션별 제목과 내용으로 나오는 경우가 일반적이고, 이렇게 나오지 않았다면 프롬프트에서 형식을 넣어주시면 쉽게 만들 수 있습니다. 그리고 이 과정에서 우리 제품 정보나 전달 의도, 방향성에 맞게 내용을 수정해주시는게 제일 좋습니다.

# 🚀 랜딩페이지 콘텐츠 초안

## 1. 히어로 섹션 (첫 화면)

**헤드라인:**

“AI API 관리, 한 곳에서 끝내다 – 렛서 AI 게이트웨이”

**서브텍스트:**

복잡한 API 관리, 비용 통제, 권한 분산까지.

이제 실험과 개발에만 집중하세요.

**CTA 버튼:**

👉 무료로 시작하기

(배경: OpenAI, Anthropic, Gemini 로고와 함께 단일 게이트웨이로 연결되는 비주얼 
[렛서] AI Gateway 서비스 소개서)

---

## 2. 문제 제기 (Problem)

**"AI 실험보다 API 관리에 더 많은 시간을 쓰고 있지 않으신가요?"**
...
...

디자인 툴로 초안 뽑아보기

UI를 디자인할 수 있는 방법과 툴이 여러가지인데, 잘 알려진 Lovable, Figma, Cursor, Webflow로 초안을 만들어보고 결과를 비교해보았습니다.

	사용 추천	취득 정보
Figma Site	✅	레이아웃 (+목업)
Lovable	✅	레이아웃
Webflow	❌	디자인 톤(테마)

Figma Site

모든 툴 중에 퀄리티가 제일 높았지만, 목표가 AI티 안나게 랜딩페이지 만들기 였기때문에 결과물을 랜딩페이지로 쓰기는 약간 무리가 있었습니다. 그리고 특이했던 점은 목업 UI도 만들어주고, 이러한 목업을 코드로 변환이 가능해 수정할 수 있다는 점이었고 레이아웃을 참고하기에는 정말 좋았습니다. 정말 정교하게 잘 써본다면 아래 스크린샷 홈페이지 정도의 퀄리티는 무리없이 뽑아볼 수 있을 듯합니다.

이전 단계에서 ChatGPT 기획 결과물을 가공없이 넣었을때는 이런 결과물을 도출할 수 있습니다.

Lovable

퀄리티는 제품 홈페이지에 쓰기에는 아쉽고 (AI로 만든 티가 너무 많이 남), Figma Site처럼 레이아웃 정도 참고할 수 있겠다고 느꼈습니다.

Webflow

노코드 웹 제작 툴 Webflow에서도 AI 기능을 제공합니다. https://webflow.com/ai로 접속하면 써볼 수 있습니다. 별도 SaaS처럼 나와있는 것은 아니고, 홈페이지 프로젝트 생성하는 쪽에서 빈 템플릿 혹은 AI 템플릿을 선택하여 만들어볼 수 있습니다.

실제로 써야하는 상황을 고려해봤을때 결과는 역시 너무 아쉬웠습니다 (고쳐서 써야 하는 상황을 고려해봤을때). Figma Site, Lovable이랑 달리 레이아웃도 참조할 수 없는 정도였습니다. 퀄리티 적인 측면에서 해외 SaaS스러운 웹페이지가 만들어지는데 원래 제공하는 Template에서 텍스트만 바꿔주는 느낌이었습니다.

디자인 툴로 초안 만드는 것에 대한 결론?

팀에서 구독중인 Figma가 있다면, Site 기능과 Lovable을 써서 초안 뽑는 것이 도움이 됐습니다. 둘 중 하나만 쓰라면 Figma를 쓸것 같습니다. 특히, 가상으로(상상으로) 만들어준 목업이 디자인 구체화 단계에서 도움이 많이 되었던것 같습니다.

Cursor를 통해 랜딩페이지 초안 세팅 + 수정

지금부터는 Figma Site을 통해 뽑은 초안을 바탕으로 Cursor로 홈페이지를 빌드하는 과정입니다. 먼저 해당 프롬프트를 기반으로 해서 초기 웹사이트를 빌드합니다. 담백하게 그냥 입력해주세요.

아래 내용을 가진 next js 기반의 홈페이지 로컬에서 빌드해줘.

# 🚀 랜딩페이지 콘텐츠 초안

## 1. 히어로 섹션 (첫 화면)

**헤드라인:**

“AI API 관리, 한 곳에서 끝내다 – 렛서 AI 게이트웨이”

**서브텍스트:**

복잡한 API 관리, 비용 통제, 권한 분산까지.

이제 실험과 개발에만 집중하세요.

**CTA 버튼:**

👉 무료로 시작하기

(배경: OpenAI, Anthropic, Gemini 로고와 함께 단일 게이트웨이로 연결되는 비주얼 
[렛서] AI Gateway 서비스 소개서)

---

## 2. 문제 제기 (Problem)

**"AI 실험보다 API 관리에 더 많은 시간을 쓰고 있지 않으신가요?"**

…

Cursor 웹페이지 초안만들기

초안으로 만들어본 결과를 확인해보면 실제로 쓰기에 아직 너무 부족합니다. 가지고 있는 정보들로 초안을 고쳐보겠습니다.

Cursor로 Interactive하게 홈페이지 수정하기

이제부터 홈페이지를 커서 프롬프트를 통해서 수정해보겠습니다. 모든 수정은 예시 이미지를 통해서 레이아웃을 잡고

Header, Footnote

저희 메인 홈페이지의 Header와 Footer 이미지를 스크린샷으로 Cursor 입력으로 넣고, 정확히 똑같이 구현해달라고 요청했습니다.

공백, 글시체 굵기 같이 세세한 부분은 달라질 수 있겠지만, 내용은 그대로 복제가 되고, “로고를 80%크기로 줄여줘” 등 명령으로 세부적으로 수정할 수 있습니다. Cursor가 참조할 수 있는 로고파일은 따로 저장해두었습니다.

Hero Section

Hero Section은 Header, Footer보다는 좀더 머리아픈 과정이 들어가는데요.

백그라운드 이미지 생성

hero-section background 이미지는 느낌을 Ideation 한 뒤 (e.g., ”하나의 소스에서 여러가지로 빛이 퍼져나가는 느낌”) 미드저니를 사용해서 프롬프트 엔지니어링으로 hero section의 백그라운드 이미지를 얻을 수 있었습니다.

프로젝트 폴더에 생성한 이미지를 옮기고, cursor에는 “hero section의 백그라운드 이미지를 xxx.png로 넣어줘”로 지시하면 백그라운드 이미지가 반영됩니다.

이미지와 hero section의 크기가 안 맞을 수 밖에 없는데, “백그라운드 이미지에서 가로 크기는 딱 맞춰줘”, “세로 크기는 딱 맞춰줘”, “벗어나면 이미지 위부터 보이게 해줘” 등 세부 사항을 조절하는 것이 필요함.

폰트, CTA 디자인 설정

폰트, 글씨 크기, 도입 문의하기 CTA 디자인은 “Title은 hero section의 중앙에 위치하게 해줘”와 같은 자연어 명령으로 조정하고 결과를 확인하면 됩니다.

Other Sections

중간 섹션을 할때는 흰색 배경에 검정색 글씨로 일단 전부 바꿔달라고 하고 수정을 진행했습니다.

위의 페이지를 구성할때는 Figma Site에서 나온 결과물을 스크린샷으로 저장하고, Cursor의 입력으로 넣은 뒤 수정을 진행했습니다.

구체적으로는 아래 명령을 통해서 세부적으로 수정했고, 2X2의 회색 직사각형 카드에 내용들이 보이게 수정할 수 있었습니다.

“각 문제를 회색 직사각형 카드를 통해서 보여줘”
“카드의 제목 옆에 어울리는 아이콘을 생성해서 붙여줘”
“직사각형 상하 여백 30%씩 늘려줘”

이 페이지를 구성할때 역시 Figma Site에서 레이아웃을 스크린샷으로 저장하여 Cursor 입력으로 넣어줬습니다. 아직 디자인이 완료된게 아니라, 해당 레이아웃과 비슷한 레이아웃을 가진 완성도 높은 디자인을 찾아서, 해당 디자인을 레퍼런스로 완성도를 높여볼 예정입니다.

레이아웃을 참고할때 솔직히 목업도 맘에 들어서. 그대로 활용할까 고민하다가 제품 디자인을 통해서 더 잘보여줄 수 있겠다고 생각해서 목업 대신 제품 이미지를 활용하는 방안을 택했습니다 (2편에서 수정됩니다).

만약 목업을 그대로 활용할 예정이라면, Figma Site에서 해당 목업을 클릭하고 ‘코드’를 클릭해서 해당 코드를 복사해서 클로드에 붙여 넣고 구현해달라고 요청하면 됩니다. 목업에서 색깔, 글씨 등 전부 수정이 가능합니다.

그리고 세부적으로 수정하기 위해 사용했던 명령어들을 나열해보면, 아래와 같습니다.

처음에는 제목도 내용과 같이 2-column 레이아웃으로 되어서, “제목은 1-column으로 하고, 내용은 2-column으로 해서”정리해줘.
“내용 글씨체 크기 50%씩 키워줘.”
“제목 옆에 아이콘 생성해서 넣어줘.”

이 섹션도 위의 섹션과 유사하게 작업을 진행했습니다. 이미지가 회색 박스에 들어가게 하기 위해서 Cursor와 몇번 티키타카 했던 점 정도가 있고 특이사항은 없었습니다. 써볼 수 있는 명령어는 아래와 같습니다.

“왼쪽 위에서, 오른쪽 아래로 1-4번째 블럭이야. 각각 이미지 1.png~4.png로 배치해줘”

가지고 있는 UI 이미지들이 있었기 때문에 위의 Figma Site 결과물에 있는 목업들을 활용하지 않았습니다.

해당 섹션도 마찬가지로 Figma Site의 결과물 스크린샷을 Cursor에 입력으로 넣고 수정해달라고 요청했습니다. 위에서 작업했던 디자인에서 색 등을 참고하여 디자인이 생성되기 시작했습니다. 해당 섹션에서 추가로 ‘연구원, 관리자 프로필 사진 만들기’ 등 업데이트 작업을 해볼 수 있을것 같습니다.

CTA 섹션

배경은 Hero Section과 마찬가지로 미드저니를 통해 생성했습니다. 새성된 이미지의 경로를 지정해서 background로 깔아달라고 요청했습니다. 그리고 CTA 버튼 스타일을 바꾸기 위해 아래 명령어를 사용했습니다.

“글씨는 흰색으로 해줘”

“CTA 버튼 색은 첨부한 이미지 색으로 바꿔줘” + 색깔 이미지 첨부
”CTA 버튼의 테두리 없애줘”

블로그 섹션

블로그 섹션은 Figma Site에서 제안된 섹션은 아니였고, 아래 세 정보를 입력으로 만든 섹션입니다. (저장)으로 표시된 것은 프로젝트 내부에 이미지로 저장되어 있어야 하고, (입력)은 Cursor 입력으로 넣어줘야 하는 정보입니다. 초기 스타일이 너무 잘 뽑혀서, 따로 수정할 요소는 없었습니다.

(입력) 렛서 랜딩페이지에 있는 섹션 스크린샷
(입력) 블로그 글 3개 제목
(저장) 블로그 글 3개 썸네일

퇴고하기

‘더보러가기’, ‘CTA 링크’, ‘내용’, ‘업데이트 할 이미지’는 전부 cursor와 다시 한번 점검해주세요. 그리고 다음 단계 사이트 배포하기로 넘어가면 됩니다.

배포하기

저는 페이지를 배보할때 Vercel이라는 SaaS를 활용하여 배포했습니다. Cursor에서 Vercel MCP를 활용하면 정말 쉽게 사이트를 배포할 수 있습니다.

Vercel Token 발급

Vercel.com 회원가입 이후 → Account Settings → Tokens에서 토큰을 만들고, 만들어진 토큰을 활용하여 Cursor에게 MCP 세팅을 요청할 예정입니다.

Vercel MCP 연결 요청

Cursor 프롬프트 입력 창에서 “Vercel MCP를 연결해줘. Token = {발급한 토큰}, 그리고 Vercel MCP를 이용해서 웹페이지 배포해줘.”라고 요청하면 Vercel에서 배포된 홈페이지를 확인할 수 있습니다.

도메인 연결

아래 글에서 가비아에서 domain을 구매하고, 배포된 Vercel 프로젝트에 domain을 연결할 수 있습니다. 방법은 아래 블로그에 상세히 적혀있습니다.

가비아에서 domain을 Vercel의 내 프로젝트와 연결하기

결론

Figma Site를 통해 웹페이지 레이아웃 초안을 뽑고, Cursor와 미드저니를 이용해 웹페이지를 우리가 원하는 방향으로 수정할 수 있음을 확인했습니다. 그리고 Vercel MCP를 활용해서 쉽게 배포할 수 있음을 확인했습니다.

2편에서는 실제 Production 수준으로(공개 가능한 수준으로) 디테일을 올리는 과정과 모바일 반응형 UI로도 전환하는 과정에 대한 이야기를 해보려고 합니다.

그리고 Cursor로 개발을 진행하면서 “매번 우리 회사의 홈페이지 스타일로 홈페이지를 빠르게 만들 수 있을까?“라는 고민을 했는데요.

직접 커서를 통해 웹페이지를 만들어보면 간단하게 명령함으로써 특정 레이아웃을 모방하거나, 스타일을 세부적으로 수정할 수 있습니다. 그래서 우리가 우리 회사의 스타일을 잘 정의해놓는다면 커서로 유사한 스타일의 홈페이지를 만들 수 있는데 다른 컨텐츠에서 다뤄보겠습니다.

AI 소식을 받아보고 싶으신가요?