[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기

산 넘어 산,
음원 서비스 <세이렌> 개발기
D2 대학생 세미나
2014. 08. 26
고 상 우

고상우
서울대학교 08
NAVER SW 멤버십 5기
NAVER LABS 인턴
sangwoo108@naver.com

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

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

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

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

항상 켜놓는
“셔플 버튼”

“내가 뭘 듣고 싶은진 모르겠지만
일단 아무거나 한번 틀어줘 봐”
‘셔플’을 사용하는데 ‘다음곡’을 계속 연타한다는 것은
“근데 지금 나오는 이 곡은 좀 별로... 다른 건 없냐?”
“셔플” 기능을 “다음 곡 추천”으로 바라보자

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

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. 각 음원 데이터를 무작위 좌표에 배치

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

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

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

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

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

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

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

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

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
같은 가수의 노래는 한 군집으로, 리메이크되며 장르가 바뀐 곡은 다른 군집으로

나를 좀더 편하게 해준 것들

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

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
배워야 할 기술에 대한 접점

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

[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기

More Related Content

[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기