전부 갈아엎은 디미페이 V2: 디미페이

안녕하세요, 디미페이 개발 팀입니다. 🙇‍♂️

약 10개월간의 v2 프로젝트가 마무리되고 드디어 2학기를 맞아 v2를 출시하게 되었어요!🎊(24년 8월 20일)

디미페이 v2 프로젝트는 지난 v1 운영 경험을 바탕으로 클라이언트 앱과 키오스크의 디자인과 UX, 비즈니스 로직, 그리고 백엔드 구현까지 모두 리펙터링하는 아주 큰 프로젝트였어요. 이번 글에선 디미페이 v2를 시작하게 된 배경과 개선된 기능들을 한번 살펴볼게요.

디미페이

먼저 디미페이를 소개해드릴게요. 디미페이는 한국디지털미디어고등학교의 교내 무인 매점 결제 시스템이에요. 학생들은 앱에서 QR 코드를 사용하거나, 네이버 페이스 사인을 이용한 얼굴인식을 이용하여 휴대폰이 없더라도 결제할 수 있어요.

개발팀은 재학생과 졸업생으로 이루어져 있고, 디자인, 앱, 키오스크, 어드민 페이지, 그리고 백엔드까지 모두 자체적으로 개발하고 있어요. 디미페이 v1과 자세한 디미페이의 시작은 Director's cut에서 확인하실 수 있어요. 😺

왜 모두 처음부터 다시 만들어요?

저희가 v2를 계획하게 된 계기는 디자인이에요. v1 최종 디자인은 위 사진처럼 공지사항과 이벤트가 홈 화면에서 큰 비중을 차지하고 있어요. 하지만 실제로 서비스를 운영해보니 공지 사항과 이벤트를 등록하는 경우가 거의 없어서 아래와 같이 화면의 약 80%가 낭비되는 문제가 있었어요.

디자인 컨셉을 여러 번 바꿔가며 고심해서 만들었지만, 이런 점 때문에 학생들과 저희 팀은 항상 아쉬움이 남았어요. 그래서 v1 출시 이후, 우리 디자이너가 v2라는 이름으로 처음부터 다시 디자인을 하게 되었고, 이때부터 v2 프로젝트가 시작되었어요.

프로젝트의 시작은 디자인이었지만, 이왕 바꾸는 김에 잔 버그들을 고치고 소스 코드를 리펙터링도 하게 되었는데, 어쩌다 보니 앱, 키오스크, 백엔드를 모두 다시 설계하고 만들게 되었어요😅 그래서 각 팀별로 공유하고 싶은 이야기가 많아요. 각 팀의 포스팅도 기대해주세요:)

디미페이 v2

드디어 새로워진 디미페이 v2를 소개합니다! 😍😆

정말 예쁘지 않나요? 우리 디자이너가 정말 공들여 만들었어요.🏀 v1과 비교했을 때 모든 부분이 달라졌어요. 먼저 위 그림처럼 홈 화면에서 바로 QR 코드를 띄우고, 주 결제 수단이라는 개념을 도입해 앱을 켜자마자 주 결제 수단으로 결제할 수 있도록 만들었어요.

결제수단은 바텀 시트에서 바꿀 수 있어요.

그리고 결제 수단은 더 이상 대표 색이 아닌 카드사 이미지로 구분돼요.

키오스크 UX

키오스크도 v2 디자인 시스템에 맞췄고, UX를 중심적으로 개선했어요.

키오스크 UX의 가장 큰변화는 페이스 사인 플로우예요. 원래는 상품을 모두 스캔한 후 결제 버튼을 눌러야 페이스사인 인식을 시작할 수 있었어요. (v1 페이스 사인 시연)

하지만 이젠 대기 화면에서 상품 스캔 화면으로 넘어가면 바로 백그라운드에서 페이스사인 인식을 시작해요. 학생이 상품을 스캔할 동안 인식이 끝나기 때문에 더 부드럽고 빠른 결제 경험을 받을 수 있어요.

