[2일차] 던전앤파이터 게임 그래픽 리소스를 활용한 실시간 웹 이미지 조합

이번 강의는 게임그래픽 리소스를 활용한 실시간 웹 이미지 조합에 관한 내용인데

던파쇼룸 (http://df.nexon.com/df/showroom)을 어떻게 만들었는지. 문제는 뭐였는지 거기에 대한 이야기였다.

목적

그래픽 리소스 활용하여 웹/앱으로 서비스 위한 아키텍처 및 노하우 공유

개요

- 웹에서 미리 입혀보기 가능하게

- 내 캐릭터가 웹/앱에서 보이게

- 서비스구현 단계적 목표

1. 클라이언트 이미지처리 R&D

2. 게임 리소스 → 웹 리소스 변환

3. 이미지 조합 서버 구축 (api서버)

통상 웹에서 이미지란?

거의 변하지 않는 정적 리소스

하지만 아바타 조합은 이미지가 굉장히 많이 변함.

게임 리소스를 웹으로

원래는 1차 아키텍처 방식으로 사내망에서 클라이언트 복호화. meta data 추출. png 추출 → 데이터 정제하면

공용망에서 이미지서버 → CDN → 웹/앱에서 이미지 조합하여 보내줌

이렇게 하려고 했으나 

2차 아키텍처 방식으로 변경하게 됨.

png 추출 및 웹,앱에서 이미지조합 하지않고 이미지 서버에서 실시간으로 조합하여 조합한 이미지를 보내줌

2차 아키텍처로 변경한 이유

이슈사항

아바타 개수 - 약 69000개

아바타 파일수 - 각 아이템당 평균 3개 레이어

레이어 개수 - 각 아바타 파일에 최소 150프레임

69000 * 3 * 150 = 약 3천만.

보안측면

Front단(웹, 앱)에서 실제조합 → 클라이언트 로직 노출

시스템 확장성 측면

정적 리소스 그대로하니 포토샵 등의 적용이 힘듬

변경하자니 문제점.

클라이언트에서 어떻게 추출하지?

추출하면 어떤 로직으로 조합?

I/O가 많이 일어날텐데? 메모리는? CPU는?

Image Origin Server 구축

클라이언트 이미지처리 로직/구조 분석하여 자체적으로 구축

개발환경 - Java 1.8 / Java NIO / Spring boot 1.5.6 / Embedded Tomcat 8.5.16 / Scouter 1.7.1

자세한 내용은 위의 슬라이드 참조.