[랜딩페이지 제작] Arena AI로 랜딩페이지 제작하기

2026년은 AI의 해라는 생각이 든다. 젠스파크, 클로드 코드, Arena, Vercel 등 수많은 AI 서비스가 등장했고, 이제는 AI가 바이브코딩까지 할 수 있다는 사실도 알게 되었따.

현재 ‘인디음악 커뮤니티 앱’ 프로젝트의 마지막 단계에 있는데, 프로젝트가 AI 도입 이전에 시작된 만큼 지금 단계에서 AI를 어떻게 활용할지 고민 중이었다. 그러던 중 덕데이프라고 해서, 프롬프트만 입력하면 이미지를 생성해주는 AI기능이 Arena에 있다는 정보를 스레드를 통하여 접하게 되었다. 

---

왜 Arena AI인가

제미나이, 챗지피티, 클로드 디자인 등 이미지를 생성해주는 AI는 위에 작성한 바와 같이 제미나이, 챗GPT, 클로드 디자인 등  여러 개가 있다. 그 중에서도 Arena AI를 선택한 이유는 다음과 같다.

1. 2가지 시안을 받아볼 수 있다.
Arena AI는 특이하게 '시안을 n가지 받고 싶어'라고 프롬포트를 입력하지 않아도 처음부터 A안과 B안, 두 가지 시안을 만들어준다. 

예를 들어, 첫번째 시안을 2개를 받아보고 A과 B중 더 마음에 드는 방향을 선택한 다음, B안으로 원하는 프롬포트와 함께 시안을 만들어달라고 하면 또 A와 B안으로 만들어준다.

시안 하나가 있는 것보다는 2가지의 시안 중 내가 원하는 방향에 맞게 추가적으로 프롬포트를 입력하는 것이 더 빠르게 디자인 결과를 받아볼 수 있을 것이라고 생각이 들어  Arena AI를 선택하게 되었다.

 

2. 프로토타입까지 실행하게 뽑아준다.
재미나이는 UI/UX적으로는 이미지를 잘 생성해주나 아쉽게도 프로토타입까지는 구현이 아직 미흡하다고 생각한다. 만일 '출시 알림 받기'라는 버튼을 눌러보고 싶어도 피그마 MAKE로 옮긴 다음에 다시 피그마로 옮긴 다음에 그 때서야 직접 프로토타입을 연결해볼 수 있다.

이에 비해 Arena AI와 클로드 등 몇몇 AI 프로토타입까지 구현을 해주기에 사이트에서 바로 배포를 원할 경우에는 이 점이 굉장히 유용하다 생각한다.
다만 깔끔하고 트렌디한 느낌은 아직 재미나이가 한 수위라 생각하며, 절대적으로 우수하다고 말하긴 어렵다.

초안으로 뽑은 랜딩페이지

---

프롬포트 작성

무작정 AI에게 랜딩페이지를 만들어 달라고 할 수는 없다. 그렇기에 어느 정도 자료가 있는 상태에서 AI에게 랜딩페이지를 만들어달라고 명령어를 입력해야한다. 우선 해당 프로젝트의 경우에는 앱 스토어에서 출시된 적이 있기에 링크로 전달을 했지만 그렇지 않은 경우에는 프로젝트에 대한 설명을 작성해야한다.

 
첫번째 프롬포트
사이트 링크+ 랜딩페이지를 만들어서  출시 알림을 받아 보고 싶다고만 전달을 했고 아래의 이미지가 결과물로 받아볼 수 있었다.

링크를 주었기에 정보 오류는 크게 없었지만 AI가 만들어준 디자인이 출시된 앱과의 정체성과 맞지 않았다. A안은 비교적 유사했지만 B안은 전혀 다른 컨셉이 나왔다.

두번째 프롬포트
그렇기에 메인색상 정보를 전달하여, 추가 프롬포트를 입력했을 때 동일한 분위기로 이미지가 나올 수 있게 했다. 이 뒤로 2번의 프롬포트를 입력했는데 메인색상 기준으로 디자인을 만들어줘서 일관성은 유지할 수 있었다. 

세번째 프롬포트
랜딩페이지를 제작한 경험이 있어, 이전에 어떻게 제작했는지와 스타트업에서는 어떻게 제작했는지 확인해봤는데 보통 제작한 화면과 함께 홍보하는 경우가 있었다. 나도 글만으로는 전환율을 높이기 어렵기에 랜딩페이지에 이미지도 있었으면 좋겠다고 생각했다.

이 때 Arena에 관해서는 아는 정보가 거의 없었기에 만약 내가 원하는 이미지가 있다면, 원본 그대로 반영을 해주었기에 Arena도 반영을 해줄 거라 생각하고 있었다. 

이미지 그대로는 반영을 하지 못하는 Arena

하지만 Arena에 이미지 전달은 가능하지만 그 이미지 그대로 반영은 못해준다고 한다. 홈화면을 재현해준다고 해서 일단 재현을 해달라는 프롬포트를 추가적으로 입력했다. 

이미지를 전달하게되면 한글이 깨지거나 이미지에 기반해서 새로운 레이아웃을 만들어준 상태로 반영을 해준다. 아무래도 나는 실질적으로 만들어진 앱을 대상으로 랜딩페이지를 제작해야했기에 이미지가 그대로 반영되지 않는다는 점은 너무나도 아쉬웠고, 이 부분이 해결이 되지가 않아 Arena가 만들어준 시안을 바탕으로 웹사이트는 별도로 배포해야겠다고 생각했다

시안은 Arena로 빠르게 확정했지만, 최종 퍼블리싱은 Webflow로 직접 작업해 마무리고 후속 이야기는 2편에서 자세히 공유하겠다.