타로카드 웹 사이트 개발
오늘 하루 만에 완전한 타로카드 웹 애플리케이션을 만들어 보았습니다. Tarot Mystique 라는 이름의 이 앱은 MCP(Model Context Protocol)의 도움을 받아 기존에 작업 하였다면 약 2~3주 정도 걸릴 프로젝트를 단 6시간 만에 완성하였습니다.
Tarot MystiqueReactVercelmodel-context-protocolWeb Site
e
2025.05.25
·
4 min read
진정한 마법은 코드 안에 있다...
오늘 하루 만에 완전한 타로카드 웹 애플리케이션을 만들어 보았습니다. Tarot Mystique 라는 이름의 이 앱은 MCP(Model Context Protocol)의 도움을 받아 기존에 작업 하였다면 약 2~3주 정도 걸릴 프로젝트를 단 6시간 만에 완성하였습니다. 배포된 사이트는 다음과 같습니다.
Tarot Mystique - Unveil Your Destiny
Discover the ancient wisdom of tarot cards. Experience mystical divination through our enchanting digital tarot reader.
https://tarotmystique.vercel.app
기술 스택
기술 스택은 다음과 같이 진행 하였고, 이미지 에셋은 아래의 사이트에서 무료로 다운로드 받았습니다.
프론트엔드: React + TypeScript + Vite / Vercel
백엔드: Kotlin + SpringBoot + MongoDB / 라즈베리파이4
Rider-Waite Smith Tarot Cards (CC0) by luciellaes
Cleaned and resized scans of the original RWS tarot set
https://luciellaes.itch.io/rider-waite-smith-tarot-cards-cc0
핵심 기능은 다음과 같습니다.
22장 메이저 아르카나 완전 구현
3가지 스프레드: 원카드, 쓰리카드, 켈틱크로스
다크 테마 & 유동적 애니메이션 (Framer Motion)
데이터 적재 (MongoDB)
프로젝트 시연
1. 홈 화면: 운명의 카드가 당신을 기다립니다
2. 타로 가이드: 타로 가이드 보기
3. 뽑기 화면: 운명의 카드 뽑기
4. 결과 화면: 카드의 메시지 확인하기
4-2. 셀틱 크로스 10장으로 종합 운세 확인하기
4-2. 뒤집어서 카드에 대한 정보와 키워드 보기
4-3. 카드의 메시지와 전체적인 조언
5. 백엔드 API를 통하여 몽고디비에 데이터 적재
6. 유저 활동량 텔레그램 알림 연동
결론
구현이 완료된 이후 약 3군데의 타로 관련 사이트에 링크를 홍보한 결과, 배포 이후 2시간 만에 약 90건의 데이터가 적재된 모습을 확인할 수 있었습니다.
이 글을 작성하는 시점인 지금도 약 100건 이상의 데이터가 쌓였고, 유저들이 실제로 사용할 수 있는 서비스를 이렇게 짧은 시간 내에 구현할 수 있다는 것이 신기하고 놀라웠습니다.
구현 된 코드와 프로젝트에 대한 상세 정보는 아래 깃허브에서 확인하실 수 있습니다.
GitHub - mcp-space/tarot_mystique_web: Tarot Mystique is a mystical tarot reading web application that provides personalized insights and guidance through intuitive card readings.
Tarot Mystique is a mystical tarot reading web application that provides personalized insights and guidance through intuitive card readings. - mcp-space/tarot_mystique_web
https://github.com/mcp-space/tarot_mystique_web