ChatGPT Claude Gemini로 Bento Grid 모션 웹페이지 만드는 프롬프트 템플릿과 함정 피하기

애플 공식 사이트처럼 “스크롤하면 움직이는” 웹페이지를 만들고 싶은데, 프런트엔드를 처음부터 파고들긴 싫다면? 나는 “세 가지 채팅 모델로 코드 작성 + Midjourney로 이미지 생성” 조합을 더 추천한다. 효율이 말도 안 되게 좋다.

한 번의 프로세스로 페이지 구조·모션·소재까지 해결

ChatGPT는 뼈대를 맡는다

HTML5+Tailwind를 가장 빠르게 짜주고, Bento Grid, 블랙 배경 + 하이라이트 색 #2657FD, 초대형 숫자 타이틀 같은 “하드 요구사항”을 한 번에 깔아두기에 좋다.

바로 복사해 쓸 수 있는 프롬프트: 단일 HTML 파일을 출력하고, TailwindCSS CDN과 필요한 JS를 사용. Bento Grid 레이아웃, 검은 배경, #2657FD 하이라이트, 중국어 큰 제목 + 영어 작은 글씨로 포인트, 데이터 미니 그래픽 플레이스홀더 포함, 내용 핵심을 생략하지 말 것.

Claude는 모션을 매끈하게 다듬는다

Framer Motion을 CDN으로 쓰면 “돌긴 도는데 엄청 덜컹거리는” 경우가 쉽다. Claude는 스크롤 트리거, 등장 애니메이션, 리듬 커브를 더 보기 좋게 다듬는 데 강하다(경계 조건도 더 잘 보완해준다).

Gemini는 누락을 메운다

브라우저 에러, 스타일 오버라이드, 컴포넌트 정렬 불일치가 나오면 Gemini에게 “구간별 설명 + 문제 위치 특정 + 대체 코드 제공” 방식으로 고치게 하면, 콘솔만 멍하니 보는 시간을 줄일 수 있다.

Midjourney는 메인 비주얼을 맡는다

“원자로 코어/은하 폭발/에너지 방출” 같은 메인 비주얼(소재에 언급된 극채색 네온 광 + 어두운 바탕)은 Midjourney에 맡기는 게 가장 적합하고, 이미지를 다시 ChatGPT에 넣어 반응형으로 맞추면 된다.

내가 자주 하는 두 가지 소소한 불평

• 모델이 써준 CDN 링크가 가끔 만료돼서 실행이 안 될 때가 있다. 인생을 의심하지 말고 공식 최신 링크로 바꾸면 된다.
• 모션은 너무 많이 쌓지 말 것. Bento Grid는 절제할수록 더 고급스럽고, 아니면 PPT 연말행사 느낌이 난다.

아직도 “모델을 어떻게 고를지/프롬프트를 어떻게 짤지/계정과 도구를 한 번에 어떻게 세팅할지”에서 막힌다면 Titikey를 둘러봐도 좋다. 나도 자주 써서 시행착오를 줄인다.