DEV Community

김이더
김이더

Posted on

친구가 다이어리에 출퇴근을 적고 있었다 1/2

코드는 GitHub에, 앱은 gongnog.up.railway.app에서 볼 수 있다.


친구가 다이어리에 출근 시간을 적고 있었다.

펜으로. 손으로. 매일.

출근 몇 시, 퇴근 몇 시, 오늘 점심값 얼마, 저녁 먹었으니까 급량비에서 빼야 하고. 초과근무 시간은 또 따로 계산해서 옆에 적어두고. 그걸 한 달 내내 반복한 다음에 월말에 합산한다.

한 번 보고 말았으면 잊었을 텐데, 볼 때마다 그러고 있다.

손으로 하면 틀린다

공무원 근무기록이 그냥 "출근 찍고 퇴근 찍고" 끝나는 일이 아니다.

초과근무부터 이미 복잡하다. 평일이랑 주말이랑 계산 방식이 다르고, 자동공제 시간이라는 것도 있고, 상한선도 있다. 조건이 여러 개 겹치는 구조라서 머릿속으로 하면 자주 헷갈린다.

급량비는 더 그렇다. 출퇴근 시간이 특정 시간대랑 얼마나 겹치느냐에 따라 식수가 달라지고, 주말은 또 기준이 다르다. 여기에 실제로 쓴 식비를 빼야 수지가 나온다.

이런 걸 매일 손으로 계산한다.

7시 46분에 출근했는데 급하게 적다 보면 7시 50분으로 반올림한다. 별것 아닌 것 같지만 초과근무 계산에서 몇 분 차이가 결과를 바꿀 수 있다. 한 달 쌓이면 합산이 안 맞는데, 어디서 틀렸는지 찾으려면 다이어리를 처음부터 다시 훑어야 한다.

귀찮은 것보다 더 문제인 건, 실수할 여지가 너무 많다는 거다.

그래서 만들었다

공노기 — 공무원 근무기록 웹앱.

핵심은 하나다. 출근할 때 버튼 한 번, 퇴근할 때 버튼 한 번. 나머지는 전부 앱이 계산한다.

"지금 출근" 버튼을 누르면 현재 시간이 자동으로 채워진 팝업이 뜬다. 정확히 그 시각에 누르지 못했어도 괜찮다. 팝업에 -1분, -5분 같은 조절 버튼이 있어서, 자리 잡고 짐 풀고 나서 눌러도 실제 출근 시간으로 맞출 수 있다.

퇴근도 똑같다. 버튼 누르고, 시간 확인하고, 저장. 초과근무랑 급량비는 앱이 알아서 계산한다.

식비 기록도 간단하다. 식사 버튼을 누르면 설정해둔 기본 단가가 채워진 팝업이 뜬다. 오늘 점심이 8,500원이었으면 숫자만 고치면 끝이다. 수령액에서 지출을 빼서 수지가 바로 보인다.

다이어리에 적을 때 5분 걸리던 걸, 버튼 두세 번으로 끝낸다.

캘린더에서 한 달이 보인다

앱을 열면 캘린더가 나온다.

각 날짜에 색깔이 들어간다. 정상 근무는 초록, 초과근무가 발생한 날은 주황. 캘린더만 훑어봐도 이번 달에 얼마나 일했는지 감이 온다.

날짜를 탭하면 바텀시트가 올라온다. 그날의 근무시간, 초과근무, 급량비 수령액과 지출, 수지가 한 카드에 정리돼 있다. 다이어리를 뒤적이면서 "이날 뭐 했더라" 할 필요가 없다.

상단에는 이달 요약이 있다. 총 근무시간, 총 초과근무, 급량 수지. 기록을 저장하는 순간 바로 반영된다.

통계 탭에서는 차트로 일별 분포를 볼 수 있고, 월말 정산할 때 엑셀이나 CSV로 뽑을 수도 있다. 다이어리를 복사하는 대신 파일 하나 전달하면 된다.

쓰는 사람이 건드릴 수 있어야 한다

공무원마다 근무 규칙이 조금씩 다르다. 자동공제 시간이 다른 곳도 있고, 급량비 단가도 다르고, 급량비가 인정되는 시간대도 부서마다 다를 수 있다.

그래서 설정 탭을 만들었다. 초과근무 기준, 급량비 단가, 시간대 조건 — 전부 바꿀 수 있다. 앱이 "우리 부서 규칙이랑 다른데?"가 되면 안 된다. 각자 자기 조건에 맞게 세팅하고, 그 기준으로 자동 계산되게 했다.

