Home

link

 

🎵 inear 프로젝트 개요

iNear는 팬들끼리 좋아하는 아티스트의 신규 앨범을 함께 공감하는 서비스입니다

사용자는 앨범 발매 시간에 맞춰 열리는 세션에서 좋아하는 아티스트의 노래를 실시간으로 듣고,
같은 팬들과 함께 서로의 감상평을 실시간 채팅으로 함께 공유하며 즐거운 추억을 보낼 수 있습니다.

🔔 유저 페르소나

아무래도 많은 최초공개 스트리밍 플랫폼들은 사진 혹은 동영상과 같은 시각적인 미디어를 주 매개체로 사용을 하다보니
노래 위주의 앨범 단위로만 작업하는 아티스트, 그리고 그들의 팬들을 위한 소통의 창구가 부족하다고 생각을 하였습니다.

iNear는 기존의 소통의 창구가 적었던 장르의 아티스트를 팔로우하고 있던 팬들을 위한 소통의 장입니다.
같은 취향을 공유하는 사람들과 함께 좋아하는 아티스트의 앨범 발매 당일날을 더 풍성하게 만들어보세요.

🚀 핵심 기능

실시간 앨범 스트리밍

inear는 아티스트의 신규 앨범을 실시간으로 청취할 수 있습니다

• 신규 앨범 발매 3일 전, 홈페이지에 세션 배너가 공개됩니다
• 발매 시간이 되면 모든 참여자가 함께 신곡을 감상하는 라이브 세션이 시작됩니다
• 세션에 참여한 팬들과 실시간으로 같은 곡을 들으며 소통할 수 있습니다

실시간 채팅방에서 소통

inear는 앨범 청취를 하면서 다른 사용자들과 소통할 수 있습니다

• 같은 팬들끼리 서로 실시간 채팅으로 의견을 나눌 수 있습니다
• 앨범 스트리밍을 하면서 가장 좋은 노래에 유저들이 실시간으로 투표를 진행할 수 있습니다

기술적 도전

FE

• ❗ 앨범 전체를 스트리밍한다고? (with HLS)

  • ❓ 앨범에 있는 여러 노래들을 스트리밍해줘야하는데, 클라이언트에서 처리해야할까?
  • ✔ HLS 작동 방식에 대해 정리해보자!

• ❗ 렌더링 범인은 하나!

  • ❓ 왜 채팅을 치면 스트리밍 컴포넌트가 렌더링이 될까?
  • ✔ React Dev Tools로 확인해보자!

---

BE

• ❗ 도커와 nginx의 사용기

  • ❓ 다양한 도커 컨테이너가 사용된 프로젝트에서 트래픽 관리를 어떻게 효율적으로 할 수 있을까?
  • ✔ docker-compose와 nginx proxy pass를 통해 디테일한 관리를 하자!

• ❗ HLS로 음악 주고 받기

  • ❓ 어떻게 음악 스트리밍을 구현할 수 있을까?
  • ✔ HLS 프로토콜을 한 번 사용해보자!

• ❗ Socket.io 최(강)적화

  • ❓ 소켓 연결에 관해서 불필요한 리소스가 존재하는 것 같다.
  • ✔ handshaking 방법을 다르게 구현해보자!

• ❗ 소켓 부하 테스트의 필요성

  • ❓ 구현한 소켓 환경이 트래픽이 몰려도 잘 작동될까?
  • ✔ artillery 툴을 사용해서 테스트 해보자!

• ❗ 코드의 안정성을 높이기 위해 테스트코드를 작성해보자

  • ❓ 코드의 안정성을 어떻게 확인하고 유지할 수 있을까?
  • ✔ integration 테스트를 진행해보자!

💻 시스템 아키텍처

higher architecture

deploy architecture

%% graph TD
flowchart 
    %% Main Components
    GH[(GitHub)]
    GA[(GitHub Actions)]
    HUB[(Docker Hub)]
    NC[ncloud]
    NGINX[NGINX]
    
    %% Deployment Flow
    GH -->|PR & Push| GA
    GA --> CLIENT(client file build)
    GA -->|server Image Push| HUB
    GA -->|dist scp| NC
    GA -->|SSH| NC
    HUB -->|Image Pull| NC

    NC -->|run| CHECK{deploy.sh}
    NC -->|dist file update & change| DIST_BLUE[Dist-New]
    CHECK -->|if Green server already running| BLUE[New Server Compose]
    BLUE -->|build & health check| BLUE_SERVER[(New Server:3000)]
    
    NGINX -->|nginx root path update| DIST_BLUE
    NGINX -->|server port change| BLUE_SERVER
    CHECK -->|if sub server healthy, stop and remove existing server| GREEN_SERVER[(Already running Server:3000)]
    
    %% Nginx Reload
    CHECK -->|nginx reload| NGINX

    %% Styling
    classDef github fill:#000000,stroke:#000000,color:#FFFFFF
    classDef hub fill:#0DB7ED,stroke:#0DB7ED,color:#FFFFFF
    classDef nginx fill:#019639,stroke:#009639,color:#FFFFFF
    classDef server fill:#1F1F1F,stroke:#1F1F1F,color:#FFFFFF
    classDef NC fill:#31D494, stroke: #31D494, color: #FFFFFF


    class GH github
    class HUB hub
    class NGINX nginx
    class BLUE_SERVER,GREEN_SERVER server
    class NC NC

Loading