안녕하세요.
모그리 서버 해루입니다.

3.3 패치 기념!
웹소켓 오버레이 전용 모피모피 오버레이 스킨(이하 모피모피)을 소개합니다.

 


※ 모피모피란?
모바일과 PC의 합성어로 ACT에 연결한 웹소켓 플러그인을 통해 모바일 환경(스마트폰, 태블릿)과 PC환경(웹, 오버레이)을 자유롭게 넘나들며 사용 가능한 스킨을 의미합니다.

 

 

 

1. 메인 화면

 

※ 카메라 버튼은 패치날에 업데이트 되었습니다. 착오 없으시길 바랍니다. 

모바일에서 본 모피모피입니다.
해루스킨 리부트와 비교하여 변경/추가 사항을 안내드립니다.


- 개인적으로 불편하여 시간(00:00)을 크게 키웠습니다.

- 24인 레이드에서 빠른 순위 파악을 위해 아이디 앞에 랭킹을 표시합니다.

- 이제는 본인 캐릭터의 Name을 YOU가 아니라 캐릭터 이름(ex.해루)으로 표시합니다.

- 옵션 설정 시 소환사/기공사는 소환수의 딜량을 보조 그래프(불투명도 50%)로 표시합니다.

- 사용 빈도가 낮은 탭 전환 기능(탱커/힐러/즐겨찾기)을 삭제했습니다.

- 대신 힐러 테이블을 추가했습니다.
　(간혹 순위가 이상한 경우가 있는데, 대부분은 숨겨진 탱커/딜러들보다 힐을 안 했을 경우입니다. 반성!)

- 힐러 테이블은 힐러 클래스만 출력되며, 오버힐량, 대미지쉴드량을 보조 그래프로 표시합니다.

- 옵션 설정 시 학자는 요정의 힐량을 보조 그래프(힐러 테이블)로 표시합니다.

- 캡쳐 기능이 추가되었습니다.

- 메뉴 버튼 위치가 우측으로 변경되었습니다.

- 캐릭터 이름 숨기기 기능이 보강되었습니다.
　(내 아이디는 YOU로 변경, 리미트 브레이크를 제외한 나머지 이름 숨김)

 




PC에서 본 모피모피(웹소켓 오버레이)입니다.

사실 이 기능을 만들 때만 해도 이렇게 과열된 분위기가 아니었는데...
요즘 자게나 사사게에 보면 힐러 딜 때문에 논란이 많더라고요...

모피모피에서는 전작과 다르게 오버힐량과 대미지쉴드량 그리고 유효힐량 데이터를 한 눈에 파악할 수 있습니다. 

그러니 힐러님들은 미터기를 통해 불필요한 힐을 최대한 줄여볼 수 있도록 연습하는데 사용하셨으면 좋겠고, 탱커/딜러님들은 오버힐 수치가 높다고 바로 나쁜 쪽으로 오해하진 마시고, 함께 하는 힐러님의 숙련도를 물어보며 이것 저것 조율하는데 사용하는 등 우리 모두 다같이 평화로운 미터기 생활을 합시다! 왜냐면!

제가 정말 어, 진짜 흡, 뭔가 이런 저런 기능을 넣기가 슬금슬금 눈치 보여요. 엉엉ㅠㅠ
괜히 분란 조장만 하지 않을까 싶어서 ㅠㅠ 괜히 막 내 잘못 같고 ㅠㅠ............. /좌절 /털썩
그러니 저를 봐서라도 모두가 행복하게... 어흐흐흐어으허헝 ㅠㅠ





모피모피 1.0.3 업데이트 / 24인 레이드 모드

"행"을 누르면 아래와 같이 상세 정보를 펼쳐서 볼 수 있습니다.



2. 메인 화면 : 캡쳐 기능, 메뉴

 


우측 버튼을 누르면 나오는 드롭다운 메뉴입니다.
해루스킨 리부트와 비교하여 변경/추가 사항을 안내드립니다.
 

- 전투 집계 종료(End Encounter, /e end) 기능을 스킨 내부에서 지원합니다.


- 이전 전투 기록 보기 기능의 명칭을 "히스토리"로 변경합니다. 히스토리를 통해 이전 전투 기록을 볼 수 있습니다.


- 이전 전투 기록의 제한이 사라졌습니다. 그러나 재시작하거나 새로고침 시 히스토리는 삭제됩니다.


