공기계를 활용하는 반려동물 CCTV 앱인 도기보기에는 유저 참여형 컨텐츠로 하루에 1번 출석체크를 하면 사료알이 랜덤(무료 유저는 1알 고정)으로 기부되는 페이지가 있어요. 이렇게 쌓인 사료알은 매달 1일이 되면 다시 0알로 초기화 되는데 매달 마지막 날에 잘 기부했다가 다음날 다시 사료알 기부 페이지로 돌아오면 갑자기 내가 모은 사료알이 '0알'로 돌아가 있으니 유저 입장에선 얼마나 황당한 일일까요?
그래서 유저에게 한 달 간 모인 사료알의 근황(?)을 알려주고, 다시 새롭게 한 달간의 기부를 시작한다는 걸 전달하기 위해 '월간 리포트' 페이지를 만들게 되었어요. 많은 서비스들에서 이미 분석 리포트, 요약 리포트 등으로 유저들에게 제공하던 피쳐라 레퍼런스도 쉽게 구할 수 있어 이틀만에 디자인 되었죠.
프로토타이핑와 명세까지 끝내고 FE 개발자 분에게 잘 넘겼는데, 일이 쉽게 풀릴 땐 뭔가 잘못된 게 있다는 걸 잊고 있고 있었지 뭐예요..
문제 발생
시안에는 기부 기간을 표시하기 위해 서브타이틀과 타이틀에 날짜를 넣었는데, 이 부분이 화면마다 다르게 적용되어서 어떤 화면의 서브타이틀은 월월.일일. 형식이고 다른 화면에선 월 만 표시되는 일이 생겼어요. 게다가 1~9월은 한 자리수여서 앞에 0을 붙일지 말지도 개발자 분은 모르는 상황이었던 것이죠.
디자인 할 땐 전혀 생각하지 못했던 부분이라 살짝 당황했어요. 당연하게 여겼던 부분이었는데 개발 명세를 작성할 때 디테일을 챙기지 못했던 거죠. 결국 슬랙을 주고 받으며 잘 해결했지만, '난 아직 멀었구나!' 라는 마음이 마구 들었습니다.
날짜를 쓸 땐 날짜의 형식을 명확하게 지정해서 개발자 분과 소통하자!
yyyy.mm.dd. 의 형식을 지정했나요?
월과 일이 한 자리일 때 어떻게 화면에 렌더링 될 지 생각했나요? e.g. 5월이라면 05월로 표시되는지, 5월로 표시되는지
그리고 또
날짜에도 형식이 있으니 숫자에도 형식이 있겠다는 생각이 들어 '자바스크립트 숫자 형식', '자바스크립트 날짜 형식'으로 검색했더니 좋은 자료들이 많더라고요..? 바로 공부했어요 ㅋㅋ...
예전에 잠깐 자바스크립트를 찍먹해본 적이 있었는데 그래서 이해하는 데에 큰 어려움은 없었어요. 적용하는 게 제일 중요하다는 걸 다시 한 번 깨닫게 되는 순간이었어요 😅
