허세임
허세임
🎻 루키 파트너
📹 SNS 찐친

MAKE로 자동화한 뉴스레터 ➡️ 퀄리티까지 높이기 (개발자의 디테일 Tips 대방출)

안녕하세요. 허세임 입니다.

[Make와 Claude로 뉴스레터 자동화] 스터디를 운영하고있습니다. 자료 수집, 뉴스레터 형태 작성, 그리고 메일발송까지 4주간 과정을 한편에 정리하려 합니다.

🪢 1주1습관 건강 뉴스레터

우울증다이어터 '샤니아'가 발송하는 뉴스레터입니다. 식이요법, 운동, 신체건강, 정신건강이 모두 연결되어있어 작은 습관들을 실천해가며 건강해지자는 내용입니다. 매주 일요일 오후 8시에 발송되며, 실천 가능한 아주 작은 습관을 소개합니다.

구독 신청은 여기 (같이 몸건강 정신건강 챙겨요!)

30초 짜리 완성본 영상 먼저 보고, 이 결과물을 만들기 위해 필요한 과정들을 하나하나 짚고 넘어가겠습니다.

뉴스레터 자동화 단계 설계

  1. 뉴스레터의 제목과 건강습관 대량 생성

  2. 뉴스레터 내용 생성 프롬프트 작성

  3. 일러스트 생성 프롬프트 작성

  4. Make 시나리오

    1. 위 2가지 프롬프트 실행

    2. 일러스트 생성

    3. 실행 결과 2가지 조합하여 HTML 생성

    4. 주소록기반 개인화 및 발송

  5. 발행된 뉴스레터 게시할 블로그 개발

  6. 실천 인증 오픈카톡방 개설

  7. 구독 홍보

이번 스터디의 목표는 4단계까지 Make시나리오를 완성하여 메일을 발송 자동화를 구축하는 것이었습니다. 다행히 딱 여기까지 완성이 되었어요. 이 후 발전 단계는 추후 [랭체인으로 AI웹서비스 개발] 스터디에서 진행할 예정입니다.

1. 뉴스레터의 제목과 건강습관 대량 생성

SNS 자동화를 할때 미리 구상해 두었었던 다이어트 건강 주제들이 있어서, 그 주제 기반으로 습관 3가지와 뉴스레터 제목을 생성하기 위해 프롬프트 작성하였습니다.

한국어 텍스트가 있는 검은 화면

내가 원하는 대로 나오도록 충분한 예시를 넣고, 습관은 다양한 후보 3가지를 설정하였습니다.

한국어가 컴퓨터 화면에 표시됩니다

프롬프트 실행 결과로 일단 20개의 주제와 제목, 그리고 습관을 얻었습니다. 습관은 후보 3가지 중 가장 마음에 드는 1가지를 인간지능을 통해 선택하여, 구글 시트에 넣었습니다.

한국어 Google 문서 - 스크린샷

2. 뉴스레터 내용 생성 프롬프트 작성

구독 중인 여러 뉴스레터 중에서, 언섹시 비즈니스의 뉴스레터를 레퍼런스 삼았습니다.

자전거를 탄 남자의 사진이 포함된 한국 웹사이트의 스크린샷
검정색 배경에 한국어 텍스트

레퍼런스 뉴스레터 한 편을 통째로 복사 붙여넣기하여 Claude에게 분석을 요청합니다.

한국어로 된 메시지 스크린샷

이 분석 결과를 바탕으로 1차로 한번 뉴스레터를 생성해보고, 그 결과에서 출발하여 조금씩 내가 원하는 형태로 뉴스레터를 고쳐나갑니다.

한국어로 된 메시지가 있는 검은 화면
한국어 문자가 적힌 검은색 전화기
숫자가 적힌 검은색 화면
한국어 텍스트가 있는 검은 화면

몇번의 테스트와 수정과정을 거쳐 원하는 뉴스레터가 나오면, "지금 이 뉴스레터 작성을 위한 프롬프트를 작성해달라"고 요청합니다. 아래는 저의 뉴스레터 내용 작성 프롬프트 최종 결과입니다.

한국어 텍스트가 있는 검은 화면
한국어 텍스트가 있는 검은 화면

뉴스레터 안의 구성 요소를 문단별 혹은 더 작은 단위로 쪼개서 글자수 및 내용을 설정하는 방법이 가장 좋습니다.특히 4-c 단계에서 HTML로 재구성 할 때, 유용합니다.

3. 일러스트 생성 프롬프트 작성

제가 원하는 스타일의 일러스트를 구글 이미지에서 열심히 찾았습니다. 그 이미지 파일을 미드저니에 올려 프롬프트를 얻습니다.

한 무리의 사람들을 보여주는 Facebook 페이지의 스크린샷

