🎯 심심풀이 코인 투자 오늘의 운세 웹사이트 만들기 (GPT, CoinMarketCap)

심심풀이 코인 투자 운세 웹사이트 만들기

안녕하세요! 오늘은 제가 직접 개발한
'코인 투자 운세 웹사이트' 제작 과정을 소개하려고 합니다.
사용자가 입력한 정보를 기반으로 그날의 투자 운세를 보여주는 웹서비스이며,
GPT 도움을 받아 JavaScript로 제작된 프로젝트입니다 💪

---

🧠 프로젝트 개요

항목	내용
🎯 목적	투자자 대상의 재미 요소 + 심리 안정 + 트래픽 수익
🧙 기능	성별, 생일, 태어난 시각, 코인 선택 → 맞춤 운세 출력
🔮 특징	하루 동안 고정된 운세, 길고 구체적인 결과, 광고 삽입 가능
💰 수익화	Google AdSense 응용
📱 UI	모바일 최적화, 반응형 웹 구성

---

🗂️ 데이터 구성

• 총 1000개 이상의 운세 문구
• 매 순간 GPT를 사용하면 여러가지 조합이 나오지만 API를 사용하지 않음
• 사용자의 성별 + 생일 + 태어난 시 + 코인명 조합으로 운세 고정 출력
• JSON 데이터로 관리 (랜덤이지만 하루 동안 고정된 결과)

json

{
  "gender": "male",
  "birth": "2025-04-24",
  "hour": "15",
  "coin": "ETH",
  "fortune": "오늘은 ETH의 흐름처럼 당신의 판단이 날카롭습니다. 그러나 감정에 휘둘리지 않도록 주의하세요..."
}

 

---

💻 주요 기술 스택

• Frontend: HTML, CSS, JavaScript
• 시각화: Chart.js로 코인 가격 추세 그래프
• 데이터: JSON 파일 기반 운세 데이터
• 호스팅: Netlify (사용) / GitHub Pages (무료)

---

🔧 핵심 기능 예시

  ✔️ 날짜 포맷 처리

function getFormattedDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = today.getMonth() + 1;
  const date = today.getDate();
  const dayNames = ["일", "월", "화", "수", "목", "금", "토"];
  return `${year}년 ${month}월 ${date}일 ${dayNames[today.getDay()]}`;
}

  ✔️ 운세 데이터 로딩

let allFortunes = [];

fetch("./structured_fortunes_1000.json")
  .then(res => res.json())
  .then(data => {
    allFortunes = data;
  })
  .catch(err => {
    console.error("운세 JSON 로딩 실패:", err);
  });

  ✔️ 그래프 시각화

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="coinTrendChart"></canvas>

 

---

📱 모바일 최적화 UI

• 모든 화면은 모바일 친화적으로 구성
• 버튼, 입력창, 결과 창 모두 반응형 설계
• 페이지 하단에는 깔끔한 푸터 추가

<footer>
  <p style="text-align: center; font-size: 0.9em; color: #777;">
    © 배웠다 말았다 다시 시작했다
  </p>
</footer>

---

🧭 향후 확장 방향

• ✅ 운세 히스토리 저장 기능 (LocalStorage 등 활용)
• ✅ 이미지 캡처 업로드 기능 → 감성 진단
• ✅ 코인별 일주일 트렌드 반영 운세
• ✅ 댓글 or 공유 기능 추가

---

👨‍💻 개발 후기

순수 HTML/JS만으로도 충분히 유의미한 서비스를 만들 수 있었습니다.
여러분도 도전해보세요! 😉
애드센스는 콘텐츠부족으로 심사에서 떨어졌지만 다시 신청할 예정입니다.

반응형

---

도움이 되셨다면 공감/댓글 부탁드립니다 🙌
전체 코드나 JSON 포맷이 궁금하신 분은 댓글 남겨주세요!

 

👉 더 많은 정보는 제 블로그에서 확인해보세요. https://jjaeho.tistory.com

 

배웠다 말았다 다시 시작했다😎

 

 

⚫ 결과물 ⚫ 

https://friendly-semolina-b04371.netlify.app

코인 투자 운세 웹사이트

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."