Final project

Red-Clip : 물물교환 중개 사이트

- 개인과 개인간 거래(C2C)를 실현하는 웹·앱 플랫폼 구축

개발환경

 운영체제

 window7 32bit

 DB

 Oracle 11g

 사용언어

 java, HTML5/CSS, JWuery, Ajax, Mybatis, JavaScript,

 FrameWork(Spring MVC, tiles)

 개발도구

 Maven Spring Tool Suit, Android Studio

 기타 S/W

 Bootstrap, Daum Map, Naver Smart Editor 

개발인원

개발기간

5명

2015.06.10. ~ 2015.07.07

개발 취지 및 목적

 1. 현재 여러 기술과 IT의 발전으로 우리가 원하는 많은 서비스 및 아이템을 기업이 아닌 개인들이 제공하면서 개개인의 파워가 점점 커지고 '무엇'을 사는 것 보다 '어떻게, 어디서, 언제'사느냐가 더 중요해짐이 C2C 사이트의 필요성을 대변하고 있다.

 2. 사람들이 필요로 하고 원하는 서비스 제공과 아이템 획득 방법 자체를 바꾸는 것이 우리 Red Clip의 최종 비전이다.

 3. 사실 소비란 소유하는 것이 아니라, 그 아이템이 제공하는 '가치'를 얻는 것이다. 이미 폭발적으로 유행한 SNS를 통해서, 인간은 기본적으로 서로 관계를 만들고 싶은 욕구가 있음을 확인할 수 있다. 따라서 Red Clip은 C2C를 이용해 인간의 사회적인 본능을 채우고, 전통적 비즈니스 방법이 아닌 개인의 힘을 증가시켜 그들이 원하는 '가치'를 사람에게서 얻을 수 있도록 한다.

세부기능 요약 및 설명

DATABASE 구조도

 1. ‘회원’테이블에 있는 'nickname'을 참조하는 시스템을 구성한다.

회원가입

 1. email, 비밀번호, 비밀번호 확인, 닉네임을 입력시 Ajax를 통해 유효성 검사를 한다.

2. 주소는 다음 API를 이용한다.

세부기능 요약 및 설명

메일 인증

 1. 회원 가입 버튼을 누르면, 입력한 email로 인증 메일이 자동 전송된다.

2. 보내진 링크를 통해서, 인증번호를 입력하면 회원가입이 완료된다.

게시판 리스트(공지사항, 자유, 후기게시판)

 1. 게시판에 등록된 내용에 대한 검색 기능을 제공한다.

2. 제목을 통해 상세 내용을 확인할 수 있고, 페이징 처리를 한다.

세부기능 요약 및 설명

게시판 글 쓰기(공지사항, 자유, 후기게시판)

1. 네이버 스마트 에디터를 적용한 글쓰기가 가능하다.

1)drag&drop 방식으로 사진을 업로드할 수 있다.

2)사진은 지정된 경로에 자동 저장(random 파일명)되고, 등록된 글의 내용을 확인할 경우 HTML형식으로 불러와 '.gif'파일 재생도 가능하다.

3)업로드된 사진의 삭제와 수정을 위해, 기존 저장되어 있는 사진과 수정 내용의 사진을 비교하는 알고리즘을 사용한다.

2. 글 입력시, 글에 대한 비밀번호를 입력한다. 글의 삭제 및 수정시, 이 비밀번호를 요구한다.비밀번호 입력창은 modal을 통해 띄운다.

3. 글 제목, 비밀번호, 내용에 대해 유효성 처리를 한다.

4. 공지사항, 후기게시판, 자유게시판 또한 동일한 구성을 하고 있다.

세부기능 요약 및 설명

댓글

  1. 글의 상세 내용 확인 페이지에서 확인할 수 있다.

2. 댓글은 Ajax를 통해서 입력이 가능하다.

3. 자신이 입력한 댓글에만 삭제 버튼을 활성화 시킨다.

4. 댓글에 대한 페이징 처러를 한다.

5. 공지사항, 후기게시판, 자유게시판 또한 동일한 구성을 하고 있다.

맵

 1. 등록한 물품의 위치와 물품 정보를 지도에 나타낸다.

2. 검색 기능을 제공한다.

3. 말풍선을 클릭하면, 상세 정보 페이지로 이동한다.

세부기능 요약 및 설명

물품 등록 및 신청

 1. 등록하고자 하는 물품의 카테고리를 선택한다.

1)아이템명, 내용, 물건상태, 연락처를 입력한다.

2)이미지를 4장까지 첨부가 가능하다.

3)다음 API를 통해 주소 입력이 가능하며, 입력한 주소는 맵에 표시되고 검색도 가능하다.

쪽지

 1. 쪽지함을 통해, 쪽지 전송창을 띄운다. 닉네임, 제목, 내용은 유효성 검사를 실시한다.

 2. 우측 하단의 창은 로그인시, 확인하지 않은 쪽지에 대한 정보를 제공한다.

세부기능 요약 및 설명

안드로이드 메인페이지

 1. 상단의 검색바를 이용해 등록된 아이템을 검색 가능하다.

2. 좌측 사진은 Listview와 Tabhost를 통해 등록된 아이템을 최신 순서로 보여준다.

3. 우측 사진은 등록된 아이템의 카테고리를 보여주고, 선택시 선택 카테고리별 아이템을 보여준다.

4. 하단에는 전체보기, 등록하기, 내 정보, 지도를 보여주는 버튼이 위치하고 있다.

안드로이드 회원가입

 1. 회원 가입시, 휴대전화 번호를 입력하고 인증요청 버튼을 누르면 SMS로 인증번호가 전송된다.

2. 이메일, 닉네임, 비밀번호는 유효성 검사를 실기하고 주소등록은 다음 API를 이용하여 구현했다.

세부기능 요약 및 설명

안드로이드 물품 등록

 1. 등록하기 버튼을 누르면 좌측 화면으로 이동한다. 카메라 버튼을 통해 사진을 찍을 수 있고, 갤러리 버튼을 통해 기존에 저장된 사진을 불러올 수 있다.

2. 다음 버튼을 누르면 중앙 사진의 액티비티로 이동하며 등록할 상품의 상세이미지를 작성할 수 있다.

3. 등록을 완료하면 우측의 액티비티로 이동하여 등록 내용을 확인할 수 있다.

안드로이드 내 정보 & 쪽지

1. 메인페이지에서 내 정보를 누르면 좌측 액티비티로 이동한다.

2. 쪽지 버튼을 누르면 우측 액티비티로 이동하고 닉네임을 통해 상대방에게 쪽지를 전송한다.닉네임, 제목, 내용은 유효성 검사를 실시한다.

세부기능 요약 및 설명

안드로이드 GCM & 받은 쪽지함

 1. GCM 기능을 구현하여 상대방이 쪽지를 보내면 자신에게 Notification을 준다.

2. 쪽지 발신자를 보낸 쪽지함으로, 수신자를 Notification 알림 클릭시 받은 쪽지함으로 이동한다.