미드저니가 제시하준 4가지 디스크립션을 모두 실행 해 보고, 제가 추구하는 디자인과 가장 유사한 프롬프트를 복사하여 이제 Claude에서 더 발전시킵니다.

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

입력한 디스크립션들을 바탕으로 클로드가 공통적인 부분들을 캐치해 미드저니 프롬프트를 생성해줍니다. 이제 내가 원하는 식으로 프롬프트를 수정해나갑니다.

한국어 텍스트가 있는 검은 화면
한국어 텍스트가 있는 검은 화면

이미지 생성 프롬프트는 제가 약한분야라.. 클로드에게 일관된 스타일로 일러스트를 뽑기위해 내가 어떤 말을 해줘야하는지 요청하였습니다. 놀랍게도 디테일한 요소들까지 조언을 해줍니다.

한국어 텍스트가 있는 검은 화면
한국어 텍스트가 있는 검은 화면

내가 원하는 스타일을 입력하였고, 그에 맞게 프롬프트를 완성하였습니다.

검정색 배경에 한국어 텍스트
한국어 텍스트가 있는 페이지의 스크린샷

여러 수정을 거쳐 이게 최종 프롬프트입니다.

4. Make 시나리오

먼저 Make 전체 시나리오는 다음과 같이 준비물 세팅 - 뉴스레터 내용 작성 - 삽입 일러스트 생성 - 뉴스레터 HTML 구성 - 발송 이렇게 5 구간으로 나눠볼 수 있습니다.

다양한 언어를 보여주는 다이어그램

주제목록과 프롬프트 들이(뉴스레터내용, 일러스트) 준비가 되었으니, 이 준비물을 Make에 먼저 세팅을 해두겠습니다.

시계와 렌치가 있는 Google 시트

구글시트의 Watch New Rows 모듈을 선택하여 주제, 제목, 습관 데이터가 담긴 시트를 연결합니다. 그리고 Tools의 Set multiple variables 모듈을 통해 미리 만들어둔 프롬프트들을 새로운 이름의 변수들로 저장해둡시다.

하이브리스 검색 페이지 스크린샷
한국어 텍스트가 표시된 모바일 앱의 스크린샷

Item 하나마다 변수 이름에는 프롬프트 이름을, 변수 값 필드에는 실제 프롬프트를 복붙하여 넣어둡니다. 이렇게 해두면 뒤의 단계에서 내가 지금 설정해 놓은 변수들로 쉽게 프롬프트를 선택할 수 있습니다.

4-a. 위 2가지 프롬프트 실행

준비물이 세팅이 되었으니, 이제 만들어둔 프롬프트를 실행하는 모듈을 세팅하겠습니다.

클로드의 Create a Prompt 모듈에서 메세지 2개를 설정 할 겁니다. 첫번째 메세지는 Role은 User로 설정하고 Text칸에 미리 세팅해놓은 뉴스레터 내용생성 프롬프트와 구글시트에서 가져온 주제, 습관, 제목을 불러와 넣습니다.

이 후 작업에서 데이터를 편하게 다루기위해 출력 형식은 json으로 설정합니다.

부가설명 제거하는 Tip!

메세지를 하나더 추가하여 다음과 같이 Role을 assistant 로 설정하고 Content 칸에 미리 클로드가 답변할 설명 앞부분을 설정해주면, 이런저런 추가설명 없이 깔끔하게 json 결과만 줍니다

Gmail 계정의 메시지 스크린샷

이 방법 외에 Claude에서 Tool을 정의하여 JSON Mode를 세팅할 수도 있습니다.

이렇게 메세지 2개가 담긴 클로드 모듈을 마무리하였고, 이제 이 뉴스레터 내용에 걸맞는 일러스트를 그릴 수 있는 프롬프트를 생성하는 모듈을 만들겠습니다.

한국어 텍스트가 포함된 텍스트 편집기의 스크린샷

똑같이 Claude 모듈을 추가하여, 미리 세팅해둔 미드저니 프롬프트 생성용 프롬프트를 넣고, 또 바로 앞 모듈에서 얻은 뉴스레터 내용을 넣습니다. 저는 3개를 요청하였습니다.

JSON 출력 Tip!

다음 단계에서 각 프롬프트로 이미지를 생성해야하기 때문에, 데이터를 쪼갤 필요가 있습니다. 그래서 이것도 json 출력 형식을 미리 지정해줍니다. 출력형식을 지정해줄때 Make의 JSON Pasor모듈을 이용하려면 결과가 {}로 쌓인 하나의 오브젝트여야합니다. [{},{},{}]의 리스트 형태는 에러가 나기때문에, 리스트를 또한 번 감싸 하나의 오브젝트로 만든 형태로 지정해주세요.

어도비 어도비 어도비 어도비 어도비의 스크린샷

