🐾 2023-2 융합캡스톤디자인

2023년 2학기 융합캡스톤디자인 5조 딩동팀입니다.

✍️ 과제 소개

기존의 갤러리 플랫폼들에서 공유앨범 기능은 수많은 기능 중에 단지 일부의 기능으로서 자리 잡고 있습니다. 이러한 상황으로 공유앨범 기능이 제공하는 장점들이 충분히 활용되지 못하고 있습니다.
본 프로젝트에서는 공유앨범 기능에 초점을 맞춘 갤러리 앱을 제작하고, 이에 더하여 사진의 메타데이터를 기반으로 지도 위에 사진을 띄움으로써, 여러 장소에 대한 정보를 제공하여 공유 앨범의 장점을 개인적, 사회적 측면에서 극대화시키고자 하였습니다.

🧑‍💻 프로젝트 소개

프로젝트명

지도기반 공유앨범 커뮤니티 PicMap

프로젝트 목표

딩동팀의 PicMap 서비스는 단순한 앨범 서비스나 소통 기능 뿐만 아니라 원하는 사람들끼리 그룹을 형성하여 앨범을 만들어나가는 공유앨범 기능과, 그룹의 사진을 지도 위에서 탐색할 수 있는 기능을 제공합니다.

결과물 소개

1. 마이페이지 사진탭

   

   마이페이지 사진탭은 자신이 속한 각 써클마다의 최신 사진 4장을 보여주는 탭이다. 이 부분에서 사진의 렌더링이 늦어지는 문제점을 AWS CloudFront를 이용하여 해결했다. 가장 위로 스크롤할 시 사진 데이터를 새로고침(refetch)할 수 있다.
   써클 사진을 클릭할 시 두 번째 사진과 같이 해당 써클로 이동할 수 있다.

2. 마이페이지 지도탭

   

   마이페이지의 지도탭은 자신이 속한 써클에 업로드된 사진들 중 위치 정보가 있는 사진들을 지도 위에서 보여준다.
   Supercluster와 map marker 등의 라이브러리를 이용하여 지도위에 마커가 클러스터링 되도록 구현하였다. 여러 장의 사진이 모여있는 곳(클러스터)을 클릭하면 해당 클러스터에 속한 사진들의 리스트 스크린으로 이동한다. (두 번째 사진)
   해당 스크린에서 특정 사진을 누르면 해당 사진의 상세 스크린으로 이동한다.(세 번째 사진)
   사진의 상세 스크린에서는 사진에 대해 좋아요를 누르고 댓글을 통해 여러 유저와 소통할 수 있다.
   개별 사진을 클릭하면 바로 해당 사진의 상세 스크린으로 이동한다.

3. 마이페이지 써클탭, 써클생성 스크린

   

   마이페이지의 써클탭은 자신이 속한 써클의 목록을 보여준다. 써클을 클릭하면 해당 써클의 공유앨범으로 이동할 수 있다.
   왼쪽 하단의 ‘+’ 버튼을 클릭하면 새로운 써클을 생성할 수 있다.
   써클은 공개 써클과 비공개 써클로 나누었다. 공개 써클의 경우 친구의 초대와 타임라인 페이지를 통해 가입할 수 있고, 비공개 써클의 경우 친구의 초대로만 가입할 수 있도록 구현하였다.

4. 써클 공유앨범 스크린

   

   공유앨범 스크린의 상단에는 앨범에 속한 유저들의 리스트를 보여준다. 특정 유저를 클릭하면 해당 유저의 프로필 페이지로 이동한다.
   지도 부분에는 해당 공유앨범에 업로드 된 사진들 중 위치 정보가 있는 사진들을 띄워준다. 지도의 아래에는 업로드 된 사진들을 3열로 보여준다.
   사진 리스트의 오른쪽 상단에 ‘선택’ 버튼을 누르면, 사진을 선택하여 삭제하거나 자신의 기기에 저장할 수 있다.
   헤더에는 가장 왼쪽에 써클명이, 가장 오른쪽에는 설정 버튼이 있다.
   설정버튼을 통해 사진 정렬, 유저 추가 등을 할 수 있다. 여기서 사진 정렬은 최신순, 과거순, 좋아요순 중에서 선택할 수 있으며, 유저 추가를 통해 친구를 해당 써클에 초대할 수 있다.
   써클 내의 지도의 클러스터를 클릭하면 확대된 지도 스크린으로 이동한다.
   각 사진을 클릭하면 [그림 2]의 세 번째 사진과 같은 사진 상세 스크린으로 이동한다.

5. 써클 공유앨범 스크린 - 사진 업로드

   

   왼쪽 하단의 버튼을 통해 사진을 업로드할 수 있다. 여러 장의 사진을 선택하여 업로드 할 수 있으며, 직접 사진을 촬영하여 업로드할 수도 있다.

6. 타임라인(공개써클 목록) 스크린

   

   공개 써클의 목록을 볼 수 있으며, 미가입 써클에 가입할 수 있다. 가입 후 바로 접속이 가능하다. 위의 두 번째 사진과 같은 퍼블릭 써클은 공적인 커뮤니티의 역할을 할 수 있다.

7. 검색 스크린

   

   유저의 경우 유저네임으로 검색할 수 있으며, 써클의 경우 써클명으로 검색할 수 있다.
   지도의 경우 특정 지역을 검색하면 해당 지역에 대한 사진이 있는 퍼블릭 써클의 사진을 조회할 수 있다.

8. 프로필 편집 및 친구목록

   

   마이페이지의 상단의 프로필에서 프로필 편집 버튼을 통해 자신의 프로필을 수정할 수 있다. 프로필 사진을 직접 자신의 갤러리로부터 혹은 촬영하여 수정할 수 있다.
   또한 프로필의 친구목록 버튼을 통해 친구목록을 조회할 수 있다. 상단 헤더의 오른쪽 설정 버튼을 클릭하면 받은 친구요청을 확인할 수 있고, 친구를 삭제할 수도 있다.

9. 다른 유저 페이지 스크린

   

   다른 유저를 클릭하면 해당 유저의 페이지에 접속할 수 있다. 이미 친구인 경우 ‘친구’라는 텍스트가 표시된다.
   친구가 아닌 비공개 계정 사용자의 경우 사진탭과 지도탭 또한 비공개 된다.

🎞️ 시연영상