tl; dr
http://leadz.kr/xGB 여기서 독서 기록용 웹앱 사전 신청을 받고 있습니다
소개
개인 AI 프로젝트로 독서 기록용 웹앱을 만들고 있습니다
이달 말 되어야 다 만들어질 것 같지만 (제발), 13기 마케터 스터디 결과물들을 보 면서, 저도 미리 마케팅을 해보면 어떨까 싶었습니다
살면서 처음으로 실천해보는 만들기 전에 팔기 입니다
진행 방법
Jiyu Kim 님의 ChatGPT+클로드로 러닝크루 랜딩페이지 만들기 (1주차 사례)와 Inactive Member 님의 직장인 창업 컨설팅 서비스 랜딩페이지 AI로 만들기 (with GPT, 클로드, 퍼플렉시티)를 참고해서 진행했습니다
소프트웨어 요구 사항을 미리 뽑아놨습니다
요구 사항 뽑는 방법은 해당 사례게시글을 참고해주세요
소프트웨어 이름을 지었습니다 (1)
STP 툴로 랜딩페이지 기획을 뽑았습니다 (2)
챗사피엔스 님이 만드신 STP 분석 툴을 사용했습니다
제가 청강할 여력이 없어서 툴만 몰래 가져다 썼습니다. 죄송하고 감사합니다.
Claude로 코드 생성 (3)
리드젠에 업로드 (4)
Youtube 영상을 보고 따라했습니다
과정 (1) - 소프트웨어 이름 짓기
이름 짓기 파트는 재미로 봐주세요
이름 도출해달라고 해서 Reading Lines라는 이름을 얻었습니다
한국어 문자 메시지 스크린샷
그런데 이게 정말 괜찮은 이름인지 모르겠어서 새 대화를 열어서 다시 물어봤습니다
한국어 텍스트가 있는 검은 화면
Reading Lines로 확정입니다
과정 (2) - 챗사피엔스님의 STP 분석 툴을 이용한 랜딩 페이지 기획 도출
타겟 페르소나 3인 도출
5인을 랜딩 페이지에 다 담아내는 건 어려울 것 같고, 한두 명은 적은 것 같아서 3명 해달라고 했습니다.
랜딩 페이지에 뭐든 3개씩 나오면 좋을 것 같다는 생각을 했습니다
소프트웨어 요구 사항과, 소프트웨어 이름을 입력했습니다
상세 결과는 생략합니다
라인 읽기 - 스크린샷
타겟 페르소나 3인에 대한 시장 언어 적합성 분석, Value Proposition을 부탁했습니다.
사실 이렇게 차례차례 써야 하는지도 잘 모르는 상태로 그냥 무작정 순서대로 해달라고만 했습니다.
잘 아시는 분들의 피드백 감사히 받겠습니다.
상세 결과는 생략합니다
시장 언어 적합성 분석
라인 읽기 - 스크린샷
밸류 프로포지션
랜딩 페이지 기획안 만들어 달라고 했습니다
줄을 읽는다
원하지 않는 내용이 있어서 한번 수정해달라고 했습니다
한국어로 된 문자 메시지의 스크린샷
최종 기획안은 다음과 같이 도출되었습니다
한국어 텍스트가 있는 검은 화면
한국어 텍스트가 있는 검은 화면
검은 화면에 한국어 스크린샷
과정 (3) - Claude로 코드 생성
아마도 이 부분이 이 글의 핵심...?
요청을 이것 저것 많이 했더니 시간은 매우 오래 걸렸지만, 생각보다 매우 괜찮은 결과를 내줬습니다
특히 애니메이션이 제가 상상한 정도로 나왔어요! > 미리보기
그런데 정렬 이슈가 있었고, 글씨체도 별로였고, 줄바꿈 이슈가 너무 심각했어요, 예를 들면;
누가 봐도 외국 사이트 번역해둔 느낌의 줄바꿈 그래서 해당 부분을 수정해달라고 했습니다.
수정된 결과입니다. 그래도 줄바꿈은 제 스타일은 아니네요, 아무래도 직접 수정해야 할 것 같습니다.
과정 (4) - 리드젠에 업로드
리드젠 회원가입 후, 번호인증 했습니다
블로그형 랜딩 > 맨땅 페이지로 들어가서
클로드가 만들어준 html 복붙했습니다
한국 웹사이트 가입 페이지
리드젠 쪽에서 고객 정보를 입력하는 폼을 별도로 제공하기 때문에, 클로드가 만들어준 이메일 입력 폼은 지우고, 리드젠 쪽에서 제공한 버튼 컬러를 적용하도록 해보겠습니다
버튼의 색상은 #0A98DA군요 직접 고칠 수도 있지만, 클로드에게 한번 더 부탁했습니다.
뭔가 잘못 알아들어서 내용을 다 날려버리던데 기존 아티팩트를 제공하면서 다음 수정사항을 제공하는 식으로 재요청했습니다.
맨 아래 섹션이 수정되었습니다
최종본입니다
참고한 자료
끝까지 봐주셔서 감사합니다
질문과 피드백은 모두 감사히 받겠습니다
