VibeSync_작성: 김현수

목차

• [1] About the Project
  • Background & Problem Statement
  • Goals & Value Proposition
  • Key Performance Indicators (KPI)
  • Technologies
  • Reference site
    • Reference Insights
  • Logo CI
• [2] Project Team
• [3] Usage

[1] About the Project

“취향을 공유하고, 바이브를 연결하다”

• 취향 기반 소셜 매칭 플랫폼 VibeSync
• VibeSync는 영화, 드라마, 음악, 애니메이션 등 다양한 콘텐츠에 대한 취향을 중심으로 사람들을 연결하는 새로운 형태의 소셜 플랫폼입니다.
• 콘텐츠 리뷰 및 감정 태깅, 실시간 스트리밍 경험 공유, 취향 기반 친구 매칭 등 기능을 통해 사용자에게 깊이 있는 소통과 연결 기회를 제공합니다.

Background & Problem Statement

• SNS는 양적 연결(팔로워, 친구 수)에 집중되어 있어, 유사한 취향 기반의 깊이 있는 소통이 부족합니다.
• 사용자마다 선호하는 미디어(영화, 드라마, 음악, 애니 등)에 대한 경험을 공유할 공간이 제한적이며, 함께 실시간 시청할 플랫폼이 분산되어 있습니다.

Goals & Value Proposition

1. 취향 기반 매칭: 사용자의 리뷰, 좋아요, 스크랩 포스트 등을 분석해 공통 관심사를 가진 사용자 간 추천 및 매칭을 제공합니다.
2. 실시간 워치파티 기능: 동기화된 스트리밍 시청 경험과 채팅·이모티콘 반응을 통해 물리적 거리를 넘어선 라이브 커뮤니케이션을 지원합니다.
3. 개인 워크스페이스: 일정 관리, 포스트(리스트) 컬렉션, 메모 기능으로 개인화된 탐색 과정을 체계적으로 관리할 수 있습니다. 워크스페이스는 사용자별로 독립 운영됩니다.
4. 다목적 활용: SNS 소셜 용도뿐만 아니라 개인 업무 관리, 기업 마케팅 캠페인 등 다양한 목적에 맞춘 유연한 플랫폼 활용이 가능합니다.
5. 다국어 지원 & 반응형 UI/UX: 기본 영어 UI에 한국어를 추가 지원하고, PC·모바일 일관된 경험을 보장하는 반응형 디자인을 적용합니다.

Key Performance Indicators (KPI)

• 주간 활성 사용자(WAU)
• 워치파티 참여 횟수 및 평균 시청 지속 시간

Technologies

• Front-End:
• Back-End:
• Database:
• IDE:
• UI/UX:
• Version Control:

Reference site

서비스명	주요기능	강점	한계점
Notion	개인 워크스페이스, 협업 문서	유연한 커스터마이징, 쉽게 조직화	미디어 리뷰·스트리밍 통합 기능 부족
Instagram	피드, 스토리, DM, 해시태그 기반 탐색	방대한 사용자풀, 쉬운 콘텐츠 공유	실시간 동시 시청, 취향 태깅 기능 부재
Teleparty	동기화 스트리밍, 채팅·이모티콘 반응	다양한 스트리밍 플랫폼 지원	별도 브라우저 확장 설치 필요, SNS 기능 미흡

Reference Insights

• 원스톱 플랫폼으로서 리뷰·매칭·스트리밍·워크스페이스를 통합 제공
• 플러그인 불필요: 브라우저 기반으로 별도 설치 없이 즉시 사용 가능
• 감정 태그·분석을 통한 세분화된 추천 경험 필수
• 채팅 기반 커뮤니티: 실시간 텍스트·이모티콘 소통 기능 강화 필요

Logo CI

