미디어위키(Mediawiki) 모바일 접속 환경 구축 - MobileFrontend, GeoData, Minerva Neue

[관련 게시물]

MobileFrontend 익스텐션

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

GeoData 익스텐션

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

Minerva_Neue 스킨

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

CirrusSearch 익스텐션

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

미디어위키의 기본 스킨인 벡터(Vector)를 포함하여 기본 제공 스킨은 스마트폰 등 모바일 환경에 최적화되지 않아 이용하기가 불편합니다. 모바일로 접속하는 사용자들을 위해 모바일 접속 환경을 구축해주도록 합시다.

위 미디어위키 공식 사이트에 들어가 모바일 접속 환경을 구축해줄 수 있는 익스텐션과 스킨을 다운받아야 합니다.

다운 받아야 할 익스텐션과 스킨 목록은 다음과 같습니다.

Extension:MobileFrontend - 필수

Extension:GeoData - 필요하면

Skin:Minerva Neue - 강추(준 필수)

다운로드 및 압축 해제

Extension:MobileFrontend

익스텐션을 다운받아야 합니다. 우상단의 검색상자에서 Extension:MobileFrontend를 검색합니다.

위 그림처럼 Extension:MobileFrontend 공식 안내 페이지가 나오게 됩니다. 화면 우측에 아래와 같이 녹색 테두리 줄 상자가 있습니다.

여기서 굵은 글씨의 Download extension을 눌러줍니다. 그러면 아래와 같은 화면이 나옵니다.

여기서 버전을 선택해주어야 하는데요. 참고로 master는 현재 개발 버전, 1.32는 이 글을 쓰는 2019년 3월 28일 현재 최신 안정 버전입1니다. 자신이 사용 중인 버전에 맞춰 선택해주시면 됩니다.

우리는 미디어위키 1.31버전을 사용하므로 1.31을 선택하고 Continue를 눌러줍니다.

자동으로 파일이 다운로드 상자가 뜰 것입니다. 여기서 바로 저장하시면 됩니다.

그러나 미디어위키는 친절하게도 터미널로 작업하는 이들을 위해 해당 익스텐션의 스냅샷 다운로드 주소와 압축 해제 명령어를 적어주었습니다.

저는 다운로드 상자를 닫고 터미널로 작업하겠습니다.

study@study-VirtualBox:~$ cd ./다운로드
study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/extensions/MobileFrontend-REL1_31-7f66849.tar.gz
study@study-VirtualBox:~/다운로드$ sudo tar -xzf MobileFrontend-REL1_31-7f66849.tar.gz -C /var/www/html/w/extensions
[sudo] study의 암호: 
study@study-VirtualBox:~/다운로드

참고로 미디어위키는 압축 해제 명령어가 아래와 같이 적혀 있습니다.

tar -xzf MobileFrontend-REL1_31-7f66849.tar.gz -C /var/www/mediawiki/extensions

그러나 이는 해당 서버에 미디어위키가 /var/www/mediawiki에 설치되어 있고, 해당 디렉토리에서 작업할 권한이 있을 때의 예시입니다.

미디어위키가 설치된 환경에 따라 후자의 절대경로를 수정해주어야 하고, 보통은 일반 계정에는 작업 권한이 없으므로 sudo 명령어를 맨 앞에 입력해주어야 합니다.

제 연재를 따라오셔서 저와 미디어위키 설치 환경이 같은 분들은 아래와 같이 명령어를 입력해주셔야 합니다.

sudo tar -xzf MobileFrontend-REL1_31-7f66849.tar.gz -C /var/www/html/w/extensions

다시 Extension:MobileFrontend 공식 안내 페이지로 돌아갑니다.

설치 방법을 확인해보면 아래와 같은 부분이 있습니다.

보면 GeoData 익스텐션과 모바일용 스킨을 추가로 설치해주어야 함을 알 수 있습니다.

나머지 두개도 다운받아 압축을 해제해줍니다.

Extension:GeoData

GeoData 익스텐션은 필수 설치 익스텐션은 아닙니다.

GeoData 익스텐션은 지리적 좌표 저장 및 검색 기능을 추가하는 익스텐션으로 이 기능이 필요없다면 굳이 설치할 필요 없습니다.

