[파이널 판타지14] - 필드 마물 검색 페이지 제작

요즘 바빠서 글을 못썼더니 상당히 오랜만에 블로그 포스팅을 하는 기분이다.

 

지금 시점에서 그리 쓸모 있겠냐 싶다만...

재미삼아 필드 마물 정보를 검색 할 수 있는 페이지를 만들어봤다.

 

▶ https://jaicychoi.github.io/ffxiv-hunt/

깃헙 페이지라 기본 도메인 사용 중이어서 주소가 좀 구리다.. 흑흑

 

 

되도록 심플하게 보이도록 만들었다.

 

.

 

아래는 주의사항 비스무리한 것.

 

 - 크롬(Chrome)과 파이어폭스(Firefox) 브라우저에서 정상 동작한다. (참고로 모바일보다는 PC에 최적화되어 있다.)
 - S, A, B급 마물 위치 정보도 열람 가능.
 - 신생 지역 정보는 포함하고 있지 않다. (v4.5 기준 창천, 홍련 마물 정보 포함)
    (신생 지역의 경우 B, A, S급만 추가할지 말지 고민중. 그 조차도 양이 상당히 방대하여...)
 - 필드에 고루 존재하는 마물의 경우, 검색 정보에 나오는 좌표 이외의 장소에도 존재할 수 있다.
 - 한 개의 페이지 내에서 작동하므로 '뒤로가기(이전 페이지로 이동)'는 기능하지 않는다.
   (특히 모바일에서 이용하는 경우 주의하기 바란다.)
 - 맵 이미지 로딩에 시간이 다소 걸리는 편이다. (오래 걸릴 경우 3-5초 소요)
 - 마물 수배서 대상 여부와 드랍 아이템의 경우 잘못된 정보가 있다면 알려주시기 바란다.
 - 오타가 있을 수 있으니 발견할 경우, 알려주면 감사하겠다.

 

.

 

대단한 기능은 없지만 간단히 소개해보자면,

 

1. 키워드를 입력하고 엔터치면 검색결과를 쭈루룩 보여준다.
사실 검색 버튼이 있긴한데 최대한 심플해 보이기 위해 감춰뒀다.
레벨, 마물이름, 지역명 등으로 검색 가능하다. (한두 글자 만으로도 검색 가능)

 

 

 

2. 마물 이름을 클릭하면 해당 마물 위치가 표시된 지도가 팝업 된다.
...만 지도가 완전히 로딩 될 때까지 시간이 걸리는 편이다;

로컬에서 테스트 할 때는 바로 팝업됐는데 깃헙 페이지에서는 오래 걸리면 3-5초까지 소요되더라ㅜㅜ

이 점 유의하시고 사용하길.
참고로, 팝업된 지도는 아무곳을 클릭하거나 ESC키를 누르면 닫힌다.

 

3. 드랍 아이템을 클릭하면 인벤 DB로 이동하여 해당 아이템의 정보를 보여준다.

처음엔 공식 홈페이지 가이드(https://guide.ff14.co.kr/lodestone/db/item)가 깔끔하게 잘 돼 있어서
공식 가이드 DB 링크를 넣을까 싶었는데 아이템의 영문명이라던가 제작법을 한눈에 볼 수 있다던가 하는
편의성 측면에서 인벤 DB가 좀 더 나은 것 같아 인벤 링크로 넣었다.

 

4. 마물 이름 앞 분홍색 아이콘(

)은 마물 수배서 대상 마물 여부를 알려주는 아이콘이다.

내 경험과 기억에 의존해서(..) 넣은 것들이라 잘못된 정보가 있을 수 있으니 발견하면 알려주길 바란다.

 

참고로 A급과 S급도 아이콘으로 구별 가능하다.

 

.

 

여담

 

사실 거의 3년 전, 창천 시절에 비슷한 사이트를 만들긴 했는데 그 때는 코드도 지금보다 더럽고... 디자인도 구리고..

 

지금봐도 좀... 크흠..

 

 그렇게 방치만 해두다 좀 더 깔끔하게 만들어보고 싶다는 생각에 요 며칠 후다닥 작업해서 새로 만들어본 것.

JS, CSS, HTML로 만든 페이지다.

 

 

나 포함 기존 유저들은 좌표나 드랍템을 꿰고 있는 사람들이 많을 듯 하고,
새로 시작하는 뉴비들에게 다소 도움이 되지 않을까 싶다.

 

좌표 정보 입력이 노가다 였던걸 제외하면 만드는건 나름 재밌었다.