소개
최근 AI를 활용해 감정을 담은 인사 카드를 생성하는 서비스 '마음담아'를 개발했습니다.
처음에는 단순히 문구와 이미지를 조합해 카드를 만들어주는 서비스였지만, 개발을 진행하면서 "정말 사용자에게 의미 있는 결과를 만들려면 무엇이 필요할까?"를 계속 고민하게 되었습니다.
특히 다음과 같은 부분을 개선하는 데 집중했습니다.
카드 디자인이 모두 비슷하게 보이는 문제
사용자가 선택한 분위기가 충분히 반영되지 않는 문제
생성한 카드를 자연스럽게 공유할 수 있는 기능
결과적으로 단순한 카드 생성기를 넘어, 사용자의 감성과 경험을 담아낼 수 있는 서비스를 목표로 개발을 진행했습니다.
진행 방법
1. 카드 생성 품질 개선
초기에는 분위기를 선택하면 항상 비슷한 레이아웃이 생성되었습니다.
예를 들어,
전통
따뜻함
고급
화사
단정
중 하나를 선택해도 결과가 거의 동일하게 느껴졌습니다.
그래서 다음과 같은 방향으로 수정했습니다.
분위기는 레이아웃을 고정하는 요소가 아니라 디자인 방향성으로 활용
같은 분위기 안에서도 다양한 구도와 여백 생성
입력한 문구 길이와 감정에 따라 배치가 달라지도록 개선
템플릿처럼 찍어내는 느낌을 줄이기
이를 통해 같은 분위기를 선택하더라도 매번 조금씩 다른 결과가 생성되도록 설계했습니다.
2. GitHub 프로젝트 관리
프로젝트는 GitHub 저장소에 관리했습니다.
주요 작업
원격 저장소 연결
main 브랜치 관리
기능 추가 후 커밋 및 푸시
이를 통해 개발 이력을 관리하고 이후 배포까지 이어갈 수 있었습니다.
3. 이미지 공유 기능 구현
처음에는 AddToAny를 이용해 일반적인 링크 공유 기능을 넣으려고 했습니다.
하지만 서비스 특성상 사용자는 링크보다 생성된 카드 이미지를 바로 공유하기를 원했습니다.
그래서 구조를 아래와 같이 변경했습니다.
카드 생성
↓
브라우저에서 PNG 생성
↓
Cloudflare R2 업로드
↓
공개 이미지 URL 생성
↓
카카오톡 공유이 방식 덕분에 카카오톡 메시지 안에서 카드 이미지가 대표 이미지로 표시되도록 구현할 수 있었습니다.
4. Cloudflare R2 활용
이미지를 저장하기 위해 Cloudflare R2를 사용했습니다.
선택한 이유
S3 호환 API 지원
정적 이미지 저장에 적합
비용 부담이 적음
공개 URL 생성 가능
카카오톡 공유 이미지로 활용 가능
업로드 API를 구현하여 생성된 PNG를 저장하고, 공개 URL을 반환하도록 구성했습니다.
5. 카카오톡 공유 연동
카카오 JavaScript SDK를 적용하여 공유 기능을 구현했습니다.
설정 과정에서는
Kakao Developers 플랫폼 등록
Web 도메인 등록
JavaScript Key 설정
공유 메타데이터 설정
등을 진행했습니다.
특히 브라우저 내부 Blob 이미지는 카카오톡으로 직접 공유할 수 없고, 외부에서 접근 가능한 HTTPS URL이 반드 시 필요하다는 점을 알게 되었습니다.
6. 서비스 배포
서비스는 Cloudflare Workers를 이용해 배포했습니다.
진행 과정
Worker 생성
환경 변수 등록
Cloudflare R2 연결
도메인 연결 준비
도메인도
maeumdama.com으로 변경하여 서비스 브랜딩을 완료했습니다.
이후
Cloudflare DNS 설정
가비아 네임서버 변경
Custom Domain 연결
순으로 배포를 진행했습니다.
결과와 배운 점
이번 프로젝트를 통해 단순히 기능을 만드는 것을 넘어,
클라우드 스토리지(R2)
CDN 및 서버리스 배포(Cloudflare Workers)
외부 플랫폼(Kakao SDK)
도메인 및 DNS 설정
등 실제 서비스를 운영하기 위한 전체 과정을 경험할 수 있었던 점이 가장 큰 수확이었습니다.
앞으로는 남아 있는 연동 작업을 마무리한 뒤,
카드 스타일 다양화
SNS 공유 경험 개선
AI 디자인 품질 향상
사용자 맞춤 카드 추천 기능
등을 추가하여 더욱 완성도 높은 서비스로 발전시킬 계획입니다.