- 캐릭터 이름 숨기기 기능을 보강했습니다.

　(ON ▶ 내 캐릭터 이름은 "YOU"로 변경되며 리미트 브레이크를 제외한 나머지 Name 항목을 지웁니다.)


- 전체 화면 모드 기능을 추가했습니다. 모바일에서만 사용 가능합니다.  


- 설정 버튼을 추가했습니다. 설정 화면으로 진입합니다.

 




캡쳐 버튼을 눌렀을 때 뜨는 토스트 메세지입니다. 이미지를 확인할 수 있는 경로를 표시합니다.
캡쳐 기능은 오직 PC에서만 사용 가능합니다. 모바일 캡쳐는 각자 스마트폰마다 방법 아실 거니까요!


ACT 캡쳐 이미지를 확인할 수 있는 경로는
C드라이브 > Advanced Combat Tracker > ScreenShot 입니다.



3. 설정 화면

 


모피모피 설정 화면입니다.

여러분들의 개성을 존중해 자유로운 설정이 가능하도록 최선을 다했습니다.

앞으로도 좋은 아이디어나 개선점이 있다면 언제든지 자동 업데이트로 반영될 예정입니다.

 

- 기본 테이블과 힐러 테이블을 각각 커스터마이징 할 수 있습니다.


- 소환수 데이터 합산 시, 유저 그래프 위에 소환수 데이터(보조 그래프)를 표시하는 옵션을 추가했습니다.


- 소환수 합산하기 기능, 소수/정수 기능, 천 단위 구분 기호(콤마) 표시 기능을 유지합니다.


- 번역 기능을 추가했습니다. 현재 한국어/일본어/영어 지원합니다. 번역 지원자 계시면 문의 주세요!


- 모피모피의 글꼴을 스킨 내에서 바로 변경할 수 있습니다. PC/한국어/영어만 지원합니다.


- 상단바 디자인을 변경할 수 있습니다.


- 그래프 디자인을 변경할 수 있습니다.


- 셀 너비를 스킨 내에서 바로 변경할 수 있습니다. 메모장은 이제 안녕!!  



설정 화면의 아래 부분입니다.


- 버전을 쉽게 알 수 있습니다.


- 공지사항에서 앞으로의 개발 일정 및 버그 픽스와 관련된 이야기들을 확인할 수 있습니다.


- 문의할 수 있는 메일주소는 ffxivHaeru@gmail.com입니다. 또는 인벤 쪽지, 인겜(모그리/해루) 귓속말.


- 모피모피의 오작동을 관리하기 위해 초기화/새로고침 기능을 지원합니다. 


- 초기화 시 진짜 초기화할 것인지 다시 묻는 알림창이 뜹니다. 데이터 백업 기능은 아직 없습니다.


- 새로고침은 초기화와 달리 알림창이 없으니 주의하시기 바랍니다.





모피모피 ACT 테이블 커스터마이징 화면입니다.


기본 ACT 구성 화면에는 플레이어 정보, 전투 항목, 피격 항목, 회복 항목, 기타 카테고리로 나뉘며 약 40개 정도의 항목이 있습니다.

반면 힐러 ACT 구성 화면에는 플레이어 정보, 회복 항목, 기타 카테고리만 있습니다.


간단하게 항목을 터치하거나 클릭하시면 별표 아이콘에 불이 들어옵니다.

메인 화면으로 돌아가면 이미 적용된 모습을 볼 수 있습니다. 커스터마이징 기능은 익숙하실테니 패스!

 

- Last180 항목을 추가했습니다.


- Eff.Heal 항목을 추가했습니다.


- D.Shield 항목을 추가했습니다.


- OverHeal 항목을 추가했습니다.


- Ov.H 항목의 정밀도가 높아졌습니다.


- Absorb 항목을 추가했습니다.


- PowerDrain 항목을 삭제했습니다.


- 항목의 자세한 내용은 해당 페이지에서 직접 확인하시기 바랍니다.

- 항목 추가는 라그린네님을 제가 탈탈탈타타타탙라라타타탙랕탈 갈았기에 나온 결과물입니자. 저 잘했죠?ㅎㅎㅎㅎㅎ

 




모피모피 글꼴 설정 화면입니다.

 

