“취향을 공유하고, 바이브를 연결하다”
- 취향 기반 소셜 매칭 플랫폼 VibeSync
- VibeSync는 영화, 드라마, 음악, 애니메이션 등 다양한 콘텐츠에 대한 취향을 중심으로 사람들을 연결하는 새로운 형태의 소셜 플랫폼입니다.
- 콘텐츠 리뷰 및 감정 태깅, 실시간 스트리밍 경험 공유, 취향 기반 친구 매칭 등 기능을 통해 사용자에게 깊이 있는 소통과 연결 기회를 제공합니다.
- SNS는 양적 연결(팔로워, 친구 수)에 집중되어 있어, 유사한 취향 기반의 깊이 있는 소통이 부족합니다.
- 사용자마다 선호하는 미디어(영화, 드라마, 음악, 애니 등)에 대한 경험을 공유할 공간이 제한적이며, 함께 실시간 시청할 플랫폼이 분산되어 있습니다.
- 취향 기반 매칭: 사용자의 리뷰, 좋아요, 스크랩 포스트 등을 분석해 공통 관심사를 가진 사용자 간 추천 및 매칭을 제공합니다.
- 실시간 워치파티 기능: 동기화된 스트리밍 시청 경험과 채팅·이모티콘 반응을 통해 물리적 거리를 넘어선 라이브 커뮤니케이션을 지원합니다.
- 개인 워크스페이스: 일정 관리, 포스트(리스트) 컬렉션, 메모 기능으로 개인화된 탐색 과정을 체계적으로 관리할 수 있습니다. 워크스페이스는 사용자별로 독립 운영됩니다.
- 다목적 활용: SNS 소셜 용도뿐만 아니라 개인 업무 관리, 기업 마케팅 캠페인 등 다양한 목적에 맞춘 유연한 플랫폼 활용이 가능합니다.
- 다국어 지원 & 반응형 UI/UX: 기본 영어 UI에 한국어를 추가 지원하고, PC·모바일 일관된 경험을 보장하는 반응형 디자인을 적용합니다.
- 주간 활성 사용자(WAU)
- 워치파티 참여 횟수 및 평균 시청 지속 시간
- Front-End:
- Back-End:
- Database:
- IDE:
- UI/UX:
- Version Control:
| 서비스명 | 주요기능 | 강점 | 한계점 |
|---|---|---|---|
| Notion | 개인 워크스페이스, 협업 문서 | 유연한 커스터마이징, 쉽게 조직화 | 미디어 리뷰·스트리밍 통합 기능 부족 |
| 피드, 스토리, DM, 해시태그 기반 탐색 | 방대한 사용자풀, 쉬운 콘텐츠 공유 | 실시간 동시 시청, 취향 태깅 기능 부재 | |
| Teleparty | 동기화 스트리밍, 채팅·이모티콘 반응 | 다양한 스트리밍 플랫폼 지원 | 별도 브라우저 확장 설치 필요, SNS 기능 미흡 |
- 원스톱 플랫폼으로서 리뷰·매칭·스트리밍·워크스페이스를 통합 제공
- 플러그인 불필요: 브라우저 기반으로 별도 설치 없이 즉시 사용 가능
- 감정 태그·분석을 통한 세분화된 추천 경험 필수
- 채팅 기반 커뮤니티: 실시간 텍스트·이모티콘 소통 기능 강화 필요
- Vibe(감성, 파장)와 Sync(동기화)의 결합으로, 사용자 간의 감성과 경험을 연결한다는 의미를 담고 있습니다.
- 외각 원형: 글로벌 커뮤니티의 확장성과 끊김 없는 연결을 상징
- 중앙 사운드 웨이브 그래픽: 실시간 경험 공유, 감정의 파동(바이브)을 시각화
- 보라→파랑→초록 그라데이션: 다양한 취향과 감정 스펙트럼을 표현
 |
 |
 |
 |
