[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기

11,842 views

Published on

[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기

Published in: Technology
0 Comments
33 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,842
On SlideShare
0
From Embeds
0
Number of Embeds
8,147
Actions
Shares
0
Downloads
104
Comments
0
Likes
33
Embeds 0
No embeds

No notes for slide

[D2대학생세미나]산넘어 산, 음원서비스 세이렌 개발기

  1. 1. 산 넘어 산, 음원 서비스 <세이렌> 개발기 D2 대학생 세미나 2014. 08. 26 고 상 우
  2. 2. 고상우 서울대학교 08 NAVER SW 멤버십 5기 NAVER LABS 인턴 sangwoo108@naver.com
  3. 3. 군집형 음원 서비스 <SEIREN> 2014 NAVER SW 멤버십 최우수프로젝트 고상우 김성철 김시온
  4. 4. 어떻게 만들었는지, 그 때 알았더라면 좋았을 것들
  5. 5. 1. <세이렌> 소개
  6. 6. 가장 기본적인 “재생 버튼”
  7. 7. 재생 버튼 보다 더 많이 누르는 “다음 곡 버튼”
  8. 8. 항상 켜놓는 “셔플 버튼”
  9. 9. “내가 뭘 듣고 싶은진 모르겠지만 일단 아무거나 한번 틀어줘 봐” ‘셔플’을 사용하는데 ‘다음곡’을 계속 연타한다는 것은 “근데 지금 나오는 이 곡은 좀 별로... 다른 건 없냐?” “셔플” 기능을 “다음 곡 추천”으로 바라보자
  10. 10. 시연!
  11. 11. 유사한 음원끼리 그룹화해서 사용자가 현재 곡에 만족하면 유사한 곡을, 사용자가 다른 곡을 원하면 다른 그룹에서 다음 곡을 제공
  12. 12. 2. <세이렌> 을 만들기까지
  13. 13. 문과인 나는 왜 개발을 시작했나
  14. 14. 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 사실 그리 이상한 일은 아닐지도
  15. 15. Tools for data analysis Medium for design 제 경우에는 Explain things to computer + Data Visualization
  16. 16. Data Visualization Raw data를 수집해 의미를 찾아 내고 시각적으로 표현하는 것 첫 개발 - 위인들이 몇세 쯤에 어떤 일을 했는지 패턴화해서 보여주는 프로그램
  17. 17. 반복문만 가지고 만든 첫 프로그램 꽤 복잡한 알고리즘이 적용된 <SEIREN> 관심사의 발전 : 데이터를 시각화 2년
  18. 18. Project 반복문만 알던 내가 웹 서비스 개발까지 할 수 있었던 것은
  19. 19. Project 맨 땅에 헤딩, 그것도 여러 번
  20. 20. Problem Problem Problem Problem Problem Problem Problem Problem 생각보다 훨씬 많은 문제상황이 발생 Problem
  21. 21. 언어, 알고리즘, 자료구조… 프레임워크, 라이브러리… Problem Solution 이 과정이 반복되면서 큰 자산이 되었습니다. 어떻게 해결하지? 편하게 못하나?
  22. 22. Solution 1 Solution 2 Solution 3 최대한 많은 대안을 찾고 왜 이걸 써야 하는지, 꼭 이걸 써야 하는지 다시 생각하기
  23. 23. 그래도! <세이렌> 개발은 특히 더 힘들었습니다. 매일 매일 쩔어있던 나
  24. 24. Client Web 문서 Web Server DB Browser Device HTML JavaScript CSS Java SQL Front-end Back-end
  25. 25. ‘내가’ 웹 서비스를 개발할 때 학생 개발자
  26. 26. 개발 막막하거나 막히거나. 문제 상황 폭발 기획 디자인
  27. 27. 회의, 회의 또 회의
  28. 28. 그리고 채찍질
  29. 29. 어떻게 해결하지? 편하게 못하나? Solution 꾸역 꾸역 다 찾았습니다
  30. 30. 문제를 해결해주었던 알고리즘들
  31. 31. 서로 유사하다는 걸 어떻게 측정하지? 비슷한 음악을 골라주자 ?
  32. 32. Fourier Transform Audio Similarity Music Similarity Audio Comparison
  33. 33. http://upload.wikimedia.org/wikipedia/commons/7/72/Fourier_transform_time_and_frequency_domains_%28small%29.gif 복잡한 함수에서 주파수 영역별 수치를 반환
  34. 34. 정확히 어떤 의미인지 알 수 없었습니다 순식간에 까막눈이 되어버린 나 http://ko.wikipedia.org/wiki/%ED%91%B8%EB%A6%AC%EC%97%90_%EB%B3%80%ED%99%98
  35. 35. 우리 프로젝트에서 직접 구현 해야할까? 혹시 알고리즘을 오해해서 잘못 가져다 쓰는 건 아닐까
  36. 36. 의미를 확실히 아는 형태로 재가공하자 FT 수치는 다른 프로그램에서 추출해내고, 우리 프로젝트에서는 이 수치를 가공하는 부분을 구현하기로
  37. 37. 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 상관 계수
  38. 38. 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
  39. 39. 음악을 시각적으로 어떻게 표현하지? 기왕이면 보는 재미도 있게 만들자 ?
  40. 40. 원을 음악으로, 선을 음원간 상관계수로. 그런데 좌표는 어떻게? 그룹은 어떻게? http://bl.ocks.org/mbostock/4600693
  41. 41. http://www.repeatingbeats.com/about/thesis/ Music Visualization으로 찾은 자료 Multi Dimensional Scaling
  42. 42. 운이 좋게도 구현 방법이 수록된 책이! 게다가 그룹화에 관한 설명도!
  43. 43. 다차원 비례 척도법 고차원의 변수를 가진 데이터들을 2차원으로 표현하는 방법
  44. 44. 다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법 1. 각 음원 데이터를 무작위 좌표에 배치
  45. 45. 다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법 2. Target 음원이 나머지 음원과 얼마나 비슷한지에 따라 좌표를 조정 많이 비슷 꽤 다름
  46. 46. 다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법 2. Target 음원이 나머지 음원과 얼마나 비슷한지에 따라 좌표를 조정 조금 비슷꽤 다름
  47. 47. 다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법 3. 나머지 음원들도 같은 과정을 반복
  48. 48. 다차원 비례 척도법(Multidimensional Scaling) 고차원의 변수를 가진 데이터들을 2차원으로 으로 표현하는 방법 4. 개선의 여지가 없을 때까지 반복
  49. 49. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘
  50. 50. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 1. Cluster의 개수, 위치를 결정
  51. 51. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 1. Cluster의 개수, 위치를 결정
  52. 52. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 2. 각 데이터 표본이 어떤 centroid에 가장 가까운지 판단
  53. 53. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 2. 각 데이터 표본이 어떤 centroid에 가장 가까운지 판단
  54. 54. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 3. Centroid의 위치를 형성된 군집을 기준으로 조정
  55. 55. K-means Clustering(K 평균 군집) 주어진 데이터를 K개의 Cluster로 묶어주는 알고리즘 4. 같은 과정을 개선의 여지가 없을 때까지 반복
  56. 56. (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로 묶어주는 알고리즘
  57. 57. 나를 좀더 편하게 해준 것들
  58. 58. Spring framework MVC, AOP, DI 등을 제공
  59. 59. 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 맵핑을 관리
  60. 60. @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를 사용하지 않아도 됨
  61. 61. MyBatis Java에서 DB통신을 보다 편하게 Property관리 , SQL 매핑, 동적 쿼리 등
  62. 62. <!-- 해당 댓글 반환 --> <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을 편하게
  63. 63. jQuery JavaScript 라이브러리 DOM, BOM 조작을 보다 편하게
  64. 64. opacity, width, height가 0이 되는 애니메이션
  65. 65. 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
  66. 66. UI framework Style 설정을 보다 편하게 Bootstrap
  67. 67. 기본 태그와 지정된 클래스에 따라 UI가 자동으로 적용 이벤트에 따른 UI 변화까지 적용되어 있음
  68. 68. D3.js JavaScript 라이브러리
  69. 69. Data set을 SVG로 쉽게 표현
  70. 70. WebGL 라이브러리 Three.js
  71. 71. 3D 공간 형성에 사용
  72. 72. 3. <세이렌> 진행과정에서 얻은 노하우
  73. 73. 지금 할 수 있는 것 보다는 하고 싶은 것을 목표로 실현가능성은 중요한 문제이지만, 기획에선 잠시 잊는 걸로 지금 아는 것보다 더 많은 걸 할 수 있다는 점
  74. 74. 기록 잘 남기기 회의록, 일정, 기획, 요구사항 명세, UI 명세, 기능 분석 등 간략한 형태로라도 기록을 남겨야 길을 잃지 않고, 같은 논의를 반복하지 않습니다.
  75. 75. Project Scope 이번 프로젝트에서 직접 다뤄야 할 부분은 어디서 어디까지인지 명확히 선 긋기 프로젝트 주제와 목적이 명확해야 Scope도 명확해집니다. FT도 우리 프로젝트 Scope인지 고민하던 흔적
  76. 76. 제대로 하지 못해 아쉬웠던 부분 확장성, 재사용성, 변동 가능성을 고려 디자인 패턴을 잘 알았더라면 보다 수월했을 것 같음 서로 다른 메소드 안에서 반복되는 같은 로직들 HashMap이 아니라 ArrayList를 쓰기로 계획이 바뀌는 일이 생긴다면? 이런 공통된 로직들만 따로 캡슐화 했더라면 변동 사항 걱정도 없고 가독성도 늘었을 것. Method A Method B
  77. 77. 프로젝트나 소스코드를 이렇게 관리할 순 없는 노릇 형상관리 tool 변동사항을 체계적으로 관리
  78. 78. 목적에 맞는 것을 선택해서 사용하세요. SVN / GIT 쓰는 것이 정신 건강에 이롭습니다.
  79. 79. Commit 단위로 파일을 서버에 저장
  80. 80. 발표 당일 블루스크린과 함께 workspace setting이 다 날아가버리기도…
  81. 81. 소스코드에서 변동사항 추적 코드 리뷰 기능
  82. 82. 가독성을 고려한 코드 코딩 컨벤션 (변수명, 들여쓰기, 줄 바꿈, 띄어쓰기, 주석) 정하기 http://nuli.navercorp.com/sharing/fe/coding https://code.google.com/p/google-styleguide/ NHN 마크업 코딩 컨벤션(HTML / CSS) 구글 코딩 컨벤션(C, C++, JAVA, Python…)
  83. 83. 피드백 받기 피드백은 문제상황이 없더라도 받는 게 좋습니다. “UI가 좀 더 동적이었으면 좋겠다” “별자리 같이 생겼다” “우주 공간처럼 만들자” Three.js 사용
  84. 84. 새로운 프로젝트에 대한 단초 프로젝트 Wrap-up 배워야 할 기술에 대한 접점
  85. 85. 고생은 정말 많이 했지만 남은 것이 더 많았던 프로젝트
  86. 86. 감사합니다.

×