타로카드 웹 사이트 개발

진정한 마법은 코드 안에 있다...

오늘 하루 만에 완전한 타로카드 웹 애플리케이션을 만들어 보았습니다. Tarot Mystique 라는 이름의 이 앱은 MCP(Model Context Protocol)의 도움을 받아 기존에 작업 하였다면 약 2~3주 정도 걸릴 프로젝트를 단 6시간 만에 완성하였습니다. 배포된 사이트는 다음과 같습니다.

기술 스택

기술 스택은 다음과 같이 진행 하였고, 이미지 에셋은 아래의 사이트에서 무료로 다운로드 받았습니다.

• 프론트엔드: 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

핵심 기능은 다음과 같습니다.

1. 22장 메이저 아르카나 완전 구현

2. 3가지 스프레드: 원카드, 쓰리카드, 켈틱크로스

3. 다크 테마 & 유동적 애니메이션 (Framer Motion)

4. 데이터 적재 (MongoDB)

프로젝트 시연

1. 홈 화면: 운명의 카드가 당신을 기다립니다

2. 타로 가이드: 타로 가이드 보기

3. 뽑기 화면: 운명의 카드 뽑기

4. 결과 화면: 카드의 메시지 확인하기

4-2. 셀틱 크로스 10장으로 종합 운세 확인하기

4-2. 뒤집어서 카드에 대한 정보와 키워드 보기

4-3. 카드의 메시지와 전체적인 조언

5. 백엔드 API를 통하여 몽고디비에 데이터 적재

결론

구현이 완료된 이후 약 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