|---|---|---|---|
| 김현수 @jejuKIM99 Team Leader Planning/Management UI/UX Design FE/BE Development |
서재웅 @ungs1026 Lead Developer Overall FE/BE Development |
김민선@msgggg1 | 김예지 @Yeji-Kim-Erica |
- Index Page의 최초 로드 모습입니다. 해당 페이지는 페이지 초기 로드시 나타나며, 간단한 애니메이션(타이핑, 별똥별)을 포함하고 있습니다.
- 우측 하단 언어 번경 기능을 통해 페이지 내 언어를 변경할 수 있습니다. 변경 가능 언어는 영어/한국어 입니다.
- 번역은 데이터를 js로 작성하고 선택에 맞게 내용을 변경하는 형태 입니다.
<예시>
<section id="section2">
<div class="content">
<p class="Purpose_p" data-key="about.title">About VibeSync</p>
.
.
.
</div>
</section>
.
.
.
<!-- 언어 선택 드롭다운 -->
<select id="language-select">
<option value="en">English</option>
<option value="ko">한국어</option>
</select> // 번역 데이터
const translations = {
en: {
"data-key_name": "contents",
"data-key_name": "contents",
.
.
.
},
ko: {
"data-key_name": "contents",
"data-key_name": "contents",
.
.
.
}
}
- Login Page입니다. Index Page의 nav 우측 Get Start버튼을 눌러 진입합니다.
- 반응형으로 디자인 되었으며, 한 페이지에서 폼 양식 전환으로 로그인/회원가입을 처리합니다.
- 비밀번호 패턴이 정의하여 사용자에게 패턴에 맞는 입력을 유도합니다.
<예시>
<label for="userPw" class="sr-only">비밀번호</label> <input type="password" id="userPw" name="userPw" placeholder="Password" required pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]{8,}$" title="8자 이상, 영문자, 숫자, 특수문자를 모두 포함해야 합니다."> // 회원가입 폼 보여주기
function showSignupForm() {
// .length를 확인하여 요소 존재 여부 체크
if ($loginFormContainer.length && $signupFormContainer.length && $switchFormLinkContainer.length) {
$loginFormContainer.hide(); // 로그인 폼 숨기기
$signupFormContainer.css('display', 'flex'); // 회원가입 폼 보이기
$switchFormLinkContainer.hide(); // '아직 회원이 아니신가요?' 링크 숨기기
}
}
// 로그인 폼 보여주기
function showLoginForm() {
if ($loginFormContainer.length && $signupFormContainer.length && $switchFormLinkContainer.length) {
$loginFormContainer.css('display', 'flex'); // 로그인 폼 보이기
$signupFormContainer.hide(); // 회원가입 폼 숨기기
$switchFormLinkContainer.show(); // '아직 회원이 아니신가요?' 링크 보이기 (기본 display block)
}
}
// '회원가입' 링크 클릭 이벤트 (.on() 사용)
if ($switchToSignupLink.length) {
$switchToSignupLink.on('click', function(event) {
event.preventDefault(); // 링크 기본 동작 중단
showSignupForm();
});
}
// '로그인' 링크(회원가입 폼 내부) 클릭 이벤트
if ($switchToLoginLink.length) {
$switchToLoginLink.on('click', function(event) {
event.preventDefault();
showLoginForm();
});
}
- Main Page입니다. Login Page에서 로그인 성공치 최초로 보여지는 페이지 입니다.
- 회원가입시 입력한 선호 카테고리에 맞는 최신글/인기글/인기유저를 출력합니다.
- 선호 카테고리 외 글을 보기 위해 선호 카테고리 외 카테고리 포스트 리스트로 이동하는 버튼이 존재합니다.
- 버튼 외에도 하단에 선호 카테고리 외 각 카테고리들의 인기글을 출력합니다.
- 반응형으로 디자인 되어 일관된 경험을 제공합니다.
- 좌측 사이드바를 통해 페이지 이동 및 테마 변경이 가능합니다. 테마 변경시 즉시 적용되어 페이지 이동 및 재접속 시에도 해당 설정이 유지됩니다.
- Workspace입니다. 캘린더를 통한 일정관리가 가능하며 하단 블럭을 통해 포스트 저장/ 메시지 관리/ 통계 등의 기능을 사용할 수 있습니다.
- 캘린더의 일정은 색상을 통해 커스텀하여 구분할 수 있습니다.
- 하단 블럭은 기본 블럭 3개( 내가 작성한 글, 좋아요한 글, 안읽은 메시지), 추가블럭 최대 5개로 구성됩니다. 기본블럭을 제외한 추가블럭은 순서를 변경하여 커스텀 할 수 있습니다.
- 각 블럭의 데이터는 개별 새로고침 버튼으로 최신화가 가능합니다.
- 반응형으로 디자인 되어 일관된 경험을 제공합니다.
- **Mypage(Userpage)**입니다. 내가 올린 포스트와 메시지 워치파티등의 진입점 중 하나입니다.
- 본인의 페이지에서는 설정 버튼이 활성화 되며, 비밀번호 변경/ 프로필 이미지 변경/ 회원탈퇴가 가능합니다.
- 우측하단 + 버튼을 통하여 페이지를 생성하고 해당 페이지에 새 글을 포스팅 할 수 있습니다.
- 반응형으로 디자인 되어 일관된 경험을 제공합니다.
- Write폼(페이지)입니다. 자신의 페이지에서 새글쓰기를 눌러 진입합니다.
- Summer Note를 이용하여 글쓰기 폼을 구현하고, 실제 페이지 위에 직접 적는 느낌을 주기위해 폼을 디자인하였습니다. 이를 통해 글 작성과 동시에 postView 페이지에서 보여질 형태를 프리뷰 할 수 있습니다.
- 글 안에 이미지 삽입이 가능하며 사이즈 조절이 가능합니다. png이미지를 지원하여 투명 배경의 이미지 또한 삽입 가능합니다.
- 하단 옵션은 필수 입력항목입니다. **Mypage(Userpage)**에서 출력할 썸네일 이미지 및 포스트의 분류를 위한 옵션 선택을 해야합니다.
- 반응형으로 디자인 되어 일관된 경험을 제공합니다.
