본 프로젝트는 아이디어 구상부터 디자인, 개발, 배포까지 전 과정을 단독으로 진행했습니다.

Figma로 화면을 설계하고 Photoshop으로 디자인 요소를 제작했으며, React + Vite로 구현하고 Express 백엔드 서버를 구축해 Claude API 키를 안전하게 관리했습니다.

서버는 Render, 클라이언트는 Vercel에 각각 배포하며 서비스 환경을 경험했고, 기획부터 배포까지 하나의 웹 서비스를 완성하는 전체 흐름을 경험할 수 있었습니다.

CSS Modules를 활용해 페이지 단위로 스타일을 모듈화했습니다. 빌드 시 클래스명이 자동으로 고유한 값으로 변환되어 페이지 간 스타일 충돌을 방지할 수 있었습니다.

사용자 이름과 생년월일을 기반으로 오늘의 별자리 운세와 행운 아이템 정보를 제공하기 위해 평소 사용하는 Claude의 API를 연동해 활용했습니다.

작업 초반에는 단순한 프롬프트 작성으로 원하는 결과를 얻지 못했지만, 출력 형식·말투·항목 등을 구체적으로 명시하는 방향으로 계속 수정하며 원하는 결과값을 얻을 수 있었습니다.

이 과정에서 프롬프트의 구체성은 응답 정확도와 직결되기 때문에 정확하고 자세한 프롬프트 작성이 중요하다는 것을 깨달았습니다.

작업이 어느 정도 완성되었을 때 주변분들에게 테스트를 부탁드렸습니다. 그중 '결과 화면을 이미지로 저장하고 공유할 수 있었으면 좋겠다'는 피드백에 html2canvas를 활용하여 해당 기능을 구현했습니다.

브라우저의 기본 기능만으로는 HTML을 이미지로 저장할 수 없기 때문에 html2canvas를 활용해 결과 화면을 canvas로 변환한 뒤 PNG 파일로 다운로드할 수 있도록 했습니다.