리버티게임:플러그인

플러그인의 기능과 효용에 대해서 설명한 문서입니다. 분류:플러그인에서 리버티게임에 추가되어 있는 여러 플러그인들을 확인 할 수 있습니다.

개요

위키위키를 포함한 대부분의 사이트에서는 사이트의 내부 코드에 사용자 임의로 자바스크립트 코드를 추가하는것을 원치 않습니다. 무턱대고 스크립트 사용을 허가했다간 여러분의 계정이 어느 못된 사용자의 손에 넘어가는건 식은 죽 먹기니까요. 그렇다고 언제까지나 링크를 클릭해서 다음 페이지로 넘어가는 진부한 게임만을 플레이 할 수는 없는 노릇입니다. 이러한 고충을 보다못한 리버티게임에서는 플러그인이라는 실험적인 기능을 제공하게 되었습니다.

플러그인은 유저 개개인이 개발한 자바스크립트 코드를 다른 모든 사용자가 즐길 수 있게 도와줍니다. 물론 내 계정이 다른 게임에 {{허무주의}}를 뿌리고 다니는 반달봇이 되는것을 원하지 않는 대다수의 사용자의 허락을 받아 코드 실행이 가능하지만요.

작동방식

사용자의 common.js 문서는 플러그인의 알파이자 오메가입니다. 모든 길은 로마로 통하듯이 리버티게임의 모든 플러그인 설치틀은 common.js문서가 있기에 존재 할 수 있습니다. 모든 플러그인 설치틀은 사용자의 js문서에 새로운 플러그인을 추가하며, 추가된 플러그인은 플러그인 틀이 포함된 문서에서만 작동합니다. 만들어진 플러그인은 로컬 플러그인과 글로벌 플러그인으로 나뉘는데요, 로컬 플러그인은 매치되는 플러그인 틀이 존재하는 문서에서만 작동하며 글로벌 플러그인은 모든 페이지에 적용됩니다. 틀:자동저장 또한 이러한 방식의 플러그인의 일부입니다.

미디어위키:common.js

이렇게 플러그인은 사용자의 common.js 문서에 설치해야만 동작하는 틀이 대부분이지만, 이것 말고도 미디어위키:common.js(이하 '커먼자스'라고 칭하겠습니다.)에 적용되어 사용자의 허락을 받지 않고도 실행시킬 수 있는 플러그인도 있습니다. 사이트 이용 개선을 위해 개발된 틀이라던지, 다수의 문서에 사용하는 플러그인이라던지, 굳이 틀이 달린 문서에서 사용할 필요가 없는것들 등등 각자의 사연이 담긴 여러 플러그인이 사이트 최상위의 common.js에 위치합니다. 플러그인 시스템 자체도 이렇게 최상위에 위치한 하나의 플러그인이지요.

이런 상위 플러그인은 로그인이나 별개의 설치를 필요로 하지 않고, 사이트의 모든 부분에 적용되어 로그인 페이지나 환경설정 페이지 같은 코어 페이지 이외의 모든 페이지에 적용됩니다. 이렇기 때문에 커먼자스 문서는 관리자만 수정이 가능하답니다. 혹시 권한이 없는데 커먼자스 수정이 필요하다고 생각하신다면 관리자 요청을 통해 관리자에게 요청을 넣어보세요. 관리자가 해당 플러그인을 확인하고 설치 여부를 결정할 것입니다.

그러나 현재는 리버티게임에서 과도하게 커지는 사용자의 common.js로 인한 성능 저하 + 악의적 목적으로 스크립트를 제작하여 다른 사용자들에게 피해를 끼칠 수 있는 보안 문제가 지적되어 사용자의 common.js에 직접 스크립트를 추가하는 방식의 게임 제작은 권장되지 않으며, 기존에 제작된 게임도 관리단이 악의적 변조 가능성을 고려하여 편집을 감시하고 있습니다. 대부분의 커먼자스 기능은 소도구 기능에 이전되었으며, 모든 유저 대상으로 강제로 실행시켰을 때 피해가 없고 유익한 일부 기능만이 common.js에 잔류하였습니다.

