산 넘어 산, 음원 서비스 <세이렌> 개발기

D2 대학생 세미나

2014. 08. 26 고 상 우

고상우

서울대학교 08

NAVER SW 멤버십 5기

NAVER LABS 인턴

sangwoo108@naver.com

군집형 음원 서비스 <SEIREN> 2014 NAVER SW 멤버십 최우수프로젝트 고상우 김성철 김시온

어떻게 만들었는지, 그 때 알았더라면 좋았을 것들

1. <세이렌> 소개

가장 기본적인 “재생 버튼”

재생 버튼 보다 더 많이 누르는 “다음 곡 버튼”

항상 켜놓는 “셔플 버튼”

“내가 뭘 듣고 싶은진 모르겠지만 일단 아무거나 한번 틀어줘 봐”

‘셔플’을 사용하는데 ‘다음곡’을 계속 연타한다는 것은

“근데 지금 나오는 이 곡은 좀 별로... 다른 건 없냐?”

“셔플” 기능을 “다음 곡 추천”으로 바라보자

시연!

유사한 음원끼리 그룹화해서 사용자가 현재 곡에 만족하면 유사한 곡을,

사용자가 다른 곡을 원하면 다른 그룹에서 다음 곡을 제공

2. <세이렌> 을 만들기까지

문과인 나는 왜 개발을 시작했나

Programming isn’t just explaining things to the computer but a medium for design, engineering, science, art and play.

출처 : http://programmingisterrible.com/post/40453884799/what-language-should-i-learn-first

사실 그리 이상한 일은 아닐지도

Tools for data analysis

Medium for design

제 경우에는

Explain things to computer + Data

Visualization

Data Visualization Raw data를 수집해 의미를 찾아내고 시각적으로 표현하는 것

첫 개발 - 위인들이 몇세 쯤에 어떤 일을 했는지 패턴화해서 보여주는 프로그램

반복문만 가지고 만든 첫 프로그램 꽤 복잡한 알고리즘이 적용된 <SEIREN>

관심사의 발전 : 데이터를 시각화

2년

Project 반복문만 알던 내가

웹 서비스 개발까지 할 수 있었던 것은

Project 맨 땅에 헤딩,

그것도 여러 번

Problem

Problem

Problem

Problem

Problem

Problem

Problem Problem

생각보다 훨씬 많은 문제상황이 발생

Problem

언어, 알고리즘, 자료구조…

프레임워크, 라이브러리…

Problem Solution 이 과정이 반복되면서 큰 자산이 되었습니다.

어떻게 해결하지?

편하게 못하나?

Solution 1 Solution 2 Solution 3

최대한 많은 대안을 찾고 왜 이걸 써야 하는지, 꼭 이걸 써야 하는지 다시 생각하기

그래도! <세이렌> 개발은

특히 더 힘들었습니다.

매일 매일 쩔어있던 나

Client Web 문서 Web Server DB

Browser Device

HTML JavaScript CSS

Java SQL

Front-end Back-end

‘내가’ 웹 서비스를 개발할 때 학생 개발자

개발

막막하거나 막히거나.

문제 상황 폭발

기획 디자인

회의, 회의 또 회의

그리고 채찍질

어떻게 해결하지?

편하게 못하나?

Solution

꾸역 꾸역 다 찾았습니다

문제를 해결해주었던 알고리즘들

서로 유사하다는 걸

어떻게 측정하지?

비슷한 음악을 골라주자 ?

Fourier Transform

Audio Similarity

Music Similarity

Audio Comparison

http://upload.wikimedia.org/wikipedia/commons/7/72/Fourier_transform_time_and_frequency_domains_%28small%29.gif

복잡한 함수에서 주파수 영역별 수치를 반환

정확히 어떤 의미인지 알 수 없었습니다

순식간에 까막눈이 되어버린 나

http://ko.wikipedia.org/wiki/%ED%91%B8%EB%A6%AC%EC%97%90_%EB%B3%80%ED%99%98

우리 프로젝트에서 직접 구현 해야할까?

혹시 알고리즘을 오해해서 잘못 가져다 쓰는 건 아닐까

의미를 확실히 아는 형태로 재가공하자

