꽃으로 말하기: 투시-머시(Tussie-Mussie) 생성기로 부케 만들기
요약
이 글은 빅토리아 시대의 꽃말(Language of Flowers) 데이터셋을 기반으로 AI가 생성한 '투시-머시'(작은 화관)를 담은 이메일 카드 웹 애플리케이션인 '투시-머시 생성기'의 재출시 과정을 다루고 있습니다. 개발자는 UI 리팩토링(Astro + Vue 사용), 기존 e-카드 전송 시스템(Mailgun)을 Resend로 교체하고 Cloudflare 서버리스 함수를 통합하는 등 여러 기술적 개선 작업을 수행했습니다. 특히, Gemini API를 활용하여 '투시-머시' 이미지를 정확하게 생성할 수 있게 된 점과 복잡한 도메인/서브도메인 설정을 성공적으로 완료한 것이 주요 성과입니다.
핵심 포인트
- 빅토리안 시대의 꽃말 데이터셋을 기반으로 AI 이미지(Gemini)와 이메일 전송(Resend) 기능을 결합한 웹 애플리케이션 구축 사례를 제시합니다.
- Astro + Vue 스택으로 UI를 리팩토링하고, Cursor 같은 AI 에이전트를 활용하여 개발 효율성을 극대화하는 방법을 공유했습니다.
- 기존의 불안정했던 이메일 전송 시스템(Mailgun)을 Resend로 교체하고 Cloudflare 서버리스 함수와 연동하여 안정적인 아키텍처를 구축했습니다.
- 도메인 구매 및 호스팅(Porkbun, Netlify) 환경에서 서브도메인을 이용한 이메일 발송까지의 복잡한 DNS 설정 과정을 성공적으로 완료했습니다.
투시-머시 생성기(Tussie-Mussie Generator)는 의미 있는 꽃 이메일 카드와 AI가 생성한 '투시-머시', 즉 작은 화관을 보내고 싶은 모든 사람들을 위한 웹 애플리케이션입니다. 이 앱은 빅토리아 시대의 꽃말 언어를 사용하여 부케를 구성하고, Gemini로 이미지를 생성하며, Resend를 통해 전송합니다. 본 게시물에서는 어머니날 재출시 내용을 다룹니다: 깨진 이메일 통합 기능을 수정하고 A를 교체했습니다.
리팩토링할 부분이 좀 있었습니다! 제가 처리했던 몇 가지 까다로운 부분들을 소개합니다:
핵심 유지하기: 이 앱의 기반은 제가 한동안 Kaggle에서 만든 빅토리안 시대의 '꽃말 (Language of Flowers)' 데이터셋입니다. 이 데이터는 Farmer's Almanac에서 스크래핑한 것입니다. 이것이 어떤 모습인지 예시를 보여드리겠습니다. 만약 여러분의 아이디어가 탄탄한 데이터셋을 중심으로 한다면, 실패할 일이 없습니다. 제가 목록을 확보한 후, 해당 꽃들의 이미지를 스크래핑하여 Cloudinary에 최적화된 형태로 저장하는 데 시간이 걸렸습니다. 하지만 그 작업은 1년 전에 완료되었습니다. 따라서 재출시를 위해 남은 두 가지는 UI 리팩토링과 작동하지 않던 부분들, 즉 e-카드 생성기(e-card generator)를 수정하는 것이었습니다.
UI 리팩토링 이 앱은 제가 선호하는 스택인 Astro + Vue로 구축되었습니다. 1년이 지나자 업그레이드할 때가 분명히 왔고, 오래된 패키지에 의존했던 tailwind 통합을 수정하는 것도 포함되었습니다. Cursor는 그 작업을 순식간에 처리했습니다. 이는 AI 소프트웨어 에이전트를 사용하는 최고의 예 중 하나입니다. 팁: 리팩토링을 완료하면서 주기적으로 AI에게 불필요한 파일이나 코드 제거를 계획하도록 요청하세요. 보통 삭제할 수 있는 잔여물들이 있습니다. 저는 제가 인정하기에 기본적인 UI인 impeccable.style을 리팩토링하는 데 매우 유용한 AI 기술을 사용했습니다. 이 기술들을 여러분의 장치에 설치하고, AI가 생성한 모든 UI 제안을 작업할 때 /impeccable critique를 실행하여 취향과 스타일 측면에서 작업을 검증하세요. 저는 이제 모든 UI에 impeccable을 사용하고 있으며, 이는 포트폴리오 정리에도 도움이 되었습니다. UI는 다음과 같이 변경되었습니다: ...에서 위에서 보여드린 UI로.
저는 이걸 정말 좋아합니다. E-Card 기능 수정 이 앱은 작년 출시 이후 Mailgun이라는 원래의 e-card 전송 메커니즘 문제로 인해 저에게 끔찍한 패닉을 안겨주었고, 기념일 저녁 식사를 망쳤습니다. 저는 그들의 시스템 해킹으로 인한 엄청난 초과 요금 청구에 충격을 받았고, 가능한 한 빨리 전체를 중단시켰습니다. 재출시하려면 API를 통해 이메일을 전송할 새로운 서비스를 찾아야 했습니다. 다시 한번 Cursor가 구세주 역할을 해주었습니다. 이전 선택지보다 훨씬 더 견고한 새 이메일 서비스인 Resend를 도입했습니다. 이제부터 순조롭게 진행되기를 바랍니다! 통합에는 Cloudflare에 호스팅할 수 있는 서버리스 함수가 포함되어 있으며, 도메인을 인증하는 즉시 잘 작동합니다. 마지막 부분은 저에게 가장 오랜 시간이 걸렸습니다. 까다로운 점은 제가 Porkbun에서 도메인을 구매했기 때문에 서브도메인으로 이메일을 전송하려면 그곳에서 DNS 레코드를 수정해야 했다는 것입니다. 사이트는 Netlify에 호스팅되어 있어, 거기에 서브도메인을 구축해야 했고, 그런 다음 Resend에서 DNS를 인증했습니다. 자주 하는 작업이 아니기 때문에 단계를 놓치기 쉽습니다. 하지만 이제 모든 것이 설정되었고, 이메일이 전송됩니다! 또한 AI로 생성된 꽃다발을 어떻게 만들지 재고해야 했습니다. 저는 이전에 꽃다발을 생성하기 위해 선택했던 서비스의 크레딧이 바닥났고, 어쨌든 제대로 작동하지 않았습니다 (실제 'tussie mussies'가 아닌 일반적인 꽃다발로 생성되었습니다. 'tussie mussies'는 은세공 케이스를 가지고 있습니다). 지난 1년 동안 AI가 이 난해한 이미지에 대해 얼마나 발전했는지 보는 것은 놀랍습니다. 이제 Gemini는 정확하게 함께 할 수 있습니다.
mpose a tussie mussie in its holder, given a specific prompt. Enjoy these little bouquets! Send one to your Mom today ! Cloudinary ❤️ developers Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today. 👉 Create your free account
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기