자바스크립트? 그게 뭐에요? 어떻게 쓰나요?

세상에는 자신이 알고있는 지식을 다른 사람에게 전달해주고 싶어서 안달난 사람들이 많이 있습니다. 여기서 길게 설명하지 않아도 그런 고마운 분들의 사이트에서 자바스크립트의 사용법을 익히는게 작성자의 입장에서도 여러분의 입장에서도 도움 될 것 같습니다. 자바스크립트, 프로그래밍 분야에 박식한 분들의 오픈소스 강좌 사이트들은 아래와 같습니다.

• 생활코딩 : 자바스크립트의 코드 작성 뿐만 아니라 무엇을 배워야 할지, 무엇을 배우고 싶은지 등의 프로그래밍의 철학을 심도깊게 설명해주는 오픈소스 강좌입니다. 동영상강좌와 영상강좌에서 부교재로 사용하는 텍스트강좌로 나뉘어 져 있습니다,
• zerocho 블로그 : 자바스크립트의 기초부터 복잡한 최신 api까지 30-40여개의 글로 마스터 할 수 있습니다. 여러 프로그래밍 강좌중에서 어려운 편에 속하지만 강좌 작성자분이 유쾌한 덕분인지 강좌 대상의 난이도에 비해 쉽고 재밌게 배울 수 있는 사이트입니다. 개인적으로 많은 도움이 된 사이트입니다.
• 프로그래머스 : 생활코딩과 마찬가지로 오픈소스 강좌로 이루어져 있습니다. 배운 내용을 복습하거나 실습할 수 있는 온라인 코딩테스트를 운영하고 있습니다.
• mdn : 웹개발계의 위키백과입니다. 자바스크립트의 모든 레퍼런스가 담겨있는 곳입니다.
• w3school : 해외 웹 개발 강좌 사이트중 제일 유명한 곳입니다. 간단한 영어가 대부분이기 때문에 영어에 자신 없으신 분이라도 참고하셔도 좋을 것 같습니다.

이러한 사이트에서 여러분들의 머릿속의 지식고에 자바스크립트라는 얇고도 강력한 도서를 끼워 넣을 수 있습니다. 자바스크립트의 지식은 리버티게임에서만 국한되는 것이 아니기 때문에, 여러분들이 앞으로 사이트나 어플리케이션을 만들 때 든든한 조언자가 될 것입니다. 나는 앞으로 멋지고 산뜻하고 보기만해도 흐뭇해지는 사이트를 만들 일이 없어!라고 생각하시는분도 계시겠지만 세상만사 새옹지마니까요.

추가적으로 백괴사전과 그의 산하프로젝트들은 자바스크립트에서 제일 심플하고도 거대한 라이브러리 jquery를 지원하고 있습니다. 자바스크립트만으론 뭔가 부족하다, 이제 자바스크립트로 야구게임정도는 눈감고도 만들 수 있겠다 싶을 즈음에 jquery공부도 겸해서 하는걸 권장드립니다. 위에 설명한 사이트 대부분에서 jquery강좌 또한 포함되어 있으므로 참고 해 주시면 감사드리겠습니다. 간단한 애니메이션을 수행할 때, 선택자로 dom을 지정할 때 자바스크립트의 가슴 어딘가 답답한 부분이 눈녹듯이 녹아내리는 경험을 체험 할 수 있습니다.

무엇을 만들 수 있나요?

무엇이든지! 여러분이 컴퓨터나 스마트폰에서 가능하다고 생각하는 동작 거의 대부분은 자바스크립트로 구현할 수 있습니다. 단적으로 예를 들자면 이런게 가능합니다.

