📖 내용

• NEXON에서 제공하는 OPEN API 를 사용하여 메이플스토리 캐릭터에 관한 정보를 인게임 UI처럼 확인할 수 있는 메싹싹 사이트를 제작하였습니다.

🤔 프로젝트 선정 이유

• 사실 처음부터 OPEN API를 사용해서 프로젝트를 만들 생각은 아니었습니다.

• 넥슨에서 이런 것도 제공 하는구나? 라는 생각으로 API 를 구경하다가 공부도 해볼 겸, 토이 프로젝트로 한번 만들어보자라는 가벼운 마음으로 시작했었는데, 만들다보니 생각보다 재미있어서 쭉 진행하게 된 것 같습니다.

• 평소에 하던 게임이다 보니 어떠한 방식으로 구현하였을 때 사용자가 보기 편하겠다! 라는 생각이 여타 프로젝트를 진행할 때 보다 쉽게 떠올릴 수 있었습니다.

🍁 메이플스토리 OPEN API 🍁

• 넥슨에서 제공하는 메이플스토리 OPEN API 입니다. 좌측 바를 확인하면 캐릭터, 유니온, 길드, 확률 정보, 랭킹, 공지 파트로 나뉜 걸 볼 수 있습니다.

• 메이플스토리를 플레이해보신 분들은 아시겠지만 캐릭터의 정보를 확인하였을 때 볼 수 있는 정보는 캐릭터, 유니온, 길드 정도 이기에 이 부분을 중점적으로 확인 하였습니다.

• 캐릭터의 기본 정보를 조회하기 위해 요청 시 필요한 Parameter 입니다.

• 필수로 받는 x-nxopen-api-key 의 경우 애플리케이션을 등록 (개발 또는 서비스 단계) 하면 받을 수 있지만, ocid라는 쿼리가 추가적으로 필요 하다는 것을 알 수 있습니다.

• 확인 해보니 ocid란 (Oracle Cloud Identifier) 각 자원을 Unique 하게 식별하기 위해 사용되는 값이라고 합니다. 이를 위해 api-key 와 캐릭터의 이름이 필요합니다.

• 따라서 다음과 같은 방식으로 진행할 수 있겠다는 사실을 알 수 있습니다.

  1. FormInput 에 특정 캐릭터 명을 입력받고 ocid(식별자)값을 받는다.
  2. 받은 ocid로 캐릭터의 기본정보를 받는다.

  

• 위와 같은 방식으로 API 요청을 하였습니다. parameter 의 경우 ocid가 아닌 특정 값(캐릭터 명등)이 필요한 경우가 있기에 fetchData 함수를 선언한 뒤 필요한 별개의 요청들로 분리 해주었습니다.

🍁 인게임 UI 🍁

• 요청에 성공하였으니 받아온 값을 이용해 화면에 출력해줄 차례입니다.

• 어떤 방식으로 보여주는 게 좋을까? 많은 사용자를 보유한 환산주스탯 메이플.GG 등의 사이트를 확인하다가 인게임 UI 처럼 보여주는 것은 어떨까 라는 생각이 들었습니다.

• 개인 프로젝트를 할 때마다 디자인에 큰 어려움이 있었기에 인게임 UI를 최대한 비슷하게 구현하는 것이 방법이 될 수 있겠다고 생각하였습니다.

• 인게임 플레이를 즐기는 사용자들에게 익숙한 UI가 완성 되었습니다!

CHARACTER 🙂

• 우선 CHARACTER INFO 입니다. 위 부분은 화면에 출력 된 이후 딱히 변경 될 일이 없기 때문에 별개의 컴포넌트로 만들어 주었습니다.

• 최근에는 캐릭터 이미지 뒤의 배경등으로 꾸며줄 수 있으나 (헤네시스, 아르카나, 이벤트 맵 사진 등) API에서 따로 제공하지는 않기에 초기 UI 버전을 바탕으로 작업하였습니다.

• 필요한 요청 (캐릭터 기본 정보, 유니온, 무릉 도장, 인기도)을 react-query 의 useQueries를 사용하여 Custom Hooks 로 만들어 사용하였습니다.

• 캐릭터 기본 정보에는 LV, 성별, 길드 명, 소속 월드 등의 정보가 포함 됩니다.

✨ DETAIL (STAT, EQUIP, SKILL, CASH)

• CHARACTER INFO의 아래에 위치하는 Detail 컴포넌트입니다. 프로젝트의 목적인 캐릭터의 주요 정보 (스탯, 장비 정보, 스킬 강화 상태, 캐시 아이템 등) 를 확인 하는 부분 입니다.

• 사용해보신 분들은 아시겠지만 위 STAT, EQUIP, SKILL, CASH 가 속해있는 내비게이션을 활용하여 사용자가 직접 선택한 정보를 확인할 수 있도록 바뀌어야 하는 부분이기도 합니다.

• 어떤 네비게이션 정보를 클릭하였는지 알고 그에 해당하는 정보를 출력해주기 위해 Detail 컴포넌트를 다음과 같이 만들었습니다.

• zustand 를 사용하여 선택 된 정보를 전역 상태로 관리하고 selected 의 값에 따라 변경 되는 conditionalComponent 입니다.

💢 STAT

• 캐릭터의 성장 정도 (하이퍼 스탯, 전투력, 어빌리티 정보)를 확인할 수 있는 STAT Conditional 입니다.

