전에 우리는 미디어위키 기본 제공 스킨인 Vector, MonoBook, Timeless 이 세 개의 스킨의 설치 및 설정 방법에 대해 알아봤습니다. 그러나 미디어위키의 스킨이 이 세개만 있는 것은 아닙니다. 이 외에도 마흔 개가 넘는 추가 스킨들이 있습니다. 따라서 자신의 입맛에 맞게 골라 설치 할 수 있습니다. 이번에는 미디어위키가 지원하는 추가 스킨들 중에서 Apex 스킨의 설치 및 사용법에 대해 안내해드리도록 하겠습니다.
미디어위키 스킨 변경 전 기본 스킨 화면
위 그림은 일반적으로 여러분들이 미디어위키를 설치한 후 가장 먼저 접하게 되는 화면입니다. 개인적으로 기본적으로 제공되는 세 개의 스킨 중 이 스킨이 가장 무난한 디자인이라 생각합니다. 위키피디아를 비롯하여 수많은 미디어위키 기반 사이트들이 이 Vector 스킨을 채택하여 사용하고 있는 것을 보아 저만의 생각은 아닐 것입니다.
그러나 아무리 이 스킨이 잘 만들어진 디자인이라 할지라도 그것은 어디까지나 보편적으로 무난하게 사용될 수 있는 스킨이라는 것이지 어느 위키 사이트에서나 잘 어울리는 스킨이라는 말은 아닙니다.
각 위키 사이트에는 그 위키의 성격이나 사용자들의 성향에 어울리는 각기 다른 디자인의 스킨이 필요합니다. 현재 미디어위키 공식 사이트에는 자원봉사자들이 무료로 배포하는 추가 스킨들이 관리되고 있습니다.
그래서 많은 미디어위키 관리자들은 미디어위키 공식 사이트에서 배포되는 여러 스킨들 중 하나를 선택하여 사용합니다.
또는 미디어위키 공식 사이트에서 관리되지 않는 외부 스킨을 따로 구해 설치, 사용하거나 아예스킨을 새로 만들어 사용하기도 합니다. 참고로 다음 스킨 연재는 미디어위키 공식 사이트에서 관리, 배포되는 스킨이 아닌 외부 스킨을 설치, 사용하는 방법에 대해 알려드리도록 하겠습니다.
Apex 스킨
Apex 스킨 공식 안내 문서
Apex 스킨 공식 안내 페이지(https://www.mediawiki.org/wiki/Skin:Apex)에 접속하면 위 그림과 같은 화면을 보실 수 있습니다.
본문은 크게 셋으로 나눌 수 있는데 좌측 상단에 Apex 스킨에 대한 간단한 설명이 있고 아래에는 설치 방법이 적혀 있고 우측에는 Apex 스킨에 관한 각종 요약 정보 상자가 위치해 있으며 이 정보 상자에는 스킨 다운로드 링크가 있습니다.
이러한 구성 방식은 다른 스킨 안내 페이지에도 그대로 적용되며, 익스텐션 안내 페이지도 이러한 구성을 답습하고 있습니다.
Apex 스킨 소개
Apex is a skin designed to respond to screens of different sizes. It is a concept still under development. One of its key features is pulling the table of contents out into a fly-out menu on the right of the page, making it accessible without overpowering the page.
This skin may not work correctly on mobile devices.
위 상자는 Apex 스킨에 대한 소개글 원문입니다. 이것을 요약 번역하면 다음과 같습니다.
Apex는 스크린의 크기(즉 브라우저 창의 크기)에 반응하도록 고안된 스킨입니다. 이것은 여전히 개발 중인 개념입니다. 이 스킨의 핵심 기능 중 하나는 목차를 문서의 오른쪽에 플라이 아웃 메뉴로 당김으로써 문서의 본문을 찍어 누르지 않은 채 읽을 수 있습니다.
Apex 스킨 정보 상자
위 그림은 Apex 스킨의 정보 상자입니다.
Apex 스킨의 라이선스는 GPL- 2.0 이상으로 지정되어 있습니다.
Download 항목에는 스냅샷 파일 다운로드 링크, 리포트 요약, 깃허브 파일 트리 탐색, 커밋 역사, 코드 검토를 확인할 수 있습니다.
Apex 스킨 다운로드
스킨 정보 상자에서 Download snapshot 링크를 클릭합니다. 그러면 위 그림과 같은 화면으로 전환됩니다. 여기서 자신이 사용하는 미디어위키 버전을 선택해줍니다. 저는 현재 1.31을 연재 기반으로 삼고 있으므로 1.31을 선택했습니다.
버전을 선택 후 Continue 버튼을 눌러줍니다.
그러면 위 화면이 뜸과 동시에 다운로드가 진행됩니다. 보통은 다운로드 디렉토리에 저장될 것이며 만약 다운로드 장소를 따로 지정한 경우에는 그곳에 저장될 것입니다.
만약 저장이 되지 않는다면 문서 상단의 스킨 파일 링크 주소를 클릭하여 다운로드해줍니다.
위 화면의 안내문 전체 원문은 아래와 같습니다.
Download MediaWiki skin
Jump to navigation
Jump to search
A snapshot of version d1abd40 of the apex 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/apex-REL1_31-d1abd40.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 apex-REL1_31-d1abd40.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 apex skin page.
Get another skin
터미널 명령어로 다운로드
위 방식대로 브라우저를 통해 다운로드를 받아도 되지만 저는 터미널을 통해 다운로드 받는 것을 선호하는 편입니다. 여러 옵션을 활용할 수 있기 때문입니다.
기본적인 다운로드 방법은 아래와 같습니다.
study@study-VirtualBox:~$ cd ~/다운로드
study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/apex-REL1_31-d1abd40.tar.gz
위 명령 실행 모습은 아래와 같습니다.
study@study-VirtualBox:~$ cd ~/다운로드 study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/apex-REL1_31-d1abd40.tar.gz --2019-08-07 16:58:19-- https://extdist.wmflabs.org/dist/skins/apex-REL1_31-d1abd40.tar.gz Resolving extdist.wmflabs.org (extdist.wmflabs.org)... 185.15.56.49 접속 extdist.wmflabs.org (extdist.wmflabs.org)|185.15.56.49|:443... 접속됨. HTTP request sent, awaiting response... 200 OK Length: 359222 (351K) [application/octet-stream] Saving to: ‘apex-REL1_31-d1abd40.tar.gz’ apex-REL1_31-d1abd4 100%[===================>] 350.80K 427KB/s in 0.8s 2019-08-07 16:58:21 (427 KB/s) - ‘apex-REL1_31-d1abd40.tar.gz’ saved [359222/359222] study@study-VirtualBox:~/다운로드$ sudo tar -xzf apex-REL1_31-d1abd40.tar.gz -C /var/www/html/w/skins [sudo] study의 암호: study@study-VirtualBox:~/다운로드$
파일 압축풀기
이제 다운받은 파일을 미디어위키 스킨 디렉토리에 풀어주어야 합니다. 다운로드 페이지에서 안내한 압축 풀기 예시는 다음과 같은 조건인 경우입니다.
관리자 권한으로 로그인 중일 것
미디어위키 스킨 디렉토리 설치 절대 경로가 /var/www/mediawiki/skins 일 것
그러나 일단 관리자로 계정 전환 후 작업을 하는 것은 서버 관리 정책상 권장하지 않습니다.
또한 제 블로그 연재 환경은 아래와 같은데요.
[작업환경]
가상머신 : VirtualBox 6.0.10
Host OS : Windows 10 1903
Guest OS : Ubuntu 18.04.2
Apache2 : Apache/2.4.29 (Ubuntu)
PHP7 : PHP 7.2.19-0ubuntu0.18.04.1
MariaDB : mysql Ver 15.1 Distrib 10.4.7-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2
phpMyAdmin : phpMyAdmin 4.9.0.1
우분투 18.04나 그 이후 버전의 경우 웹 루트 디렉토리는 /var/www가 아니라 /var/www/html입니다.
그리고 저는 미디어위키 설치 디렉토리 이름을 w로 변경했습니다.
이러한 점들을 모두 반영했을 때 제 연재 환경에 맞춘 압축 풀기 명령어는 아래와 같습니다.
study@study-VirtualBox:~/다운로드$ sudo tar -xzf apex-REL1_31-d1abd40.tar.gz -C /var/www/html/w/skins
Apex 스킨 설정
스킨을 설치했다고 모든 것이 끝나는 것은 아닙니다. 해당 스킨을 실제로 적용하려면 미디어위키 설정 파일인 Localsettings.php 파일을 수정해주어야 합니다.
# 스킨 등록
wfLoadSkin( 'apex' );
# 기본 스킨 설정 수정
$wgDefaultSkin = "apex";
미디어위키를 다뤄보신 분들은 위 두 코드를 어떻게 적용해야할 지 감이 오실 겁니다. 그러나 미디어위키를 처음 다뤄보시는 분들은 달랑 두 코드만 적혀 있으면 헤매실 겁니다. 따라서 보다 자세히 설명해드리도록 하겠습니다.
wfLoadSkin( '스킨명' );
위 코드는 스킨을 미디어위키에 등록시키는 구문입니다. 이때 스킨명은 해당 스킨 디렉토리 이름과 일치해야 하며, ;(세미콜론)을 결코 빠뜨려셔는 안됩니다. 스킨이나 익스텐션을 설치 후 미디어위키에 접속되지 않는 경우들 중 상당수가 이 ;(세미콜론)을 빠뜨렸기 때문입니다.
wfLoadSkin( 'apex' );
위 코드를 LocalSettings.php 파일에 추가해주시면 됩니다.
# Enabled skins.
# The following skins were automatically enabled:
이때 추가할 위치는 적어도 위 구문 아래에 추가해주세요. 코드 추가 위치에 따라 작동안하는 경우도 있으므로 유의하시기 바랍니다.
$wgDefaultSkin = "스킨명";
미디어위키를 특별한 설정 없이 일반적인 방식으로 설치한 경우 기본 스킨은 Vector로 설정되어 있습니다. 따라서 LocalSettings.php 파일에도 아래와 가티이 설정되어 있습니다.
$wgDefaultSkin = "vector";
이 구문에서 vector를 apex로 수정해줍니다.
아래는 제 추천 수정 방법입니다. 참고하시기 바랍니다.
## Default skin: you can change the default skin. Use the internal symbolic
## names, ie 'vector', 'monobook':
# $wgDefaultSkin = "vector";
$wgDefaultSkin = "vector";
... 중략 ...
# End of automatically generated settings.
# Add more configuration options below.
# 미디어위키 설치 후 추가 설치한 스킨
## apex 스킨 ##
wfLoadSkin( 'apex' );
위와 같은 수정의 목적은 기존 내용을 수정하거나 삭제하지 않고 주석처리 하여 남기고, 유지보수가 쉽도록 주석을 달며, 각 스킨 및 익스텐션별 추가 설정 코드들을 편리하게 관리하도록 분류하는 데에 있습니다.
Apex 스킨 적용 화면
접속 화면(로그인 전)
스킨 설치 및 설정을 완료한 후 미디어우키에 접속하면 위와 같은 화면을 보실 수 있습니다.
숨겨진 미디어위키 기본 메뉴 펼치기 화면
Apex 스킨은 여타의 기본 스킨과 달리 미디어위키 화면 좌측의 기본 메뉴들이 숨겨져 있다가 마우스를 >> 버튼에 올리면 나타나도록 설계되어 있습니다.
이는 문서 본문에 집중할 수 있도록 디자인된 것입니다. 이 문서 본문 집중 설계는 목차 기능에서도 나타나는데요. 이것은 아래에서 설명드리도록 하겠습니다.
로그인
Apex 스킨은 메인화면에서 바로 로그인할 수 있는 링크가 있지 않습니다. 특수 문서 목록 링크를 눌러서 특수 문서에 들어가 로그인 링크를 누르거나 검색 막대에서 '특수:로그인'을 입력하여 로그인 페이지로 접속해야 합니다.
로그인된 화면
로그인이 된 화면입니다. 전에는 없던 별모양 아이콘(주시 문서)과 행위 메뉴가 생긴 것을 확인할 수 있습니다.
사용자 계정 메뉴
행위 메뉴
브라우저 크기 변경 시 스킨 화면
다른 스킨의 경우 크기가 고정되어 있어 만약 브라우저의 크기가 변경되면 그에 맞춰 가로 세로 이동 막대(= 스크롤 막대)가 생길 뿐 그 자체의 크기는 변경되지 않습니다.
그러나 이 Apex 스킨는 브라우저의 크기에 맞춰 스킨 디자인 자체가 바뀝니다.
폭을 좀더 줄이면 토론 메뉴가 아이콘으로 바뀝니다.
Apex 스킨 단점
그러나 이 Apex 스킨에도 몇몇 단점이 있습니다.
첫 번째로 위 그림들처럼 내용이 한페이지 안에 다 들어가서 스크롤 막대가 굳이 생길 필요가 없는데도 항상 스크롤 막대가 생깁니다.
두 번째로 브라우저 크기에 반응하는 스킨 디자인 기능이 모바일에서는 지원하지 않는다는 점입니다. 만약 모바일 환경을 지원하려면 아래의 게시물을 참고하시기 바랍니다.
'미디어위키 > 미디어위키 스킨' 카테고리의 다른 글
| 미디어위키(Mediawiki) 추가 제공 스킨(skin) Minerva Neue(미네르바) (0) | 2020.03.29 |
|---|---|
| 미디어위키(Mediawiki) 외부 스킨(skin) Liberty(리버티) (6) | 2019.08.12 |
| 미디어위키(Mediawiki) 기본 제공 스킨(skin) Timeless(타임리스) (0) | 2019.06.25 |
| 미디어위키(Mediawiki) 기본 제공 스킨(skin) Monobook(모노북) (0) | 2019.06.23 |
| 미디어위키(Mediawiki) 기본 제공 스킨(skin) Vector(벡터) (0) | 2019.06.20 |