1. 문서내의 모든 날짜를 3일 뒤로 바꾸기
2. 왼쪽 사이드바를 오른쪽에 위치시키기
3. 엔터를 누를 때 마다 비프음 소리가 나게 하기
4. 슈팅게임 만들기
5. 리듬게임 만들기
6. 나사에서 오늘의 사진 가져오기
7. 기상청에서 오늘 날씨 가져오기
8. 디씨위키 반달 봇 만들기
9. 3d로 동작하는 온라인 격투게임 만들기

믿기 힘들겠지만, 모두 자바스크립트 단 하나로도 만들 수 있습니다. 상상력이 따라주는 한 웹에서 모든것을 구현 가능합니다. 광동제약의 주식 시세를 가져와서 몬스터의 공격력으로, 삼성전자 주식 시세를 가져와서 보스의 체력으로 사용 할수도 있습니다. 머릿속으로 혼자 구상해도 되고, 다른 라이브러리나 API를 빌리는 것도 가능합니다. 현실에서도 물리적으로 구현이 불가능한 것만 아니라면, 뭐든지 구현 가능합니다.

어떻게 사용하나요?

그래도 믿기 힘드신 대부분의 독자들을 위해 하나의 예시로 실시간 비트코인 시세를 가져 와 보겠습니다. 위의 플러그인의 설치 진행하시면 볼 수 있습니다. 현재 실시간 비트코인 시세는 0원입니다. 1.5초단위로 빗썸 홈페이지에서 현재 비트코인 시세 정보를 긁어오는 간단한 플러그인입니다. 플러그인을 사용하는 페이지에서 플러그인 사용 설치 유도 틀이 나옵니다. 틀 내부의 설치 페이지로 이동하는 링크를 클릭 해 주시기 바랍니다. 스크립트가 신뢰할 수 있는 개발자가 작성하고 편집하였는지, 스크립트 내부에 자신의 개인정보를 빼돌릴 수 있음이 의심되는 코드가 있는지 확인하여 주시기 바랍니다. 이상이 없으면 설치버튼을 누르시면 됩니다. 정말 대단하다고 생각되지 않나요? 단순한 영단어 몇줄로 리버티게임과는 전혀 다른 사이트와 소통이 가능하다는 것, 미디어위키 문법만 다룬다면 상상이 가능할까요? 이해되셨다면 축하드립니다! 한층 더 모던해진 리버티게임에 장대한 한발짝을 내딛을 수 있게 되었습니다.

어떻게 만들 수 있나요?

첫번째 단계. 플러그인 코드 문서를 참조시키기

플러그인을 적용하고 싶은 문서에 {{플러그인|(플러그인 소스를 위치시키고 싶은 문서)}}를 써넣으세요! 예를들어 '낙서장'이라는 이름을 가진 문서에 {{플러그인|/플러그인}}이라는 코드를 작성하시면, 이 문서는 [[낙서장/플러그인]]에 위치하는 자바스크립트 코드를 적용시킵니다. 이렇게만 하면 내가 생각한 자바스크립트 코드를 작성 할 수 있나고요? 아쉽지만, 백괴사전의 기술력은 여러분의 머릿속의 자바스크립트 코드를 끄집어 낼 만큼 똑똑하지 않거든요. 여러분들이 생각하는 코드를 백괴사전에 알려주셔야 합니다!

두번째 단계. 플러그인의 사전 정보를 작성하기

위의 내용을 저장하시고 저장한 문서를 쭉 훑어보세요. 보라색 테두리를 가진 유난히 눈에 띄는 머릿글 틀이 하나 보일겁니다. 보라색 머릿글 틀에는 당신의 클릭을 목빠지게 기다리고 있는 하늘색 외부 링크 버튼도 담겨있을 거에요. 이를 클릭해 불쌍한 외부링크의 기다림에 응답 해 줍시다.

복잡한 코드들이 많이 보이네요.. 이렇게 복잡하고 이상한 문법 말고 예쁘고 세련되게 코드를 짤 수 있을법 한데도 말이에요. 멍청한 플러그인 시스템 개발자 같으니..