그리고 이것도 마찬가지로 Assistant Role 메세지를 추가하여 부가설명을 방지해줍니다. 이렇게까지 해도 뒤에 json parser를 연결했을때 에러가 나는 경우가 있을겁니다. 다음 설명을 참고해서 꼭 설정해주세요.

프로세스의 단계를 보여주는 흐름도

코드블럭 기호가 나오는 경우 방지 Tip!

JSON 으로 출력을 해도 뒤에서 에러가 날거에요. 왜냐하면 클로드가 json을 답변해줄때 코드블럭으로 만들어줄때가 있기 때문입니다. 결과를 까보면 내가 원하는 json의 맨 앞줄과 맨 뒤에 ``` 라는 기호3개로 감싸져 있습니다. 그래서 이 코드블록 기호나 나타났을 경우 제거하기위해 Text parser에서 Replace 모듈을 사용합니다.

텍스트 파서의 스크린샷

New Value칸이 빈칸이면 'null'이라는 문자열로 대체되기 때문에 비워두지마세요. 앞부분 2가지경우, 뒷부분 1가지 총 3개의 Replace를 거치면 해당 오류는 발생하지 않습니다.

이렇게까지 한 이유는 Json Perser를 이용해 3개의 prompt를 각각 하나씩 쪼개서 따로 데려오기 위해서입니다. Json Parser에 데이터타입을 하나 추가하고 아까 미드저니 프롬프트 출력형식으로 지정해 주었던 json타입을 설정해줍니다.

보라색 배경의 중국 웹사이트 스크린샷

그러면 앞에서 정제된 Text를 받아 잘게 쪼개줍니다.

보라색 아이콘이 있는 화면의 스크린샷

원래는 하나의 대답으로 합쳐져있던 프롬프트들이 3개의 프롬프트들로 각각 쪼개져 있습니다. 축하드립니다.

4-b. 일러스트 생성

그림그리는 프롬프트를 뽑았으니 이제 그림을 그리면 됩니다.

음계의 다양한 단계를 보여주는 다이어그램

일러스트 관련 부분만 보면 총 9개의 모듈이 있는데, 앞의 5개까지가 프롬프트를 만들어 정리한 부분이고, 이제 뒤의 4개의 모듈이 각 프롬프트를 실행시켜 이미지를 생성하고 받아오는 부분입니다.

다양한 아이콘이 있는 타임라인

저는 이미지 프롬프트 3개가 있으니 이미지 생성도 3번 해야합니다. Iterator 모듈을 통해 회색으로 묶여잇는 부분이 3번 반복 됩니다. 이미지가 100개면 이 모듈로 100번 반복합니다.

웹 브라우저의 json 파일 스크린샷

HTTP 모듈에서 flux로 요청을 보냅니다. Make에서 Flux 사용하는 방법은 샘호트만 님의 설명을 참고하였습니다.

보라색 배경의 웹페이지 스크린샷

HTTP 모듈에서 응답을 받으면, 내가 원하는 이미지의 url외의 다른 정보들도 함께 많이 옵니다. 저는 그 중에서 이미지url 만 가져오기위해 또 JSON Parser를 이용해 쪼갰습니다.

마지막으로 3개의 url이 다 모이면, 3개를 합쳐서 하나의 텍스트로 묶어줍니다.

컴퓨터 화면의 도구 모음 스크린샷

Text aggregator 모듈에서 진행하면 3개 따로따로 있던 데이터가 한묶음으로 묶인 아웃풋이 나옵니다. 그러면 일러스트 준비 완료입니다.

4-c. 실행 결과 2가지 조합하여 HTML 생성

뉴스레터 텍스트도 생겼고, 이미지 3장도 생겼습니다. 이제 뉴스레터 형식으로 예쁘게 만들어야합니다.

언어의 다양한 단계를 보여주는 다이어그램

HTML을 만드는 부분은 Make에서는 이 모듈중에 앞 4개입니다. 말이 4개지 뒤에 3개는 그냥 아까 알려드린 ```떼어내는거라 사실상 맨 앞의 클로드 모듈 한개입니다. 클로드에게 뉴스레터 텍스트와 이미지 전달해주고 html로 만들어달라고 요청하면 끝입니다.

그러나 여기에서, 추가적인 작업이 더 필요한데요. 바로 HTML 템플릿을 생성하는 것 입니다.

일관적인 뉴스레터 디자인 Tip!

템플릿을 활용하지 않으면, 매번 실행할때마다 다른 형태의 형식으로 만들게 됩니다. 그러면 매주 받는 뉴스레터 모양이 다 다르겠죠.. 그래서 내 뉴스레터의 템플릿을 미리 생성해두고 그 템플릿을 통해 Html을 만들도록 해야합니다.