미디어위키 사이트 우상단 검색상자에 Extension:GeoData를 검색하여 Extension:GeoData 공식 안내 페이지에 접속합니다.

Download extention을 눌러줍니다.

자신에게 맞는 버전을 선택하고 Continue를 눌러줍니다.

제 연재는 1.31을 기준으로 하므로 제 연재를 따라오고 계신 분은  1.31을 선택하고 Continue를 눌러주시기 바랍니다.

다운로드 상자가 뜹니다. 저는 이 다운로드 상자를 닫고 터미널로 작업하겠습니다.

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/extensions/GeoData-REL1_31-96cda6b.tar.gz
study@study-VirtualBox:~/다운로드$ sudo tar -xzf GeoData-REL1_31-96cda6b.tar.gz -C /var/www/html/w/extensions

Skin:Minerva Neue

미디어위키 사이트 우상단 검색상자에 Skin:Minerva Neue를 검색하여 Skin:Minerva Neue 공식 안내 페이지에 접속합니다.

Download snapshot을 눌러줍니다.

마찬가지로 자신에게 맞는 버전을 선택하고 Continue를 눌러줍니다.

전 1.31을 선택하고 Continue를 눌렀습니다.

이번에도 전 다운로드 상자를 닫고 터미널로 작업하겠습니다.

study@study-VirtualBox:~/다운로드$ wget https://extdist.wmflabs.org/dist/skins/MinervaNeue-REL1_31-2e70e79.tar.gz
study@study-VirtualBox:~/다운로드$ sudo tar -xzf MinervaNeue-REL1_31-2e70e79.tar.gz -C /var/www/html/w/skins  

필요한 파일은 모두 다운 받고 압축을 풀었으니 이제 본격적인 작업에 들어갑시다.

등록 및 설정

먼저 다시 Extension:MobileFrontend 공식 안내 페이지로 돌아갑니다.

Installation 항목을 보면 Setup Nearby와 Setup a skin 항목이 있습니다. 작업하기 전 잘 읽어 보아야 합니다.

번역 내용은 다음과 같습니다.

주변 설정

