독서 기록용 웹앱을 위한 랜딩 페이지 만들기

tl; dr

소개

진행 방법

과정 (1) - 소프트웨어 이름 짓기

이름 짓기 파트는 재미로 봐주세요

  1. 이름 도출해달라고 해서 Reading Lines라는 이름을 얻었습니다

    한국어 문자 메시지 스크린샷
  2. 그런데 이게 정말 괜찮은 이름인지 모르겠어서 새 대화를 열어서 다시 물어봤습니다

    한국어 텍스트가 있는 검은 화면
  3. Reading Lines로 확정입니다

과정 (2) - 챗사피엔스님의 STP 분석 툴을 이용한 랜딩 페이지 기획 도출

  1. 타겟 페르소나 3인 도출

    • 5인을 랜딩 페이지에 다 담아내는 건 어려울 것 같고, 한두 명은 적은 것 같아서 3명 해달라고 했습니다.

    • 랜딩 페이지에 뭐든 3개씩 나오면 좋을 것 같다는 생각을 했습니다

    • 소프트웨어 요구 사항과, 소프트웨어 이름을 입력했습니다

    • 상세 결과는 생략합니다

      라인 읽기 - 스크린샷
  2. 타겟 페르소나 3인에 대한 시장 언어 적합성 분석, Value Proposition을 부탁했습니다.

    • 사실 이렇게 차례차례 써야 하는지도 잘 모르는 상태로 그냥 무작정 순서대로 해달라고만 했습니다.

      • 잘 아시는 분들의 피드백 감사히 받겠습니다.

    • 상세 결과는 생략합니다

    • 시장 언어 적합성 분석

      라인 읽기 - 스크린샷
    • 밸류 프로포지션

  3. 랜딩 페이지 기획안 만들어 달라고 했습니다

    줄을 읽는다
    • 원하지 않는 내용이 있어서 한번 수정해달라고 했습니다

      한국어로 된 문자 메시지의 스크린샷
    • 최종 기획안은 다음과 같이 도출되었습니다

      한국어 텍스트가 있는 검은 화면
      한국어 텍스트가 있는 검은 화면
      검은 화면에 한국어 스크린샷

과정 (3) - Claude로 코드 생성

아마도 이 부분이 이 글의 핵심...?

이 아래에는 직전 단계에서 도출한 랜딩 페이지 기획안을 복붙해 넣었습니다
  • 요청을 이것 저것 많이 했더니 시간은 매우 오래 걸렸지만, 생각보다 매우 괜찮은 결과를 내줬습니다

  • 그런데 정렬 이슈가 있었고, 글씨체도 별로였고, 줄바꿈 이슈가 너무 심각했어요, 예를 들면;

    누가 봐도 외국 사이트 번역해둔 느낌의 줄바꿈
  • 그래서 해당 부분을 수정해달라고 했습니다.

  • 수정된 결과입니다. 그래도 줄바꿈은 제 스타일은 아니네요, 아무래도 직접 수정해야 할 것 같습니다.

과정 (4) - 리드젠에 업로드

유튜브 가이드 링크

  • 리드젠 회원가입 후, 번호인증 했습니다

  • 블로그형 랜딩 > 맨땅 페이지로 들어가서

  • 클로드가 만들어준 html 복붙했습니다

    한국 웹사이트 가입 페이지
  • 리드젠 쪽에서 고객 정보를 입력하는 폼을 별도로 제공하기 때문에, 클로드가 만들어준 이메일 입력 폼은 지우고, 리드젠 쪽에서 제공한 버튼 컬러를 적용하도록 해보겠습니다

    버튼의 색상은 #0A98DA군요
  • 직접 고칠 수도 있지만, 클로드에게 한번 더 부탁했습니다.

    • 뭔가 잘못 알아들어서 내용을 다 날려버리던데 기존 아티팩트를 제공하면서 다음 수정사항을 제공하는 식으로 재요청했습니다.

    • 맨 아래 섹션이 수정되었습니다

  • 최종본입니다

참고한 자료

끝까지 봐주셔서 감사합니다

  • 질문과 피드백은 모두 감사히 받겠습니다

6
6개의 답글

👉 이 게시글도 읽어보세요