- 스킨 내부의 입력 필드를 통해 글꼴명(폰트명)을 입력하고 엔터를 치거나 이전 화면으로 돌아가면 글꼴이 적용됩니다. (PC에 설치된 글꼴 한정)



- 글꼴명이 정확해야 합니다. 참고로 오버레이에서는 한글 입력이 되지 않습니다. 글꼴명이 한글인 경우 메모장 등에 이름을 쓰고 복사해서 붙여 넣으세요. 글꼴 스타일은 글꼴명 뒤에 붙는 보통, 굵게, 아주 좁게, 가늘게 등을 의미합니다. 글꼴 스타일은 입력하시면 안 됩니다. 주의! (위에 설정 전 주의사항도 꼭 읽어보세요.)


- 만약 1순위 글꼴에 영문 전용 글꼴을 입력했다면, 한글 글꼴은 2순위 글꼴에 입력하면 글꼴 2개를 동시에 적용 가능합니다.


- 글자 크기를 변경할 수 있습니다. 글자 크기에 따라 레이아웃의 크기가 달라집니다. (확대/축소)


- 글자색을 변경할 수 있습니다. 간단하게 마우스나 손으로 색상을 찍거나, 색상 코드를 직접 입력합니다.


- 내 캐릭터 글자를 굵게 표시할 수 있습니다.


- 타 캐릭터 글자를 굵게 표시할 수 있습니다.


- 색상 코드에 직접 색을 입력하려면 반드시 16진수 6자리로 입력해야만 합니다. (네이버 색상표 검색 참고)

 




모피모피 상단바 설정 화면입니다.

그동안 여러분들의 많은 요청에 따라 상단바를 커스터마이징 할 수 있는 UI를 구현했습니다.

일단 지금은 이 정도로만...ㅠㅠ

 

- 상단바의 높이를 자유롭게 설정할 수 있습니다. 터치의 용이함을 위해 모바일은 56 이상을 권장합니다.


- 상단바 배경색, 강조색, 테두리색, 글자색을 각각 설정할 수 있습니다.


- 강조색은 상단바 뿐만 아니라 모피모피의 모든 아이콘에도 동일하게 적용됩니다.


- 상단바 모서리를 둥글게 처리하거나 1px 테두리를 표시할 수 있습니다.


- 불투명도를 따로 지정할 수 있습니다.

 




모피모피 그래프 설정 화면입니다.

지난 번 메모장 커스터마이징이 다소 어려웠죠... 이제는 편하게 커스터마이징 하세요.

 

- 그래프색을 자유롭게 설정할 수 있습니다.


- 그래프 사이사이에 구분선을 긋거나, 뺄 수 있습니다. 작은 화면 유저들은 이 옵션을 끄면 더욱 편하겠어요.


- 그라데이션 효과, 애니메이션 효과를 적용하거나 적용하지 않을 수 있습니다.


- 그래프와 배경 불투명도를 각각 따로 설정할 수 있습니다.

 




모피모피 셀 너비 설정 화면입니다.

간단하게 버튼 조작으로 셀 너비를 조절할 수 있습니다.

모바일인 경우 가로 모드로 전환, PC인 경우 가로 폭을 좀 늘려서 조절하시면 더욱 편합니다.

 

- 셀 너비를 - 와 + 버튼을 터치 또는 클릭을 통해 조절할 수 있습니다.


- 직접 숫자 입력은 불가능합니다.


- 너비 제한은 0 ~ 999 까지입니다.

 



4. 개발자 소개

 


이것은 중요하니까 완전 크게!!!

몇 달 전부터 많이 고생했으니 칭찬해 주세요. 헿...

 

해루는 모피모피를 기획하고, 디자인 및 설정부 구현을 맡았습니다.


외부 설계죠! 쉽게 말해 UI/UX 또는 눈에 보이는 껍데기...?!!? 

가공한 데이터를 보기 좋게 나열하고 이렇게 저렇게 각자 설정할 수 있도록 옵션을 주는 등, 유저 분들이 어떻게 하면 내부 기능들을 가장 효율적으로 잘 사용하실 수 있을지를 고민하고 디자인했습니다.


아이콘, 색상, 라인, 터치 간격, 애니메이션, 접근성, 그래프, 메인 테이블 등등 그 무엇 하나 놓치지 않고 세심하게 살폈습니다. 모피모피 많이 예뻐해 주세요!