더 이상 얼굴 인식이 될 때까지 요리조리 움직일 필요도 없어요. 오히려 상품을 인식하는 동작에서 여러 각도의 얼굴을 테스트할 수 있고, 더 좋은 점은 내 얼굴을 보지 않아도 돼요. 😉 (결제 시연 영상은 아래에 있어요)

결제 비밀번호를 입력할 때 피드백을 주면서 비밀번호가 노출되는 것을 위해 무작위 숫자 배치와 랜덤 피드백을 추가했어요.

마지막으로, 실험적이지만 휴먼 에러를 줄이기 위해 상품 추가 버튼을 없애버렸어요. 이 문제는 실제로 가끔 발생하던 문제였어요. 저희 개발팀은 가끔 매점에서 모니터링을 하는데, 특히 한 명이 여러 학생의 물건을 사줄 때 같은 물건이 있으면 이걸 찍었는지 헷갈리는 경우가 가끔 있어요. 저희는 "빼는 실수는 거의 없지만, 추가할 때 실수할 가능성은 있다"라는 가설로 과감하게 추가 버튼을 뺐어요. 여러분은 어떻게 생각하시나요?

페이스 사인 결제 시연

https://youtu.be/zG9PC3to8N8?si=7MHQZQHm2p0kR4GI

QR 결제 시연

https://youtu.be/AJkksWl1Kyk?si=8IqtC3vNaC-RnoSx

생각했던 것 보다 어려웠어요 🤧

처음부터 새로 만들다 보니 "리펙터링"보단 "리빌딩"이라는 말이 더 어울릴 것 같아요. 하지만 훌륭한 계획에 반해 개발 환경을 그리 좋지 않았어요. 모두 학업을 병행 해야 하고, 올해부턴 졸업생들 때문에 디스코드로만 소통하게 되었거든요. 이런 건 익숙해지면 괜찮아지지만, 더 문제였던 건 개발 인원이었어요. 앱 팀엔 2명, 키오스크와 백엔드 팀은 각각 한 명이라 팀이라고 부르기도 애매하죠. 신입 2학년 플러터 개발자들은 아직 팀에 완벽하게 적응하기도 전이라 더 고생했어요.

이런 와중에도 쉬운 길만 찾진 않았어요. 사소한 것도 여러 대안을 비교해보면서 신중하게 선택하여 제대로 만들기 위해 많은 시간을 들였어요. 키오스크에서 스캔 된 상품이 모두 삭제했다면 몇 초 있다 대기 화면으로 이동할지에 대해 이렇게 오랫동안 토론할 수 있는지 몰랐어요.

덕분에 마지막 릴리즈 순간까지 여유로웠던 적이 많이 없었어요. 마지막 날은 애플 때문에 애를 먹었는데 앱 심사를 받을 때 로그인 때문에 거절만 몇 번을 당했고, 개학 당일(일요일) 밤에 겨우 승인을 받았거든요. 지금은 급한걸 모두 끝냈으니 아주 후련합니다 :')

아직 큰 게 남아 있습니다.. 🦖

아직 v2 프로젝트는 끝나지 않았어요. 저희는 곧 인터넷이 없는 환경에서도 QR 코드로 결제를 할 수 있는 기능을 추가할 거예요. 이 기능은 모바일 데이터가 넉넉하지 않아 매점 이용이 불가능한 학생들을 위해 오랫동안 준비한 기능이에요. 안전하게 오프라인 결제 토큰을 만드는 방법은 설계가 끝났기 때문에 아마 1-2달 안에 소개해드릴 수 있을 것 같아요. 꼭 기대해 주세요:)

처음에 말했듯이 각 팀 별의 자세한 이야기도 곧 다른 글로 확인할 수 있어요. 앞으로의 디미페이 이야기가 궁금하시다면 저희 포스타입 채널을 구독하거나 링크드인에 팔로우 해주세요 😋

읽어주셔서 감사합니다