2020년 11월 19일(목) 회의록

이벤트, 컴포넌트를 구분하는 방법

1. 이벤트에 상위 컴포넌트를 담아 보내는 방법
2. 컴포넌트 식별자를 위치기반으로 설정하는 방법
3. 이벤트를 세분화하는 방법

이벤트 이름

전반적인 화면

Click

{
    current_page: String,
    component_identifier: String,
    coordinate: {
        x: Double,
        y: Double
    },
    data: {
        type: String,
        id: Int
    },
    time_stamp: String
}

• current_page: 이벤트가 발생한 화면
• component_id: 이벤트가 발생한 컴포넌트의 식별자명
• coordinate: 이벤트가 발생한 화면의 좌표
• data: 이벤트와 관련된 데이터의 정보
  • type : 음원, 앨범, 아티스트 등...
  • id : type의 id
• time_stamp : 이벤트가 발생한 시점의 시간

Transition

{
    current_page: String,
    destination_page: String,
    time_stamp: String
}

• current_page : 이벤트가 발생한 화면
• destination_page : 이벤트 이후 전환될 화면
• time_stamp : 이벤트가 발생한 시점의 시간

Scroll

{
    current_page: String,
    component_id: String
}

• current_page : 이벤트가 발생한 화면
• component_id: 이벤트가 발생한 컴포넌트의 식별자명

Read

{
    current_page: String,
    article_id: Int,
    ratio: Int,
    time_stamp: String
}

• current_page : 이벤트가 발생한 화면
• article_id : 글 id
• ratio : 사용자가 글을 읽은 비율
• time_stamp : 이벤트가 발생한 시점의 시간

Drag&Drop

{
    current_page: String,
    id: Int,
    before: Int,
    after: Int
}

• current_page : 이벤트가 발생한 화면
• id: 이벤트에 의해 옮겨진 음원의 id(Drag&Drop은 음원에 대해서만 발생함)
• before: 플레이리스트에서 음원이 옮겨지기 전의 위치
• after: 플레이리스트에서 음원이 옮겨지기 전의 위치

User Engagement

{
    state: String,
    time_stamp: String
}

• state: 활성화, 백그라운드, 종료와 같은 웹&앱의 상태
• time_stamp : 이벤트가 발생한 시점의 시간

Crash Log

{
    current_page: String,
    description: String,
    time_stamp: String
}

• current_page : crash가 발생한 화면
• description : crash description
• time_stamp : 이벤트가 발생한 시점의 시간

검색

{
    current_page: String,
    text: String,
    time_stamp: String
}

Music Player 관련 -> click의 파라미터를 default로 넘김

재생 / 정지

{
    current_music_id: Int,
    state : Bool
}

이전곡 다음곡 특정곡 바로 재생

{
    current_music_id: int,
    target_music_id: int,
    current_play_time: int (sec 단위로),
    total_play_time: int (sec 단위로)
}

재생 목록에서 제거

{
    target_music_id: [Int]
}

드래그 앤 드롭 (순서 변경)

{
    target_music_id: int,
    before_idx: int,
    after_idx: int
}

음량 조절

{
    target_music_id: int,
    before_volumn: int,
    after_volumn: int
}

재생 시간 조절

{
    target_music_id: int,
    before_play_time: int (sec 단위로),
    after_play_time: int (sec 단위로),
    total_play_time: int (sec 단위로)
}

mp3 구매

{
    target_music_id: [Int]
}

좋아요(보관함)

{
    type: String (노래, 앨범 등),
    id: Int
}

플레이리스트 등록

{
    data: {
        type: String (노래, 앨범 등),
        id: Int
    },
    playlist_id: Int
}

컴포넌트 식별자 규칙

컴포넌트의 역할? 의미?를 기준

• 컴포넌트를 나타내는 정보 + 컴포넌트의 타입
• Magazine_thumbnail
• Magazine_title
• 문제점 : Chart의 경우 어떤 Chart(빌보드, 국내 등)의 하위 컴포넌트인지 구분이 불가능

컴포넌트의 위치를 기준

• (세로-알파벳, 가로-숫자) 형식의 위치 정보 + 컴포넌트의 타입
• [예시] 매거진 - [넓은 음악적 스펙트럼을 자랑하는 황소윤]의 component : A2
  • 사진의 identifier : A2_thumbnail
  • 제목의 identifier : A2_title
  • 따라서, 해당 매거진의 사진에 클릭 이벤트 발생 시,

// Click
{
    current_page: "https://vibe.naver.com/today",
    component_identifier: "A2_thmbnail",
    coordinate: {
        x: 700,
        y: 400
    },
    data: {
        type: "Magazine",
        id: 37655
    },
    time_stamp: "11/19/2020, 6:35:24 PM GMT+0900"
}

// Transition
{
    current_page: "https://vibe.naver.com/today",
    destination_page: "https://vibe.naver.com/magazines/37655",
    time_stamp: "11/19/2020, 6:35:24 PM GMT+0900"
}

• 질문: 식별자에 페이지 정보도 넣는 게 좋을까요?
• 문제점: 만약 컴포넌트의 위치가 바뀔 경우엔?