라그린네 님은 ACT 웹소켓과 모피모피를 연동하는 부분과 데이터 분석 부분을 담당하셨습니다.


내부 설계죠! 쉽게 말해 날것 상태의 ACT 데이터를 이렇게 저렇게 가공해서 모피모피에 전달하는 것과 모피모피를 웹소켓 오버레이와 연결시켜주는 부분. 즉, 뇌와 같은 부분을 맡으셨어요. 


소환수 합산 등의 실질적인 계산과 각종 데이터(오버힐량, 대미지쉴드량, 캐릭터 이름 등)들을 뽑아와 정리하는 등 모피모피에 데이터들을 쉽게 출력할 수 있게 만들어 주셨어요. 그러니까... 모피모피의 핵심은 라그님이 다~ 설계하셨어요. 데이터 문의는 이쪽입니다. ㅎㅎㅎ

  

쿨냠쿨냠 님은 모피모피를 모바일 브라우저와 PC의 오버레이에 보여주는 역할을 하는 웹소켓 오버레이 플러그인을 구현하셨습니다. 즉, 서버 연결 부분을 구현하시고 오버레이를 직접 만드셨어요.


웹소켓 오버레이는 기존 오버레이보다 훨씬 성능이 좋고 가벼우며 또한 빠릅니다. 오버레이도 날로 만든게 아니라 자체 단축키, 자동 숨기기 기능, 확대/축소, 투명도, 각종 여러 속성 등 정말 제대로 만드셨어요! 거의 웬만한 컴퓨터들은 다 세대 교체 될 듯 합니다.


또한 웹소켓의 핵심 기능인 ACT 공유 기능. 디스코드 마냥 간단한 주소 전달 방식으로 파티원들에게 내 ACT 화면을 실시간으로 공유해 줄 수도 있고, 공유 받을 수도 있습니다. 같은 파티원 중 한명만 ACT를 사용하고 나머지는 안 써도 ACT를 볼 수 있다는 것이죠.


장점을 나열하자면 밑도 끝도 없는데 아무튼 항상 질문에 명쾌한 해답을 주시고 가장 어려운 부분을 잘 이끌어 주셨습니다. 파워 든든ㅠㅠ... 참, 패치 당일 날은 캡쳐 기능도 넣어 주셨어요. 짝짝!  

 


이카루가 님은 모피모피에 쓰인 모든 문구들을 일본어로 번역하고 검수해주셨습니다.


직접 보시면 아시겠지만 이것 저것 신경 쓰이는 문구들이 정말 많기 때문에 보통 일이 아니었음에도 불구하고, 패치 당일까지 오탈자를 점검하시고 최대한 정확한 번역을 하도록 노력하셨습니다. 덕분에 글로벌 서버 유저들도 모피모피를 쉽게 사용할 수 있을 것 같습니다!


사실 이전 스킨들도 글로벌 서버에 저도 모르게 넘어갔었는데, 그땐 고칠 엄두도 안 나서 흡...ㅠㅠ

어쨌든 한섭 배포 성공 후 글섭 진출을 노리기 위해 번역을 부탁드렸었는데 흔쾌히 도와주셨어요.


이렇게 열심히 준비 중이니 글로벌 서버에도 출시된다면 글로벌 서버 유저분들께서는 바다 건너 친구들에게 모피모피를 널리 홍보해주시기 바랍니다! :)

 



5. 커스터마이징 예제

 


모피모피 커스터마이징 가이드 바로가기 ▶▶▶▶






6. 마치며

 

모피모피 소개는 여기까지입니다.

아래 배포 링크에서 반드시 새 설치 또는 재설치 하시고 웹소켓 오버레이 가이드를 보며 모피모피를 연결해 봅니다.




3.3 설치팩 배포(모피모피는 수동설치 → 웹소켓 오버레이.exe)
http://www.inven.co.kr/board/powerbbs.php?come_idx=4953&l=211

웹소켓 플러그인 가이드 바로가기


모피모피를 "모바일"에서 보실 경우

크롬을 제외한 다른 브라우저(카카오톡, 네이버앱)를 이용해 주세요.

모바일 주소는 형식은 아래와 같아야 합니다.


https://haeruhaeru.github.io/mopimopi/index.html?HOST_PORT=ws://x.x.x.x:10501/