📷 DAZZLE

[PLAYDATA] 한화시스템 BEYOND SW캠프 / DAZZLE

Team - PotatoSpot

Site - https://dazzle-ashen.vercel.app/

✨ Medium

• 🇺🇸 Medium English.ver
  
• 🇰🇷 Medium Korean.ver

📋 Material

• Notion Link
• Presentation Material

⚙Tech Stack

Backend 

Frontend 

Collaboration Tools 

Distribution Tool 

🗂️ Project Introduction

프로젝트 소개

DAZZLE은 사용자들이 촬영한 사진을 특정 장소와 함께 공유할 수 있는 웹 서비스입니다.
사용자는 Kakao Map API를 활용하여 사진을 찍은 장소를 쉽게 지정할 수 있으며, 이를 기반으로 사진과 장소에 대한 이야기를 담아 게시할 수 있습니다.
이 서비스는 단순히 사진을 공유하는 것을 넘어서, 장소에 대한 정보와 개인적인 경험을 함께 나누는 공간을 제공합니다. 다른 사용자들은 이러한 게시물을 조회하고, 좋아요를 누르거나 댓글을 남기며 상호작용할 수 있습니다. 이로써, 사용자는 자신만의 특별한 순간을 더 많은 사람들과 공유하고, 다른 사람들의 경험을 통해 새로운 장소를 발견할 수 있습니다.

프로젝트 필요성

• 현대 사회에서는 사진을 통한 소통이 매우 활발해지고 있으며, SNS를 통해 사진을 공유하는 것은 일상이 되었습니다. 하지만, 대부분의 사진 공유 플랫폼은 장소 정보를 별도로 제공하지 않거나, 사진과 장소 정보를 연동하는 기능이 제한적입니다. 특히, 사진과 함께 그 장소에 대한 정보나 개인적인 경험을 상세히 공유하고자 하는 사용자의 니즈를 충족시키기에는 기존 서비스들이 기능들에 대해 많이 간소화된 면이 있습니다.

• 이 프로젝트는 이러한 요구를 반영하여, 사진과 장소를 결합한 형태의 콘텐츠 공유 플랫폼을 제공하고자 합니다. 사용자는 자신이 경험한 특정 장소의 특별한 순간을 기록하고, 이를 다른 사람들과 나누며 공감대를 형성할 수 있습니다. 또한, 다른 사용자의 경험을 통해 새로운 장소를 발견하거나, 자신이 이미 다녀온 장소에 대한 새로운 시각을 얻을 수 있는 기회를 제공하여 사용자 간의 유대감을 강화하고자 합니다.

프로젝트 목표

1. 사진과 장소의 결합:
   • 사용자가 촬영한 사진과 그 사진이 찍힌 장소를 효과적으로 공유할 수 있는 플랫폼을 구축합니다.
2. 소셜 기능 제공:
   • 사용자가 다른 사람의 게시물을 조회하고, 좋아요와 댓글을 통해 상호작용할 수 있도록 합니다.
3. 편리한 장소 지정:
   • Kakao Map API를 사용해 직관적이고 쉽게 장소를 지정할 수 있는 기능을 제공합니다.

기대 효과

DAZZLE 서비스를 통해 다음과 같은 효과를 기대할 수 있습니다.

1. 커뮤니티 활성화:
   • 사용자들이 특정 장소와 관련된 사진을 공유하고, 정보를 교류함으로써 커뮤니티가 활성화될 것으로 기대됩니다.
2. 경험 공유 증대:
   • 사진과 장소에 대한 경험을 결합하여 더욱 풍부한 콘텐츠를 제공할 수 있습니다.
3. 사용자 참여 증가:
   • 좋아요와 댓글 기능을 통해 사용자 간의 상호작용이 활발해지고, 참여도가 높아질 것입니다.
     
     

📑 Requirements Specification

요구사항 명세서 바로가기

🛠️ Project Design

1. System Architecture

2. WireFrame

Figma 바로가기

• 메인 페이지
  

• 지도 페이지
  

• 지도에서 위치 클릭 시
  

• 마이 페이지
  

• 랭킹 리스트 컴포넌트
  

3. StoryBoard

StoryBoard 바로가기

• 메인 페이지

• 지도 페이지

• 마이 페이지

💾 Project Implementation

1. Functional Implementation

시연 영상 바로가기

Header 테스트

Header.mp4

게시물 리스트 컴포넌트 테스트

default.mp4

랭킹 리스트 컴포넌트 테스트

default.mp4

지도 페이지 테스트

MapPage.mp4

게시물 작성 테스트

default.mp4

마이 페이지 테스트

default.mp4

2. Test Case

Test Case 바로가기

📆 WBS

WBS 바로가기

👨‍👩‍👧‍👦 Member

김도하	김종원	이은서	임지훈	정수진
Developer	Developer	Developer	Leader, Developer	Developer

📚 Memoir

팀 원	회고록
김도하	팀원들이 모두 열심히 하고 소통이 잘 되어서 원래 계획했던 부분들 보다 추가적인 기능들도 구현할 수 있었습니다. 뿐만 아니라 모두가 프로젝트에 관심을 갖고 잘 참여하여 정말 즐겁게 프로젝트를 진행할 수 있었습니다.  개인적으로는 팀장님을 포함한 팀원분들께 소통능력, 프로젝트 계획, 진행 등등에 대해서 많은 것을 배울수도 있어 큰 경험이 되었습니다.
김종원	이번 프론트엔드 프로젝트는 기간이 짧아, 다양한 플랫폼을 활용한 개발을 시도하고자 했습니다.  팀원들 모두 이러한 제안을 긍정적으로 받아들여, 파이어베이스, 카카오맵 API를 활용한 Vue 프론트엔드 프로젝트를 진행하게 되었습니다. 처음 사용하는 기술들이 많아 어려움이 예상되었지만, 프로젝트 초기부터 팀원들이 함께 공부하고 빠르게 구현을 시작하여 프로젝트를 성공적으로 완성할 수 있었습니다.  짧은 기간 동안 집중해서 프로젝트를 마무리한 팀원들 모두 정말 고생 많았고, 감사드립니다!
이은서	뷰를 처음 다뤄봐서 처음에는 어렵고 어색했지만, 팀원들의 도움을 받아 하나씩 해결해나갈수 있었던것 같습니다. 이번 기회에 vue를 사용할 수 있어서 너무 좋았습니다. 비록 제가 한건 많이 없지만 좋은 팀원들과 완벽한 결과물이 나온거 같아서 너무 뿌듯합니다!
임지훈	처음 접해보는 기술 스택과 길지 않은 프로젝트 기간으로 인해 팀장으로써 걱정을 많이 했습니다. 하지만 좋은 팀원들 덕분에 저의 부족한 부분을 많이 채워나갈 수 있었고, 좋은 결과물을 얻을 수 있었습니다.  자신있게 팀장을 하겠다고 나섰지만 팀원들에게 많은 도움이 되지못해 미안합니다. 하지만 이런 부족한 저를 믿고 끝까지 노력하여 좋은 결과물을 만들어낸 팀원들에게 매우 고맙습니다!
정수진	비록 짧은 기간이었지만, 팀원들 덕분에 많은 것을 배울 수 있었습니다.  Vue를 사용하여 웹사이트 페이지를 구현하는 방법뿐만 아니라, Firebase를 활용해 사용자의 데이터를 저장하고 이를 프론트엔드로 전달하는 과정도 알게되었고, API를 사용해 외부 서비스를 연동할 수 있다는 점도 새롭게 배웠습니다. 고생하신 팀원분들께 감사드리고 모두 고생하셨습니다!