3가지 주제를 로 단계별 블로깅을 작성중입니다. 오늘은 그 첫번째 내용으로 AI tool 을 활용한 홈페이지 구성인데요.
글쓰는 순서
1. AI tool을 활용한 홈페이지(landing page)구성
landing page 구조 & 컨텐츠 작성에 AI Tool 활용 방안
2. AI tool 활용 Newsletter 자동화(automation) 적용
주요 내용 : 서비스 안내 메일을 보내고 Newsletter mail 을 받은 고객 분석
진행 내용: 1st 안내/환영 메일, 2nd 서비스 설명, 3rd Use case mail
* 분석을 위한 metrics
A/B test & Open율, 이탈율 & 평균세션 시간, 클릭률 (conversion)
3. AI tool 활용 홈페이지내 Lead generation 고객 온보딩 지원
AI Tool 활용 Onboarding Template 만들고 활용, Video & Audio 자동생성
Tool 활용 등
Goals
AI Tool(Softr, Frmaer 등 활용) 홈페이지 작성
홈페이지 빌더 (Landing page or Prototype) 를 활용한 홈페이지 작성
* Framer vs Softr vs Unbounce vs etc 주로 framer vs Softr 비교 분석
홈페이지 빌더 (Landing page or Prototype) 를 활용한 홈페이지 작성
홈페이지 주제 : 외국인에 한국어 학습 사이트 & 서비스 소개
주요 고객 : B2B, 강의 ? Productivity, Marketing, Junior development, Job search(Junior)
AI 툴을 활용하여 홈페이지 제작
- AI 툴을 활용하여 다음의 조건의 홈페이지를 제작
홈페이지의 구조: 메뉴 (Home, Service, Contact…). Landing page 1p
Service : 홈페이지의 서비스 안내 페이지
Contact 연락처 or (법인) 주소
AI Tool 활용하면 누구나 쉽게 홈페이지를 제작할 수 있습니다. AI 툴은 사용자의 요구 사항에 맞게 템플릿을 제공하고, 사용자는 템플릿을 활용하여 원하는 내용을 추가 및 수정할 수 있습니다.
Feedback expected(discuss… use case )
홈페이지 landing page 컨텐츠 수정 & 추가 고려 사항
본인이 만들고자 하는 예시 템플릿 찾아보기, 어떤 내용 & 컨텐츠를 넣을것인지 먼저 예시 찾아보기
나의 잘하는 영역을 반영(기획, 디자인, 개발 Frontend Backend….)
* AI Generator 활용 초안 작업 후 컨텐츠 수정 vs 타일 형식의 단계별 컨텐 츠 작업
(혼자 결정 X) 최소 2-3일은 주위 동료 & 지인 피드백 듣기
동료/지인/Team feedback 1st, 2nd viewpoint & decision making
Landing page 구성요소
랜딩페이지의 Case 분석을 하다 보니 ‘랜딩 페이지를 잘 만들기 위한 Rule’이 살짝 보여지네요. 대부분의 기업들이 비슷한 형태로 꾸미는 것을 발견했어요
단락구분 :타일/section 형식 등으로 단락 구분
Hero : 서비스 소개
Detail :세부 내용
Action 유도 : CTA Click button (email input) 등 행동 유도섹션(section) 구성 : Image & txt 설명 문구를 넣어 고객의 관심 유도
Toss 의 landing page 사례 분석
* 자사의 서비스를 심플한 이미지와 단어로 서비스를 설명
source : 토스 홈페이지
위의 내용 처럼 landing page 만들기 위해서는 디자이너와 개발자 기획 내용이 필요하지만 최근에는 AI Tool 을 활용하여 3–10분만에 만들기도 합니다
ChatGPT를 활용하기도 하는데 우선은 페이지의 목적을 먼저 고려 필요 !!!
Landing page 를 만들기 위해서는 다음과 같은 3가지 요소가 필요
무엇을 보여주고자 하는가? (사용자 입장에서 기대하는 내용?)
1. 사이트 내에서 설명 하고하 하는 service or product는 무엇(what)인지?
2. Service 를 사용하면 사용자는 어떤 benefit 얻는지?
3. 그리고 이걸 쓰려면 무엇을 어떻게(how)하는지를 알려줘야 함
효율적인 업무방식? 생산성이 높아지는 일의 방법은 ?
회사에서 업무 진행, 팀 프로젝트에서 여러분은 어떤 이유와 원인 때문에 효율적인 업무가 필요하다고 생각하시나요? 아래 Ragan 리서치에 따르면 과중한 업무량, 그리고 비효율적인 회의 등이 생산성을 떨어뜨리는 것으로 나타나고 있습니다. 회사 그리고 팀에서 업무 중 무엇이 여러분을 다운되게 하나요?
source : https://www.ragan.com/productivity-drain-ragan-survey/
또한, 정의되지 않는 업무로 인한 삽질(과중한 업무) 61%, 그리고 의사결정이 안되 추가되는 업무&회의(59%)는 업무를 비효율적으로 만드는 대표적인 문제라고 분석되고 있어요.
설문조사에 참여한 전체의 1/3 은 이메일을 분류하는 데 시간이 낭비(38%)되고 있으며, 1/4은 커뮤니케이션 이슈(44%)로 인해 시간이 낭비된다고 답했습니다. 또 다른 참여자는 “사전에 조율이 제대로 이루어지지 않으면 나중에 더 많은 업무가 발생한다”고 추가 설명을 해 주고 있습니다.
높은 생산성을 만드는 일의 방법은 무엇일까요 ?
많은 방법들이 있겠지만 저는 아래의 일들이 그 대표적인 방법들이 아닐까 해요
우선순위 결정 …
사전 계획 …
체계적인 생활방식 …
분명한 의사소통 …
업무 분담 및 위임 …
생산성을 높이는 업무?를 위해 우리는 최근 트랜드가 되는 ChtatGPT 사용이나, AI Tool 을 활용해서 업무의 방향, 사전 계획을 수립하고자 아래와 같은 방법을 활용합니다.
홈페이지( landing page ) 작업
AI prompt 을 활용하여 컨텐츠 생성을 위한 (Google bard)
제가 실제 사용한 prompt https://g.co/bard/share/cc4066ceec86
Google Bard 답변
실제 위 Bard 답변에 총 3회 진행하는 뉴스레터의 예시도 포함되어 있습니다.
궁금하신분은 링크를 참조해 주세요 (2회차 Newsletter 자동화 블로그 적용예정)
위 내용이 궁금해서 Landing page or 홈페이지 제작을 위한 AI 툴 ? 을 알아보고 본인이 사용하기 편한 작업툴 찾아 보니 GPters 에서 예시를 보여준 framer 와 제가 활용하는 softr 등을 비교해 보았습니다.
Landing page or 홈페이지 저작을 위한 사용툴
1. Framer
2. Softr
3. Unbounce
Tool 선택 기준 : 본인에 맞는 툴을 찾아가는 시간이 필요함
필자의 추천방법 -> 자신의 경험에 따라 개인의 좋아하고 편리한 툴 선택…
자신의 맞는 툴을 찾아야 되는 이유 → 각각 특화된 분야가 있음 (개인 생각)
- 서비스 디자인 & 기획 : Softr, Mixo
- Marketing : Unbounce, marketing 효과분석
ex : Google analytics…conversion, retention….
- 디자인 Prototype : Figma, Framer…
- (Frontend) 개발 : Flutterflow https://flutterflow.io/
AI prompt 활용으로도 꽤 좋은 서비스 기획/컨텐츠의 시작이 가능함을 인지 하고 좀더 나은 prompt 사용을 위해 실제 Case 를 여러 가지 찾아보니 prompt 에 대한 고민은 많이 한 사람들의 경험을 얻을 수 있었습니다.
Framer 에 할용해 본 Prompt 예시
Create a home page for a digital marketing agency. Agency has service like Website and mobile App designing, Development, SEO, Digital marketing consulting, Design section in this sequence: Hero banner, about us, service, case studies, testimonials, contact form and footer, Keep color scheme like Facebook, Add my phone number US +1)415 562 7725 and email [email protected]
source : framer 홈페이지
Framer 이외에도 좋은 Tool 들이 있어 비교 분석한 내용입니다.
SOURCE : 본인 작성 내용
추가 내용
Softr https://www.softr.io/
- Free user Google Analytics, Tag Manager를 설치 방문자 데이터 분석
- Airtable, Google sheets을 활용하여 Backend DB 활용
- 단점, html/CSS 차원의 디자인 변경 거의 불가능
Unbounce https://unbounce.com/
- Mixpanel, Google analytics 등 타사 데이터 분석 연동 없이도, 자체 High level 분석 가능
- 단점 : 가장 저렴한 플랜이 월 $99
use case 1. waveon (국내 툴) 심리테스트 & MBTI 같은 예제 제공
use case 2. 기타 10Web https://10web.io/
* AI web builder Ecommerce
use case 3. Hostinger Domain & Web site builder
* https://www.hostinger.com/website-builder
아래는 softr 로 직접 작업해본 화면입니다. (궁금? 하신분은 링크 참조)
source : https://mirinae.softr.app/
AI prompt 와 제가 생각하는 서비스의 내용을 디자인하여 랜딩 페이지를 작성해 본 내용입니다.
홈페이지 작성시 고려해야 하는것 : 그다음엔 무엇을 해야하는가?
집에 책이 많은분 계시죠? 처음에는 보시는 것 처럼 그리? 많지 않은 책들을 쌓아 놓으시고
눈에 띄거나 좋아하는 책들을 꺼내어 보고 제자리?에 두면 다음에도 금방 찾을수 있으시죠.
책이 홈페이지이고 . 각각의 책 내용에는 에피소드 즉, 콘텐츠 라고 한다면…
하지만 점점 책장에 책이 꽉 차고 1천권이 넘어가는 상황이라면? 내가 필요한 책을 찾다가 시간이 지나가게 됩니다.
여러분이면 어떻게 하시겠습니까?
처음부터 정리 계획이 필요한거죠, 예를 들면 index A-Z, 장르별 구분, 자주 보는 책의 위치, 동선별 카테고리 정리 등…고민하고 정리했으면 그나마 괜찮을 텐데요.
정리가 안되있으면 찾을수 없거나 검색 조차도 안될수도..있습니다. 구글 & AI 도 마찬가지라고 생각합니다.
데이터가 무조건 많으면 좋다고 생각하는데 실제는 그렇지 않고, 머신러닝도 학습이 잘되거나 좋은 결과 만들수 없다고 생각합니다.
구글 같은 서치 엔진이 검색을 잘 할수 있도록, 즉, 원하는 정보를 찾을수 있도록 홈페이지 정보 정리가 잘 되어 있어야 하는데 이걸 SEO (Search engine optimize)를 적용이라고 합니다.
하지만 쌓이면 무턱대고 홈페이지를 만들면 위 책장에서 처럼 원하는 책, 원하는 정보를 찾는 시간은 점점 길어질 수 밖에 없어 보입니다.
그래서 우리는 위의 내용을 효과적으로 검색해 주고, 내용을 정리하게 위한 툴을 사용하게 됩니다.
AI prompt case → GhatGPT Prompt 진행 ?
1. Role & Persona
2. Task/Action
3. Steps to complete the task
4. Context / Constraints
5. Goal
6. Format Output
위 GhatGPT prompt 이해보다 더…더더… 중요한 것
바로 내가 얻고자 하는 답변을 도출해 주는 질문을 잘할것…
Role or Scenario : 너는 마케터야,
맥락 or 제약 조건에 따른 상황 Context
What is you business? Who is this for ( who is your audience/customer?)
Goal : 나는 홈페이지를 만들려고 해? 나는 Landing page 를 만들려고 해
Home, Service page, contact 3개의 메뉴를 가지고
Service 소개 내용은 ‘ 외국인에 한국어 학습 사이트 & 서비스 소개’를 담으려고 해Action : 3개의 예시를 만들어줘
제가 생각한 내용을 찾아보니 잘 정리한 내용을 참고 제가 다시 아래와 같이 정리해 보았습니다. (6하 원칙을 조금 달리 표현)
사실 이 내용은 ‘글쓰기 방법’에 더 가까 운것 같습니다. AI prompt 잘 활용하는 법 보다는요.. ㅎ
AI prompt 를 만드는 rule 을 찾아보니 아래와 같은 내용을 검색이 되네요
Source : https://www.ssw.com.au/rules/rules-to-better-chatgpt-prompt-engineering/
Source : The Perfect ChatGPT Prompt Formula (Start With This!)
Source : AI Prompt library
위 내용은 $39 구매해야 하는 Notion template 인데 제가 위 링크를 참고하여
기타 내용을 아래와 같이 library 정리해 보았습니다.
제가 만들어 활용중인 Google sheets based prompt template 을 공유합니다
- Category 세분화, 생성일, Role, 테스트 결과의 level 등을 추가 표기
참고: : 필자는 위에 언급된 어떤 도구도 보증하지 않습니다. 제가 직접 사용해 본 결과 효과가 있었던 방법을 예시로 설명합니다. 더 실용적인 유사한 도구를 찾을 수 있다면 아래에 댓글을 달아 주시고, AI를 사용하여 무언가를 구축한 방법에 대해서도 함께 논의해 봐요.
제가 정리해본 AI prompt 예시
Landing page prompt (제가 정리해본 랜딩 페이지 AI prompt 활용 예시)
You are a professional marketer with years of experience designing landing pages. You recently received a contract to help validate the following business idea:
Name: (서비스 이름)
Mirinae
Description:
외국인을 위한 한국어 학습 서비스
Target Customer:
BTS 등 한류에 관심을 가지는 13-23세 여성, 한국어를 배워서 아이돌에게 팬레터를 쓰고자 하는 한국어 초급- 중금 학습자
Goal:
한국어 학습 페이지를 안내하고 커뮤니티를 지원, 향후 한국어 학습 앱 런칭에 초대(email 수집)
Brand:
Mirinae 한국어 학습 서비스
Create the copy for a landing page to test out a new business idea. Using the business idea below, generate the following:
a catchy tag-line (눈길을 사로잡는 제목 및 #해시태그)
a short two-sentence sales pitch that covers the business idea and the value the customer will receive 서비스 소개하는 심플한 2문장, 고객에게 제공하는 benefit or value
a call to action. (고객의 행동을 유도 하는 button)
Please create 5 variations of the landing page information. 5개 예시를 만들어줘
다음 post 는 Newsletter 자동화에 대한 내용을 준비중인데
제가 준비했던 내용을 살짝 공유 드립니다.
Newsletter plan
추가 안내 : 사용해 보니 Framer 보다 더 결과물이 좋은 AI website generation tool 발견 했어요
댓글 달아 주시면 답변으로 공유 드립니다.
제가 사용한 Prompt + AI Tool (Framer 보다 Output 더 잘나옴)
제가 모은 AI tool + 유용한 링크 https://companyfactory.notion.site/efdb766095c940399ba63c729bf2b017?v=69af0d14fbc744d58fd5cdac50bebbdd&pvs=4
432개 AI writing tool
https://companyfactory.notion.site/67a5955ea3d945faa6d3a88e8d784ed8?v=b8f98b3c622d4578ad339cba7d16cfba&pvs=4
위 내용을 혼자 삽질? 하고 있습니다. 해 보니 잘할 ? 수 있다는 생각과 함께 AI tool 뿐만 아닌 지속적인 성장 & 생산성 향상을 만들어 보고자 합니다.
더 나은 방향을 가기위해 노력하는, 위에서 소개드린 내용등을 공유, 함께하는 경험을 나눌 분들을 찾습니다.
특히 제가 창업한 회사는 마케팅 솔루션을 만들고 있으나 개인적으로 더 많은 관심 분야인 생산성을 높이기 위한 다양한 프로젝트관리 툴을 사용해 보고 비즈니스/플랫폼 영역에서 홈 개편, 컨텐츠 개인화, 새로운 포맷의 컨텐츠 개발, QA 자동화 프로세스, 자동화 테스트 구축, 지속적인 모듈화 등을 도전해 보고 있습니다.
위와 같은 내용을 함께 진행할 엔지니어 & 디자이너 역활 뿐만 아니라 여러 도전 과제들과 함께 진행할 동료 & 를 모시고 있습니다.
제가 하는 일 & 서비스를 만들때 생산성을 높이는 방법에 대해 궁금한 점이 있으시면 [email protected] 으로 메일을 남겨주세요. 가벼운 티타임& 커피챗도 가능합니다!
권영해 소개
전 Petmate US 대표, 소개 https://www.crunchbase.com/person/young-kwon-64ab
창업했던 회사 https://www.crunchbase.com/organization/petmate-1717
Linkedin 소개 https://www.linkedin.com/in/youngkwon/
실리콘 밸리 일하는 방법 https://www.youtube.com/watch?v=daXXpV7H9qs
예전 태현님 진행해 주셨던 No-code tool 활용 Glide app 활용? 법 11분 https://www.glideapps.com/ 활용
