Codex용 모바일 랜딩 페이지 점검 프롬프트

랜딩 페이지의 390px 버전을 Codex에게 만들게 합니다. 첫 화면에 CTA, 터치 영역 44px, 뺀 요소의 목록까지.

이 페이지의 390px 너비 버전을 별도 파일로 만들어 줘. 섹션은 자연스러운 순서로 쌓고, 첫 화면에서 스크롤하지 않아도 CTA가 보이게 하고, 모든 터치 영역은 높이 44px 이상으로 해 줘. 데스크톱의 어떤 요소를 빼거나 단순화했는지, 그 이유도 알려 줘.

지원 도구

Codex, ChatGPT

프롬프트 모음

랜딩 페이지

이 프롬프트 소개

Codex는 페이지의 390px 너비 파일을 따로 만들어 섹션을 휴대폰에 맞게 다시 쌓고, 첫 화면에서 스크롤 없이 CTA가 보이게 하고, 모든 터치 영역을 높이 44px 이상으로 만듭니다. 또 뺐거나 단순화한 데스크톱 요소를 이유와 함께 나열하는데, 가장 읽을 가치가 있는 것이 바로 그 목록입니다.

디자인 결정은 그 목록에 숨어 있습니다. 3열 기능 그리드가 긴 스크롤로 바뀌었는지, 로고 띠가 4개로 줄었는지, 더는 맞지 않는 요금제 토글이 있는지 같은 것들입니다. 파일을 그대로 받아들이지 말고 항목마다 수락하거나 거절하거나 다시 다듬으세요. 방문자 대부분이 Android를 쓴다면 390px을 일반적인 Android 너비인 412px로 바꾸세요.

데스크톱 레이아웃을 다듬은 뒤가 아니라 그 전에 실행하세요. 휴대폰에서 버티지 못하는 데스크톱 디테일은 일찍 발견할수록 좋고, 모바일 버전은 별도 파일이므로 어떤 변경을 되가져올지 정할 때까지 데스크톱 페이지는 그대로입니다.

이 모음의 다른 프롬프트

• AI가 만든 랜딩 페이지의 템플릿 느낌을 덜어 내는 프롬프트AI가 만든 것처럼 보이게 하는 요소(전부 가운데 정렬, 모호한 문구 등)를 찾아 가장 심한 5개를 고치게 하는 점검 프롬프트.
• Codex용 랜딩 페이지 HTML을 프로덕션 코드로 바꾸는 프롬프트승인된 HTML 랜딩 페이지를 Next.js와 Tailwind 같은 실제 스택에서 기존 컴포넌트로 다시 만들고 문구는 그대로 둡니다.
• Codex용 랜딩 페이지 브리프 프롬프트제품, 방문자, 목표, 근거를 Codex에 알려 주고 디자인에 앞서 페이지에 필요한 섹션을 순서대로 뽑게 하는 브리프 프롬프트.
• Codex용 히어로 섹션 디자인 프롬프트: 세 가지 방향에디토리얼, 다크, 소프트 세 가지 1440×900 히어로를 같은 문구로 요청해 시각 스타일만 비교합니다.
• Codex용 전체 랜딩 페이지 디자인 프롬프트고른 히어로 방향을 완성된 랜딩 페이지로 확장합니다. 섹션 8개를 순서대로 지정해 군더더기를 막습니다.
• Codex용 랜딩 페이지 기능 섹션 프롬프트: 실제 콘텐츠로 쓰기기능마다 구체적인 헤드라인, 디테일이나 숫자, 아이콘 대신 작은 HTML 비주얼을 넣어 기능 섹션을 다시 씁니다.