• 하이퍼 스탯과 어빌리티의 경우 프리셋을 통해 변경해가며 사용하기 때문에 (보통 사냥, 보스등으로 나뉨) 기본적으로 현재 적용 중인 프리셋을 초기 마운트 시 보여주고 PRESET 번호를 통해 다른 정보도 확인할 수 있도록 하였습니다.

• TypeScript 를 사용하였기 때문에 받아오는 정보에 알맞게 타입 지정을 해주었습니다. (위는 하이퍼스탯에 관한 타입 정리)

👖 EQUIP

• 만들면서 가장 어렵고 재미있었던 EQUIP Conditional 입니다. 크게 캐릭터가 장착한 장비 정보, 장착 심볼, 장착 펫에 대해 확인할 수 있습니다.

• 가장 어려웠던 이유는 물론 디자인 적인 이유도 있으나 예외 처리를 해주어야 할 부분이 많았습니다.

EQUIPMENT

• 간단한 예시로 메이플스토리 장착 아이템 중 무기의 경우 유일하게 소울이라는 특별한 아이템을 적용할 수 있거나, 추가 옵션(환생의 불꽃)을 적용하였을 때 여타 아이템과는 다르게 보스 공격시 데미지, 데미지 등의 옵션이 적용될 수 있는 부위 이기에 이러한 점을 잊고 있다가 작업을 해나가면서 추가적으로 적용 해주었습니다.

• 또 그냥 수치를 표시해주기 보다 추가 옵션, 스타포스 수치, 주문서 강화등의 수치를 다른 색으로 표시하여 사용자가 이해하기 쉽도록 하기 위해서 예외 처리를 해주는 등의 과정이 필요했습니다.

SYMBOL

• 장착 심볼의 경우 심볼 정보를 요청하였을 때 아케인 심볼, 어센틱 심볼, 최근에 추가 된 그랜드 어센틱 심볼 등이 따로 분리 되어있는 것이 아니라 위와 같이 한번에 요청 되기에

다음과 같이 초기화 하여 사용해 주었습니다. 지금 생각해보니 더 짧게 작성할 수 있기는 합니다만, 메이플스토리를 하지 않는 사람이 보았을 때에는 이해하기 어려운 난해한 코드가 될 것 같습니다. 😅

⚡ SKILL

• 캐릭터의 장착 링크 스킬, V매트릭스(5차 강화), HEXA 매트릭스(6차 강화) 를 확인할 수 있는 SKILL Conditional 입니다.

• 저는 특히나 이런 스킬 설명 같은걸 읽어보는 걸 좋아해서 클릭하였을 때 효과등을 출력 할 수 있도록 해보았습니다.

• 스킬 설명은 문장마다 배열 형태로 잘려있는게 아닌 하나의 문자열을 \r\n이 포함 된 상태로 보내주기에 프론트단에서 다음과 같이 출력해줄 수 있습니다.

<span>
 {characterV.skill_description.split("\r\n").map((line, index) => (
  <p key={index}>
   {line}
   <br />
  </p>
 ))}
</span>

• 한 가지 인게임 UI와 다르게 표시해줄 부분이 있었는데 바로 헥사 스탯 입니다.

• 헥사 스탯의 경우 인게임에서 다른 사람의 정보창에서 확인하려고 해도

• 위와 같은 형태로만 나오기 때문에 헥사 스탯이 어디까지 강화 된것인지? 메인스탯이 어느정도 붙었는지 확인하기 힘들었습니다.

• 다행이 API에서 헥사 스탯에 관련 된 정보를 제공해주기는 하였기에 헥사 스탯을 클릭 하였을 때 다음과 같은 형태로 출력 될 수 있도록 하였습니다.

💰 CASH

• 마지막으로 CASH Conditional 입니다. 캐릭터의 장착 캐시 아이템 정보, 안드로이드가 장착하고 있는 아이템 정보를 출력합니다.

• 위 파트는 아직 실험적인 부분이 많아 좀 더 보완을 하는 것이 좋을 것 같습니다. 현재는 장착중인 기본 장착 캐시 아이템에 관한 정보만을 출력하고 있습니다.

• 흔히들 전투복이라 말하는 스탯이 붙은 캐시 아이템을 장착하지만 겉으로 보여지는 옷은 다른 PRESET 을 핸들링할 수 있는 부분 또는 아이템에 대한 디테일한 정보를 확인할 수 있도록 수정하는 방향으로 생각하고 있습니다.

• 위 수정 방향에 따라 아래와 같이 CASH Conditional 을 수정하였습니다.

• 현재 장착하고 있는 장비의 정보와 PRESET (실제로 남들이 보는 내 캐릭터 코디) 을 확인할 수 있도록 하였습니다. 외에 안드로이드가 장착하고 있는 장비 정보에 대해서도 확인할 수 있도록 하였습니다.

😊 ETC...

• 인게임에서 캐릭터 정보를 클릭하였을 때 확인할 수 있는 기본적인 정보에 대해 모두 출력하는데 성공하였지만 이 외에도 확인할 수 있으면 좋겠다! 라고 생각되는 정보들이 더 있습니다.

• 길드원 정보, 유니온 효과, 아티팩트 효과 등 여러가지 추가적인 정보들이 있는데 기존에 목표했던 부분 만큼의 정보를 보여주는 과정까지는 달성하였기에 추후에 계속 업데이트 해나갈 예정입니다.

• 긴 글을 읽어주셔서 감사합니다!