[실전템플릿] R2L 홈페이지 완성도를 높이는 요청 프롬프트 최적화 가이드

왜 프롬프트를 최적화해야 하나

홈페이지 작업에서 시행착오가 반복되는 핵심 원인은 “요구사항은 있는데 명세가 없는 상태”입니다. 특히 디자인 작업은 감성 요청보다 구조화된 요청이 훨씬 결과가 좋습니다.

복붙용 최적 프롬프트 템플릿

역할:
너는 시니어 웹디자이너+프론트엔드 개발자다.
목표는 “알투엘영어학원” 랜딩페이지의 완성도 높은 최종본을 1회 배치로 만드는 것이다.

브랜드/기본정보:
- 사이트명: 알투엘영어학원
- 주소: 서울 강북구 삼양로19길 74
- 타겟: 중·고등학생 + 학부모
- 기술: Nuxt 3 (기존 r2l 프로젝트 유지)
- 도메인: r2l.nae.mom
- 폰트: Noto Sans KR 고정

디자인 레퍼런스 방향:
- creverse/april 같은 프리미엄 학원형 톤앤매너
- 과도한 화려함 X, 신뢰감/전문성/깔끔함 O
- 배경 이미지는 밝은 중·고등 학습 분위기

필수 UI 요구사항:
1) 원페이지 구조 + 상단 고정 헤더
2) 메뉴: 알투엘 스토리 / 프로그램 / 상담문의 / 공지사항
3) 우측 CTA 버튼 문구: “입학시험 예약”
4) 메인 히어로 3슬라이드 캐러셀
   - 슬라이드1: 학원 소개/강점
   - 슬라이드2: 커리큘럼
   - 슬라이드3: 추천율 100%, 만족도 5/5
5) 캐러셀 텍스트는 “항상” 이미지 위에 보이게 (깜빡임/숨김 금지)
6) 메뉴/버튼 밑줄 표시 금지
7) 모바일 반응형 필수

카피 톤:
- 학부모 신뢰 + 학생 성장 중심
- 과장 광고 느낌 금지
- 문장은 짧고 명확하게

인터랙션:
- 슬라이드 전환 부드럽게
- 버튼/카드는 미세 hover 효과
- 가독성 최우선 (텍스트 대비 확보)

품질 기준(완료 조건):
- 첫 진입 시 헤더 최상단 고정
- 스크롤 중 헤더 유지
- 슬라이드 자동/수동 전환 모두 정상
- 텍스트 미노출 버그 0
- 데스크탑/모바일 모두 레이아웃 깨짐 0

작업 방식:
- 중간 보고 없이 한 번에 반영
- 변경 파일 목록 + 핵심 변경 포인트 + 검증 결과를 마지막에 요약 보고

완성도 더 끌어올리는 한 줄

디자인 완성도를 우선하고, 구조/레이어 버그(텍스트 숨김, 헤더 오프셋)를 먼저 제거한 뒤 스타일을 다듬어 주세요.

다음번 실행 팁

• 요청 전에 레퍼런스 스크린샷 2~3장 먼저 공유
• “필수사항”과 “선호사항”을 분리해 전달
• 첫 결과물은 UI 구조, 두 번째에서 미세 디자인 조정