1. static website, static backoffice
NDC 2017
이승재, 박경재

2. 오픈까지
Part A

3. 발표자: 박경재
카트라이더
던전 앤 파이터
에버플래닛
피파 온라인 3
메이플스토리2
NDC Replay
@compmgmt

4. NDC TF
NDC 사무국과의 업무 협업
• 세션 심사
• 본 발표 세션 피드백 제공
• NDC 다시보기 사이트 제작/관리

7. NDC Replay

8. 보통의 서비스 개발 과정
• “NDC Replay” 를 서비스하는 웹 애플리케이션 개발
• 이를 위한 데이터베이스 생성 및 연결
• ‘적절한’ 로드 밸런싱 및 백업 플랜 준비
• 매년 NDC가 열릴 때마다 업데이트
– NDC 사무국으로부터 데이터를 받아서 가공 후 업로드
<또는>
– 전용 백오피스를 별도로 제작하여 NDC 사무국에 제공

9. 고민
• 개발자는 단 두 명이다. 게다가 풀 타임이 아니다.
• 서버라는 것은 관리를 필요로 한다
– 죽을 수도 있습니다
– 해킹당할 수도 있습니다
– 업데이트를 해야 하는 경우도 있습니다
• 1년에 한 번 크게 내용이 바뀌고, 그 사이에는 거의 변화가 없다

10. 방향
• “만들어놓고 잊어버릴 수 있는” 사이트 만들기
• 연계 서비스를 최소화
• 유지보수는 최대한 하지 않도록
• 개발자 도움 없이 self-service + update 가능하도록

11. 웹 애플리케이션을 만들 필요 있나?
• 사이트를 모두 다 static html으로 만들자!
 서버 취약점, 업데이트 이슈 없어짐
 서버의 구성이 매우 단순해짐
 심지어 CDN에 업로드해도 됨!

12. 정적 웹 사이트 제작 도구 제공
• 데이터 입력 주체 : NDC 사무국 (엔지니어가 아님)

13. 원천 데이터

14. 변환 도구의 필요성
• 백오피스를 만들어주거나,
• 직접 변환을 해서 사이트 제작까지 할 수 있는 변환 도구 제공

15. 세 가지 파트의 작업
1. 세션 정보를 json 으로 변환하는 도구
2. 이를 바탕으로 제작되는 Static Website
3. 강연 자료 변환 도구

16. 세션 정보 : xlsx to json
• xlsx -> json -> website
• 엑셀 매크로를 제작하여, 저장 시 .json 자동 생성

17. Static website
• xlsx -> json -> website
• 처음에는 Single page application을 고려
– 단일 html + json
• 검색엔진을 고려 : 크롤러가 세션 정보를 제대로 캐싱할 수 있도록
• 세션 별로 html 파일을 하나씩 생성
• {{NRP_*}} 로 placeholder를 만든 Template html 작성

18. Template

19. 반영 결과

21. HTML 자동 생성
• 엑셀에서 얻은 session_list.json 을 사용하여 html 생성
• Lua로 만들었음
– 이유 : 제작자가 편하니까! (매우 중요)
– Lua-resty-template 이라는 템플릿 라이브러리를 사용 (복선1)
• 실제 사용은 .bat 파일을 통해 진행
– 엔지니어가 아닌 사람에게는 조금 낯선 프로세스
– 툴 사용 숙련이 쌓이고 나면 괜찮아질 것이라고 생각 (복선2)

22. 변환 : pptx
• iSpring 을 사용하여 HTML5/SWF Player 변환
• Iframe으로 감싸서 사용

23. 변환 : pdf
• ghostscript + imageMagick 으로 이미지 변환
• pdf to jpeg + player.html 생성해주는 lua script 제작

24. 변환 : 동영상
• 동영상
– PotEncoder를 사용하여 mp4 생성
– 스트리밍 플레이에 최적화된 preset을 제작하여 제공
– 구 IE 지원을 위해 video.js 사용

25. 가이드 제작

26. 서버
• 오직 Static File만 hosting하도록
– 웹 서버 신청 시, 모든 script 실행 기능 off 요청
– 보안 검사 손쉽게 패스
– 향후 CDN 및 기타 서비스로의 손쉬운 이전이 가능

27. 오픈!
• 2014년 크리스마스 이브에
최종 데이터 수정까지 완료!

28. 오픈 이후
Part B

29. 발표자: 이승재
카바티나 스토리
데스크탑 히어로즈
마비노기 2
마비노기 듀얼
NDC Replay
실버바인 서버엔진 2 (현재)
@0xcafea1fa

30. 2015
• 레티나 지원, 오픈그래프(페이스북 미리보기) 등 마이너 업데이트
• 2015년 NDC 데이터 추가해서 업로드
– 데이터 입력 담당자가 2014년과 다른 분
– 입력 중에 문제가 생겨서 봐드림…

