외국인 대상 독채 숙소 홈페이지 랜딩페이지에 영상을 넣었습니다.

소개

무엇을 했나

숙소 홈페이지에 움직임(모션)을 넣었습니다. 스크롤을 내리면 사진이 커튼 걷히듯 드러나고, 글자가 순서대로 나타나는 연출입니다.

ALT

집 사진이 포함된 웹사이트의 스크린샷

시작은 스터디장님 프롬프트였습니다

스터디장님이 이런 형태의 프롬프트를 알려주셨습니다. 레퍼런스 사이트를 지정하고, 어느 부분을 어떻게 가져올지 말해주는 방식입니다.

1. https://1784.navercorp.com/
2. https://www.codeit.kr/

첫번째 네이버 홈페이지의 히어로 섹션의 스크롤에 반응하는 텍스트 모션과
뒤에서 루프로 돌아가는 영상을 지닌 웹사이트 그리고 그 이후 아래 섹션들은
코드잇 사이트 처럼 섹션마다 지루하지 않도록 모션들이 동작하는 사이트로 수정해줘.

이 프롬프트에 한 문장만 덧붙였습니다.

수정 작업하기 전에 결정해야 할 것을 /grill-me를 써서 물어봐

이 글은 그 한 문장이 시행착오를 많이 줄였다고 생각합니다.

진행 방법

전체 흐름은 5단계입니다.

1단계. 프롬프트 끝에 "만들기 전에 물어봐" 한 문장을 붙인다
2단계. 질문에 다 답하니 원칙 한 줄이 남는다
3단계. 모션을 '메뉴판'으로 받아서 고른다
4단계. 무거운 도구 없이 만든다
5단계. 모바일 갤러리를 3번 고친다

1단계 — 만들기 전에 물어보게 했습니다

/grill-me는 AI가 만들기 전에 사용자에게 되묻게 하는 스킬입니다. 하는 일을 쉽게 말하면 이렇습니다.

AI가 제 계획을 가지치기 그림(트리)으로 그립니다. 그리고 지금 당장 답할 수 있는 질문만 모아서 한 번에 던집니다. 제가 답하면 그림이 다시 그려지고, 그 답에 매달려 있던 다음 질문들이 열립니다. 더 물을 게 없어질 때까지 반복합니다.

핵심은 한 번에 다 묻지 않는다는 점입니다. "영상을 넣을지" 안 정했는데 "영상 화질을 얼마로 할지"는 못 묻습니다. 순서가 있습니다.

첫 라운드에 질문 6개가 왔습니다.

전부 제가 안 정하고 있던 것들입니다. 원본 프롬프트만 넣었다면 AI가 알아서 정했을 항목입니다.

그냥 묻기만 한 게 아닙니다. 질문마다 선택지와 AI의 추천안이 함께 왔습니다. 고르기만 하면 되도록요.

그런데 저는 이 질문들을 잘 못 알아들었습니다.

용어가 너무 많았습니다. 그래서 이렇게 답했습니다.

q1. 무슨말이야. 쉽게 설명해줘. test라고 했지만 해보고 마음에 들면
배포까지 할거야. SEO에 분리하다면 랜딩페이지만 이런 형태로
바꾸면 어떨까 싶은데, 대답하고 다시 질문해줘

질문이 쉬운 말로 다시 왔습니다. 개수도 6개에서 5개로 줄었고, 선택지도 단순해졌습니다.

질문에 다 답하고 나니, 계획이 바뀌었습니다

바꾼 이유는 단순합니다. 첫 화면은 이미 괜찮았고, 예약 결정은 하우스 페이지에서 일어나기 때문입니다.

이 판단을 제가 내렸다는 게 중요합니다. 질문을 안 받았다면 AI가 대신 정했을 것이고, 저는 왜 그렇게 됐는지 몰랐을 겁니다.

2단계 — 질문에 다 답하니 원칙 한 줄이 남았습니다

제 답변들이 한 줄로 요약됐습니다.

절제한다. 화면을 붙잡아두지 않는다.

예약 사이트에 온 손님은 객실과 가격을 빨리 보고 싶어 합니다. 화려한 모션이 스크롤을 잡아먹으면, 멋있어 보이는 대가로 예약을 놓칩니다.

이 한 줄이 이후 판단이 애매할 때마다 돌아올 자리가 됐습니다.

3단계 — 모션을 '메뉴판'으로 받아서 골랐습니다

"모션 넣어줘"라고 하지 않았습니다. 그렇게 하면 AI가 알아서 넣어버리고, 저는 왜 그게 들어갔는지 모르게 됩니다.

대신 넣을 수 있는 후보를 목록으로 받았습니다. 8개가 나왔고, 5개를 골랐습니다.

