아주 오랫동안 개인 프로젝트는 여러 가지 시작은 했지만 정말 웹사이트를 론칭하고 유지 보수했던 것은 한 개도 없는 것 같습니다. 그래서 개인 프로젝트 겸 용돈을 벌 생각으로 만들 것을 찾던 중 뭔가 타이머를 만드는 게 그렇게 어렵지도 않을 것 같고 한국어로 잘 번역되어 있는 곳도 보이지 않았기 때문에 만들면 쉽게 랭킹 될 수 있을 것 같았다. 이 모든 것이 그릇된 생각임을 깨닫는 것은 도메인을 사고 웹사이트를 publish 한 다음에 알게 되었다. 즉, 미리 사전 조사를 더 하지 않았던 것이 문제였습니다.
먼저 프로젝트 기반은 React로 하고 nextjs + tailwind를 써서 시작을 했다. 나중에는 nextjs 퍼블리시 하기 가장 편한 vercel을 일단 사용하기로 했습니다.
외국에서 kr로 끝나는 도메인 찾기가 어렵다
일단은 한국어만 사용하기로 했습니다. 그래서. kr 도메인을 찾으려 다녔는데 kr 도메인 찾기가 어려웠습니다. 여러 번 사용했던 namecheap랑 몇 군데 가봤는데 없어서 godaddy에서 kr 도메인을 구입했습니다. kr은 잘 나가는 도메인은 아니라서 그런지 2년에 56불 정도 하더라고요.
타이머에 필요한 setInterval 문제 해결
setInterval이나 setTimeout이 브라우저가 포커스 되어 있지 않으면 예를 들면 다른 탭을 사용하고 있거나 최소화해두었다면 자동으로 멈추게 되는데 이걸 해결하기 위해서 여러 가지 옵션을 찾아보았다. requestAnimationFrame을 사용해서 계속 업데이트하라던지 웹 워커를 사용하는 방법이 있었다. requestAnimationFrame에 경우에는 그냥 setInterval과 똑같이 멈추었습니다.
in-active 한 탭에서는 내가 사용한 시간과 상관없이 1초로 적용된다고 하는 것을 찾았습니다.
https://usefulangle.com/post/280/settimeout-setinterval-on-inactive-tab
webworker를 통해서 setInterval을 사용하니 문제가 해결되었습니다. 사용한 라이브러리는 worker-timers로 setTimeout, setInterval을 web worker를 사용해서 설정해주는 라이브러리로 문제없이 잘 돌아갔습니다.
setInterval이나 setTimeout을 길게 가져가야 되고 브라우저가 최소화되거나 포커스 아웃되어 있더라도 계속 유지해야 할 필요가 있다면 web worker 사용을 고려하자.
사파리에서 오디오 소리가 잘 나지 않는 점
소리 관련해서는 howlerjs를 사용하게 되었습니다. chrome에서는 모바일, 데스크톱 모두 문제없이 잘 사용되었지만 유독 역시나 사파리에서는 타이머 소리가 안 나왔는데 howler html5 flag를 넘겨주면 작동이 잘 되었습니다.
vercel에 구매한 도메인 적용하기
vercel에서는 계발하는 동안 자동 생성되는 url을 사용하고 있었는데. 앞에서 말한 것처럼 도메인을 godaddy에서 구입한 도메인을 사용해서 빠르게 런치 하고 싶었습니다. 도메인 바꾸는 방법은 생각보다 간단하긴 했는데 조바심인지 그냥 오래 걸렸는지 바뀌는데 한 2시간 정도 걸렸던 것 같습니다.
godaddy 도메인을 vercel에 적용하는 방법
1. 먼저 도메인을 구입합니다.
2. vercel -> setting-> domain으로 들어갑니다.
위에 보이는 정보를 godaddy DNS Records에서 추가하면 됩니다.
DNS Management로 들어가서 DNS Records에서 위에 보이는 정보를 추가해 줍니다.
이제 기다리는 일만 남았습니다.
Nameservers를 통해서 바꾸는 방법도 있지만 저는 잘 되지 않았습니다. 아니면 수양이 부족해 기다리지 못했을 수도 있습니다.
구글 웹사이트 등록하기
구글에 웹사이트를 등록하기 위해서는 goggle console에서 웹사이트를 인증하고 sitemap.xml을 제출하는 것 입니다. 아래 보이는 domain에 사이트 root url(맨 뒤 도메인 이름)을 입력하고 인증을 하면 됩니다. 옆에 보이는 URL prefix는 제출 하는 url만 되는 것이기 때문에 웹사이트를 등록할 때에는 좋지 않은 방법인 것 같습니다.
그런 다음 sitemaps를 클릭해서 새로운 sitemap을 추가해줍니다.
크롤러라 웹사이트를 크롤 할 수 있게 robots.txt도 잘 설정해주시면 됩니다.
설정이 끝났으면 URL inspection을 통해서 크롤러가 사이트를 읽을 수 있는지 확인해주시고 site:domain을 구글에 처 보면서 내 사이트가 검색되는지 확인해주시면 됩니다. 도메인 이름이 www.helloworld.com이라면 site:helloworld로 검색하면 됩니다. url이 많다면 시간이 꽤 오래 걸릴 수 있습니다. 며칠 안으로 performance나 pages에 기록들이 보일 것입니다.
네이버 웹사이트 등록하기
네이버에 검색 등록하려면 Search Advisor에 가서 등록을 해야 합니다.
아래 보이는 곳에 자신에 도메인 이름을 추가해줍니다.
그리고 앞에서 구글에서 한 것처럼 웹사이트 인증을 해야 합니다.
저는 2번째 방법인 HTML 태그를 통해서 사이트를 등록했습니다.
nextjs를 사용하면 _document.js에 추가하면 됩니다.
{/* Naver */}
<meta
name="naver-site-verification"
content={process.env.NEXT_PUBLIC_NAVER_SITE_VERIFICATION}
/>nextjs sitemap.xml 생성하기
타이머 프로젝트는 여기에 있습니다. 프로젝트 소계를 간단히 하자면 아직 까지는 온라인 타이머, 알람 기능만 있습니다. 아직 까지는 다른 타이머에 비해서 특출 난 것이 없지만 앞으로 타바타 타이머 또는 비슷한 interval 타이머도 추가할 예정입니다. 온라인 타이머를 통해서 여러 가지 알람을 설정할 수 있습니다.
가장 많이 사용될 것 같은 알람은 30분 타이머 나 50분 타이머 일 것 같습니다. 공부할 때도 많이 사용될 수 있을 것이고 집중할 때도 사용할 수 있기 때문입니다.
앞으로도 많은 업데이트를 통해서 구글 랭킹을 올려 보도록 하겠습니다.