AI 랜딩페이지 첫 화면, 초보가 3분 만에 쓰는 7줄 프롬프트

AI 코딩 도구에 "랜딩페이지 하나 만들어줘"라고 말하면 처음에는 빨라 보입니다. 하지만 잠깐 지나면 첫 화면만 필요한데 가격표, 블로그, 로그인, 관리자 화면까지 같이 생기고, 정작 첫 화면의 문구는 누구에게 말하는지 흐려질 때가 있습니다. 이때 필요한 것은 더 긴 설명이 아닙니다. 첫 화면에서 반드시 보여야 할 것과 지금 만들지 않을 것을 3분 안에 나누는 일입니다.

OpenAI의 프롬프트 엔지니어링 가이드는 지시를 명확하게 쓰고, 원하는 출력 형식과 예시를 함께 주는 방식을 권합니다. 코딩 작업도 같습니다. AI가 실력이 없어서 산으로 가는 것이 아니라, 사용자가 "어디까지 만들고 어디서 멈출지"를 주지 않으면 AI는 빈칸을 스스로 채웁니다. 초보자는 이 빈칸을 줄이는 방식으로 질문해야 합니다.

1분째에는 타깃과 첫 화면의 한 문장만 적습니다

랜딩페이지 첫 화면은 예쁜 배경보다 먼저 "누구에게 무엇을 약속하는가"가 보여야 합니다. 그래서 첫 줄은 기능 설명이 아니라 타깃 상황으로 시작합니다.

타깃: 코딩을 처음 배우는 사람이 AI로 첫 개인 포트폴리오를 만들고 싶어 합니다.
첫 화면 메시지: 오늘 하나의 결과물을 만들 수 있다는 느낌을 줍니다.

여기서 "초보자용", "깔끔하게", "전문적으로"만 쓰면 AI가 해석해야 할 폭이 너무 넓습니다. 반대로 "코딩을 처음 배우는 사람", "첫 개인 포트폴리오", "오늘 하나의 결과물"처럼 상황을 넣으면 문구, 버튼, 예시 이미지가 같은 방향으로 모입니다. 첫 화면의 목적은 사이트 전체 설명이 아니라 첫 결정을 만들게 하는 것입니다.

2분째에는 만들 범위와 만들지 않을 범위를 같이 씁니다

초보자가 가장 많이 놓치는 줄은 "제외할 작업"입니다. AI는 친절하게 더 많이 만들어 주려는 방향으로 움직일 때가 많습니다. 하지만 첫 화면을 검증하기 전에는 더 많은 섹션이 오히려 방해가 됩니다.

범위: 데스크톱과 모바일 첫 화면만 만듭니다.
포함: 헤드라인, 보조 문장, 주요 버튼 1개, 결과물 예시 영역 1개.
제외: 가격표, 로그인, 결제, 블로그, 관리자 화면은 만들지 않습니다.

이 세 줄이 있으면 AI가 페이지 전체를 확장하기 전에 멈출 근거가 생깁니다. 특히 결제, 로그인, 관리자 화면은 작은 랜딩페이지 요청에서도 자주 딸려 나오는 범위입니다. 지금 목표가 첫 화면이라면 기능을 늘리는 대신 첫 화면의 설득력만 먼저 확인해야 합니다.

3분째에는 검증 기준을 숫자로 닫습니다

검증 기준이 없으면 결과를 보고도 "괜찮은 것 같기도 하고 아닌 것 같기도 한" 상태가 됩니다. 초보자는 디자인 감각으로 판단하려고 하기보다 숫자와 상태로 확인하는 편이 낫습니다.

첫 화면 프롬프트를 범위, 포함 제외, 검증 기준으로 나누는 3단계 체크

검증 기준: 모바일에서 첫 화면 안에 제목, 설명, 버튼이 모두 보이게 합니다.
검증 기준: 버튼 문구는 12자 이내로 씁니다.
검증 기준: 작업 후 바뀐 파일 목록과 확인 방법을 먼저 알려줍니다.

이 기준은 AI를 제한하려는 문장이 아닙니다. 결과물을 고르는 기준입니다. 버튼 문구가 길면 모바일에서 깨질 수 있고, 첫 화면 안에 핵심 문구가 보이지 않으면 사용자는 스크롤하기 전에 떠날 수 있습니다. 바뀐 파일 목록을 먼저 받으면 초보자도 다음 수정이 어디서 시작되는지 알 수 있습니다.

그대로 붙여 넣는 7줄 프롬프트

