직장인 창업 컨설팅 서비스 랜딩페이지 AI로 만들기 (with 클로드, Flux, 에이닷) 업데이트 버전

소개

‎​리드젠에서 설문형 랜딩페이지 템플릿이 있어서 이걸 이용하여 만드려고 했으나,

한국어 지�원서 스크린샷

템플릿의 UI UX의 문제로 작성을 하지 않고,

지난번에 작성한 랜딩페이지를 업데이트 하려고 합니다.

진행 방법

  1. 이미지 생성 : Flux

  2. 문구 수정 & 추가 : 에이닷

  3. 색상 참고 : 컬러헌트

  4. 이미지 추가, 폰트 수정 & 색상 수정 : 리드젠

  5. 랜딩페이지 배경이미지 삽입 & 코드 오류 수정 : 클로드

‎​자세한 내용을 설명드립니다~!

  1. 이미지 생성 :

    직장인 창업 컨설팅 서비스를 안내해야 하기 때문에 실사 이미지가 필요했습니다.

    그런 점에서 Flux 는 좀 더 실사의 가까운 이미지로 만들어주는 주기 때문에

    무로료 이용해 봤습니다.

    이미지 생성 주의 사항

    1. 사이즈는 랜딩페이지를 PC로 볼 때 편한 16 : 9 사이즈로 선택

    b. 모델은 일단 가장 일반적인 것 선택.

    플럭스 모델의 옵션을 보여주는 화면

    c .이미지 생성 실행 시 10credit을 사용했습니다.

총 4번의 실행 끝에 만들어진 이미지는 다음과 같습니다.

다음 내용을 번역기로 돌려서 만들었습니다.

각각 동양인 남녀가 책상에 마주 앉아서 즐겁게 토론하며 컨설팅을 받는 장면으로 만들어.

남자는 어두운 남색 정장을 여자는 하얀색 바지정장을 입었고,

배경은 전체적으로 파란색이고 식물이 풍부하게 있는 세련되고 밝은 분위기 인테리어로 되어 있고,

밝은 각자의 노트북을 가지고 있고 노트북이 있어.

노트북에 두 사람이 있는 비디오 편집자의 스크린샷

이미지 생성 프롬프트 줄 때 다음과 같은 사항을 자세히 준다면,

원하는 이미지에 가까운 이미지로 생성해 줍니다.

  1. 상황

  2. 사람 수, 각 성별

  3. 배경

  4. 소품, 옷 (패션)

  1. 문구 수정 추가 : 에이닷

    지난번 직장인 컨설팅 서비스 랜딩페이지를 만들었을 때,

    ChatGPT가 맞춤 컨설팅 서비스를 5개만 생성해줘서 문구를 작성해주었는데,

    랜딩페이지를 PC형태로 볼 때 한 개를 더 채워서 보여주는 것이 나을 것 같아

    추가 수정을 진행하였습니다.

    아래 부분 추가 수정 시작!

    a. 에이닷은 클로드 ChatGPT 퍼플렉시티 등 다양한 서비스를 사용해 볼 수 있어서 이번에

    사용해 봤습니다.

    Google 광고 차단기의 스크린샷
    한국어 텍스트가 포함된 Google 검색 페이지의 스크린샷
    흰색 배경에 한국어 텍스트

    경력 전환형 직장인을 추가해주어서 랜딩페이지에 반영하였습니다.


위 추가 내용을 HTML 문서에서 수동으로 추가하였고,

(때론 AI보다 수동이 더 빠릅니다 ㅋㅋㅋ)

결과물은 다음과 같습니다.

한국어 웹사이트 스크린샷

  1. 색상 참고 : 컬러헌트

    컬러헌트는 다양한 색상을 보여주는 사이트로

    마우스 커서를 색상 위에 올리면 #컬러코드가 뜨고 클릭하면 바로 복사됩니다

    하트가 있는 파란색과 녹색 색상 팔레트
  1. 이미지 추가, 폰트 수정 & 색상 수정 : 리드젠

Editor에서 텍스트의 폰트와 색상이 수정 가능합니다.

결과물

그런데 아쉬운 점이 있다.... 아래 이미지처럼...

리드젠에서는 이미지 삽입만 가능하기 때문에

제가 원하는 방향은 아래 느낌이기에

Apple의 주말 오픈 하트 이벤트 포스터

배경에 이미지를 넣고 텍스트를 앞에 위치하기 위해서는 html 다시 코딩을 해야합니다.

클로드로 앞 부분만 코딩을 요청했습니다.

  1. 랜딩페이지 배경이미지 삽입 : 클로드

html 앞 부분만 수정하면 가능하기에, 이미지를 배경으로 넣어달라고 요청했고요.

왼쪽 화면에서는 이미지가 안들어가는 처럼 보이나,

코딩을 마음에 들게 해주었으나,

이 고처야 할 헤드 섹션만 보여지고 버튼 안보이는 오류와

전체 코딩이 안되어서 보여지는 부분의 오류가 있어서

이 부분 다시 코딩 요청했습니다.

여전히 버튼이 안 보이는 현상이 있어서, 그 부분만 오류 수정 요청을 하였습니다.

완성 후 결과 (리드젠 링크를 걸게 되면, 추후 안보여지게 되는 현상

두 사람이 노트북으로 작업하는 한국 비즈니스 페이지

결과와 배운 점

문제점, 클로드에서는 PC로 보일 때 가로가 길게 보이는데

리드젠에서 옮길 때는 좁게 보이는 현상과

리드젠의 DB로 결과 분석 진행 시 버튼을 없애야 하는데

아래 버튼 텍스트가

고객 DB 입력란 텍스트가 UI UX가 문제가 있어 수정 요청할 예정입니다.

위 버튼에서 "연결된 그룹이 없어 신청할 수 없다" 나오는데...

리드젠에서 버튼 클릭이나 DB를 관리하기 위해서는

신규 그룹을 선택하고 연결할 그룹을 만들면

버튼이 생성됩니다!

버튼 생성 완성!!!

다른 방법으로는 퍼널설계-> 그룹만들기 -> 이름 지정하기

퍼널문자를 설정해야 문자가 가는 시스템! GOOOD

퍼널문자는 문자발송 메시지를 작성하는 메뉴로 들어가야 하는데

발신 번호를 등록해야 합니다.

1

👉 이 게시글도 읽어보세요