본인이 초급인 이유로
깨달음과 놀라움은 초급 단계에 머물러 있음을
먼저 말씀드립니다.
고객을 구성하여 퍼널을 형성하려면
여러가지 수단이 있지요
그 중 하나인 뉴스레터~!!!
고객들의 정보를 자연스럽게 수집하고
정보도 제공하고 나를 나의 상품을 우리 회사를
알리기에 아주 좋은 것.
그래서 저도 만들어보기로 했습니다.
기획을 통하여 뉴스레터를 구성하고
React-email 을 이용하여 cursor 로 템플릿을 만들어서
테스트 돌려보겠다 - 라는 포부.
필요에 의해 따라가다 보니
GPT Agent, 젠스park , Claude, Cursor . lovart ,
또 이것저것 사용했습니다.
진행 방법
결론을 먼저 이야기합니다.
실패했습니다.
그 전 결과 하나는 험한 것이 같이 나오고
마지막 다른 과정은 강제종료 당해버렸어요
그래서 인지 몰라도 좀 하소연 톤입니다.
목표 - 나만의 부동산 뉴스레터를 발행하고 싶다.
어떤 매물의 소개 . 장소의 소개 등이 아닌
한주의 동향, 소식등과 용어의 소개라던지
부동산 관련 생활 정보등을 전달 하는 페이지를 구성하고 싶었어요
더불어서
저의 SNS 와 곧 만들어야 하는 메인 페이지로의 노출전환도 노렸지요
Chapter 1 GPT Agent - 기획
GPT Agent 가 있네요...
바로 시작했습니다.
나름 열심히 기획같이 줬습니다.
간소하게, 명확하게, 단계별로 차근차근 줘야하는건 아는데
말이 길어버립니다.... 저처럼??..핫
몇번의 티키타카를 통해
받아냈습니다.
대부분이 자연어라 좀 신기하고 의심이 가지만
대화 내용이 궁금하신 분들을 위한 부끄러운 친절
ChatGPT - 부동산 뉴스레터 페르소나
이제 여기부터 왔다 갔다 합니다.
Chapter 2 GensPark - 페이지 출력 및 수정
젠스파크용으로 달라고 했으니 젠스Park 에게 갑니다.
이것이 무엇인가...
저는 좌측 상단의 결과물이 처음 받은 결과인데
제일 마음에 들어서 저 틀을 전부 가져가고 수정만 하고 싶었습니다만..
수정을 할 때마다 모냥새가 막 바뀝니다.
수정 부분만 고쳐 달라고 했음에도 보이는 것만 홀수라 하나 버린거까지
4가지 다른 샘플이 나왔습니다.
젠팍과의 밀당이 궁금하신 분께 친절하게
https://www.genspark.ai/agents?id=9221f913-0ac5-4a66-8fd3-9859f30c31b5
지 멋대로 하는 모습에
혈중 육두문자 농도가 성대로 새어나올뻔 할 때
제 뇌가 오랜만에 일했습니다.
코드를 들고 지피티씨께 가져가보자!!!!!! (굳 브레인)
컴터 문제인지, 너무 긴 이야기 땜에 힘든건지..
지피티씨가 꾀병 부리기 시작합니다.
혹시 몰라서 claude 가 최고다 이야기가 기억나서
두번째 월세 내고 있는 끌로드군에게
엉망진창으로 줬네요.
게다가 또 길이 제한이라고 투덜거립니다. 하나 물어봤는데..
넌 이제 자립이다...결심...월세 지원 철회의 다짐
다시 지피티씨에게 공손히 새창 열고 여쭙니다.
기존 조건들 강제 고립시키고 공손히 여쭙니다.
하~~C~~
드디어....받아냈습니다.
빌고 빌어 받은 느낌입니다. ㅠ
같은 형태를 유지해줍니다.
색도 같아요...
나이스~
전체가 궁금하신 분들을 위한 친절 !!
한 주의 부동산, 한눈에 읽다 - 부동산 뉴스레터
언제나 그렇듯 칭찬 일색입니다….
이젠 예전의 내가 아니라 믿지 않지만..
그냥 요즘 칭찬이 고파서 자존감 높이는 용으로 첨부해봤습니다.
Tip 1 수정
지금까지의 결과물을 보면
변화시키고 싶은 부분과 추가 수정할 부분이 공존할 경우
1. 코드를 제공하고
2. 코드 자체를 고정 시키는 프롬프트로는 부족하고
3. 코드 안에 어떤 요소들을 유지시킬지 명확하게 찝어서 거론해야
원하는 결과물을 받을 수 있었습니다.
Tip 2 고객 시각 매체 맞추기
이 때 뇌가 또 일해서 물어봤어요
뉴스레터를 모바일로 받을지, 데스크탑에서 볼지
아무도 모르잖아여~!
보기 좋은 구성을 어디를 기준 점으로 잡아야 하는가
최소한 이미지나 글씨들의 줄바꿈이
어디에서 보던지 보기 좋게 구현되어야 하지 않겠는가에 대한 고뇌를
지피티씨와 젠스파크에게 떠 넘겨서 해결 (???)
그래서 그에 맞는 헤더 이미지
1200 x 400 ( 이 크기는 자동 변환 된데요 )
이제 정보 받아서
Chapter 3 삽입 이미지 생성
lovart 에서 슈슈슉
https://ubxklhmi.gensparkspace.com/
to help me find an image for my newsletter that fits in very well with the design and has a neat
I need an image for my newsletter that will go in the header (1200*400).
I need an image that represents the property and me well, that is sleek, cool, and intuitive to look at. I like a mid-journey style, so please make it and not use text.https://ubxklhmi.gensparkspace.com/
를 참고하여 디자인과 매우 잘 어울리고 니치한
헤더(1200*400)에 들어갈 뉴스레터용 이미지가 필요해.
부동산과 나를 잘 표현해주고 세련되고 멋진 느낌을 주며 직관적으로 볼 수 있는 이미지가 필요합니다. 저는 미드저니 스타일이 좋아요. 텍스트는 사용하지 말고 만들어줘.
그냥 어디서 들은 좋고 고급진 말 다 때려 넣고 이미지 받았습니다.
이미지 호스팅에서 imgbb.com 에서 받은 이미지 링크를 받아봅니다.
Chapter 4 Cursor 에서 React Email 로 템플릿 만들기
후~ 아~ 이제 이것을 Cursor 로~
1. Cursor 에서 새 프로젝트 오픈하고
2. Setting 으로 들어가서 indexing & docs 카테고리 내 +add docs
3. https://react.email/docs 입력 - > name 설정해주고
4. 맘에 드는 코드를 퍼서 텍스트 파일에 .md 또는 .html 로 만들어서
5. 저장♥
저장♥ 한 .md 파일과 React-email 을 멘션하여
하고 싶은 말 시작합니다.
@React.email @newsletter.md 나 부동산 관련 뉴스레터 이메일 템플릿 만들거야. 문서를 바탕으로 react-email로 만들어서 내가 확인할 수 있게 해줘. 이 환영 이메일 템플릿에는 이름, 날짜, 이번주 소식, 시장 동향 & 전망, 용어 풀이 & 생활 팁, 전문가칼럼 , 독자참여코너 카테고리 안에 들어가는 내용들이 변수로 들어갈꺼야. 지금은 주어진 레퍼런스 내용 그대로 넣어줘. 그리고 맨 위에 헤드이미지로 "<<a href="https://ibb.co/LfQ3dDv"><img src="https://i.ibb.co/T5KsMDr/Newsletter-Header-1200x400.png" alt="Newsletter-Header-1200x400" border="0"></a>"이거 쓸거야. 템플릿에 반영해줘
그리고 instargram 버튼은 www.instargram.com/jinsyo_k,
thread 버튼은 www.thread.com/jinsyo_k
리틀리 버튼은 litt.ly/kimjy
로 링크 연결해줘
반드시 지켜야할 것이 있어.
내가 방금 수정이나 추가해달라고 한 것 이외에는
구성, 가이드라인, 색상, 폰트 스타일 절대 바꾸지 마.
다 만들어지면 보여줘
설치가 필요한 것들도 다 알아서 설치해줘
죄송합니다.
엄청 여러번 도전하고 졸면서 도전하다가
계속된 npm 설치 에러에 울컥하여
하고 싶은 말 다 때려 넣어 버렸습니다.
물론 결국엔 나눠서 넣었습니다.
막 예제도 만들어줍니다....
정신 차린 듯 했는데...
또 때리네~ 또~
엉망까진 아닌데 다른거 주네요..
진짜 신고하고 싶었음.
밑장 빼기도 정도가 있지..
고치고 고쳐봤는데
정말 서운합니다. 진짜 서운합니다.
아류를 줬습니다.
좌측 너무 예뻣는데....
예쁜거 주고 싶었는데...
예쁜걸 주지 않습니다.
겨우 설치 part 지나가고 나니
저 곳 가서 프리뷰 보라는데
안나옵니다.
거짓말도 ...하고....
뉴스레터가 완성 되었다는데
믿음이 사라져 다시 체크하랬더니.....
튀었습니다. ....강제 종료 당했어요
사실 이 이야기는 두번째 만드는 이야기였습니다.
첫번째 것은 보내지는 거까지 확인했는데
내부에 오지 말아야 할 것도 온거 같아서 실패
그런데 두번째 것은 왜 아예 실패인지
도통 모르는 상태에서 강제 종료.
아래는 첫번째 작성 시 나오면 안될 것 같지만 따라온 내용
위의 내용 밑에 함께 오는 뉴스레터 였습니다.
템플릿도 만들어졌고 보내기도 성공 했는데
링크도 다 시행되고 기능적인 부분은 만족,
별다른 수정 없이도 왔건만
디자인이 맘에 안들...
어쨋든 이런 식으로 강제 종료 되었습니다.
실 패~!!
결과와 배운 점
1.
경험은 허투루가 없다.
굳이 다 잘 할 필요는 없지만 조금씩 경험해볼만 하다.
지금까지 꽤 꾸준히 듣고 보고 했더니
이미지 생성이나, 페이지 만들기나, 프롬프트나
어떤 것들이 좀 더 어울리고
더 어떻게 해야 좀 더 선명한 결과를 주는지에 대해
알 수 있다.
2.
기획을 잘하라.
기획이 당신의 시간과 정신 건강을 더 유용하도록 바꿔줄 것이다.
3.
더욱 뾰족하고 명확하게 논리적으로 전달할수록 좋은 결과를 줄 것이다.
4.
중간에 무언가를 설치하거나 에러 나거나 할 때
잘 모르겠으면 다른 툴(AI 또는 HuMan)에 이유를 물어보자.
무작정 될 때까지 기다리거나
에러난 툴 안에서만 해결하려하면 내 정신이 풀릴 수도 있다.
5.
매번 비슷한 생각을 하고 배운다면 확실히 인지하고
같은 실수를 하지 않도록 행하자..
(저에게 한정하는 말입니다.)
6. 마크다운 좀 익히자. ( 글이 너무 삐뚤빼뚤 들쭉날쭉 하네요)
도움이 필요한 부분이 있나요?
1.
뉴스레터의
코드가 너무 크면
React-email 템플릿 먹통이 되나요?
2.
Cursor Setting 내의 indexing & Docs 에 넣은
https://react.email/docs <--- 같이 필요한 것들을
어떻게 찾나요?..(뭔가 주시는대로 받기만 하는거 같아서요..핫)
앞으로의 계획이 있다면 들려주세요.
저만의 프로젝트에 이용할 것들을
조금씩 만지작 거리고 있는 중이니
하나의 유기체처럼
잘 만들어 연결해보겠습니다. ^^
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
여행가J 님 , 개발자 F 님 알려주신 것 노트 내용 참고
위딘 님