MobileFrontend는 Special : Nearby 페이지를 약간의 구성으로 제공합니다. 이 기능을 사용하려면 몇 가지 선택적 단계가 필요합니다.

   1.  브라우저 보안으로 인해 SSL을 통한 보안 사이트를 실행해야합니다. HTTP를 통해 사용자 위치를 요청할 수 없습니다.
   2. GeoData 확장 설치
   3. update.php를 실행하십시오.
   4. LocalSettings.php에서 $wgMFNearby = true; 추가하십시오 $wgMFNearby = true;
   5. 기사 좌표 결정 :
        구문에 대한 자세한 내용은 GeoData 설명서를 참조하십시오 {{#coordinates:37.786971|-122.399677|primary}} 하나 이상의 페이지에 기사에 데이터를 추가하십시오.
        또는 LocalSettings.php 파일에 $wgMFNearbyEndpoint 를 설정하여 Nearby 용 별도의 MediaWiki 설치를 사용할 수 있습니다. 예 : $wgMFNearbyEndpoint = 'https://en.m.wikipedia.org/w/api.php'; 영어 위키피디아 기사의 좌표를 사용합니다. 인근 엔드 포인트는 주어진 위치와 관련된 컨텐츠를 찾는 데 사용됩니다.

스킨 설정

MobileFrontend는 기존의 데스크톱 웹 사이트와 함께 이동할 수있는 모바일 형식의 웹 사이트를 제공합니다. 원하는대로 스킨을 적용 할 수 있습니다.

// 다음 중 하나를 선택하고 선택한 코드를 LocalSettings.php 파일 아래쪽에 추가해줍니다.

 wfLoadSkin( 'MinervaNeue' );
 $wgMFDefaultSkinClass = 'SkinMinerva'; // Minerva 스킨 사용 (별도로 다운로드하여 설치해야합니다. 그렇지 않으면 문제가 발생합니다)

 wfLoadSkin( 'Vector' );
 $wgMFDefaultSkinClass = 'SkinVector'; // Vector 스킨 사용

 wfLoadSkin( 'Timeless' );
 $wgMFDefaultSkinClass = 'SkinTimeless'; //  Timeless 스킨 사용

내용을 숙지하시고 잘 따라오시기 바랍니다.

참고로 제가 알려드리는 내용은 모바일 접속 환경을 구축하기 위한 최소한의 설명입니다. 보다 자세한 내용은 맨 위의 관련 링크를 방문하셔서 참고하시기 바랍니다.

LocalSettings.php 편집

우리는 모바일 접속 환경 구축을 위한 2개의 익스텐션과 1개의 스킨을 다운받아 압축을 풀어 설치를 했습니다. 이제 LocalSettings.php 파일에 익스텐션과 스킨을 등록하고 설정을 해줍니다.

##모바일 접속 환경 구축##

### Extension:MobileFrontend ###
# https://www.mediawiki.org/wiki/Extension:MobileFrontend #
wfLoadExtension( 'MobileFrontend' );
$wgMFAutodetectMobileView = true;

### Extension:GeoData ###
# https://www.mediawiki.org/wiki/Extension:GeoData #
wfLoadExtension( 'GeoData' );
# $wgGeoDataBackend = 'elastic'; // If you're about to use GeoData with ElasticSearch, install CirrusSearch

### Skin:Minerva Neue ###
# https://www.mediawiki.org/wiki/Skin:Minerva_Neue #
wfLoadSkin( 'MinervaNeue' );
$wgMFDefaultSkinClass = 'SkinMinerva'; // 모바일 접속 환경 시 기본 스킨 설정

GeoData 익스텐션은 필수 익스텐션은 아닙니다. 따라서 GeoData 가 지원하는 기능이 필요없다면 설치할 필요 없으며 따라서 해당 코드들도 필요 없습니다.

# $wgGeoDataBackend = 'elastic';

위 코드는 #으로 주석처리가 되어 있습니다. 만약 ElasticSearch와 함께 사용할 것이라면 CirrusSearch 익스텐션과 CirrusSearch 관련 프로그램들을 설치하고 주석을 해제해주시면 됩니다.

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

update.php 실행

GeoData 익스텐션을 설치한 경우, 미디어위키 유지보수 디렉토리에서 update.php파일을 실행함으로써 DB를 업데이트해주어야 합니다.

study@study-VirtualBox:~/다운로드$ cd /var/www/html/w/maintenance
study@study-VirtualBox:/var/www/html/w/maintenance$ php update.php

다음과 같이 진행됩니다.

study@study-VirtualBox:/var/www/html/w/maintenance$ php update.php
MediaWiki 1.31.1 Updater

Your composer.lock file is up to date with current dependencies!
... 중략 ...
Purging caches...done.

Done in 3.3 s.
study@study-VirtualBox:/var/www/html/w/maintenance$

GeoData 익스텐션은 필수 설치 익스텐션은 아니기에 만약 GeoData를 설치하지 않는다면 update.php를 실행시킬 필요는 없습니다.

설치 확인

자신의 위키 검색상자에 특수:버전을 검색합니다.

 

위와 같이 스킨과 익스텐션이 설치된 것을 확인할 수 있습니다.

만약 LocalSettings.php 편집상에 실수가 있으면 위키가 이상하게 보이거나 아예 위키에 접속조차 안 될 수도 있습니다. 그런 경우 LocalSettings.php 구문 상 오류를 바로 잡아주시면 됩니다.

모바일 접속 환경 구축 전과 후

모바일 접속 환경 구축 전

모바일 접속 환경 구축 전의 미디어위키 메인 화면입니다.

하단을 보면 위 그림과 같이 나옵니다.

모바일 접속 환경 구축 후

모바일 접속 환경 구축 후 미디어위키 하단의 모습입니다. 모바일 보기 링크가 추가된 것을 볼 수 있습니다.

데스크톱 모니터에서 모바일 보기를 하면 위 그림과 같이 나오게 됩니다.

스마트폰으로 모바일보기를 하면 위 그림과 같이 보이게 됩니다. 모바일 화면에 최적화되어 가독성이 높아진 것을 볼 수 있습니다.

위 그림은 스마트폰 앱 개발자들을 위해 다음(DAUM)에서 제공하던 스마트폰 화면 레이아웃 확인 서비스였습니다.

http://troy.labs.daum.net/

현재는 위 서비스를 다음 측에서 중단하였기에 지금은 접속하더라도 연결되지 않습니다.

이것으로 미디어위키 모바일 접속 환경 구축이 완료되었습니다.