테마도 넣었다. 액센트 색상 6종에 배경 테마 4종. 다크 모드도 된다. 매일 여는 앱인데 눈이 편해야 한다.

처음 쓰는 사람도 헤매지 않게

앱을 만들고 나서 한 가지가 걸렸다. 처음 들어온 사람이 뭘 해야 하는지 모를 수 있다.

캘린더가 떡하니 있고 버튼이 여러 개 있는데, 어디부터 눌러야 하는지 안내가 없다. 이 앱을 쓸 사람들이 개발자가 아니다. 친구도, 가족도, 그냥 매일 출퇴근하는 공무원이다.

그래서 튜토리얼을 넣었다.

처음 접속하면 도움말 버튼이 반짝거린다. 누르면 화면의 주요 영역을 하나씩 스포트라이트로 비추면서 설명해주는 가이드가 시작된다.

여기서 작은 문제가 하나 있었다. 신규 사용자는 기록이 하나도 없어서 캘린더가 텅 비어 있다. 빈 캘린더를 가리키면서 "여기서 기록을 확인할 수 있어요"라고 해봤자 와닿지 않는다.

그래서 튜토리얼이 돌아가는 동안만 가짜 데이터를 캘린더에 채워 넣는다. 색깔이 들어가고 숫자가 보이니까 "아, 이렇게 되는구나" 하고 바로 이해한다. 튜토리얼이 끝나면 가짜 데이터는 사라진다.

왜 웹앱인가

네이티브 앱을 만들까 잠깐 고민했다. 근데 공무원 친구한테 "앱스토어에서 다운받아"라고 하면 귀찮아서 안 한다. 회원가입이 복잡해도 안 한다.

웹앱이면 링크 하나 보내면 끝이다. 브라우저에서 바로 열리고, 아이디/비밀번호만 만들면 쓸 수 있다. iOS에서 "홈 화면에 추가"하면 앱처럼 아이콘도 생긴다.

SvelteKit으로 만들고 Railway에 올렸다. PostgreSQL에 데이터가 저장되니까 폰을 바꿔도 로그인하면 그대로 나온다. 모바일 우선으로 만들었는데, 이게 생각보다 삽질이 많았다. 설계서에는 "모바일 우선"이라고 한 줄 적었을 뿐인데, 실제로 그걸 실현하는 데 전체 개발 시간의 절반 이상이 들었다.

이 이야기는 2편에서 쓴다.

가족한테도 쓰게 하고 싶다

친구한테 먼저 만들어준 건데, 사실 우리 가족 중에도 공무원이 많다.

다들 비슷하게 근태기록을 관리하고 있다. 누군가는 엑셀, 누군가는 종이. 공통점은 귀찮아한다는 거다. 매달 반복되는 일인데 한 번도 편해진 적이 없다.

아직 가족한테는 안 알렸다. 친구가 좀 더 써보고, 불편한 거 잡고 나서 알릴 생각이다. 첫인상이 별로면 "그냥 다이어리 쓸게" 하고 돌아간다. 그 말이 나오지 않을 때까지 다듬어야 한다.

앞으로

지금은 기본에 충실하다. 출퇴근 기록, 초과근무 자동 계산, 급량비 수지 추적. 이것만 제대로 되면 다이어리를 대체할 수 있다.

더 붙이고 싶은 건 있다. 월간 리포트 자동 생성, 공휴일 데이터 자동 업데이트, "오늘 퇴근 기록 안 했어요" 알림.

근데 지금 급한 건 그런 게 아니다.

지금 급한 건 친구가 실제로 매일 쓰는 것. 기능이 100개여도 안 쓰면 의미 없다. 매일 출근할 때 버튼 한 번 누르는 습관이 잡히면, 그때부터 나머지를 붙여도 늦지 않다.

사이드프로젝트를 여러 개 만들었는데, 처음으로 "내 주변 사람이 매일 쓸 앱"을 만들었다. 기술적으로 대단한 건 아무것도 없다. 근데 다이어리를 접고 폰으로 바꾸는 그 순간이 오면, 아마 지금까지 만든 것 중에 가장 뿌듯할 것 같다.

"좋은 도구는 쓰는 사람이 도구를 의식하지 않게 만든다."


다음 글: [친구가 다이어리에 출퇴근을 적고 있었다 2/2]

Top comments (0)