개요

저는 대학 1~4학년까지 TSUTAYA에서 일했던 학생 엔지니어입니다.
이번에 대학을 졸업하고 취직하기 위해 아르바이트를 그만두기 때문에 4년간 일한 TSUTAYA에 뭔가 마지막으로 남길 수 있는 것은 없을까 생각하고 업무에서 사용할 수 있는 앱을 만들었습니다.

개발한 앱 개요

개발한 앱은 식품의 유통 기한을 관리할 수 있는 웹 애플리케이션입니다.
사용한 기술은 Next.js와 Firebase에서 바삭바삭하게 만들었습니다.

개발된 배경

제가 일하고 있던 TSUTAYA에서는 식품을 취급하고 있습니다만, 유통 기한의 관리 방법에 조금 문제를 안고 있었습니다.
그것은 유통 기한을 명부에 쓰고 관리하고 있었던 것입니다.
이로 인해 다음과 같은 단점이있었습니다.

① 유통기한순으로 정렬할 수 없음
② 종이에 의한 관리이므로 부피가 큰
③ 유통기한이 지나지 않았는지, 일일이 명부를 보는 것이 번거로움

또, 이 명부를 관리하는 사람은 정해지지 않고, 눈치채는 사람이 하는 형식이었기 때문에, 거의 사용되고 있지 않았습니다.

개발한 앱의 작동 방식

이번에 개발한 웹 앱은 다음과 같은 구성으로 되어 있습니다.


상품이 입고되면 Next.js에서 작성된 웹 페이지에 상품 정보를 입력하여 등록합니다.
정보는 Firestore에 저장됩니다.
유통기한의 확인은 Google Pub/Sub를 이용하여 오후 0시에 Functions에 Firestore에 등록되어 있는 상품의 유통기한을 확인하도록 신호를 냅니다.

궁리한 점

이 앱을 고안한 점 중 첫 번째는 LINE Bot에서 유통기한 통지를 하는 점입니다.
이것에 의해, 상품을 잊어 있어도 마음대로 통지가 오므로, 굉장히 좋습니다.

두 번째는 놀랍게도 디자인입니다.
보통 업무에서 사용하는 웹 페이지나 앱은 단순한 것이 많고 재미있지 않습니다.
다만 이번에 제가 개발한 앱은 업무에 필수적인 것이 아니라 효율화를 도모하기 위한 것입니다. 따라서, 이용하지 않아도 업무에 지장을 초래하는 일이 없기 때문에, 스탭이 이용하고 싶은 것으로 할 필요가 있었습니다.
그 때문에, 재미있는 아이디어를 도입한 디자인으로 했습니다.

상품 정보 입력 양식↓


상품 일람 테이블↓


위가 실제로 만든 웹 페이지입니다.
디자인은 뉴모피즘이라는 것을 참고로 했습니다.
또, 아이콘을 작성하는 것으로, 애착이 있는 것으로 했습니다.

세 번째 아이디어는 웹 페이지의 표시 속도입니다.
이것은 당연한 일입니다만, 표시에 시간이 걸리는 웹 페이지는 보고 싶지 않지요?
얼마나 편리하고 애착이 있는 것이라도 인터넷의 세계에서, 표시가 느린 것은 좋지 않다고 생각합니다.



위의 이미지는 Lighthouse라는 도구로 렌더링 속도 등을 측정한 결과입니다.
이 화상으로부터, 참고의 수치는 됩니다만, Performance의 점에서 100점을 낼 수가 있습니다.
이것에 의해, 웹 페이지의 표시 속도도 어느 정도 빨리 할 수 ​​있는 것을 알 수 있다고 생각합니다.

요약

이 앱을 개발함으로써 명부로 관리하는 3개의 단점을 모두 해소할 수 있었습니다.
또한 이 앱은 현재 6개의 매장에서 사용되고 있으며 업무 개선에 도움이 된다고 생각합니다.

나는 이미 TSUTAYA를 퇴직하고 있기 때문에 직장의 사람과 직접적으로 관련이 없어졌지만,이 앱을 통해 연결되면 기쁩니다!