Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017

1,970 views

Published on

Published in: Technology
  • Be the first to comment

이승재, 박경재, NDC Replay 제작기: static website, static backoffice, NDC2017

  1. 1. static website, static backoffice NDC 2017 이승재, 박경재
  2. 2. 오픈까지 Part A
  3. 3. 발표자: 박경재 카트라이더 던전 앤 파이터 에버플래닛 피파 온라인 3 메이플스토리2 NDC Replay @compmgmt
  4. 4. NDC TF NDC 사무국과의 업무 협업 • 세션 심사 • 본 발표 세션 피드백 제공 • NDC 다시보기 사이트 제작/관리
  5. 5. NDC Replay
  6. 6. 보통의 서비스 개발 과정 • “NDC Replay” 를 서비스하는 웹 애플리케이션 개발 • 이를 위한 데이터베이스 생성 및 연결 • ‘적절한’ 로드 밸런싱 및 백업 플랜 준비 • 매년 NDC가 열릴 때마다 업데이트 – NDC 사무국으로부터 데이터를 받아서 가공 후 업로드 <또는> – 전용 백오피스를 별도로 제작하여 NDC 사무국에 제공
  7. 7. 고민 • 개발자는 단 두 명이다. 게다가 풀 타임이 아니다. • 서버라는 것은 관리를 필요로 한다 – 죽을 수도 있습니다 – 해킹당할 수도 있습니다 – 업데이트를 해야 하는 경우도 있습니다 • 1년에 한 번 크게 내용이 바뀌고, 그 사이에는 거의 변화가 없다
  8. 8. 방향 • “만들어놓고 잊어버릴 수 있는” 사이트 만들기 • 연계 서비스를 최소화 • 유지보수는 최대한 하지 않도록 • 개발자 도움 없이 self-service + update 가능하도록
  9. 9. 웹 애플리케이션을 만들 필요 있나? • 사이트를 모두 다 static html으로 만들자!  서버 취약점, 업데이트 이슈 없어짐  서버의 구성이 매우 단순해짐  심지어 CDN에 업로드해도 됨!
  10. 10. 정적 웹 사이트 제작 도구 제공 • 데이터 입력 주체 : NDC 사무국 (엔지니어가 아님)
  11. 11. 원천 데이터
  12. 12. 변환 도구의 필요성 • 백오피스를 만들어주거나, • 직접 변환을 해서 사이트 제작까지 할 수 있는 변환 도구 제공
  13. 13. 세 가지 파트의 작업 1. 세션 정보를 json 으로 변환하는 도구 2. 이를 바탕으로 제작되는 Static Website 3. 강연 자료 변환 도구
  14. 14. 세션 정보 : xlsx to json • xlsx -> json -> website • 엑셀 매크로를 제작하여, 저장 시 .json 자동 생성
  15. 15. Static website • xlsx -> json -> website • 처음에는 Single page application을 고려 – 단일 html + json • 검색엔진을 고려 : 크롤러가 세션 정보를 제대로 캐싱할 수 있도록 • 세션 별로 html 파일을 하나씩 생성 • {{NRP_*}} 로 placeholder를 만든 Template html 작성
  16. 16. Template
  17. 17. 반영 결과
  18. 18. HTML 자동 생성 • 엑셀에서 얻은 session_list.json 을 사용하여 html 생성 • Lua로 만들었음 – 이유 : 제작자가 편하니까! (매우 중요) – Lua-resty-template 이라는 템플릿 라이브러리를 사용 (복선1) • 실제 사용은 .bat 파일을 통해 진행 – 엔지니어가 아닌 사람에게는 조금 낯선 프로세스 – 툴 사용 숙련이 쌓이고 나면 괜찮아질 것이라고 생각 (복선2)
  19. 19. 변환 : pptx • iSpring 을 사용하여 HTML5/SWF Player 변환 • Iframe으로 감싸서 사용
  20. 20. 변환 : pdf • ghostscript + imageMagick 으로 이미지 변환 • pdf to jpeg + player.html 생성해주는 lua script 제작
  21. 21. 변환 : 동영상 • 동영상 – PotEncoder를 사용하여 mp4 생성 – 스트리밍 플레이에 최적화된 preset을 제작하여 제공 – 구 IE 지원을 위해 video.js 사용
  22. 22. 가이드 제작
  23. 23. 서버 • 오직 Static File만 hosting하도록 – 웹 서버 신청 시, 모든 script 실행 기능 off 요청 – 보안 검사 손쉽게 패스 – 향후 CDN 및 기타 서비스로의 손쉬운 이전이 가능
  24. 24. 오픈! • 2014년 크리스마스 이브에 최종 데이터 수정까지 완료!
  25. 25. 오픈 이후 Part B
  26. 26. 발표자: 이승재 카바티나 스토리 데스크탑 히어로즈 마비노기 2 마비노기 듀얼 NDC Replay 실버바인 서버엔진 2 (현재) @0xcafea1fa
  27. 27. 2015 • 레티나 지원, 오픈그래프(페이스북 미리보기) 등 마이너 업데이트 • 2015년 NDC 데이터 추가해서 업로드 – 데이터 입력 담당자가 2014년과 다른 분 – 입력 중에 문제가 생겨서 봐드림…
  28. 28. 2016 • 데이터 입력 담당자가 또 다른 분 2015년담당자는 군대 가심 • 엑셀에 데이터를 입력하고 ‘컴파일한다’ 는 개념을 매우 어려워함
  29. 29. 이게 아닌데…? • 애초에 왜 이렇게 만들었을까? – 가능한 한 빨리 개발하고, 개발 완료 후에는 신경쓰고 싶지 않았다 – 서버와 DB를 없앤다 = 성공 • 새 데이터를 입력하는 과정을 매년 지원해야 하네?
  30. 30. 무엇을 잘못 생각했나 • ‘그리 어렵지 않을 것이다’ – 엑셀에 입력하고 콘솔 애플리케이션으로 후처리하는 절차 – 게임 개발에서는 흔하지만 일반적으로는 대단히 낯설다! • ‘곧 숙련될 것이다’ – 1년에 한 번 쓰는 툴이므로 숙련될 틈이 없다 – 담당자도 매년 바뀐다
  31. 31. 역시 편집툴이 있어야겠다 ㅠ_ㅠ • 적어도 오피스 프로그램이나 웹 페이지처럼 생겨야 한다 • 콘솔 애플리케이션은 이제 그만…
  32. 32. 역시 편집툴이 있어야겠다 ㅠ_ㅠ • 하지만 초심을 잊지 말자
  33. 33. 데이터 저장을 S3에 한다면? • 데이터를 브라우저에서 바로 편집 가능하다면? • HTML을 브라우저에서 바로 생성 가능하다면? • DB 없이 S3 권한 관리만으로 편집툴을 만들 수 있다!!! • CloudFront에 물리면 트래픽 비용도 줄일 수 있다!!! 지금 만든다면 원본 데이터는 구글 스프레드시트에 저장하는 걸 검토할 듯
  34. 34. 새 편집툴 설계 (실제 스크린샷)
  35. 35. 새 편집툴 설계 (실제 스크린샷)
  36. 36. 왜 엑셀 형태가 아닌가? • 실수로 데이터 깨먹을 위험이 적다 • 학습곡선을 낮추기 위한 목적
  37. 37. Lua 어떡하지? • HTML을 생성하는 과정이 Lua 로 되어있다 – 엑셀에 입력한 데이터와 템플릿을 조립 – 이것이 콘솔 애플리케이션의 정체 • 웹 브라우저에서는 Lua 실행 안되죠…?
  38. 38. lua5.1.js • 루아 스크립트를 그대로 웹브라우저에서 돌릴 수 있네! • 콘솔 애플리케이션에서 썼던 코드를 그대로 가져와서 붙였음
  39. 39. 완성! • 약 2.5주말 정도 걸렸음.
  40. 40. 정리 우리는 어떤 이야기를 하고 싶었나
  41. 41. 정석이란 무엇인가 “바둑에서 공격과 수비에 최선이라고 인정된 수를 두어 나타난 균형잡힌 일련의 수순을 말한다.” 한국어 위키백과 <정석(바둑)>
  42. 42. 정석이 정석인 데는 이유가 있다 3티어 아키텍처: 브라우저-웹서버-데이터베이스 • 훌륭한 보안 • 높은 성능 • 확장성 • … http://wingedpost.org/2014/09/easy-lesson-on-1-tier-vs-2-tier-vs-3-tier/
  43. 43. 정석이 정석인 데는 이유가 있지만, • 사이드 프로젝트이므로 비용을 극단적으로 줄이고 싶었다. – 웹서버와 데이터베이스는 비싸다. – 개발하기에도, 설치하기에도, 운용하기에도. 정석을 이해했다면 깰 수도 있다.
  44. 44. 정석을 쓰지 않아서 생긴 단점 • 동시에 두 명이 편집하지 못한다 – 수백KB짜리 JSON을 한번에 읽고 쓰고 하니까.. – 머지가 불가능한 건 아니지만 굳이 만들지 않았다 동시에 두 명이 편집하는 일 자체가 굳이 필요한가?
  45. 45. 정석을 쓰지 않아서 생긴 단점 • 권한을 세밀하게 통제할 수 없다 – ‘이 사람에게는 2017년 데이터에 대한 권한만 부여한다’ 이런 거 안 됨 – 그러나 필요한가? 정말로? 들일 시간만큼의 가치가 있나?
  46. 46. 웹에서 Lua도 정석이 아니다 • 에뮬레이션으로 동작하므로 당연히 성능저하가 있다 – 저장할 때 지연시간이 약간 있지만 거의 느껴지지 않는다 시간을 들여 JavaScript로 다시 개발할 필요 있나?
  47. 47. 결정하기 전에 스스로에게 묻자 • 이렇게 하는 게 최선인가? • 반드시 해야 하는 일인가? • 그것이 정석이라고 할지라도.
  48. 48. 끝 저희가 NDC Replay를 만들었습니다

×