FT 수치는 다른 프로그램에서 추출해내고, 우리 프로젝트에서는 이 수치를 가공하는 부분을 구현하기로

C G D A E B Gb …

0.26 0.99 0.48 0.56 0.43 0.40 0.23 …

C G D A E B Gb …

0.33 0.58 0.53 0.32 0.37 0.21 0.40 …

노래 A

노래 B

상관 계수

Tell Me - 원더걸스

상관 계수 실측값 (상위 10위)

Vogue Madonna 0.783

Goodies Ciera 0.727

Gee 소녀시대 0.667

빙글빙글 나미 0.666

Lose Yourself Eminem 0.649

Poison 엄정화 0.647

소원을 말해봐 소녀시대 0.644

Toxic Britney Spears 0.637

달의 몰락 김현철 0.637

Livin' La VIda Loca Ricky Martin 0.630

음악을 시각적으로

어떻게 표현하지?

기왕이면 보는 재미도 있게

만들자 ?

원을 음악으로, 선을 음원간 상관계수로. 그런데 좌표는 어떻게? 그룹은 어떻게?

http://bl.ocks.org/mbostock/4600693

http://www.repeatingbeats.com/about/thesis/

Music Visualization으로 찾은 자료

Multi Dimensional

Scaling

운이 좋게도 구현 방법이 수록된 책이! 게다가 그룹화에 관한 설명도!

다차원 비례 척도법

고차원의 변수를 가진 데이터들을 2차원으로 표현하는 방법

다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법

1. 각 음원 데이터를 무작위 좌표에 배치

다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법

2. Target 음원이 나머지 음원과 얼마나 비슷한지에 따라 좌표를 조정

많이 비슷

꽤 다름

다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법

2. Target 음원이 나머지 음원과 얼마나 비슷한지에 따라 좌표를 조정

조금 비슷 꽤 다름

다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법

3. 나머지 음원들도 같은 과정을 반복

다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법

4. 개선의 여지가 없을 때까지 반복

K-means Clustering(K 평균 군집)

주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

1. Cluster의 개수, 위치를 결정

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

1. Cluster의 개수, 위치를 결정

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

2. 각 데이터 표본이 어떤 centroid에 가장 가까운지 판단

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

2. 각 데이터 표본이 어떤 centroid에 가장 가까운지 판단

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

3. Centroid의 위치를 형성된 군집을 기준으로 조정

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

4. 같은 과정을 개선의 여지가 없을 때까지 반복

(I Just) Died In Your Arms Cutting Crew

Anything For You Gloria Estefan

Beautiful Sunday Daniel Boone

All By Myself Celine Dion

Baker Street Gerry Rafferty

Beauty And The Beast Celine Dion

Because You Loved Me Celine Dion

Always On My Mind Pet Shop Boys

Befor The Next Teardro… Freddy Fender

Believe Cher

Bridge Over Troubled Water Simon & Garfunkel

Bohemian RhapSody Queen

Can You Feel The … Elton John

Call Me Blondie

Cant Fight This Feeling REO Spee…

And I Love You So Perry Como

Always On My Mind Willie Nelson

Angel Sarah McLachlan

같은 가수의 노래는 한 군집으로, 리메이크되며 장르가 바뀐 곡은 다른 군집으로

K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘

나를 좀더 편하게 해준 것들

Spring framework

MVC, AOP, DI 등을 제공

Servlet과 .properties 파일을 이용한 Controller

public class test extends HttpServlet { protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String request = request.getParameter("action" ); String commandAction = action_mapping.get(request); String forward = forward_mapping.get(requestAction); if(!commandAction.equals("")){ try { Class action = Class.forName(commandAction); Object actionInstance = action.newInstance(); Method m = action.getDeclaredMethod("execute", HttpServletRequest. class, HttpServletResponse.class ); m.invoke(actionInstance, request, response); } catch (Exception e) { e.printStackTrace(); } } request.getRequestDispatcher(forward).forward(request, response); }

Request – Logic – View 맵핑을 관리