31. 2016
• 데이터 입력 담당자가 또 다른 분 2015년담당자는 군대 가심
• 엑셀에 데이터를 입력하고 ‘컴파일한다’ 는 개념을 매우 어려워함

32. 이게 아닌데…?
• 애초에 왜 이렇게 만들었을까?
– 가능한 한 빨리 개발하고, 개발 완료 후에는 신경쓰고 싶지 않았다
– 서버와 DB를 없앤다 = 성공
• 새 데이터를 입력하는 과정을 매년 지원해야 하네?

33. 무엇을 잘못 생각했나
• ‘그리 어렵지 않을 것이다’
– 엑셀에 입력하고 콘솔 애플리케이션으로 후처리하는 절차
– 게임 개발에서는 흔하지만 일반적으로는 대단히 낯설다!
• ‘곧 숙련될 것이다’
– 1년에 한 번 쓰는 툴이므로 숙련될 틈이 없다
– 담당자도 매년 바뀐다

34. 역시 편집툴이 있어야겠다 ㅠ_ㅠ
• 적어도 오피스 프로그램이나 웹 페이지처럼 생겨야 한다
• 콘솔 애플리케이션은 이제 그만…

35. 역시 편집툴이 있어야겠다 ㅠ_ㅠ
• 하지만 초심을 잊지 말자

36. 데이터 저장을 S3에 한다면?
• 데이터를 브라우저에서 바로 편집 가능하다면?
• HTML을 브라우저에서 바로 생성 가능하다면?
• DB 없이 S3 권한 관리만으로 편집툴을 만들 수 있다!!!
• CloudFront에 물리면 트래픽 비용도 줄일 수 있다!!!
지금 만든다면 원본 데이터는 구글 스프레드시트에 저장하는 걸 검토할 듯

37. 새 편집툴 설계 (실제 스크린샷)

38. 새 편집툴 설계 (실제 스크린샷)

39. 왜 엑셀 형태가 아닌가?
• 실수로 데이터 깨먹을 위험이 적다
• 학습곡선을 낮추기 위한 목적

40. Lua 어떡하지?
• HTML을 생성하는 과정이 Lua 로 되어있다
– 엑셀에 입력한 데이터와 템플릿을 조립
– 이것이 콘솔 애플리케이션의 정체
• 웹 브라우저에서는 Lua 실행 안되죠…?

41. lua5.1.js
• 루아 스크립트를 그대로 웹브라우저에서 돌릴 수 있네!
• 콘솔 애플리케이션에서 썼던 코드를 그대로 가져와서 붙였음

42. 완성!
• 약 2.5주말 정도 걸렸음.

43. 정리
우리는 어떤 이야기를 하고 싶었나

44. 정석이란 무엇인가
“바둑에서 공격과 수비에 최선이라고 인정된 수를 두어
나타난 균형잡힌 일련의 수순을 말한다.”
한국어 위키백과 <정석(바둑)>

45. 정석이 정석인 데는 이유가 있다
3티어 아키텍처: 브라우저-웹서버-데이터베이스
• 훌륭한 보안
• 높은 성능
• 확장성
• …
http://wingedpost.org/2014/09/easy-lesson-on-1-tier-vs-2-tier-vs-3-tier/

46. 정석이 정석인 데는 이유가 있지만,
• 사이드 프로젝트이므로 비용을 극단적으로 줄이고 싶었다.
– 웹서버와 데이터베이스는 비싸다.
– 개발하기에도, 설치하기에도, 운용하기에도.
정석을 이해했다면 깰 수도 있다.

47. 정석을 쓰지 않아서 생긴 단점
• 동시에 두 명이 편집하지 못한다
– 수백KB짜리 JSON을 한번에 읽고 쓰고 하니까..
– 머지가 불가능한 건 아니지만 굳이 만들지 않았다
동시에 두 명이 편집하는 일 자체가 굳이 필요한가?

48. 정석을 쓰지 않아서 생긴 단점
• 권한을 세밀하게 통제할 수 없다
– ‘이 사람에게는 2017년 데이터에 대한 권한만 부여한다’ 이런 거 안 됨
– 그러나 필요한가? 정말로?
들일 시간만큼의 가치가 있나?

49. 웹에서 Lua도 정석이 아니다
• 에뮬레이션으로 동작하므로 당연히 성능저하가 있다
– 저장할 때 지연시간이 약간 있지만 거의 느껴지지 않는다
시간을 들여 JavaScript로 다시 개발할 필요 있나?

50. 결정하기 전에 스스로에게 묻자
• 이렇게 하는 게 최선인가?
• 반드시 해야 하는 일인가?
• 그것이 정석이라고 할지라도.

51. 끝
저희가 NDC Replay를 만들었습니다