ReactJS로 게임을 만드는것은 쉬운일이 아니었습니다.

ReactJS로 게임을 만드는것은 쉬운일이 아니었습니다. HTML Canvas 사용을 최소화 하면서 크게 두 가지 문제점이 존재했습니다. 1. Component들을 원하는 위치로 Dynamic하게 이동시키는것이 어려움 2. 이펙트를 출력하는데에 특별한 테크닉이 필요 사실 웹 게임을 만들 때 React를 사용하는 일은 적정기술이 아니라고 볼 수도 있겠습니다. 하지만, 웹 기술자들로 이루어진 집단에서 최대한 빠른 개발속도를 유지하면서도 간단한 게임을 구현하는 일은 불가능한 일이 아니었어요. 첫번째 문제는, 가까운 거리는 css transform으로, 먼 거리는 이펙트를 활용한 순간이동으로 처리했습니다. TCG 게임 특성상 굳이 모든 카드들이 먼 거리를 이동해야 할 필요는 없었습니다. 기획적인 부분을 다소 타협하여 아래와 같이 카드를 선택하고 이동 시키는 방식으로 표현하였습니다. 두 번째 문제는, 화면에 어떤 이펙트를 원하는 시점에 표현하는 일은 <Img> 태그로 불가능 하다는 점 입니다. 물론 gif나 apng파일을 활용하면 불가능하지 않지만, 재생 관리와 용량 문제가 심각했어요. 따라서, PixiJS라는 <canvas> 조작 라이브러리를 활용하여 이펙트가 나오는 시점에 화면 전체에 투명 Canvas를 순간적으로 덮어씌워 Spritesheet로 이펙트를 출력하였습니다. 이펙트 랜더링 시스템은 자체 개발하여 활용중이며 ReactJS와 꽤나 잘 어울려서 현재까지도 다양한 부분에서 유용하게 사용하고 있습니다. 요즘 웹 프로덕트들을 보면 정말 괴랄한 퀄리티를 자랑하는 것들이 많이 보입니다. 대부분 Canvas 기술을 활용하여 제작하고 있더군요. 저희는 ReactJS 개발 방식을 지지고 볶아서 어떻게든 컴포넌트들로 구성해서 만들어 보려고 했고, FE기술자들의 쉬운 접근과 빠른개발속도 라는 장점을 얻었습니다.