@RequestMapping(value = "/myList.do", method = RequestMethod.GET) public String myList(@ModelAttribute("userId") String owner, Model model) { //do something return "myList"; }

Spring MVC를 활용할 때

annotation을 이용해 request, parameter가 자동으로 관리됨

메소드의 반환 스트링을 통해 result page까지 한번에 mapping

복잡한 Controller를 사용하지 않아도 됨

MyBatis

Java에서 DB통신을 보다 편하게

Property관리 , SQL 매핑, 동적 쿼리 등

<!-- 해당 댓글 반환 --> <select id="selectComment" parameterType="commentVO" resultMap="commentMapping"> SELECT * FROM comment WHERE comment.collection_num=#{collectionNum} AND contents=#{contents} AND write_time = #{writeTime} </select>

.xml파일에 저장된 쿼리문

Parameter mapping과 result mapping을 편하게

jQuery

JavaScript 라이브러리

DOM, BOM 조작을 보다 편하게

opacity, width, height가 0이 되는 애니메이션

var elLinearList = document.getElementById("linearList"); elLinearList.style.transition = "width 1s ease-out," + "height 1s ease-out," + "opacity 1s ease-out"; elLinearList.style.width = 0; elLinearList.style.height = 0; elLinearList.style.opaicity = 0; setTimeout(function(){ alert("animation end"); }, 1000);

$("#linearList").hide(1000, function(){ alert("animation end"); });

JavaScript

jQuery

UI framework

Style 설정을 보다 편하게

Bootstrap

기본 태그와 지정된 클래스에 따라 UI가 자동으로 적용

이벤트에 따른 UI 변화까지 적용되어 있음

D3.js

JavaScript 라이브러리

Data set을 SVG로 쉽게 표현

WebGL 라이브러리

Three.js

3D 공간 형성에 사용

3. <세이렌> 진행과정에서 얻은 노하우

지금 할 수 있는 것 보다는 하고 싶은 것을 목표로

실현가능성은 중요한 문제이지만, 기획에선 잠시 잊는 걸로

지금 아는 것보다 더 많은 걸 할 수 있다는 점

기록 잘 남기기

회의록, 일정, 기획, 요구사항 명세, UI 명세, 기능 분석 등 간략한 형태로라도 기록을 남겨야 길을 잃지 않고, 같은 논의를 반복하지 않습니다.

Project Scope

이번 프로젝트에서 직접 다뤄야 할 부분은 어디서 어디까지인지 명확히 선 긋기

프로젝트 주제와 목적이 명확해야 Scope도 명확해집니다.

FT도 우리 프로젝트 Scope인지 고민하던 흔적

제대로 하지 못해 아쉬웠던 부분

확장성, 재사용성, 변동 가능성을 고려

디자인 패턴을 잘 알았더라면 보다 수월했을 것 같음

서로 다른 메소드 안에서 반복되는 같은 로직들

HashMap이 아니라 ArrayList를 쓰기로 계획이 바뀌는 일이 생긴다면?

이런 공통된 로직들만 따로 캡슐화 했더라면 변동 사항 걱정도 없고 가독성도 늘었을 것.

Method A

Method B

프로젝트나 소스코드를 이렇게 관리할 순 없는 노릇

형상관리 tool 변동사항을 체계적으로 관리

목적에 맞는 것을 선택해서 사용하세요.

SVN / GIT

쓰는 것이 정신 건강에 이롭습니다.

Commit 단위로 파일을 서버에 저장

발표 당일 블루스크린과 함께 workspace setting이 다 날아가버리기도…

소스코드에서 변동사항 추적

코드 리뷰 기능

가독성을 고려한 코드

코딩 컨벤션 (변수명, 들여쓰기, 줄 바꿈, 띄어쓰기, 주석) 정하기

http://nuli.navercorp.com/sharing/fe/coding https://code.google.com/p/google-styleguide/ NHN 마크업 코딩 컨벤션(HTML / CSS) 구글 코딩 컨벤션(C, C++, JAVA, Python…)

피드백 받기

피드백은 문제상황이 없더라도 받는 게 좋습니다.

“UI가 좀 더 동적이었으면 좋겠다” “별자리 같이 생겼다”

“우주 공간처럼 만들자”

Three.js 사용

새로운 프로젝트에 대한 단초

프로젝트 Wrap-up

배워야 할 기술에 대한 접점

고생은 정말 많이 했지만 남은 것이 더 많았던 프로젝트

감사합니다.