이 가이드는 짧은 명령어 하나로 끝나지 않습니다. 필요한 자료를 정리하고, AI가 추측하지 않게 경계를 주고, 출력 내용을 원문과 대조해 실제로 사용할 수 있는 결과로 만드는 전체 과정을 설명합니다.
예시 안내 본문의 입력과 기대 결과는 절차를 설명하기 위해 구성한 예시입니다. 실제 수행 결과나 성과를 주장하지 않으며, 중요한 업무에는 원자료와 담당자의 최종 확인이 필요합니다.
- 사업 목적을 첫 방문자가 수행할 한 가지 행동과 연결합니다.
- 추상적인 분위기 표현을 콘텐츠 구조와 검증 가능한 화면 기준으로 번역합니다.
- AI가 만든 프로토타입을 키보드·모바일·오류 상태까지 직접 확인하고 요구사항에 대조합니다.
완성 결과물
누구에게 필요하고, 누구에게는 맞지 않을까
이런 분께 맞습니다
- 아이디어는 있지만 디자이너나 개발자에게 전달할 요구사항이 정리되지 않은 사람
- AI 코딩 도구로 랜딩페이지의 첫 버전을 만들려는 기획자
- 시각적 완성도와 전환 목적, 접근성을 함께 검수하려는 팀
이 경우에는 멈추세요
- 브랜드·콘텐츠·목표 행동을 정하지 않고 AI가 전부 결정해 주길 원하는 경우
- 로그인, 결제, 민감정보 저장처럼 별도 보안 설계가 필요한 완성 제품
- 다른 사이트의 문구와 디자인을 그대로 복제하려는 경우
시작 전에 준비할 것
도구를 열기 전에 입력 자료와 최종 확인자를 정하면, 그럴듯하지만 틀린 결과를 줄일 수 있습니다.
- 페이지의 사업 목적과 가장 중요한 방문자 한 유형
- 사실 확인을 마친 제품·서비스 정보와 사용할 수 있는 브랜드 자산
- 방문자가 완료해야 할 핵심 행동 한 가지
- 지원할 화면 크기와 브라우저 범위
- 공개 전에 콘텐츠와 기능을 확인할 책임자
단계별 과정
방문자와 한 가지 핵심 행동을 고정합니다
왜 필요한가 — 목표가 여러 개면 AI는 비슷한 크기의 버튼과 설명을 늘어놓고 첫 화면의 우선순위를 정하지 못합니다.
‘제품을 알린다’보다 ‘처음 방문한 소규모 팀 운영자가 기능을 이해하고 데모 문의 버튼을 누른다’처럼 방문자, 이해해야 할 가치와 행동을 한 문장에 넣습니다. 행동을 완료한 뒤 이동할 실제 경로도 확인합니다.
이번 프로토타입에서 다루지 않을 대상과 기능도 적습니다. 회원가입, 결제, 관리자 화면처럼 뒤 단계의 기능을 제외하면 랜딩페이지 자체의 성공 조건을 더 분명하게 볼 수 있습니다.
방문자: 반복 문의를 정리하려는 5~20명 규모 팀의 운영 담당자 이해할 가치: 문의를 한곳에서 분류하고 담당자에게 전달 핵심 행동: 데모 문의 이메일 열기 제외: 회원가입, 결제, 관리자 대시보드
페이지 목표: 첫 방문자가 문의 정리 방식과 적용 대상을 이해한 뒤 데모 문의 링크를 연다. 주요 CTA: 데모 문의하기 보조 CTA: 작동 방식 보기 범위 밖: 계정 생성·결제·실제 데이터 처리
주장보다 필요한 콘텐츠를 먼저 배열합니다
왜 필요한가 — 텍스트 근거가 없는 상태에서 화면부터 만들면 과장된 문구와 의미 없는 장식이 빈자리를 채우기 쉽습니다.
방문자가 순서대로 묻는 질문을 적습니다. 무엇인지, 누구에게 필요한지, 어떻게 작동하는지, 어떤 한계가 있는지, 다음 행동은 무엇인지에 답하는 실제 문장을 준비합니다.
근거가 없는 고객 수, 절감 시간, 만족도와 후기는 사용하지 않습니다. 아직 없는 사례는 가상 고객 후기처럼 만들지 말고 기능 설명, 작업 예시 또는 ‘준비 중’ 상태로 대체합니다.
확인된 사실: 이메일과 폼 응답을 분류 기준에 따라 정리하는 개념 프로토타입 확인되지 않음: 고객 수, 절감 시간, 실제 도입 사례 필수 질문: 입력 자료 / 분류 과정 / 검토자 역할 / 문의 방법
섹션 순서: 가치 제안 → 적용 대상 → 3단계 작동 방식 → 사람이 확인할 지점 → FAQ → 문의 CTA 제외 문구: ‘업무시간 70% 절감’, ‘수백 팀이 선택’ 대체: 검증 가능한 기능과 입력·출력 예시
느낌을 화면 합격 기준으로 번역합니다
왜 필요한가 — ‘고급스럽고 역동적으로’ 같은 요청은 사람과 AI가 서로 다른 화면을 떠올리게 합니다.
시각 요청을 글자 크기 체계, 색상 역할, 최대 본문 폭, 섹션 간격, 이미지 용도와 움직임의 조건으로 바꿉니다. 참고 사이트는 복제 대상이 아니라 밀도, 대비, 리듬을 설명하는 자료로만 사용합니다.
기능 요구에는 정상 상태뿐 아니라 메뉴 열림, 링크 포커스, 로딩, 빈 데이터와 오류 상태를 포함합니다. 각 항목을 ‘보인다’, ‘작동한다’, ‘넘치지 않는다’처럼 눈으로 확인할 수 있는 문장으로 씁니다.
요청: 전체 화면, 고급스러운 3D, 헤더는 계속 보이게, 모바일에서도 깔끔하게 브랜드: 따뜻한 아이보리·검정·파랑 콘텐츠 우선순위: 제목 → 설명 → CTA
합격 기준: 첫 섹션은 초기 화면 높이를 활용하되 CTA가 가려지지 않음 / 헤더는 스크롤 후에도 탐색 가능 / 3D 장식은 텍스트 클릭을 막지 않음 / 390px 화면에서 가로 스크롤 없음 / 동작 감소 설정에서 필수 정보 유지
AI에는 콘텐츠와 제약을 한 묶음으로 전달합니다
왜 필요한가 — 제목만 전달하면 AI가 임의의 브랜드 문구, 숫자와 기능을 채울 수 있습니다.
페이지 목표, 확정된 문구, 섹션 순서, 디자인 토큰, 상호작용과 금지사항을 같은 요구사항 문서에 넣습니다. 기존 프로젝트라면 사용 중인 구조와 의존성을 보존하도록 명시합니다.
한 번에 완성품을 요구하기보다 먼저 의미 구조와 실제 콘텐츠가 있는 첫 버전을 만듭니다. 이후 움직임과 장식은 정보 전달과 키보드 사용을 해치지 않는 범위에서 단계적으로 추가합니다.
목표: 데모 문의 링크 열기 필수 섹션: 가치·대상·작동 방식·검토 원칙·FAQ·CTA 금지: 가짜 후기, 확인되지 않은 수치, 자동 재생 영상, 다른 사이트 복제 필수 상태: 모바일 메뉴, 키보드 포커스, reduced motion
프로토타입 범위: 단일 랜딩페이지와 전역 헤더·푸터 콘텐츠: 제공된 사실만 사용 상호작용: 메뉴와 CTA의 키보드 작동 후속 작업: 시각 효과는 구조 검수 후 적용
요구사항 추적표로 실제 화면을 검수합니다
왜 필요한가 — 빌드가 성공하거나 화면이 멋져 보이는 것만으로 링크, 모바일 레이아웃과 접근성이 맞다고 판단할 수 없습니다.
각 요구사항에 화면 위치, 확인 방법, 결과와 수정 내용을 연결합니다. 데스크톱과 모바일에서 핵심 CTA, 메뉴, 내부 링크를 직접 사용하고 키보드만으로도 같은 경로를 완료합니다.
가로 넘침, 텍스트 잘림, 초점 표시, 제목 순서, 링크 이름, 대비와 동작 감소 설정을 확인합니다. 발견한 오류를 요구사항 문장과 연결해 고친 뒤 같은 경로를 다시 시험합니다.
R01 390px에서 가로 스크롤 없음 R02 Tab으로 메뉴와 CTA 접근 R03 헤더가 본문을 가리지 않음 R04 reduced motion에서 정보 손실 없음 R05 모든 CTA 목적지가 유효
R01 통과: 문서 폭=뷰포트 폭 R02 수정 필요: 모바일 메뉴 닫은 뒤 포커스 복귀 R03 통과 R04 통과 R05 통과: 메일 링크와 내부 앵커 확인
수정해 쓰는 재사용 입력
중괄호 부분을 자신의 상황으로 바꾸고, 실제 자료를 넣기 전에 개인정보와 공개하면 안 되는 내용을 제거하세요. 결과는 반드시 원문과 대조합니다.
다음 요구사항으로 랜딩페이지 프로토타입 명세를 작성하세요. 제공되지 않은 고객 수, 성과, 후기, 기능을 만들지 마세요.
[방문자와 목표 행동]
{{누가 무엇을 이해하고 어떤 행동을 해야 하는지}}
[확인된 사실과 문구]
{{제품 설명, 제공 범위, 연락처, CTA 목적지}}
[시각 방향]
{{색상 역할, 글자 위계, 여백, 이미지·움직임 용도}}
[필수 기능과 상태]
{{탐색, 버튼, 메뉴, 빈 상태, 오류 상태}}
[범위 밖과 금지사항]
{{이번에 만들지 않을 기능, 쓰지 않을 주장}}
[출력]
1. 섹션별 목적·제목·본문·CTA
2. 의미 구조와 상호작용 상태
3. 데스크톱·모바일 합격 기준
4. 키보드·대비·동작 감소 점검
5. 요구사항 추적표와 아직 결정되지 않은 질문결과 확인 체크리스트
- 핵심 방문자와 목표 행동이 한 문장으로 정리됐다.
- CTA의 실제 목적지가 확인됐다.
- 이번 프로토타입의 범위 밖 기능을 적었다.
- 섹션마다 답할 방문자 질문이 있다.
- 근거 없는 통계·후기·성과 문구를 제거했다.
- 추상적인 시각 요청을 화면 기준으로 바꿨다.
- 모바일·키보드·동작 감소 기준이 있다.
- 오류·빈 상태가 필요한 기능을 정의했다.
- 모든 요구사항에 검수 결과를 연결했다.
- 수정 후 같은 사용자 경로를 다시 시험했다.
자주 막히는 지점과 해결법
참고할 리듬과 밀도만 언어로 설명하고 브랜드 콘텐츠와 구조는 별도로 설계합니다.
검증된 실제 길이의 제목·본문·CTA를 먼저 넣고 그 상태로 반응형을 확인합니다.
장식은 클릭 대상과 분리하고 모바일·동작 감소 상태를 별도로 시험합니다.
핵심 경로를 실제 화면, 키보드와 여러 뷰포트에서 직접 수행합니다.
개인정보·저작권·정확성 주의
AI가 자연스럽게 작성했다는 사실은 정확성과 이용 권한을 보장하지 않습니다. 공개하거나 전달하기 전에 아래 항목을 확인하세요.
- 참고 사이트의 문구, 이미지와 고유한 디자인 표현을 그대로 복제하지 마세요.
- AI가 만든 후기, 이용자 수와 성과 수치를 사실처럼 게시하지 마세요.
- 문의 폼이 개인정보를 받는다면 수집 목적·보유·전송 구조를 먼저 정리하세요.
- 움직임과 3D 효과는 멀미 유발 가능성과 동작 감소 설정을 고려하세요.
- 결제·로그인·파일 업로드는 시각 프로토타입과 별도의 보안 검토가 필요합니다.
- 접근성은 자동 검사 하나로 확정하지 말고 키보드와 실제 화면을 함께 확인하세요.
공식 출처와 확인 기준
출처는 각 원자료가 다루는 범위 안에서 참고했습니다. 서비스 화면과 기능은 바뀔 수 있으므로 실제 사용 전 최신 문서를 다시 확인하세요.
수정 이력
2026-08-14 — 작성 및 편집 검수.
이어서 볼 가이드
재생에너지·앱 개발·이커머스를 거치며 배운 AI 활용법
회사 안에서도 저는 계속 ‘새로운 걸 만들어야 하는 역할’에 있었습니다 돌이켜보면 저는 정해진 업무를 오래 반복하기보다, 이미 있는 방식에서 새로운 매출이나 새로운 채널을 만들어야 하는 일을 많이 했습니다. 신세계에서는 MD의 관점에서 상품과 고객을 봤고, SK Networks에서는 온라인 시장이 본격적으로 커지기 시작하던 시기에 새로운 이커머스 사업을 만드는 일을 경험했습니다. 당시에는 지금처럼 브랜드가 온라인 판매를 당연하게 생각하지 […]
프롬프트 버전을 감으로 고르지 않는 평가 도구 설계법
같은 시험 입력과 판정 기준으로 프롬프트 두 버전을 가려 비교하고, 좋아진 사례와 퇴행한 사례를 함께 남기는 평가 도구 명세입니다.