혹시...🔥번아웃🔥 겪어보신분 계신가요?! 오직 Cursor(+MCP)만으로 [뇌과학 살롱] 뉴스레터 제작해보았습니다.

소개

안녕하십니까!!! 🧠강성준입니다!

먼저 제가 지난번에 발표드렸던 FOCUZ는 잘 준비중인데! 살짝 피벗을 좀 하고 있습니다 ㅎㅎ 수면 - 인지기능 관리에서, 수면의 비중을 조금 낮추고(여전히 수면은 인지기능 관리에서 가장 중요한 핵심이긴 합니다!!) 🔥번아웃 같은 인지기능 저하 현상을 타겟으로 하는 AI 빅데이터 기반 인지건강 관리 솔루션으로 포커싱을 해보고자 합니다! 🧠

그래서 지난 26일 스타트업 실험실 오프모임에서 여행가 J님과 개발자 F님 두분의 알찬 강연을 통해 "AI 뇌과학 살롱"의 첫번째 뉴스레터를 제작해보았는데, 그 두번째 뇌과학 살롱의 주제로 🔥번아웃🔥을 다루어 보는 사례를 준비해보았습니다!

뉴스레터를 만드는 방법들은 다른 저희 동기분들께서 너무나 잘 정리해주신분들이 많기에, 저는 처음 셋업 이후, 기존 React-email 템플릿에 다음 뉴스레터로 업데이트를 진행해본 사례를 적어볼까 합니다! 🚀

먼저, 제가 바이브 코딩 할때마다, 바로 결과물을 보기가 안되고, HTML을 달라고 하는게 넘 귀찮아서 어찌 이것을 해결할까 고민 하던 중...

https://marketplace.cursorapi.com/items/?itemName=zenclabs.previewjs

ALT

Visual Studio Code 용 Praviews

커서 Extension 중에 Preview.js 라는 녀석을 사용해 보았습니다!

그러면 아래 처럼,

ALT

텍스트가 많은 웹 페이지의 스크린 샷

(지난주 토요일 만들었던 첫번째 뇌과학 살롱 뉴스레터가 잘 보이네요)

오른켠에 잘 나오는것을 확인할수 있었습니다!

여는 방법은,

ALT

MAC OS X MAC OS X MAC OS X MAC OS X MAC OS X

왼쪽 바에서 "*.tsx" 를 선택하고,

ALT

어두운 방에서 코드 편집기의 스크린 샷

우측 상단에 작은 파란 네모에 하얀 "P"가 있습니다. 고걸 누르면 새 창이 뜨면서, 미리보기가 됩니다!

자 이제, 다음으로, 두번재 뉴스레터 📰 작성을 지시해보았습니다!

제가 보았던, "번아웃🔥" 관련 기사 아티클 링크를 주고, 크롤링 -> 데이터 업데이트를 진행하였습니다!

여기서는 오랜만에 Firecrawl MCP 🔨를 사용해보았습니다.

https://github.com/mendableai/firecrawl-mcp-server/

그러면 이렇게 아티클 링크를 넣어도 잘 읽어서 내용을 긁어와 줍니다. 내용을 Gemini한테 소싱해서 가져오고 할수도 있겠지만, 커서에서 클로드 맥스를 쓰는 김에! 한방에 해결하기!! 🥊

ALT

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

ALT

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

(Firecrawl 열일하는 모습)

ALT

한국어 텍스트가있는 컴퓨터 화면의 스크린 샷

그러면 이렇게 내용이 잘 바뀌어주고,

미리보기도 잘 나와 있는것을 확인하였습니다!

ALT

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

(Firecrawl의 문제인지 ㅋㅋ 할루시가 오랜만에 발생했습니다! 번아웃은 WHO에서 분류하기로 "질병"이 아닌 직업관련 증상 으로 2024년 발표 했습니다!)

손수 한번 고쳐주었습니다.

현대인의 75%, 한국 직장인은 무려 93%가 크고 작은 번아웃 증상을 경험한다는 통계가 있습니다!

ALT

중국 웹 사이트의 스크린 샷

그림도 넣어야 하는데, 처음엔 걍 ChatGPT에서 그리고 넣지 뭐~ 했습니다.

ALT

뇌 이미지가있는 웹 사이트의 스크린 샷

그리고 이미지 호스팅!

ALT

녹색 확인 표시가있는 한국 웹 사이트 스크린 샷

ALT

여러 옵션이있는 화면 스크린 샷

은철님이 토요일에 알려준 imgbb는 왜인지 오류가 발생해서,

https://postimg.cc/ 라는 다른 이미지 호스팅 사이트 사용했습니다.

ALT

한국어 텍스트가 포함 된 웹 사이트의 스크린 샷

ALT

한국 웹 사이트의 스크린 샷

새로운 이미지 호스팅 URL로 했더니 미리보기로 잘 나오는 군요!

ALT

한국어 텍스트가있는 컴퓨터 화면의 스크린 샷

하다가, 요것도 자동화가 되면 좋겠다는 생각을 했습니다.

그래서 또다른 MCP! Image generation MCP를 설치해 보았습니다.

(MCP를 자유자재로 설치하고 쓰게 해줘서 고마워요 MCP 코리아! 개발자F 댕댕이멍멍 타이칸 여행가J )

https://github.com/GongRzhe/Image-Generation-MCP-Server?tab=readme-ov-file/

Flux 모델을 쓰는군요.

ALT

API로 AI를 실행하십시오

ALT

사진이 많은 웹 페이지의 스크린 샷

다양한 모델을 API로 제공해주는 replicate.com 을 연결했습니다!

ALT

Windows 10의 계정 설정의 스크린 샷

(평양냉면 1그릇 값 지불!)

오호 잘 될까!?

ALT

한국 웹 사이트의 스크린 샷

ALT

한국의 뇌의 이미지

ALT

검은 색 화면에 한국 문자 메시지의 스크린 샷

또 다른 그림도 추가해 보겠습니다.

ALT

남자와 여자와 함께 컴퓨터 화면의 스크린 샷

ALT

한국어 앱의 스크린 샷

하는김에 완전 자동화를 해보자!!!

걍 내용 보고 그림도 알아서 그려 넣으라고 지시 해보았습니다!

ALT

한국어 텍스트와 이미지가있는 웹 사이트 스크린 샷

모델을 어떻게 할지, 이미지 프롬프트를 어떻게 할지 고심한다면 완성도를 더 높게 할수 있을것같습니다!!

이로서, 챗지피티 등 외부 LLM이나 이미지 그리는 외부 서비스, 이미지 호스팅 서비스 없이

오직 Cursor + MCP 만으로 뉴스레터 작성 자동화 해본 사례를 마치겠습니다!!

ALT

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

마지막으로... 너무 다들 열심히 하시는 스타트업 실험실을 비롯한 지피터스 여러분! 번아웃 오지 않도록 항상 인지건강을 잘 챙기시기를 기원드립니다!!

그리구 저희 FOCUZ 앱은 수면뿐 아니라, 다양한 원인으로 인한 번아웃과 같은 인지건강 챙김 앱으로 피벗하오니 많은 성원을 부탁드립니다..!!

🧠 (썸네일은 업데이트 전이네요!!! Coming Soon!!!!) 🧠

https://focuz-landing.vercel.app/