[연봉툴즈] 배포

배포

https://www.yeonbongtools.com/

연봉툴즈 2024

 
1차 배포를 완료했다.
풍문이지만 도메인 서버 등록 6개월 미만의 신생 웹사이트는 검색 노출에 매우 불리하다고 한다. 그래서 추가 작업은 틈틈이 업데이트하기로 하고, 일단 웹사이트를 배포했다.
 
작업 내용은 기획 AI의 기획서를 그대로 따랐다. 여기서는 기술 스택, 기능, 차별화, 개선할 사항을 정리한다.

인터넷 건물주가 되어보자

 

1. 기술 스택

Frontend & Backend	Nextjs
Style	Tailwindcss(+daisyUI)
Hosting	Vercel

 

2. 기능

주요 기능은 3가지이다.

• 실수령액 계산기
• 연봉 인상률 계산기
• 실수령액 테이블

세 가지 모두 간단한 기능을 완벽하게 구현하려고 노력했다. 애플리케이션을 확장할 때에는 계산기와 테이블이라는 두 가지 컨셉을 유지하면서 기능을 추가할 예정이다.
 

3. 차별화

3-1. 정확한 계산

잡코리아, 사람인, 네이버에서 제공하는 연봉 계산기를 모두 사용해 보면, 3개의 계산 결과가 모두 다르고, 특히 연봉이 높아질수록 그 차이가 점점 더 커진다는 것을 알 수 있다.
 
계산결과 (퇴직금 미포함, 비과세액 20만 원, 부양가족 수 1명 기준)

	잡코리아	사람인	네이버
연봉 3000만원 실수령액	2,251,760원	2,251,650원	2,251,650원

	잡코리아	사람인	네이버
연봉 8000만원 실수령액	5,413,120원	5,357,566원	5,412,797원

 
연봉 8000만 원에서는 월 실수령액이 5만 원까지 차이가 난다.
 
이런 계산기를 정확한 수치를 얻을 목적으로 사용하는 사람은 없겠지만, 차별화 포인트를 찾아내야 하는 내 입장에서는 건들기 딱 좋은 부분이었다.
 
계산결과의 차이가 발생하는 원인은 두 가지로 추측해 볼 수 있다. 첫 번째는 애플리케이션에 새로운 시행 기준이 적용되지 않은 탓이다. 예를 들어 소득세를 산출할 때 사용되는 국세청의 근로소득 간이세액표 자료가 최신 자료가 아닌 경우이다. 두 번째는 계산문제다. 세금이 계산될 때 어떤 세금은 월소득에서 십의 자리에서 제하고 계산되는가 하면, 어떤 세금은 월소득 천의 자리에서 제하기도 한다. 기준이 왜 이럴까 싶을 정도로 다 다르고 복잡하다. 그리고 자연스레 소수점 계산이 많아지는데, 여기에서도 오차가 발생했을 가능성이 크다. 자바스크립트에서 소수점 계산을 할 때에는 추가 작업을 해주지 않으면 오차의 발생을 막을 수 없다. 나는 이 문제들을 해결하고, 연봉툴즈는 다른 서비스들보다 계산의 정확도가 높다는 자부심을 가지기로 했다.
 
우선 첫 번째 문제는 현시점에서 적용되는 시행령과 시행규칙을 기준으로 구현했기 때문에 자연스레 해결된 셈이다.

 

그리고 소수점 계산. 사람은 숫자가 딱 나누어 떨어지지 않을 때 순환소수로 대신 이해할 수 있지만, 자바스크립트는 불가능하다. 컴퓨터가 원래 불가능하다. 그래서 컴퓨터의 소수점 계산에는 필연적으로 오차가 발생할 수밖에 없다.

 

모든 계산은 각 시행령에 맞게 반올림, 내림하며 계산한 후 화면에 표현할 때 한번 더 가공하면서 오차가 발생하지 않도록 했다.
 

3-2. UI&UX

연봉툴즈 모바일 웹 화면

 
UI는 최대한 심플하게 만들고 UX에 집중했다. 실수령액 계산기는 계산 실행 버튼을 따로 만들지 않고, 입력값에 따라서 자동 계산이 되도록 만들었다. 그런데 이 경우 모바일에서 스크롤과 화면 확대 상태에 따라 입력란(연봉)과 출력란(실수령액)이 한 화면에 보이지 않는 경우가 있었다.

 

이 경우 사용자가 연봉을 입력한 후 출력란으로 이동하여 확인했을 때, 출력란에 쓰여 있는 결괏값이 자신이 입력한 연봉에 의해 바로 계산된 값인지에 대해 의문을 가질 수 있다고 생각했다. 그래서 입력과 출력이 한 화면에 보이지 않는 경우에는 Intersection Observer를 활용해서 계산이 끝나는 시점에 팝업창을 띄워 계산된 값을 즉시 확인할 수 있도록 구현했다. 물론 한 화면에 두 개가 모두 보이는 경우에는 팝업창이 뜨지 않는다. 이런 식으로 곳곳에 차별화 포인트를 두려고 노력했다.
 

4. 개선할 사항

• UI/UX
• 브라우저의 불필요한 repaint 방지. 컴포넌트 렌더링 최적화는 완료했는데, repaint는 모두 확인하지 않았다.
• 번들 최소화. 연봉툴즈 홈의 first contentful paint에서 css파일의 크기가 9 kB이다. 넷플릭스의 어떤 페이지에서는 6.5kB라고 했던 것 같다(넷플릭스도 일부 tailwindcss를 사용한다). 연봉툴즈가50%나 더 무겁다.