소개
진행 방법
상세페이지를 만들어야 해서,
테스트 겸 안티그래비티에게 전체 제작을 맡겨보기로 했습니다.
먼저 GPT로 상세 페이지에 필요한 내용을 정리했습니다.
이후 안티그래비티에게 아래 프롬프트를 부탁했습니다.
“상세페이지용 HTML + CSS + JavaScript 구성까지 만들어줘”
라고 요청했더니,
정말로 기본 HTML 골격을 바로 뽑아주더군요.
디자인 자체는 약간 “AI스럽다” 싶은 부분이 있었지만 솔직히 급할 땐 아무 문제 없었습니다.
레퍼런스 입력 전
이후 동일한 스타일의 다른 상세페이지가 필요해서
같은 방식으로 다시 요청해봤더니 역시나 비슷한 디자인 느낌이 반복됐습니다.
그래서 이번엔 레퍼런스를 제공해보기로 했습니다.
상세페이지에는 보통 흐름이 있습니다.
대표적으로:
히어로 섹션 (첫 화면에서 임팩트 주는 영역)
핵심 USP 정리
제품 설명
상세 스펙
FAQ or 구매 유도
이 구조를 기반으로
“레퍼런스를 분석해서, 이 페이지에 맞는 구조를 다시 잡아달라”
라고 부탁했습니다.
레퍼런스 입력 후
이제는 결과가 꽤 나이스하게 나오기 시작했습니다.
전체 흐름이 훨씬 자연스러워지고
디자인 구성도 레퍼런스의 장점을 잘 가져오더군요.
속도가 조금 느리긴 했지만
출력물의 질을 생각하면 충분히 감당 가능한 수준이었습니다.
피그마로 같은 디자인 만들어 보았 는데, 퀄리티는 비등비등한 것 같습니다?(제가 피그마 메이크를 못 쓰는 것일 수도 있음)
배포까지 10분
최종 코드는 Vercel에 업로드해서 배포까지 마쳤고,
결과적으로 한 페이지 만드는 데 10분도 안 걸렸습니다.
이 정도면 솔직히
“웹페이지 제작의 게임 체인저”라고 봐도 될 것 같습니다.
레퍼런스 분석만 제대로 넣어주면
괜찮은 퀄리티의 상세페이지는
정말 뚝딱 만들어지는 수준입니다.
결과와 배운 점
음 다른 사례들 보니까 그냥 사진 찍어서 레퍼런스 주는게 가장 나은 것 같네요?
다음에는 히어로 세션 먼저 만들어보려고 합니다. 상세페이지 잘 만드는 분들은 집 기초를 먼저 짓고 집을 세우듯이 해당 프로세스로 작업하더라고요.
