메이플 커마 - 메애기 코디 분석 및 공유 서비스 공개

메이플 커마 - 메애기 코디 분석 및 공유 서비스 공개

2023. 1. 29. 15:40ㆍDevelop/Javascript

728x90

https://maple.curma.cc

메이플 코디 공유

메이플스토리의 다양한 유저들의 코디를 확인하고 내 코디를 공유해보세요! 가장 많이 사용한 코디부터 같은 부위를 사용한 다른 코디까지 지금 바로 만나 보실수 있어요!

maple.curma.cc

메이플 커마는 메이플스토리 캐릭터의 코디 정보를 분석 및 공유하는 써드파티 서비스입니다.

개발 계기

메이플 스토리의 코디 정보를 보여주는 메이플지지의 경우는 캐릭터명을 통한 검색이며, 특정 캐릭터에 대한 빅데이터를 모아 해당 캐릭터의 통계 그리고 전체 빅데이터를 가지고 다시 전체 통계를 산출하는 등의 서비스 입니다.

메이플 지지의 코디 컬렉션은 극히 일부 기능일 뿐입니다.

또한, 메이플 스토리 공식홈페이지에 게시되어 있는 코디 베스트라는 기능이 있습니다.

코디 베스트는 코디/룩 정보 없이 그냥 자랑하는 기능이며 이를 추천 등의 액션을 통해서 주간 베스트를 적용합니다.

마지막으로 대부분의 코디 관련 써드파티 서비스들은 DB화가 아닌 JAM Stack 위주의 정적서비스로 개발되어

https://maplestory.io 에 요청을 보내어 시뮬레이션을 하는 서비스가 대 다수 입니다.

위와 같은 3가지 서비스들은 다 각기 다른 목적을 가지고 있지만, 공통적으로는 코디라는 카테고리가 있습니다.

저는 시뮬레이션하기는 귀찮고 다른사람들이 특정 아이템을 가지고 각기 다른 코디를 한 것을 볼 수 있으면 어떨까? 라는 계기로

개발을 진행하게 되었습니다.

개발 과정 문제

초기 버전 출시 당시의 메이플 커마는 메이플 금손이라는 이름으로 런칭하였습니다.

처음에는 아바타 정보를 역산하지 못하였고, 유저들이 로그인 후 자유롭게 수정할 수 있는 모습으로 출시되었습니다.

또 초기 배포 당시에는 Nuxt3 프레임워크가 예상치 못한 이슈가 있었는데, Cloudflare Pages Functions로 배포시

GET 메소드를 제외하고는 사용하지 못한다는 문제를 출시 직전에 발견하였습니다.

급하게 Cloudflare Worker로 API를 만들어 출시하였었지만, 앞으로도 Cloudflare Pages를 계속해서 이용할텐데 Nuxt는 이제 2버전에 이어 여전히 꼭 나사가 몇개씩 빠져있어서 앞으로는 일할때 요구하지 않는 이상 사용하지는 않을듯 합니다.

코디 분석

출시 이후 페타코님의 도움을 받아 아바타 주소에 대한 역산을 적용하였습니다.

이로 인해 초기 버전에서 사용되었던 코디 정보 수정 기능을 과감하게 제거하였고, 아바타 주소 역산으로만 동작하게 됩니다.

역산의 경우 일부 오탐이 있으며 대략 정확도는 95% 이상이라고 추측하고 있습니다.

오탐은 피부 그리고 성형에서 발견되며, 성형의 경우 오탐 발견시 버그 제보를 통해 제보해주시거나 별도의 연락 또는 개인적으로 발견시 DB에 강제 주입하거나 매핑을 교체하는식으로 적용할 수 있게 DB 모델을 설계하였습니다.

메이플 지지의 코디분석 기능과 비교

메이플 지지에서는 표기되는 부위가 총 7부위 입니다. 위 캐릭터의 경우 모자와 헤어 총 2가지 부위 밖에 역산되지 않았습니다.

메이플 커마에서는 총 15부위를 역산합니다.

한벌옷이 추출되는 경우에는 상의/하의가 표기되지 않으며, 반대로 상의/하의가 추출된 경우 한벌옷이 추출되지 않습니다.

아바타 주소 역산하기

메이플 지지 코디 컬렉션 응용편

메이플 지지는 최대 6개까지 지난 코디의 아바타를 보여주게됩니다.

지난 코디의 이미지는 보여주지만 해당 아바타의 코디 정보를 볼 수는 없기 때문에 많이 아쉬운 부분이 있었습니다.

하지만 이를 메이플 커마에서 분석이 가능합니다.

메이플 지지에서 정보를 추출하고 싶은 컬렉션의 이미지에 마우스 우클릭 후 `이미지 주소 복사` 를 클릭합니다.

메이플 커마의 메인페이지에 있는 입력창에 아바타 주소 붙여넣기 후 검색을 누르면

https://maple.curma.cc/characters/266194

