첫 웹사이트 개발: prettyutils.com

얼마전에 개발자용 tool들을 제공하는 prettyutils.com 이라는 사이트를 개발했다. 내가 개설한 첫번째 사이트다. 직접 개발한 서비스로 돈 1원도 벌어본 적이 없다는게 가잔 큰 약점이라 생각했고 개발 동기가 되었다. 취준때는 이론 공부나 로컬에서만 동작하는 토이프로젝트를 했고, 실무에서도 처음부터 혼자 만든게 아니라 함께 이미 만들어진 것들을 바탕으로 개발을 했다. 그래서 온전히 나의 힘으로 만든게 없다는 사실에 쉽게 자신감을 갖지 못했다. 그래서 직접 사이트를 개발했다.
이 사이트는 json과 sql formatting, base 64 encode/decode, 시간 측정 타이머 및 스탑워치, AI 자동완성이 지원되는 자바스크립트 에디터, 세계 시간 조회 페이지 등의 기능을 포함한다.
제공하는 기능들은 단순하고 사소하지만, 개발하고 배포하면서 많은 배움을 얻었다.
이 글에서 이 사이트를 소개하면서 사이트 개발 과정을 공유하려고 한다.

페이지 개발은 next.js와 react를 이용했다. 예전에 조금 사용해본 적이 있고, 꽤 예쁜 UI를 비교적 쉽게 만들 수 있어서 채택했다. daisyUI를 이용해 테마 기능도 쉽게 적용이 가능했다.

앱을 배포하기 위해 네이버 클라우드 플랫폼(NCP)을 사용했다. DB는 필요없이 서버 1대와 DNS 서비스, public IP 서비스를 이용했다.
도메인을 구매했다. 처음에는 wonderthink라는 도메인이 마음에 들어서 구매대행을 통해 구입했는데, 사이트 성격과 맞지 않는것 같아서
prettyutils.com으로 도메인을 변경했다! NCP와 도메인 구매 대행 업체에서 DNS와 서버를 매핑해주니 인터넷에서 도메인이름으로 사이트에 접근이 가능해졌다.

SSL 설정도 다행히 무료로 할수있는 방법이 있었다. nginx와 certbot이란 걸로 쉽게 설정 가능했다.
배포는 서버에 git pull한 뒤에 도커 빌드하여 실행하는 간단한 스크립트를 만들어두었다.

SEO에 대해서 잘 모르지만 개선해보려고 노력했다. head 태그에 적절한 타이틀, 키워드를 설정해주었다.
그리고 페이지 본문에도 설명을 꽤 자세하게 써주었다. 아직까지 페이지 검색 순위가 굉장히 낮아서 좀 더 개선이 필요하다

처음엔 사이트를 개발하고 데스크탑에서만 확인해봐서 모바일 UI 친화도가 낮았다. 그래서 나중에 모바일에서의 UI도 개선하려고 시도했다. css의 속성을 responsive하게 변경하여 어느정도 개선할 수 있었다. 하지만 safari나 모바일에서 잘 안되는 부분도 여전히 존재한다.

도커 컨테이너가 stop된 적도 있었다. 그래서 사이트에 접근하니 502 bad gateway 오류가 발생했다. 도커 컨테이너를 재실행해도 바로 종료되었다.
그러다가 nginx access 로그에서 "No space left on device"를 확인했다.
NCP 모니터링에서도 서버 디스크 용량이 100%인 것을 확인했다.
그래서 먼저 nginx log를 지워줬는데 이건 kb 수준으로 디스크 용량에 큰 영향이 없었다.
원인을 파악해보니 도커 빌드 중에 build cache가 많이 생성되는 것 같았다.
docker system prune -a로 해결했다. df -h로 확인하니 도커가 사용하는 filesystem이 크게 줄어들었다.