🔖 MarkSphere

🧭 개발 배경

인터넷을 통해 접하는 콘텐츠가 다양해지면서, 사용자는 개인적인 관심사부터 정보 수집, 맛집, 여행지 탐색까지 여러 목적의 링크를 꾸준히 저장하게 됩니다. 그러나 기존 브라우저 북마크는 정보가 누적될수록 분류가 어렵고, 공유나 협업에도 한계가 있어 실질적인 활용도가 떨어지는 경우가 많습니다. 또한 위치 정보가 중요한 링크(예 : 맛집 리뷰, 여행지)는 실제 위치를 확인하기 위해 사용자가 다시 지도를 검색해야 하는 번거러움이 있습니다. 이러한 불편을 줄이기 위해서는 링크와 위치를 한눈에 확인할 수 있는 방식이 필요하지만, 기존 서비스들은 이를 직관적으로 제공하지 못하고 있습니다. MarkSphere는 이러한 불편함을 해결하고자 링크를 개인 또는 그룹이 함계 저장 및 공유할 수 있으며 장소 기반 링크도 지도에 표시할 수 있게 하였습니다.

📖 프로젝트 소개

MakrSphere는 개인 또는 그룹단위로 사용할 수 있는 워크스페이스를 기반으로 북마크를 체계적으로 저장하고 관리할 수 있는 환경을 제공하고 위치 정보가 중요한 북마크는 지도 위에 직접 저장하고 시각적으로 관리할 수 있는 사이트입니다.

워크스페이스 기반 관리

• 개인 또는 그룹 단위로 워크스페이스 생성
• 멤버를 초대하고 팀 단위로 북마크 공유 및 관리 가능
• 그룹별 카테고리 및 구조화된 정리 지원

위치 기반 북마크 관리

• 맛집, 카페, 장소 추천 등 위치 정보가 중요한 링크를 지도에 직접 저장
• 링크만으로는 위치를 다시 검색해야 하는 불편함을 해소
• 북마크를 지도에 한눈에 확인하여 시각적으로 관리 가능
• 지도 클릭을 통한 마커 생성 및 위치 수정 기능

북마크 커스터마이징

• 태그, 카테고리, 설명 등 다양한 정보 추가 가능
• OG 태그 기반 썸네일, 제목 자동 추출, 직접 이미지 교체도 가능
• 목적에 따라 북마크를 커스텀하여 저장할 수 있는 구조 제공

협업과 공유

• 그룹 멤버 간 북마크 공유 및 공동 수정 지원
• 댓글, 답글 등 상호작용 기능
• 초대 코드 및 QR 코드를 통한 그룹 초대

체계적 정보 관리

• 카테고리로 북마크 분류
• 태그 및 카테고리, 제목 검색을 통해서 정보에 빠르게 접근
• 다양한 링크를 한 공간에 구조화하여 관리할 수 있도록 설계

💻 주요 기능 (영상)

회원가입 및 로그인

회원가입 및 로그인

• 사이트에 접속하면 사용자는 로그인 화면과 회원가입 화면을 볼 수 있습니다
• 회원가입 버튼을 누르고 회원가입을 할 수 있습니다 (중복 닉네임 허용 x)
• 회원가입을 완료하면 이후 로그인 버튼을 통해서 바로 로그인할 수 있습니다

프로필 수정 및 탈퇴

• 마이페이지에서 회원 정보(프로필, 닉네임, 비밀번호)를 수정할 수 있습니다
• 로그아웃 및 회원 탈퇴를 할 수 있습니다
• 회원 탈퇴할 때 소유하고 있는 그룹은 탈퇴 전 그룹 양도를 해야 합니다.

북마크 관리

카테고리 관리 영상

• 카테고리를 생성, 수정, 및 삭제할 수 있습니다
• 카테고리를 꾹 누르고 당겨 순서를 바꿀 수 있습니다
• 카테고리를 누르면 해당 카테고리에 속한 북마크를 찾을 수 있습니다

북마크 관리 영상

• 북마크를 저장해서 여러 사람들과 함께 공유 및 사용할 수 있습니다
• 북마크는 Open Graph 데이터를 이용해서 이미지, 제목, 설명 데이터를 가져오고 수정할 수 있습니다
• 북마크는 특정 권한(ADMIN, EDITOR)만 생성과 수정 및 삭제가 가능합니다

지도에 북마크 위치 저장 및 삭제

• 위치 정보가 중요한 북마크는 지도에 표시할 수 있습니다 (맛집, 관광지 등)
• 마커는 위치를 검색하거나 사용자가 원하는 곳에 찍을 수 있고 이 마커에 북마크를 저장합니다
• 아래 북마크 카드를 클릭하면 해당 북마크가 저장된 위치로 지도가 이동합니다

댓글 및 답글

댓글/답글 작성

• 북마크에 댓글을 달아서 의견 또는 정보를 공유할 수 있습니다
• 다른 사용자의 댓글에 답글을 달 수 있습니다
• 댓글과 답글은 필요한 경우 더 불러올 수 있습니다

그룹 관리

그룹 생성 및 초대 코드 관리

• 그룹 추가 버튼을 통해서 새로운 그룹을 생성할 수 있습니다
• 만들어진 그룹은 왼쪽 드롭다운 버튼을 통해서 확인할 수 있습니다
• 초대코드와 qr코드를 통해서 다른 사람을 초대할 수 있습니다

그룹 가입 및 탈퇴

• 초대코드 혹은 qr코드로 통해 그룹에 가입할 수 있습니다
• 일반적인 멤버는 그룹탈퇴 버튼을 통해서 그룹을 탈퇴할 수 있습니다
• 소유자는 그룹탈퇴 전에 다른 멤버에게 소유권을 양도해야 합니다.

그룹 삭제 시 처리 과정

• 소유자는 그룹을 삭제할 수 있습니다
• 다만 바로 삭제되는 것이 아니라 다른 멤버들도 알 수 있게 유예 기간이 주어집니다
• 유예 기간은 왼쪽 사이드바에서 확인할 수 있으며 언제든지 취소할 수 있습니다

멤버 관리

• 멤버의 역할을 바꾸거나 내보낼 수 있습니다
• 관리자은 전반적인 그룹 관리와 카테고리 및 북마크 관리 등 모든 기능을 사용할 수 있습니다
• 편집자은 그룹 관리를 제외한 모든 기능을 사용할 수 있고, 뷰어는 북마크와 댓글 생성, 수정, 삭제 기능을 사용할 수 없습니다.

👨🏻‍💻 팀원 소개

🛠️ 기술 스택

프론트엔드

백엔드