랜딩페이지 만들기 3주차_ 랜딩페이지 HTML 코드블럭 생성하기

소개

안녕하세요. 역삼동에서 인테리어사무실을 운영하고있는 김은입니다.

지난 주 발표를 통해서 랜딩페이지의 목적을 살짝 수정하게 되었습니다.

저희 현장에 들어가는 붙박이 가구를 직접 제작하고 있기때문에

홈스타일링에 대한 클라스를 제공하여 -> 계약을 수주한다, 또는 인테리어에 대한 아이디어 자체를 판매하거나 나누는 형태의 랜딩페이지를 제작한다--> 에서 붙박이 가구를 판매한다는 랜딩페이지 제작으로 좀 더 단순화하여 명확한 고객군과 랜딩페이지의 목적을 정하게 되었습니다.

이번 주에는 학습시킨 GPT를 통해 HTML 코드를 뽑아내는게 목적이므로 다시 1주차, 2주차때 진행하였던 분석, 정보취합 등등을 (이번에는 보다 붙박이 제작가구 중심위주로) 다시 진행해 보았습니다.

진행 방법

  1. 지난주차때 진행했던 분석 재학습(다른 주제로)

1) 페르소나 기억시키기, 랜딩페이지의 구성요소 학습시키기

한국어 텍스트가있는 검은 색 화면

2) 예시 페이지들로 구성요소 분석 다시시키기

clickfunnels

2주차때 관심있게 보았건 주방 럭셔리브랜드 팔맥사의 두 페이지

https://water.falmec.com/en/

https://elements.falmec.com/

학습 및 비교분석내용

한국어 텍스트가있는 검은 색 화면

유투브댓글분석기가 안열려서 새로운 영상 분석은 어려웠습니다.

기존 분석 내용을 복붙해서 학습시켰습니다.

  1. HTML 코드뽑기

1) GPT에게 학습시킨내용으로 HTML 코드블락 요청하기

한국어 텍스트가있는 검은 색 화면

2) Genspark에도 동일한 코드블락 요청해보기

그리고 각 재료들을 다시 묶어서 카피를 만들어달라고 했습니다,.

먼저 캔버스를 통해서 챗지피티가 만들어준 HTML 기반 랜딩페이지 디자인입니다.

나쁘지않아요.

젠스파크에게 물어본 내용입니다.

  • 클로드

    컬러팔레트를 한번 더 묻는다는 부분에서 디자인적인 신뢰가 가네요

  • 제미나이

    음???

  • 전체

    오호.. 약간의 액션도 있습니다 스크롤..

    한국 웹 사이트의 스크린 샷

결과와 배운 점

리드젠에서 구현 해 보았습니다.

수정은 좀 더 하고싶은데 아직은 좀 더 연구를 해봐야겠어요,

다음목표는 사진넣기입니다.

여기까지 하는데도 쉽지 않았습니다.

그래도 코드 하나없이 그리고 별도의 유로 프로그램 하나 없이 이렇게 그럴싸한 페이지를 만들어 낼 수 있어서 진짜 신기했습니다.

별 노력없이 결과만 얻고싶은 저에게 딱 맞는거 같습니다 ㅎㅎ

마케팅의 세상은 끝이 없고 배워야 할 것도 정말 많다고 다시 느꼈습니다.

다른 여러 분들의 케이스와 사례들 배우며 노력하겠습니다.

읽어주셔서 감사합니다 😊

👉 이 게시글도 읽어보세요