• Vibe(감성, 파장)와 Sync(동기화)의 결합으로, 사용자 간의 감성과 경험을 연결한다는 의미를 담고 있습니다.
• 외각 원형: 글로벌 커뮤니티의 확장성과 끊김 없는 연결을 상징
• 중앙 사운드 웨이브 그래픽: 실시간 경험 공유, 감정의 파동(바이브)을 시각화
• 보라→파랑→초록 그라데이션: 다양한 취향과 감정 스펙트럼을 표현

[2] Project Team

Team

김현수 @jejuKIM99 Team Leader Planning/Management UI/UX Design FE/BE Development	서재웅 @ungs1026 Lead Developer Overall FE/BE Development	김민선@msgggg1	김예지 @Yeji-Kim-Erica

_{Table made by TIT}

[3] Usage

Index Page_제작: 김현수(FE),서재웅(FE)

• 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_제작: 김민선(FE/BE), 김현수(FE)

• 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_제작: 김현수(FE), 서재웅(FE/BE), 김예지(BE)

• Main Page입니다. Login Page에서 로그인 성공치 최초로 보여지는 페이지 입니다.
• 회원가입시 입력한 선호 카테고리에 맞는 최신글/인기글/인기유저를 출력합니다.
• 선호 카테고리 외 글을 보기 위해 선호 카테고리 외 카테고리 포스트 리스트로 이동하는 버튼이 존재합니다.
• 버튼 외에도 하단에 선호 카테고리 외 각 카테고리들의 인기글을 출력합니다.
• 반응형으로 디자인 되어 일관된 경험을 제공합니다.
• 좌측 사이드바를 통해 페이지 이동 및 테마 변경이 가능합니다. 테마 변경시 즉시 적용되어 페이지 이동 및 재접속 시에도 해당 설정이 유지됩니다.

Workspace_제작: 김현수(FE), 김민선(FE/BE), 김예지(BE)

• Workspace입니다. 캘린더를 통한 일정관리가 가능하며 하단 블럭을 통해 포스트 저장/ 메시지 관리/ 통계 등의 기능을 사용할 수 있습니다.
• 캘린더의 일정은 색상을 통해 커스텀하여 구분할 수 있습니다.
• 하단 블럭은 기본 블럭 3개( 내가 작성한 글, 좋아요한 글, 안읽은 메시지), 추가블럭 최대 5개로 구성됩니다. 기본블럭을 제외한 추가블럭은 순서를 변경하여 커스텀 할 수 있습니다.
• 각 블럭의 데이터는 개별 새로고침 버튼으로 최신화가 가능합니다.
• 반응형으로 디자인 되어 일관된 경험을 제공합니다.

Mypage_제작: 김현수(FE), 서재웅(FE/BE), 김민선(BE)

• **Mypage(Userpage)**입니다. 내가 올린 포스트와 메시지 워치파티등의 진입점 중 하나입니다.
• 본인의 페이지에서는 설정 버튼이 활성화 되며, 비밀번호 변경/ 프로필 이미지 변경/ 회원탈퇴가 가능합니다.
• 우측하단 + 버튼을 통하여 페이지를 생성하고 해당 페이지에 새 글을 포스팅 할 수 있습니다.
• 반응형으로 디자인 되어 일관된 경험을 제공합니다.

Write_제작: 김현수(FE), 서재웅(FE/BE)

• Write폼(페이지)입니다. 자신의 페이지에서 새글쓰기를 눌러 진입합니다.
• Summer Note를 이용하여 글쓰기 폼을 구현하고, 실제 페이지 위에 직접 적는 느낌을 주기위해 폼을 디자인하였습니다. 이를 통해 글 작성과 동시에 postView 페이지에서 보여질 형태를 프리뷰 할 수 있습니다.
• 글 안에 이미지 삽입이 가능하며 사이즈 조절이 가능합니다. png이미지를 지원하여 투명 배경의 이미지 또한 삽입 가능합니다.
• 하단 옵션은 필수 입력항목입니다. **Mypage(Userpage)**에서 출력할 썸네일 이미지 및 포스트의 분류를 위한 옵션 선택을 해야합니다.
• 반응형으로 디자인 되어 일관된 경험을 제공합니다.