커서로 랜딩페이지 만들기. 변동 내용 실시간 화면 확인. 여러개 버젼 동시 수정

개요

2개월전 클로드 랜딩페이지 만들기 스터디에서 클로드로 랜딩페이지 만들기를 배웠고, 최근 몇 주간 커서를 배우면서 파이썬 입코딩을 클로드 대신 커서로 해옴

며칠전 문득 왜 랜딩페이지는 계속 클로드로 하고 있지 하는 생각이 들어서 커서로 새로운 랜딩페이지를 만들게 됐다

한달 전부터 퍼널 마케팅을 배우면서 상품당 랜딩페이지를 3개씩 만들어야 해서 2번째 랜딩페이지를 커서로 만들어봄

페이스북 광고를 관찰하면서 기능 위주로 구현
아래는 플로팅 배너 - 아래 위로 움직여도 계속 아래 부분에 노출

랜딩페이지 제작시 : 클로드 VS 커서가 유리한 점
1. 클로드와 랜딩페이지를 왕복하면서 복붙하지 않아도 된다
2. 여러개 버젼을 동시에 업데이트 할수 있다
3. 랜딩페이지 화면을 실시간으로 보면서 변동내용 확인
4. 이전 버젼으로 복귀가 쉽다 : 컴포저 기능, 체크아웃
추가적으로 발견한 좋은 기능
1. 여러개 상품가격이 있고 총 합계 할인가 퍼센트를 자동 계산해서 반영
2. 랜딩 페이지 여러개 버젼으로 쉽게 관리 및 개별 기능 동시 업데이트
3. 동영상, 엑셀 등 다양한 종류 파일을 커서에서 직접 열람 가능
사례별 설명
1. 클로드와 랜딩페이지를 왕복하면서 복붙하지 않아도 된다
2. 여러개 버젼에 특정기능을 동시에 업데이트 할수 있다
3. 랜딩페이지 화면을 실시간으로 보면서 변동내용 확인
  1. 익스텐젼에서 Live Server 설치
  2. html 파일을 open with Live Server 열면
  3. 브라우져가 열리고 변동 내용을 실시간 화면 확인
    1. 좌측 커서, 우측 브라우져 랜딩페이지
    2. 실시간으로 변동 내용 확인
      2. To enable live reload functionality, you need to ensure that your HTML document is well-structured with <head> and <body> tags. Live reload typically involves using a tool or library that watches for changes in your files and automatically refreshes the browser.
4. 이전 버젼으로 복귀가 쉽다
  1. 챗 대신 컴포저를 사용하면 매번 적용시마다 체크포인트와 체크아웃이 나오는데 체크아웃을 통해 이전 버젼으로 복귀되며
  2. 여러 단계 이전으로 복귀가 쉽게 된다
5. 동영상, 엑셀 등 다양한 종류 파일을 커서에서 직접 열람 가능
  1. 동영상
  2. 엑셀
    https://youtu.be/i-h4PQP-0YQ?si=CuUpUnufnaJ-Fbsl
    https://youtu.be/i-h4PQP-0YQ?si=CuUpUnufnaJ-Fbsl
배운점
1. 클로드 대신 커서를 사용하면서 사용법을 익히는데 시간이 좀 걸리지만
2. 결론적으로는 파이썬 입코딩이나 랜딩페이지 제작 등 업무효율이 월등
다음주 목표
1. 랜딩 페이지 :
  1. 기능 및 디자인 업그레이드
  2. 플로팅 배너, 오토 슬라이드 등 기능
2. 파이썬 코딩 : 영어 단어장 업그레이드 : 영어 예문 추가

⏰ AI스터디 16기 모집 마감 (17기 7월 예정) | AI스터디 둘러보기 👀

커서로 랜딩페이지 만들기. 변동 내용 실시간 화면 확인. 여러개 버젼 동시 수정

👉 이 게시글도 읽어보세요