유희왕 전개표 생성기 구현

가끔가다 내가 굴리는 유희왕 덱에 대해서 블로그에 글을 쓰는 경우가 있는데, 이때 전개 영상을 찍어 업로드하는 경우가 있었다.

워낙 복잡한 전개야 직접해봐야 알기도하고, 나중에 다시 복기할때도 필요하기는해서 그렇게 해왔다.

그때 자주 사용했던 사이트가 어떤 개발자분이 만든 듀얼 시뮬레이터 였다.

이 듀얼시뮬레이터는 직접 내가 카드를 전개하면서 이를 순차적 데이터로 남길 수 있는 아주 휼륭한 사이트이긴한데, 문제는 나중에 전개루트만 빠르게 보고싶을때, 매번 사이트에 들어가서 다시 리플레이를 해보던지, 이를 영상으로 찍어남겨서 다시볼 수 밖에 없었다.

이래서 전개 과정을 통틀어서 표현해주는 무언가 있으면 좋겠다 생각했던 찰나, 작년에 디씨의 어느 유저분이 유희왕 전개 루트 빌더 라는 기능을 만들어줬다.

전개과정을 웹에서 입력하면 이를 표 형태로 만들어주는 사이트였다.

일단 기존의 시뮬레이터와 다르게 이미지로 결과가 나오는 특성상, 이미지만 나중에 저장해서 전개법을 확인하기도 편했다.

다만 결과 UI라던지 카드 이미지를 일일히 준비해야 한다는점이 약간 아쉬웠다.

그래서 이 2개의 좋은기능을 합한 기능을 만들어 보고싶었고, 내가 원하는 출력 디자인으로 표현해보고 싶은 생각이들어 오랜만에 블로그에 툴기능을 새로 만들어 보았다.

그게 바로 이번 글에서 소개하고자 하는 유희왕 전개표 생성기이다.

좀 이름이 투박해보이지만, 딱히 괜찮은 네이밍도 생각이 안나서...

뭐 이름답게 해당 페이지 기능의 목적은 '전개표 생성기'다.

전개표라고하면 아래 이미지와 같은걸 뜻한다.

특정 패로 시작하는 전개과정을 일목 요연하게 표현하고, 해당 전개로 나오는 필드 상황, 패와 묘지, 제외존의 상황을 하나의 이미지로 표현해준것을 말한다.

이 과정을 제작하기 위해서는 우선되어야 하는 작업이 있는데, 전개표에 사용할 카드 이미지를 구하는 것이다.

하지만 이런 이미지를 구하는것도 일이고, 이미지관리하는것도 힘들기 때문에, 내 생성기에서는 '유희왕 뉴런'에서 추출해 얻을 수 있는 덱 이미지를 바탕으로 카드를 파싱해서 이를 이용해 전개루트를 입력할 수 있게 구현했다.

이 덱 이미지 분석을 처음에는 자동으로 처리하게 하고싶었는데, 그렇게하면 생각보다 예외사항이 많이 생겨서 나같은 경우엔 메인덱 카드수와 엑스트라 덱 카드수를 입력하면 해당위치값에 맞게 카드를 파싱하는 방법을 선택했다.

이렇게 덱 이미지 파싱작업이 끝나면 Step2 에서 전개 단계 입력 작업을 시작할 수 있다.

해당 영역엔 여러가지 버튼이 있는데, 각각 다음과 같은 역할을 수행한다.

+: 카드 추가
-: 왼쪽 카드(단계)삭제

〉: 처리 단계 추가(보통 효과처리 구분에 사용)

→: 다음 행 추가

쉽게 말해서 행동의 단위가 행이라고 보면 되고, 한 행에서 연속된 처리를 〉 단계로 구분한다고 보면 될 것 같다.

그래서 아래와 같이 전개 과정을 입력할 수 있다.

이때 + 버튼을 누르면 아래와 같이 모달창이 뜨며, 위에서 입력받은 덱리스트에 매칭되는 카드이미지들과 더불어 코스트용 카드표기를 위한 뒷면 카드 이미지, 토큰 이미지등을 선택할 수 있다.

이렇게 추가된 카드이미지를 클릭하면 다른 이미지로 교체하거나 [비우기]를 통해 선택된 카드 단계를 지우는 것이 가능하다.

전개 과정 입력이 끝나면 추가적으로 필드 정보와 패/묘지/제외존의 카드 정보를 입력할 수 있는 단계가 나온다.

이 단계는 전개루트에서 보여주는 보조적인 정보역할을 하며 위의 전개 과정입력과 똑같은 방식으로 카드를 추가하거나 삭제할 수 있다.

입력하지 않은 정보는 최종 출력에 포함되지 않는다.

이렇게 전개 단계와 필드 정보 입력이 완료되면 [전개표 이미지 생성] 버튼을 통해 이미지를 생성할 수 있다.

이 이미지는 위에 적은 전개과정과 필드 정보의 모든 구성을 그대로 저장한다.

그리고 만약 전개과정이 비어있거나 필드정보 따위가 비어있으면 해당 영역은 랜더링되지 않는다.

그래서 위와같이 내가 필요한 정보만 취사선택으로 얻어낼 수 있는게 장점이다.

만약에 어떤 덱이 낼 수 있는 최종 필드만 빠르게 공유하자면 전개과정을 싹 빼고 필드만 채운 후 이미지 생성을 하면 깔끔하게 유희왕 필드에 맞는 보드 이미지만 출력할수도 있다는 것!

이 기능을 만들때 나는 최대한 사용자의 정보를 저장하지 않으려고 구상중이다.

개인정보는 아니지만 여러 사용자의 정보를 저장해봤자 침해사실만 날뿐이고 사이트를 개인적으로 운용하는입장에서도 비용문제도 발생하고 말이다.

그래서 이번에도 사용자의 브라우저 로컬 스토리지에 작성내용을 저장할 수 있는 기능을 고안해보았다.

로컬 데이터 저장 버튼은 가장 하단에 전개표이미지 생성, 이미지 저장 버튼 근처에서 찾을 수 있다.

한 브러우저당 최대 1개의 저장데이터만 저장할 수 있다.

실제로 올려준 덱 리스트 이미지를 깡으로 저장해야하서 여러개 저장을하면 로컬스토리지 용량을 초과하는 문제가 발생하기 때문이다.

이렇게 저장된 정보는 이전에 저장했던 브라우저와 같은 브라우저면 언제든지 불러오기 버튼을 통해 덱리스트 이미지부터 전개과정, 필드 정보까지 전부 불러올 수 있다.

덱리스트 이미지 업로드부분에서 로컬로 저장된 데이터가 있다면 [로컬 데이터 불러오기]버튼이 표시되고 이를 누르면 위 이미지와 같이 기존 덱리스트 정보를 불러올 수 있다.

여러가지로 연구할 때 롤백하면서 사용하기 좋은 기능이다.

워낙 기존에 만들어져 있는 훌륭한 레퍼런스도 있고 하다보니 나는 내가 필요한 기능에 맞춰서 고도화 하듯이 작업하다보니까 꽤나 그럴듯 하게 만들 수 있었다.

먼저 만들어주신분들게 참 감사할 따름이다.

이제 이 기능을 이용해 여러가지 전개법을 이미지로 기록을 남길 수 있다!

야호!