코딩 없이 AI로 랜딩페이지를 만들려면 어떤 순서로 해야 할까요?

코딩을 몰라도 AI로 랜딩페이지를 만들 수 있습니다. 순서는 목적 정하기, 레퍼런스에서 규칙 뽑기, 시안 펼쳐 고르기, 실제 페이지로 만들기, 배포하고 고치기입니다. 앞의 세 단계를 건너뛰면 페이지는 금방 나오지만 어디서 본 듯한 결과가 되기 쉽습니다.

한 문단 프롬프트의 결과가 비슷한 이유

AI는 내가 어떤 일을 하는지, 어떤 분위기를 좋아하는지 모릅니다. 그래서 학습한 것 중 평균에 가까운 답을 냅니다. "더 예쁘게"라고 다시 물어도 비슷한 답이 돌아옵니다. 무엇을 기준으로 고를지는 사람이 정해야 합니다. 아래 단계는 그 기준을 만드는 과정입니다.

단계	할 일	끝나면 남는 것
1	목적 정하기	페이지의 목적 한 문장
2	레퍼런스 뜯어보기	내 페이지에 쓸 규칙 5개
3	시안 펼치고 고르기	기준이 될 시안 1개
4	실제 페이지로 만들기	움직임까지 들어간 페이지
5	배포하고 고치기	내 주소에서 운영하는 페이지

1. 목적을 한 문장으로 정합니다

이 페이지가 왜 있는지 한 문장으로 씁니다. 누가 보고, 보고 나서 무엇을 하길 바라는지가 들어가면 됩니다. 이 문장은 이후의 모든 프롬프트에 그대로 넣습니다. AI가 내 상황을 아는 통로이기 때문입니다.

2. 레퍼런스에서 화면이 아니라 규칙을 뽑습니다

마음에 드는 사이트를 서너 곳 고르고, 베끼는 대신 구조를 뜯어 달라고 요청합니다. 정리할 것은 네 가지입니다.

• 모든 사이트가 공통으로 지키는 규칙
• 한 사이트에만 있고 눈에 띄는 포인트
• 내 목적에 맞아 가져올 규칙 5개와 그 이유
• 좋아 보여도 내 목적과 맞지 않아 쓰지 않을 규칙

규칙은 눈으로 확인할 수 있게 적습니다. "고급스럽다" 대신 "바탕은 검정, 강조 요소만 흰색"처럼 씁니다. 그래야 다음 단계에서 AI가 지켰는지 확인할 수 있습니다.

3. 시안은 한 번에 하나만 바꿔 여러 개 받습니다

시안을 하나만 받으면 좋은지 나쁜지 판단하기 어렵습니다. 색만 바꾼 시안 2개, 배치만 바꾼 시안 2개, 분위기만 바꾼 시안 2개를 한 화면에 나란히 받습니다. 문구와 내용은 고정합니다. 하나를 고르면 그 시안을 기준으로 같은 방법을 한 번 더 반복합니다.

4. 고른 시안을 실제 페이지로 만듭니다

이제 코드는 AI에게 맡깁니다. 첫인상을 만드는 히어로와 정보를 읽는 아래 섹션은 밀도를 다르게 두고, 모든 섹션을 포스터처럼 꾸미지 않습니다. 고칠 때는 "좀 더 좋게" 대신 위치, 크기, 밀도, 색의 역할을 짚어 말합니다. 움직임은 내용과 배치가 정해진 뒤에 넣습니다.

5. 내 주소로 배포하고, 고쳐서 다시 올립니다

페이지는 내 주소에 올라가야 끝납니다. 올린 뒤에 문구 하나를 고쳐 다시 배포하는 것까지 해 봐야 혼자 운영할 수 있습니다. AI 구독료와 호스팅 비용이 들 수 있으니 미리 확인해 두세요.

바로 써 볼 수 있는 자료

2번과 3번에 쓰는 프롬프트와 브랜드 디자인 탐색 스킬은 랜딩페이지 제작 자료에서 무료로 받을 수 있습니다. 혼자서는 끝까지 가기 어렵다면 나의 브랜드 랜딩페이지 만들기 강의가 있습니다. 3주 동안 마감 3번과 라이브 피드백 3번으로 내 페이지를 올리는 과정입니다.