🎡 심플 룰렛 Simple Roulette

👀 소개글

심플 룰렛은 결정을 내리는 데 도움을 주는 룰렛 사이트입니다. ​

🚖 서비스 링크

https://timeqlife.com/roulette

🔗 개발 기록

• Next.js 프로젝트 Github Pages 배포
• GitHub Pages로 배포한 Next.js 프로젝트에 커스텀 도메인 등록(+배포 후 커스텀 도메인 초기화 현상 방지)
• 웹 사이트 Favicon 등록 및 SEO 최적화
• Next.js 웹사이트 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 웹마스터 도구에 등록 (+sitemap.xml, robots.txt 생성 및 등록)
• 수익형 웹사이트를 위해 구글 애드센스 적용(Next.js + github pages 배포)

⚙️ 기술 스택

✔️Frond-end

​

🎨 기능 소개

룰렛 돌리기

1. 옵션 개수를 선택합니다. 2개 ~ 10개까지의 옵션을 설정할 수 있습니다.
2. 룰렛 하단의 입력창에 옵션명을 입력합니다. 모든 옵션을 입력한 뒤 완료 버튼을 눌러주세요.
3. 룰렛 돌리기 버튼을 눌러 룰렛을 돌리고 당첨 결과를 확인할 수 있습니다.

룰렛 결과를 확인한 후

1. 다시 돌리기 버튼을 눌러 룰렛을 한번 더 돌릴 수 있습니다.
   
   

2. 재설정 버튼을 눌러 현재 룰렛에 옵션을 추가하거나 제거할 수 있습니다.
   
   

3. 새 원판 버튼을 눌러 모든 옵션이 초기화된 새로운 룰렛을 생성할 수 있습니다.
   
   

✨ 구현 내용

• Canvas API를 이용해 기본적인 룰렛 기능을 구현하였습니다.
• 직접 구매한 커스텀 도메인 연결하여 github-pages를 이용해 프로젝트를 배포했습니다.
• 수익화를 목적으로 구글 애드센스를 사이트에 삽입해 보았습니다. (블로그: https://florescene.tistory.com/508)
• 구글 서치 콘솔, 네이버 어드바이저, 다음 웹마스터 도구에 사이트를 등록하여 실제 포털에서 검색이 가능하도록 했습니다.
• CSS Module을 이용해 스타일링 하였습니다.

🙋‍♀️ 배운 점

• Canvas API를 사용하여 룰렛 기능을 구현하는 과정에서 그래픽 요소를 화면에 동적으로 그리고 조작하는 방법을 익혔습니다.
• 사용자 정의 도메인을 호스팅 서비스에 연결하는 방식을 배웠습니다.
• 애드센스를 직접 프로젝트에 적용하여 수익화 진행 과정을 경험할 수 있었습니다.
• SEO에 대한 이해도를 증진시킬 수 있었습니다.

🚩 개선점

• SEO에 관해 추가적으로 공부해보기