한국어 텍스트가 있는 검은 화면
한국어 텍스트가 있는 검은 화면
텍스트가 있는 검은 화면

뉴스레터에 쓸 색상코드 5가지와 뉴스레터 텍스트, 뉴스레터 이미지 링크3개를 전달하고 일단 만들어달라고 요청합니다.

그럴싸한 뉴스레터 형식이 나왔습니다. 그러나 너무 썰렁하네요. 마음에 드는 뉴스레터 형태가 나올때까지 아티팩트로 확인하면서 클로드와 계속 수정작업을 진행합니다.

한국어 텍스트가 있는 검은 화면
검은색 휴대폰에 한글이 적혀 있다
h jison - 삼성 갤럭시 S7용 한국어 앱
검은 화면에 한국어 텍스트 스크린샷
한국어 텍스트가 있는 검은 화면
한국어 문자가 적힌 검은색 전화기

여러 수정사항을 반영하여 원하는 형태가 나오면, 그 html을 생성하는 최종 프롬프트를 요청하여 받습니다.

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

HTML 템플릿이 완성되었습니다. 이제 이 프롬프트를 사용하면 일관된 뉴스레터를 생성할 수 있습니다.

다시 Make로 돌아가서, 방금 만든 템플릿을 이용해서 html을 만들으라고 클로드에게 요청합니다.

한국어로 된 문자 메시지의 스크린샷

이 때에도 assistant 메세지를 하나 더 추가하여 html code is: 를 입력하고 추가 설명을 예방합니다. 출력형식도 html only로 명시합니다.

그리고 3개의 Text Parser를 거쳐서 코드블록 기호를 떼어내고 새로운 변수로 저장합니다.

apktools 설정 페이지 스크린샷

이름없는 HTML코드 라고 작명했습니다. 왜냐면 이제 이름있는 HTML코드를 만들거기 때문이죠.

4-d. 주소록기반 개인화 및 발송

먼저 구글시트에 주소록을 가져옵니다.

구글 시트
Google 애플리케이션이 설치된 화면의 스크린샷

필요한 필드들만 표시해서 Array aggregator로 하나의 배열로 주소록을 받아오게 됩니다.

제가 좋아하는 뉴스레터들은 이름을 자주 불러주던 것이 기억이 났습니다. 그래서 저도 구독자의 이름을 자주 언급하기로 합니다.

한국어 한국어 한국어 한국어 한국어 한국어 한국어 한국어

html에서 이제 이름 부분에 사용자의 이름을 다 바꿔끼워야합니다. 이 작업을 하기위해서 앞으로 가서 뉴스레터 텍스트 프롬프트를 수정하였습니다. 이름이 들어갈 부분에는 "ㅎ이름자리ㅎ" 이라고 표기하도록 지시합니다.

그리고 다시 뒤로 돌아와서 Text Parser의 Replace모듈에서 'ㅎ이름자리ㅎ' 를 주소록의 이름으로 대체합니다.

[이름]이나 (이름)으로 하면 안되는 이유 Tip!

Text Parser의 replace모듈의 Pattern 칸은 정규표현식식(regular expression)으로 우리가 평소에 사용하는 특수문자들이 특별한 다른의미를 가지게 됩니다. 그렇기 때문에 정규식에서 사용되지 않는 다른 특수문자로 바꾸거나 아예 한글로 표시를 해두면 좋습니다.

돼지가 체리가 올려진 케이크를 먹고 있어요

[이름]으로 설정했을때 나온 결과입니다. '이'가 들어갈 자리에 모두 제 이름이 들어가버렸죠. 이부분 꼭 참고해주세요.

마지막으로 발송을 합니다. 구글시트에서 받아온 주소록 배열을 iterator로 메일을 하나씩 보내면 됩니다.

그리고 Content부분에는 이름까지 박아넣은 이름이 있는 HTML을 넣으면 완성입니다.

수많은 테스트의 흔적들..

한국어로 된 이메일 스크린샷

결론

  • 메이크 자잘한 기술이 없다면 포기했을거같다.

  • 특히 아웃풋을 인풋으로 넘겨줄때 데이터 가공이 생각보다 작업이 까다롭다.

  • 생각보다 시간이 많이걸렸지만 완성도있는 뉴스레터 발행을 시작해서 두근두근 💓

  • 최대한 상세히 써봤습니다. 도움이 되었으면 좋겠습니다.

건강 습관 구독을 원하신다면?

👉🏻 1주1습관 건강레터 구독하기

30
6개의 답글

(채용) 콘텐츠 마케터, AI 엔지니어, 백엔드 개발자

지피터스의 수 천개 AI 활용 사례 데이터를 AI로 재가공 할 인재를 찾습니다

👉 이 게시글도 읽어보세요