Claude 를 통해 제품 사전 알림 신청 페이지 만들기

배경 및 목적

  • Claude를 통해 코딩이 필요 없는 제품 사전알림 페이지 생성 + 리드젠을 통한 DB수집

참고 자료

- AI 스터디 오프라인 모임에서 보여주신 게시글이 도움이 되었습니다 :)

활용 툴

  • Claude 와 ChatGPT 2개 툴을 사용하였습니다.

  • 2개 모두 사용한 이유는 HTML 디자인을 개선해달라고 요청했을 때 어느쪽이 더 깔끔하게 뽑히는지 테스트하기 위함입니다.

실행 과정

  1. 정리된 제품의 주요 USP를 Claude 에 제공했습니다. 요청 내용은 다음과 같습니다.

    나는 (제품관련정보) 기반으로 제품 출시 사전 알림 페이지를 만들고 싶어. 안내 페이지는 기본적으로 최근에 유행하는 깔끔한 2단 레이아웃 디자인이어야해. 그리고 제품에 관련된 설명이 상단에 들어가야해.

    1. 제품에 관련된 아래 내용을 기반으로 어떤 사람에게 마사지기 제품이 필요한지 10개의 체크리스트를 만들어줘. 니즈가 있는 고객이 제품의 필요성을 느끼게 하기 위한 목적이야. 체크박스가 작동했으면 좋겠어. 마지막에는 내가 몇 개 체크해는지 나왔으면 좋겠어.

    2. 디자인은 PC/MOBILE 둘 다 볼 수 있도록 깔끔한 페이지로 해줘. 상단에는 제품 관련 소개가 있고 하단에는 사전 알림 신청을 촉구하는 문구가 들어갔으면 좋겠어.

  2. DB 수집 전환율을 개선하기 위한 요소들을 추가했습니다.
    이미지 추가 / 카운트다운 배너 추가

  3. 디자인을 개선하기 위해 Chat GPT와 Claude에 현대적이고 깔끔한 디자인으로 개선 요청했습니다. USP 의 제목과 내용이 명확하게 구분될 수 있도록 요청했으며, 결과는 Claude 가 더 깔끔하게 도출되었습니다.

    [GPT 결과물]

    보라색 배경의 한국 웹사이트 스크린샷

    [CLAUDE 결과물]

    한국 광고 스크린샷

결과 및 인사이트

  • Claude 가 문서의 디자인을 개선하는데에 더 편리하다

    • 요청사항이 '가독성 개선' 으로 구체적이지 않을 때 Claude 사용이 더 편리했습니다

    • 다만 나중에 요청사항을 구체적으로 전달했을 때 어느쪽이 더 우수할지는 테스트가 필요할 것 같습니다.

  • 체크리스트에서 n개 이상 체크했을 때 :
    DB 수집 전환율을 높이기 위해 5개 이상 체크했을 때 하단에 '당신에게 꼭 필요한 제품입니다!' 라는 멘트가 노출되게 했습니다.
    이 부분이 HTML로 작동 가능할지 궁금했는데, 잘 나와서 기뻤습니다

    한국어 문자 메시지 스크린샷

생성한 테스트 랜딩 페이지도 첨부합니다 :)

https://leadgeny.kr/i/ule

1
2개의 답글

👉 이 게시글도 읽어보세요