Study Anything 🧐

[다람쥐 창고] 기능 세부 설명 본문

프로젝트/[App] 취미 물품 공유 플랫폼

[다람쥐 창고] 기능 세부 설명

2022. 3. 24. 22:24

저번 포스트에 작성했다시피 취미 물품 공유 서비스를 구현하기 위해서는 다양한 기능이 필요하다.

이번 포스트에서는 기획 단계에서 간단하게 얘기했던 서비스의 실제 이용 과정을 담아보았다.

 

 

 

먼저, 앱에 접속하면 스플래시 화면을 거쳐 회원가입/로그인 화면을 띄운다.

회원이 아니라면 회원가입을 하고 회원이라면 로그인을 한 후 본격적으로 서비스를 시작할 수 있다.

 

가장 처음 보이는 화면은 메인페이지로 최신 업데이트 물품과 추천 물품, 추천 카테고리를 볼 수 있다.

메인페이지에서는 사진을 위주로 보여주고 더보기 버튼을 눌러 해당 물품들을 목록으로 볼 수 있다.

또한 검색을 하거나 지도 창을 열어 주변 물품을 볼 수 있으며 글쓰기 창, 채팅 목록, 마이페이지, 더보기 창으로 이동할 수 있다.

 

글쓰기 창에서는 카메라나 갤러리를 통해 이미지를 업로드하고 이미지를 인식해 자동으로 제시한 물품명, 카테고리를 확인한 후 보증금/대여료, 물품을 공유할 위치를 설정하고 물품이나 공유 방식에 관해 설명을 작성한다. 

물품을 공유할 위치는 꼭 사용자의 위치가 아니어도 가능하며 지도에서 원하는 곳을 터치해 위치를 설정한다.

 

사용자는 지도나 물품 목록을 통해 대여하고 싶은 물품을 선택하면 상세 페이지를 볼 수 있고 물품을 하거나 대여자와 채팅할 수 있다. 채팅창에서는 사용자 간에 실시간으로 채팅이 가능하며 메시지를 입력하면 푸시 알림으로 메시지의 도착을 알린다. 갤러리나 카메라를 통해 이미지를 채팅창에 업로드할 수도 있다.

처음 채팅을 시도할 때는 물품의 상세페이지를 통해서만 가능하지만 기존의 채팅은 메인페이지에서 채팅 목록을 통해 입장할 수 있다.

 

채팅으로 세부적인 공유 약속을 정한 후에는 실제 대여와 반납이 이루어진다.

기획한 프로젝트의 내용이 거래가 아닌 공유이기 때문에 대여한 후에 같은 사용자끼리 반납도 가능해야 한다.

때문에 대여했는지, 반납했는지를 정확하게 파악해야 했고 이것은 QR코드를 이용해 구현했다.

채팅창의 추가메뉴에서 대여/반납 버튼을 누르면 대여할 때는 대여자에게 QR코드가 뜨고 대여받는 사람에게는 카메라를 통한 QR인식부가 뜬다. 코드를 인식하면 대여되었다는 메시지가 뜨며 반납할 때는 반대로 대여받은 사람에게 코드가 뜨고 원래의 주인이 코드를 인식한다. 반납까지 완료된 후에는 사용자 간에 평점을 매길 수 있도록 하였다.

대여와 반납시에 대여료나 보증금을 지불하는 것을 초기에 구상하긴 했으나 실제 프로젝트를 구현하면서는 아쉽게도 해당 기능을 제외하게 되었다.

 

마이페이지에서는 프로필 사진, 닉네임, 평점과 같은 사용자 정보와 내가 올린 게시글, (공유)거래 내역, 찜 목록을 볼 수 있다. 메인페이지의 물품 목록과 다르게 마이페이지의 목록들에서는 해당 물품이 아직 대여 전인지, 대여 중인지, 대여가 완료되었는지를 볼 수 있다. 이 외에도 회원정보를 설정하거나 로그아웃, 회원 탈퇴도 마이페이지에서 가능하다.

추가적으로 프로젝트를 발전시키면서 사용자가 본인의 계정을 광고하는 '파워람쥐'(파워유저) 기능이 추가되었는데, 마이페이지에서 해당 기능을 신청하고 심사를 통해 파워람쥐로 등록되면 메인페이지 상단의 배너를 통해 해당 사용자의 프로필이 띄워진다.

 

메인페이지에서는 사이드 바처럼 더보기 창으로도 이동할 수 있는데, 이 창에서는 필터링이 수행된다.

카테고리별, 지역별로 조건을 지정한 후 적용 버튼을 누르면 해당 조건으로 물품이 필터링되고 목록으로 볼 수 있다.

메인페이지의 검색은 단어를 직접 입력해 검색하지만 더보기 창의 필터링 기능은 조건을 지정해서 해당 조건에 해당하는 물품들을 띄운다는 차이점이 있다.

 

 

 

이번 포스트에서는 프로젝트로 구상한 서비스의 세부적인 이용 과정을 다뤄보았다.

원래는 UI 구현 내용을 담으려고 했으나 어떤 방식으로 서비스를 이용하게 되는지를 알아야 UI에 대해 이해하기가 더 쉬울 것 같아서 순서를 바꿨다.

다음 포스트에서는 기획 단계에서 정한 UI 자료를 통해 안드로이드 스튜디오에서 어떻게 UI를 구현했는지를 다뤄볼 것이다.

 

 

728x90
Comments