미디어위키(Mediawiki) 기본 제공 스킨(skin) Vector(벡터)

미디어위키 공식 사이트(https://www.mediawiki.org/)에서 배포되는 미디어위키 압축 파일에는 기본적으로 Vector, Timeless, Monobook 이 세가지 스킨이 번들로 포함되어 제공됩니다.

그 중에서도 미디어위키 설치 작업 시 기본값으로 설정되어 있는 것이 오늘 다룰 Vector 스킨입니다. 이 Vector 스킨은 현재 한국어 위키백과(https://ko.wikipedia.org/)와 영문판 위키피디아(https://en.wikipedia.org/) 그외 다수의 언어별 위키피디아에서 기본 스킨으로 사용 중인 스킨입니다.

이 Vector 스킨은 미디어위키 설치 시 스킨의 기본값으로 설정되어 있으므로 따로 내려 받아 설치하거나 설정해줄 필요가 없습니다.

그러나 만약 여러분들이 Git으로 미디어위키를 설치하는 경우, 기본적으로 제공되는 스킨이 없으므로 따로 내려받아야 합니다.

설치 전 필요 지식

Vector 스킨은 미디어위키 1.17 이후부터 기본 제공 스킨으로 포함되어 있으므로 해당 버전 이후의 미디어위키 배포 파일을 다운받은 경우 따로 다운받을 필요 없습니다. 그러나 Git으로 미디어위키를 설치한 경우에는 이 스킨이 포함되어 있지 않으므로 따로 다운받아야 합니다.

이 Vector 스킨은 미디어위키 1.17부터 미디어위키 스킨 기본값으로 설정되었습니다.

스킨 다운로드

Vector 스킨 공식 페이지에서 다운로드

Vector 스킨 공식 페이지(https://www.mediawiki.org/wiki/Skin:Vector)에서 다운로드를 받습니다.

Vector 스킨 공식 페이지를 보면 오른쪽에 위와 같이 Vector 스킨에 대한 정보상자를 볼 수 있습니다. 이 정보상자에는 해당 스킨의 이름과 유지보수 여부, 라이선스 정보, 다운로드, 저장소 요약, 커밋 역사, 코드 검토 정보 링크를 확인할 수 있습니다.

개발자가 아닌 일반 관리자라면 위 상자에서 Download snapshot 링크를 눌러 다운로드받으시면 됩니다. 이 링크를 누르면 아래오 같은 화면을 볼 수 있습니다.

자신이 운영 중인 미디어위키 버전을 선택하고 Continue 버튼을 눌러줍니다.

그러면 위 그림처럼 스킨 다운로드 안내 페이지 화면이 나오면서 자동으로 파일 다운로드 창이 뜹니다. 만약 다운로드 창이 뜨지 않는다면 해당 페이지 상단에 있는 해당 스킨 링크를 눌러 다운받을 수 있습니다.

Download MediaWiki skin

Jump to navigation Jump to search

A snapshot of version f0327dc of the Vector skin for MediaWiki REL1_31 has been created. Your download should start automatically in 5 seconds.

The URL for this snapshot is:

https://extdist.wmflabs.org/dist/skins/Vector-REL1_31-f0327dc.tar.gz

You can use this link to download the skin on any computer, but please do not bookmark it, since its contents will not be updated, and it may be deleted at a later date.

You should extract the tar archive's contents into the skins directory of your MediaWiki installation. For example, on a Unix-like OS:

tar -xzf Vector-REL1_31-f0327dc.tar.gz -C /var/www/mediawiki/skins

On Windows, you can use 7-zip to extract the files.

If your wiki is on a remote server, extract the files to a temporary directory on your local computer, and then upload all of the extracted files to the skins directory on the server.

After you have extracted the files, you will need to register the skin in LocalSettings.php. The skin documentation should have instructions on how to do this.

If you have any questions about this skin distribution system, please go to Extension talk:ExtensionDistributor.

Return to the Vector skin page.

Get another skin

참고로 위 안내는 미디어위키 1.31 기준입니다.

스킨 배포 페이지를 통해 다운로드

미디어위키의 스킨 배포 페이지(https://www.mediawiki.org/wiki/Special:SkinDistributor)에 접속하여 위 그림처럼 다운받을 스킨과 미디어위키 버전을 선택하고 Continue 버튼을 눌러주시면 위에서 본 스킨 다운로드 화면을 똑같이 볼 수 있습니다.

터미널을 통해 다운로드

1.31

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/Vector-REL1_31-f0327dc.tar.gz

1.32

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/Vector-REL1_32-d3ed21a.tar.gz

1.33

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/Vector-REL1_33-878c1e8.tar.gz

master

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/Vector-master-609c11c.tar.gz

자신이 사용 중인 미디어위키 버전에 맞는 스킨 파일을 다운받으시면 됩니다. master는 최신 개발 코드로, 개발자가 아닌 일반 관리자는 다운받지 않는 것이 좋습니다.

다운받은 스킨 파일 압축 풀어 설치

형식

study@study-VirtualBox:~/다운로드$ sudo tar -xzf 스킨 파일명.tar.gz -C /var/www/w/skins

예시 - 1.31

study@study-VirtualBox:~/다운로드$ sudo tar -xzf Vector-REL1_31-f0327dc.tar.gz -C /var/www/w/skins

Git을 통해 설치

미디어위키 Vector 스킨 Github 사이트 주소는 https://github.com/wikimedia/mediawiki-skins-Vector입니다. 여기에 접속하면 아래와 같은 화면읗 보실 수 있습니다.

Branch: master는 현재 개발 중인 최신 코드입니다. 이것은 개발자들이 사용하는 코드입니다. 우리는 자신이 사용하는 미디어위키의 버전에 맞는 코드 파일을 사용해야 합니다.

우리는 미디어위키 1.31 LTS를 사용하므로 브랜치를 REL1_31로 선택해줍니다.

그러면 해당 버전의 코드들로 변환이 되며 이 상태에서 Clone or download 버튼을 눌러주면 위 그림처럼 조그마한 창이 뜹니다. 여기서 우리가 사용할 버튼은 Download ZIP 버튼과 그 위의 클립보드 복사 버튼입니다.

Download ZIP 버튼은 말 그대로 해당 스킨 파일들을 ZIP 압축 파일도 내려받는 것이고, Git 주소 옆의 버튼은 해당 스킨의 Git 저장소 주소를 클립보드로 복사해주는 버튼입니다.

해당 주소를 클립보드로 복사하여 터미널에서 Git Clone 명령어  옆에 클립보드에 복사한 주소를 붙여주시고 실행해주시면 됩니다.

study@study-VirtualBox:/var/www/html/w/skins$ sudo git clone https://github.com/wikimedia/mediawiki-skins-Vector.git 

그러면 skins 디렉토리 안에 mediawiki-skins-Vector 라는 디렉토리가 생성됩니다. 이 디렉토리를 적당한 이름으로 바꿔주시면 됩니다.

study@study-VirtualBox:/var/www/html/w/skins$ sudo mv mediawiki-skins-Vector Vector

보통 Vector라는 이름을 씁니다. 이때 중요한 것은 리눅스를 포함한 유닉스 계열 OS들은 영문자 대소문자를 구분한다는 것입니다. 따라서 Vector와 vector는 별개의 디렉토리입니다.

LocalSetting.php 파일 설정

$IP/skins 폴더 안에 Vector 스킨 압축 파일을 풀어주거나, 혹은 Git clone 명령을 통해 스킨을 복제한 후, LocalSettings.php 파일에 다음과 같은 코드를 적어줍니다.(참고로 $IP는 미디어위키 폴더 경로를 의미합니다.)

wfLoadSkin( 'Vector' );

미디어위키 1.24 이전 버전을 사용하는 경우 위 코드 대신 다음의 코드를 대신 적습니다.

require_once " $IP/skins/Vector/Vector.php";

설치 확인

위키의 특수:버전(= Special:Version) 문서로 이동하여 스킨이 성공적으로 설치되었는지 확인합니다.

구성 옵션

## 스킨별 구성 옵션 ##

### Vector ###
# https://www.mediawiki.org/wiki/Skin:Vector

# 구성 변수별 메뉴얼 #
# https://www.mediawiki.org/wiki/Manual:$wgVectorUseSimpleSearch
# https://www.mediawiki.org/wiki/Manual:$wgVectorUseIconWatch
# https://www.mediawiki.org/wiki/Manual:$wgVectorResponsive

# $wgVectorUseSimpleSearch = false;  // 검색상자 아이콘 버튼 - 기본값 : true
# $wgVectorUseIconWatch = false;    // 주시문서 아이콘 버튼 - 기본값 : true
$wgVectorResponsive = true;    // Vector 스킨 웹브라우저 창 크기 반응 - 기본값 : false

위 코드를 LocalSettings.php 파일에 자신의 필요에 맞춰 수정하여 적어 주시면 됩니다.

만약 기본값을 그대로 사용할 요량이라면 해당 코드를 굳이 적어 줄 필요 없으며, 기본값과 다른 경우에 한하여 해당 코드와 옵션값을 적어주시면 됩니다.

예를 들어 다른 구성옵션은 기본값으로 내버려 두고 $wgVectorResponsive만 옵션값을 true로 적용할 것이라면 아래 코드만 적어 주시면 됩니다.

$wgVectorResponsive = true;

그러나 가능하면 제가 구성옵션 부분 바로 아래에 적어 놓은 코드를 활용하시기를 권장합니다. 미디어위키의 각종 구성옵션 혹은 환경변수 코드들을 모두 외우거나 혹은 필요할 때마다 일일이 검색하여 확인할 수는 없는 법입니다.

프로그램의 원활한 유지보수를 위해서는 주석을 잘 활용할 줄 알아야 합니다. LocalSetting.php 파일에서는 주석 표시로 #(sharp)과 /(slash)를 사용할 수 있습니다.

위에서 #은 코드의 주석 처리(비실행)와 관련 코드 또는 주석들의 분류, 링크 주석 등에 쓰였으며, //는 해당 코드의 간단한 설명을 달아 놓는 데에 쓰였습니다.

스킨이 되었든, 익스텐션이 되었든 해당 스킨과 익스텐션에서 사용하는 주요 구성 옵션과 환경 변수 코드들은 위처럼 모두 LocalSettings.php 파일에 주석과 함께 적어 설정해주시는 것이 유지보수 측면에서 굉장히 유리합니다.

그리고 기본값을 그대로 사용할 경우, 옵션값 혹은 변숫값이 true, false 이 두 가지뿐이라면 기본값이 아닌 값으로 설정하고 해당 코드 앞에 #을 붙여 주석처리를 해주시는 것이 편리합니다. 추후에 옵션값 또는 변숫값을 변경할 때 해당 코드 앞의 주석 표시만 제거해주면 되기 때문입니다.

그리고 코드들은 연관된 것들끼리 모으고 그 위에 자신 또는 추후 유지보수자가 알아볼 수 있도록 제목 등을 달고 해당 코드의 메뉴얼 및 관련 설명 링크도 역시 주석으로 달아주시면 유지보수에 도움이 될 것입니다.

만약 익스텐션 등의 설치 및 관리가 복잡하여 잊어먹기가 쉽다면 이 역시도 설명을 주석으로 달아 놓는다면 위키를 유지보수하거나 백업, 이전할 때 굉장히 도움이 될 것입니다.

# $wgVectorUseSimpleSearch

$wgVectorUseSimpleSearch = true;

$wgVectorUseSimpleSearch는 위키 내 검색 상자의 검색 버튼을 선택하는 구성옵션 코드입니다.

옵션값이 true라면 우 그림처럼 검색 버튼이 돋보기 아이콘으로 표시됩니다.

반대로 옵션값이 false라면 위 그림 처럼 보기상자 버튼이 표시됩니다.

$wgVectorUseIconWatch

$wgVectorUseIconWatch = true;

$wgVectorUseIconWatch는 위키 사용자(위키에 가입한 기여자)가 주시문서를 등록하거나 해제할 때 사용하는 버튼을 설정하는 코드입니다.

옵션값이 true인 경우, 줏문서 등록, 해제 버튼이 별 모양 아이콘 버튼으로 역사보기와 더 보기 사이에 위치하게 됩니다.

반대로 옵션값이 false라면 더 보기에 주시 / 주시해제로 표시됩니다.

$wgVectorResponsive

$wgVectorResponsive = false;

$wgVectorResponsive는 Vector 스킨이 웹브라우저 창 크기에 따라 보다 사용자 친화적으로 반응하도록 해주는 실험적인 설정입니다.

아직 실험적인 설정이라고는 하지만 이라반적인 환경에서 상당히 안정적으로 잘 작동하므로 이 설정을 쓰시더라도 큰 문제는 없을 것으로 보입니다. 그러나 어쨌든 실험적인 설정이라 기본적으로 사용하지 않도록 false로 설정되어 있습니다.

옵션값이 기본값인 false로 설정되어 있다면 웹브라우저 창의 폭을 좁히더라도 기본 화면 구성이 바뀌지 않습니다.

그러나 옵션값을 true로 설정하면 웹브라우저 창의 폭을 좁히면 위 그림처럼 폭이 좁은 화면에 어울리도록 화면 구성이 바뀌었습니다.

특징

벡터 스킨의 기본 기능

    주로 화면의 줄 수를 줄여 혼란을 줄였습니다.
    검색 포털의 더욱 두드러진 배치
    컨텐츠 액션과 네임 스페이스 링크를 시각적으로 분리합니다 (이전은 보기 탭과 액션 메뉴 항목으로 나누어 짐).
    브라우저 크기에 따라 사용자 인터페이스 전체에서 여백이 자동으로 증가 / 감소합니다.
    주시문서 등록 및 해제 동작에 별표 아이콘 사용

Vector 확장 기능이 추가되었습니다

(이 기능 중 일부는 나중에 Vector 스킨이나 MediaWiki Core에 병합되거나 제거되었습니다)

    제안을 포함한 단순화된 검색 포털
    접이식 탐색 포털
    저장하지 않고 편집 페이지를 떠날 때 경고
    화면에 맞지 않는 탭 자동 숨기기

실험 벡터 확장 기능

    단순화된 바닥 글 컨텐츠
    초점에 맞춰 검색 상자 확대
    섹션 수정 링크가 오른쪽 대신 표제 옆으로 이동하고 아이콘을 사용

CollapsibleVector 확장을 통한 CollapsibleNav(접이식 내비게이션) 지원

참고

축소 가능한 탐색 포털(접이식 탐색 포털)은 현재 CollapsibleVector에서 제공합니다. 확장 기능을 추가로 설치해야합니다.

https://www.mediawiki.org/wiki/Extension:CollapsibleVector

Vector를 계승하는 또 다른 스킨은 보다 현대적인 벡터 스킨인  Apex입니다. Apex를 방문하십시오.

https://www.mediawiki.org/wiki/Skin:Apex

후기

첫 스킨 설치 안내이기 때문에 상세히 적었습니다. 다른 스킨의 경우, 다운로드 및 설치 방법은 따로 이렇게 자세히 젃지 않고 파일 링크 주소 등 핵심 부분만 적어드리도록 하겠습니다.