채택한 5개

탈락시킨 것

여기서 중요한 설계 하나. 5개는 성격이 두 가지로 나뉩니다.

• 한 번만 재생되는 것 4개 — 화면에 들어오는 순간 딱 한 번 움직이고 끝

• 계속 반응하는 것 1개 — 스크롤하는 내내 따라 움직임 (사진 패럴랙스)

이 둘을 섞은 이유는, 페이지 어디에서 스크롤해도 반응은 있으면서, 스크롤 양은 잡아먹지 않기 위해서입니다.

승인 프롬프트는 두 글자였습니다.

진행

4단계 — 모바일 갤러리를 3번 고쳤습니다

데스크톱은 괜찮은데 폰에서 어색했습니다. 세 번에 걸쳐 고쳤습니다. 제가 보낸 말은 매번 한 줄이었습니다.

3회차에는 캡처 이미지에 빨간 박스를 그려서 같이 넘겼습니다. 글로 "갤러리 아래 여백"이라고 쓰는 것보다 훨씬 정확했습니다.

【영상 삽입 위치 — 완성된 하우스 페이지 스크롤 화면】

결과와 배운 점

배운 점 1 — 좋은 프롬프트 뒤에 "묻고 시작해"를 붙이면 더 좋아집니다

스터디장님 프롬프트는 그 자체로 잘 만들어진 것이었습니다. 레퍼런스를 지정하고, 어느 부분을 어떻게 가져올지 정확히 말합니다.

그런데 거기에도 안 적힌 것들이 있었습니다. 배포할 사이트인지, 영상은 어디서 구할지, 모바일은 어떻게 할지 — 만드는 사람만 아는 것들입니다.

원본 프롬프트만 넣었다면 AI가 이걸 알아서 정했을 겁니다. /grill-me 한 줄이 그 결정권을 저에게 돌려줬습니다.

이 방식은 어떤 프롬프트에도 붙일 수 있습니다.

(원래 쓰던 프롬프트)

+ 작업하기 전에 결정해야 할 것을 /grill-me를 써서 물어봐

배운 점 2 — 앞에서 다 답해두면, 뒤에서 지시할 게 없습니다

이번 작업에서 제가 보낸 프롬프트는 이게 전부입니다.

진행
모바일에서 메인이미지를 크게 서브이미지를 작게 보여줄 수 있을까?
비율을 조정해서 세로 폭을 넓혀줘
표시한 부분의 공간 삭제해줘. 적당한 여백만 남겨둬. 모바일버전이야.

배운 점 3 — grill-me 스킬은 놓칠 수 있는 것들을 촘촘하게 물어 확인했습니다.

하지만 대답도 중요합니다. 첫 라운드 질문을 저는 잘 못 알아들었습니다. 대충 답하고 넘어가지 않은 게 다행이었습니다. 그 결정들이 끝까지 따라오기 때문입니다.

대답하고 다시 질문해줘 한 마디에 질문이 쉬운 말로 다시 왔습니다. AI가 어려운 말을 쓰는 건 제 수준을 몰라서입니다. 알려주면 맞춰줍니다.

시행착오

모바일 문제의 범인이 데스크톱 규칙이었습니다. 폰에서 사진 아래 흰 공간이 남았는데, 사진 크기를 아무리 바꿔도 안 없어졌습니다. 원인은 "두 줄의 높이를 똑같이 맞춰라"라는 데스크톱용 규칙이 폰까지 따라온 것이었습니다. 작은 사진 줄이 큰 사진 줄과 같은 높이로 억지로 늘어나 있었고, 그 남는 부분이 흰 공간이었습니다.

고정 크기는 두 번 고치게 됩니다. 처음에 "250픽셀"로 정했더니 넓은 화면에서 납작해졌습니다. "4:3 비율"로 바꾸니 한 번에 끝났습니다. 모바일 레이아웃은 처음부터 비율로 잡는 게 낫습니다.

앞으로의 계획

도움 받은 것

스터디장님 프롬프트 — 레퍼런스 사이트를 지정하고 어느 부분을 어떻게 가져올지 명시하는 형태입니다. 이 뼈대가 없었으면 /grill-me도 물어볼 게 없었을 겁니다. 좋은 질문은 좋은 출발점에서만 나옵니다.

/grill-me 스킬 — 만들기 전에 AI가 되묻게 하는 스킬입니다. 결정을 AI에게 넘기지 않게 해줍니다.

• 네이버 1784 (https://1784.navercorp.com/) — 히어로 스크롤 연출 레퍼런스

• 코드잇 (https://www.codeit.kr/) — 섹션별 등장 모션 레퍼런스