즉시 주소를 역산후 DB에 자동등록되며 분석된 경로로 자동 이동되어 정보를 보여주게 됩니다.

기존에는 클라이언트에서 이 과정을 진행하였지만, 일부 호환되지 않는 기기 및 웹 표준기술을 지키지 않는 아이폰의 Safari 브라우저 등에서 정보 추출이 진행되지 않는 문제가 발생하여 이를 서버에서 역산하도록 변경하였습니다.

캐릭터 이름을 통한 검색도 지원하지만, 아바타 주소와는 다르게 메이플 스토리 랭킹서버에서 해당 캐릭터를 조회후 아바타 주소를 추출하여 역산하는 과정을 거치기 때문에, 상대적으로 주소 입력 방식보다는 느린 이슈가 있습니다.

아바타 주소 역산 속도는 평균 0.007초 정도 소요 됩니다.

하지만 데이터베이스에 등록하는 과정또는 캐릭터를 검색하는 과정 등으로 인해 시간이 좀 더 소요됩니다.

최대 10초 이상 응답하지 않는 경우 새로고침을 권장드립니다.

같은 부위 다른 코디

처음 메이플 커마를 설계할 당시 가장 먼저 염두에 두었던 기능입니다.

같은 부위를 사용한 다른 유저의 다른 코디를 보고 싶었기에 해당 기능을 추가하였습니다.

분석된 코디의 각 부위에 대한 모든 다른 코디를 보여주게 되며, 해당 부위에 다른 유저 코디가 없는경우 노출되지 않습니다.

앞에서 말씀드렸던것 처럼 피부에서는 오탐이 발견되었습니다.

하지만 피부의 경우는 성형과다르게 매핑을 수정할 수 없어서 아직도 어떻게 할지는 고민중입니다.

캐릭터 이미지 관련 기능

코디 분석 결과에서 캐릭터 이미지에 마우스를 올려보시면 위 이미지 와 같이 3가지의 아이콘 버튼이 보여지게됩니다.

좌측 화살표 4개가 있는 아이콘의 경우는 위 이미지들과 같이 망토가 보이는 이미지로 축소 또는 확대하는 버튼입니다.

우측 2가지는 각각 클립보드 복사(좌)와 저장 버튼(우)입니다.

클립보드 복사의 경우 일부 유저분들이 카톡이나 디스코드 등의 메신저로 다운받지 않고 바로 전송할 수 있도록 또는

일부 메이플스토리 유튜브 편집자 분들께서 좀더 편하게 일하시라고 추가해본 기능입니다.

저장시 파일명은 아바타 주소를 파일명으로 저장되기 때문에 나중에 까먹으셔도 파일명을 통해 주소를 이어붙이면 언제든 검색이 가능합니다.

코디 정보 하단 버튼 기능

코디 정보에서는 위 이미지와 같이 3가지 버튼이 있습니다.

- 좌측 버튼은 코디 정보카드의 색상을 변경하는 기능입니다.

- 가운데는 코디 정보 카드를 이미지로 저장하는 기능입니다.

- 우측 버튼은 해당 코디 정보 페이지의 주소를 클립보드로 복사하여 공유하는 기능입니다.

통계

통계는 처음에 서비스가 너무 밋밋한 느낌이있어서 추가한 기능입니다.

총 15부위에 대한 적용 비율과 횟수에 대한 통계치이며, 이 통계 수치는 메이플 커마에 등록된 캐릭터들의 정보를 기반으로 집계 및 산출되었습니다.

쿼리 성능의 문제가 있어서 최대 100개 까지만 노출됩니다.

믹염(믹스염색) 헤어

메이플지지는 믹염에서 헤어 종류가 너무 적거나, 시뮬레이터 서비스들은 비율이 즉각 반영 안되는 이슈들이 있어서

그냥 제가 보려고 만든 기능이었는데 생각보다 분석 기능 만큼 많이들 좋아해주신 기능입니다.

- 믹염은 항상 최신헤어가 먼저 노출됩니다.

- 믹염은 매일 오전 10시에 정보를 동기화합니다.

- 모바일에서 볼때도 색상에 대한 구분이 쉽도록 컬러표가 아닌, 텍스트로 색상을 표기하였습니다.

믹스 렌즈

믹스 렌즈는 믹염의 반응이 더 좋아진다면 적용해볼 예정입니다.

믹염 + 믹렌은 경우의수가 대충 계산해도 170만개의 이미지를 들고있어야 해서 할지 말지 고민중입니다...

적용 가능한 방법도 모색중이긴 합니다.

이미지 로드 방식

믹염을 제외한 이미지의 경우는 넥슨사의 메이플 아바타 CDN으로부터 이미지를 획득하게 됩니다.

하지만 메이플 커마는 목록에서 기본적으로 200개의 캐릭터 이미지를 불러오기 때문에 과도한 요청으로 해당 서버가 받을 부담이 매우 클거라 생각하여, 별도의 이미지 프록시를 적용하였습니다.