아래 프롬프트는 랜딩페이지 첫 화면을 맡길 때 바로 쓸 수 있는 형태입니다. 대괄호만 자신의 상황으로 바꿉니다.

타깃: [누가 어떤 상황에서 이 페이지를 봅니다].
첫 화면 메시지: [방문자가 얻을 가치 한 문장]을 느끼게 합니다.
범위: 데스크톱과 모바일 첫 화면만 만듭니다.
포함: 헤드라인, 보조 문장, 주요 버튼 1개, 결과물 예시 영역 1개.
제외: 가격표, 로그인, 결제, 블로그, 관리자 화면은 만들지 않습니다.
검증 기준: 모바일 첫 화면 안에 제목, 설명, 버튼이 모두 보이게 합니다.
작업 후: 바뀐 파일 목록, 확인 명령, 다음에 고칠 1가지만 알려주세요.

예를 들어 코딩사관학교 첫 화면을 만든다면 이렇게 바꿀 수 있습니다.

타깃: AI 코딩을 처음 배우지만 오늘 작은 결과물을 만들고 싶은 입문자입니다.
첫 화면 메시지: 막연한 공부가 아니라 오늘 하나의 화면을 완성할 수 있다는 느낌을 줍니다.
범위: 데스크톱과 모바일 첫 화면만 만듭니다.
포함: 헤드라인, 보조 문장, 주요 버튼 1개, 결과물 예시 영역 1개.
제외: 가격표, 로그인, 결제, 블로그, 관리자 화면은 만들지 않습니다.
검증 기준: 모바일 첫 화면 안에 제목, 설명, 버튼이 모두 보이게 합니다.
작업 후: 바뀐 파일 목록, 확인 명령, 다음에 고칠 1가지만 알려주세요.

이 프롬프트의 핵심은 문장을 멋있게 만드는 것이 아닙니다. AI가 추측해야 할 결정을 줄이는 것입니다. 첫 화면이 통과하면 그다음에 후기 섹션, 커리큘럼 섹션, 신청 섹션을 하나씩 붙이면 됩니다.

결과가 여전히 넓어지면 이 문장으로 다시 좁힙니다

AI가 여러 섹션을 만들었거나 파일을 너무 많이 바꿨다면 바로 다음 문장을 붙입니다.

지금 목표는 첫 화면 1개입니다.
방금 만든 결과에서 첫 화면과 직접 관련 없는 섹션과 파일 변경은 제거해 주세요.
남길 파일과 되돌릴 파일을 표로 먼저 보여준 뒤 수정해 주세요.

이 문장은 되돌리기 전 확인 장치입니다. 특히 초보자는 결과가 마음에 들지 않을 때 "다시 만들어줘"라고 말하기 쉽습니다. 그러면 AI가 더 넓게 바꿀 수 있습니다. 먼저 남길 것과 되돌릴 것을 나누면 작업 범위가 다시 작아집니다.

다음 수정은 색보다 문장부터 봅니다

첫 화면이 만들어진 뒤에는 색상이나 그림보다 문장을 먼저 봅니다. 방문자가 첫 5초 안에 "이 페이지가 나를 위한 것인지" 알 수 없다면 디자인을 바꿔도 효과가 작습니다. 아래 세 가지만 확인합니다.

확인할 것	좋은 상태	다시 물어볼 문장
타깃	누가 보는지 한눈에 보입니다	"타깃 상황이 제목이나 보조 문장에 드러나게 줄여 주세요."
가치	무엇을 얻는지 바로 보입니다	"기능 설명보다 방문자가 얻는 결과를 먼저 쓰세요."
행동	버튼 하나가 분명합니다	"첫 화면 버튼은 하나만 남기고 12자 이내로 줄여 주세요."

첫 화면은 사이트의 전부가 아닙니다. 하지만 첫 화면을 작게 완성하지 못하면 뒤쪽 섹션도 계속 흔들립니다. 오늘은 전체 사이트를 완성하려고 하기보다, 이 7줄로 첫 화면의 타깃, 범위, 검증 기준을 먼저 고정합니다. 그다음에 AI에게 "방금 기준을 유지한 채 다음 섹션 1개만 추가해 주세요"라고 말하면 됩니다.

참고한 공식 문서

OpenAI Prompt Engineering Guide: https://platform.openai.com/docs/guides/prompt-engineering
OpenAI Help, prompt best practices: https://help.openai.com/en/articles/6654000-best-practices-for-prompt-engineering-with-the-openai-api

AI 랜딩페이지 첫 화면, 초보가 3분 만에 잡는 7줄 프롬프트