{{#vardefine:name|플러그인 이름, 영어로}}
{{#vardefine:creat|만든사람}}
{{#vardefine:version|버전명}}
{{#vardefine:descript|플러그인의 용도}}
{{#vardefine:local|플러그인 틀이 붙은 문서에서만 사용하게 하려면 true, 아니면 false}}
{{#vardefine:executable|실행되지 않는 플러그인을 만들고 싶으면 false, 보통의 경우는 true}}

{{#vardefine:code|
<syntaxhighlight lang="javascript">
 // 이부분에 코드 입력 //

 // 여기까지 코드 입력 //
</syntaxhighlight>
}}

여하튼 복잡한 코드들중 우리가 관심있어야 할 부분은 여기인것 같습니다. 이곳 외의 다른 텍스트는 제발 만지지 말라고 누가 못을 박아뒀거든요. 이 단락의 한글로 된 부분을 우리가 원하는 다른 내용으로 바꿔 넣으면 될 것 같습니다. 이미 써놓은 문구로도 어떻게 작성하는지 대충 감이 잡히는 곳도 있지만 헷갈리는 부분도 몇몇개 보이긴 합니다. 사용자 지정 변수의 사용법을 한번 짚어 봅시다.

#vardefine:name

여러분의 자바스크립트 코드에게 이름을 붙여주기 전까지 다만 하나의 몸짓에 지나지 않습니다. 여러분이 그의 이름을 불러주었을 때 그는 당신에게로 와서 꽃이 됩니다. 여러분의 코드에 이름표를 붙여줍시다. 자바스크립트 코드는 영어를 좋아하니 코드의 이름도 영어로 정해줘야 합니다. 단, example이나 helloworld같이 너무 막연한 이름을 붙여주지 말아주세요. 여러분의 코드는 엘레강스하고 인텔리전스하기 때문에 다른 사람들이 쓰는 이름을 무지 싫어하거든요.

#vardefine:version

여러분의 코드의 나이를 정해주세요. 나중에 여러분이 작성할 코드를 수정할 때 코드의 나이는 계속해서 올라갑니다. 코드의 처음 버전은 '0.1', 혹은 '0.0.1'버전을 많이 사용합니다. '1살'이나 '처음 작성'같이 여러분이 원하는 다른 형식을 사용해도 괜찮아요.

#vardefine:descript

여러분이 곧 작성할 코드, 머릿속의 자바스크립트 코드를 실행하면 어떻게 되나요? 여러분의 자바스크립트 코드를 이용하게 될 수많은 사용자들에게 여러분의 코드를 간단하게 설명 해 봅시다. 만약 '리버티게임 탐험'이라는 게임에 이 코드를 만들고 싶으면 '리버티게임 탐험 게임에 사용될 코드입니다'를, 단순한 테스트를 위해 만드는 플러그인이면 '테스트 플러그인입니다'라고 간단히 적으시면 됩니다.

#vardefine:local

이곳에는 true와 false, 두개중 하나의 글자만 넣을 수 있습니다. 여러분의 코드를 모든 리버티게임 페이지에 적용시키게 하려면 false, 혹은 {{플러그인|(당신의 플러그인이 위치한 장소)}}가 붙은 문서에만 적용하려면 true를 적어 넣어 주시면 됩니다.

#vardefine:executable

여기서도 위의 변수와 마찬가지로 true와 false 코드를 적어 넣을 수 있습니다. 여기서 실행되지 않는 플러그인을 만들고 싶으면 false로 적으라고 하네요. 사용할 수 없는 코드를 작성하라니 뜬금없이 뭔 소리인가 싶죠? 다른 플러그인에서 사용할 종속 플러그인을 만들 때 false를 적어 라이브러리와 같이 이용할 수 있는 변수입니다. 간단하게 테스트만 하고 싶다, 복잡하고 머리 아픈 건 싫다 하시는 분은 true를 적어 넣어 주세요.

세번째 단계. 자바스크립트 코드를 작성하기

여기까지 오느라 수고 많으셨습니다. 여러분의 상상력을 뽐내실 차례입니다! 이부분에 코드 입력~ 여기까지 코드 입력 사이에 당신이 생각하는 자바스크립트 코드를 써넣어 주세요. 아직 자바스크립트에 대해서 모르는 분, 자바스크립트를 곧 공부할 분은 간단하게 alert("안녕하세요, " + mw.config.values.wgUserName + "님!")와 같이 적어 주시면 됩니다!

저번에 만든 코드를 바꾸고싶어요!

간단합니다. 해당 플러그인 코드 문서를 수정하면 됩니다. 여기에서 해당 플러그인 코드 문서는 사용자의 common.js가 아닌, 해당 게임 하위에 있는 그 자바스크립트 문서를 말합니다. 문서를 생성할 때와 마찬가지로, 반드시 코드를 입력하라는 부분 사이만 손보세요.

그 다음 #vardefine:version에 써 놓은 버전을 올리는 걸 잊지 마세요! 그래야 기존에 플러그인을 설치하던 사람들이 새 버전을 설치해서 사용할 수 있도록 유도할 수 있습니다.

궁금한게 많아요!

플러그인은 아직 완전하게 개발 된 기능이 아니기 때문에 관련 문서들의 사용법이 친절하지 않은 경우가 많습니다. 이렇게나 멋진 기능을 만들고 싶어 애가 타는데 플러그인 사용에 불편한 점이 많은 리버티게임의 여러 사용자들을 위해, 2024년에 새롭게 부상하는 4차 산업혁명에 발맞추어 리버티게임은 신비로운 기술을 수족처럼 다루는 여러 노예들을 구비하고 있습니다. 자바스크립트를 배웠는데도 이해가 잘 되지 않으면 아래 리스트에 있는 21세기 첨단 노예들의 사용자 토론란이나 리버티게임:도움방을 질문으로 뒤엎어 주시기 바랍니다. 노예가 살아 있다면 노예를 괴롭혀 주시고(?) 노예를 아껴 주세요(?)

현재 활발한 활동을 보여 도움을 받기 쉬운 노예(?)는 서명 뒤에 (!)가 표기됩니다. 표기되지 않은 유저는 일신상의 이유로 휴식 중일 확률이 높습니다.

도움을 줄 수 있는 노예 목록

• BANIP (토론|토론작성) : css, javascript, html5등 여러 분야의 질문을 받고 있습니다.
• hsl(토론, 기여, 게임, 메일) : HTML5, CSS, 자바스크립트, Lua 기여 가능
• Senouis(토론장, 기여)(!): HTML5, CSS, 자바스크립트, C/C++ to WebAssembly 변환 과정에서 자바스크립트 로더 담당 가능

주의점

현재 자동 인증된 사용자만 플러그인의 혜택을 받을 수 있는 문제가 있습니다. 또한 커먼자스에 문제가 있거나 문제가 되는 플러그인을 설치한 후 다른 플러그인을 설치 시도시 설치가 제대로 되지 않는 버그가 있습니다. 이런 경우 원인이 되는 문제가 해결이 된 후 설치를 재시도하면 설치가 잘 될 수 있으니 양해 부탁드립니다.

리버티게임 외부에서 구현된 다른 Javascript 라이브러리를 가져올 때에는 사이트 보안을 위해 CDN 사이트를 경유하여 검증된 곳에서만 코드를 가져올 수 있습니다. 현재 리버티게임에서는 JSDelivr CDN에서 외부 코드를 가져오는 것을 허용합니다. CDN은 스크립트에 대하여 캐싱(Caching)을 시행하기 때문에 외부 코드를 변경해도 리버티게임에서 바로 보이지 않을 수 있기에 외부 스크립트를 변경할 때마다 캐시 새로고침 페이지에서 CDN을 경유하는 변환 주소를 입력해 스크립트 변경을 반영할 수 있습니다(그래도 변경되지 않는 경우 Ctrl+Shift+R 키 같은 브라우저 새로 고침을 하거나 브라우저를 닫았다 다시 열면 바뀝니다).