P.Ple

위치 기반 음악 공유 사이트

출근을 할 때, 친구들과 함께, 매번 어디론가 가고 머무는 ‘나’의 일상, 다들 음악과 함께 하고 계시지 않으신가요? 내가 추억하는 공간과 그 때의 플레이리스트를 모두와 함께 공유해보아요 🗣️🎧

💜 P.Ple 소개 - People Place Playlist

특별한 장소로 여행을 가거나, 일상 속에서 들었던 노래들을 플레이리스트로 만들어 다양한 사람들과 공유할 수 있는 커뮤니티 서비스입니다.

🔗 P.Ple (피플) 보러가기

📆 프로젝트 기간

• 2023.07.29 ~ 2023.09.08

😎 Members

Frontend

김은비	김정우	정소희

Backend

유현주	최도영	이성목

Designer

오혜성

💜 주요 기능 소개

📌 메인페이지

• 인기 포스팅, 추천 플레이리스트 등 P.Ple의 주 컨텐츠들을 확인할 수 있습니다.

📌 게시물 작성

• 장소 검색, 노래 검색을 이용해 해당 장소에 어울리는 플레이 리스트를 담아 게시물을 작성할 수 있습니다.

📌 장소에 따른 게시물 리스트

• GPS 기능을 통해 현재 내 위치 주변이나 특정 장소를 검색하여 그 주변의 작성된 게시물을 확인할 수 있습니다.

• GPS 기능을 통해 현재 내 위치 주변이나 특정 장소를 검색하여 그 주변의 작성된 게시물을 확인할 수 있습니다.

📌 프로필 페이지

• 내 프로필과 회원 정보를 수정할 수 있고, 내 포스팅, 팔로워, 댓글 등을 한 눈에 보고 관리할 수 있습니다.
• 다른 사람의 프로필의 경우 포스팅, 팔로워를 확인할 수 있습니다.

📌 게시물 상세

• 게시물의 상세 내용을 확인하고 댓글을 남겨 다른 사람과 의견을 공유할 수 있습니다.

• 마음에 드는 게시물에 좋아요를 하거나 작성자를 팔로우 할 수 있습니다.

📌 미리 듣기 기능

• 음악을 선택하면 Spotify에서 제공하는 30초 미리 듣기를 들을 수 있습니다.

• 한 번 더 음악을 선택하면 Spotify 사이트로 이동합니다.

📌 알림 기능

• 로그인한 유저는 팔로우를 받거나 작성한 글에 다른 유저가 좋아요, 댓글 작성을 하면 알림을 받을 수 있습니다.

📌 검색 기능

• 추천 포스팅, 인기 플레이스, 카테고리 별 인기 있는 노래, 인기 검색어를 확인할 수 있습니다.
• 검색어를 입력하여 관련된 포스팅, 플레이스, 음악, 피플러를 찾아볼 수 있습니다.

⚙️ 서비스 아키텍쳐

🔫 트러블슈팅

Issue1. 한 번에 요청 한 데이터 초기 로딩 시간 문제

문제 : 메인 페이지에서 많은 컨텐츠에 대한 요청을 한꺼번에 해서 초기 로딩 시간이 긴 문제

시도 : 로딩 스켈레톤을 적용해 사용자 경험 개선 → 근본적인 문제인 로딩 시간을 개선하지 못함

해결 : 컨텐츠 각 요소 별로 API 요청 분리
→ Intersection Observer API를 사용해 Lazy Loading 구현
화면에 보이지 않는 요소들에 대한 요청 X
→ 초기 로딩 시간 개선

Issue2. Cloud Front에 수정 사항들이 실시간 반영 안되는 문제

문제 : Cloud Front에 수정 사항들이 실시간 반영 안되는 문제

시도 : 공식 배포 전까지 캐시 정책 CachingDisabled 설정

해결 : 무효화 생성해 적용 or 캐시 정책을 만들어 원하는 TTL 설정

🐰 기술

Frontend

Backend

Infrastructure

Dev tools

Design