이미지 프록시 서버를 통해서 넥슨 CDN에서는 제공하지 않는 캐시 컨트롤을 적용함으로써 1차적으로 브라우저 캐시 2차적으로는 Cloudflare사의 CDN Edge Cache가 적용됩니다.

프록시 서버로부터 오류가 발생할 경우 자동으로 넥슨 CDN으로 요청하게 됩니다.

버그제보 / 문의 / 피드백

페이지 하단에 버그제보 및 문의 피드백 등이 존재합니다.

클릭시 커마 서비스의 디스코드 서버로 연결됩니다.

API 공유

아이템 정보 및 믹염 헤어 동기화 과정

https://maplestory.io 여기서 아이템 정보 및 헤어 정보 그리고 이미지를 동기화합니다.

해당 API로부터 받은 정보이기 때문에, 저 또한 CORS 없이 적용하였습니다. 해당 정보들은 정적사이트를 통해 배포하였기 때문에 무료로 운영되고 있어서 다른분들이 가져다가 쓰셔도 되도록 하였습니다.

maplestory.io가 KMST 를 빠르게 반영해준다면, KMS에 적용되기전에 믹염 정보가 반영될 수 있기 때문에

미리 믹염 비율을 조정하고 헤어를 확인해볼 수 있습니다.

동기화 버전 정보

https://api.maple.curma.cc/version.json

어떤 버전으로 적용되어 있는지 확인할 수 있습니다.

region은 메이플스토리 한국 서버기준으로는 KMS와 KMST가 있으며, KMST는 테스트서버를 의미합니다.

version의 1150은 KMST의 1.2.150 버전을 의미합니다.

createdAt 은 해당 정보를 동기화를 하여 파일을 생성한 시각입니다.

동기화 단일 아이템 정보

https://api.maple.curma.cc/singles.json

주로 메이플 커마 검색에 사용되는 기능입니다.

색상이 함께 표기되는 아이템은 색상 명을 제거하였고, 중복된 아이템명은 제거하였습니다.

part는 어떤 부위인지를 나타내는 정보입니다.

동기화 헤어 정보

https://api.maple.curma.cc/hairs.json

메이플 커마 믹염에서 노출되는 헤어 종류입니다.

gender는 성별을 의미하지만, maplestory.io 에서 일부 헤어 성별이 잘못 지정된 경우가 있습니다.

메이플 커마에서는 별도의 필터링을 거쳐서 표기하고 있지만, API를 사용하실때는 이를 유의해서 사용하셔야 합니다.

동기화된 헤어 이미지

https://api.maple.curma.cc/hairs/<hairId>.png

https://api.maple.curma.cc/hairs/64397.png

hairs 목록에 존재하는 헤어 이미지는 위 주소처럼 요청하실 수 있습니다.

메이플 커마 믹염에 설명된것 처럼 호수물결 조용한 눈얼굴 등을 사용하였습니다.

이미지는 각 개별로 저장하기엔 사용자가 요청하는 구간이 너무 많아서 sprite 방식으로 변경할지는 아직 고민중에 있습니다.

카카오 링크 미리보기 공유 출력안됨

카카오 개발 커뮤니티를 통해서 문의를 진행해둔 상황이긴합니다.

Cloudflare 를 무료 버전으로 사용할때는 아래 링크처럼 메이플 커마는 정상 동작합니다.

https://maple.curma.cc/characters/266229

266229번 코디

[BLACKPINK] 베놈 시크, 주황색 안개 셀린 헤어, 졸린 조용한 얼굴, 투명 안경, 아련한 메이크업, 체인드롭 이어링, 밀키 피부, 칠흑의 날개 코트, 큐티 펑크 구두, 투명 장갑, 은하 음악회, 미스터리

maple.curma.cc

하지만 Cloudflare Pro를 유료 버전을 적용한 경우 아래와 같이 노출되지 않는 문제가 있습니다.

https://goldenhand.pro/arts/3UVigKoQJj

이 부분은 카카오측과 클라우드플레어사 측에서 개선을 해야겠지만, 저 또한 양측을 이용하는 유저로써 또 앞으로 cloudflare를 통해서 서비스하는 유저들이 있을 수 있으니 지속된 발전을 위해 계속해서 협력할 것 입니다.

자매품

커마는 서브도메인을 통해 예측하셨겠지만, 메이플스토리 말고도 다른 서비스가 존재합니다.

현재는 아직 광고 심사를 위해서 연결하지 않았지만, 자매품으로 로스트아크, 프롬프트가 존재합니다.

던파의 경우 현재 개발 과정중에 있습니다.

던파가 완료되면, 로스트아크 커마와 프롬프트 커마가 분리 및 개편이 대대적으로 적용될 예정입니다.

로스트아크: https://goldenhand.pro

프롬프트: https://goldenhand.pro/arts

긴글 읽어주셔서 감사합니다.

커마에 추가되었으면 하는 게임이 있다면 언제든 디스코드를 통해 연락주세요!

선코디 후육성이 되는 그날까지...