FANDOM


팬덤 방문자의 적어도 절반 이상이 모바일 이용자라는 사실, 알고 계셨나요? 그러므로 귀하의 위키가 모바일에서도 잘 표시되도록 하는 것은 매우 중요합니다. 모바일에서 읽을 수 없는 위키는 절반 이상의 사람이 읽을 수 없는 위키를 의미하기도 하니까요. 데스크톱에서 잘 보인다고 모바일에서도 잘 보일 것이라고 방심해서는 안 됩니다. 이러한 상황은 대문에서도 동일해서, 혹시라도 모바일에서 대문이 비정상적으로 표시되면 절반 이상의 사람들이 그 비정상적인 대문을 보게 됩니다.

모바일 기기에서 잘 보이는지 확인하기편집

파일:Mobile main page preview.png

대문이 모바일에서 잘 보이는지 확인하는 과정은 매우 간단합니다. 그저 클래식 편집기에 들어가서 "미리 보기" 버튼을 누르고 나타나는 팝업 창에서 우측 상단 드롭다운 메뉴의 "모바일" 항목을 선택하면 됩니다. 그러면 평균적인 모바일 기기에서 페이지가 어떻게 표시되는지, 그리고 어떤 부분을 고쳐야 하는지 알 수 있습니다. 이 기능은 시각 편집기에서는 사용할 수 없으니 주의해주세요.

시각 편집기를 사용하고 싶거나 다른 해상도에서 표시될 화면을 보고 싶을 땐 대용으로 구글 크롬 모바일 에뮬레이션 도구를 사용할 수 있습니다. 구글 크롬을 설치하면 이 도구가 함께 딸려 오며 개발자 콘솔에서 사용할 수 있습니다. 자세한 사항은 이곳을 참고하세요.

모바일 대문에서 자주 발생하는 문제편집

모바일 대문에서 자주 발생하는 문제와 그 문제를 해결하는 법에 대해 설명합니다.

그림으로 된 문단 이름편집

CSS 코드로 이루어진 문단 그림은 모바일 스킨에서는 표시되지 않습니다. 그에 반해 [[파일:]] 태그를 이용하면 모바일 스킨에서도 문단 그림이 표시됩니다. 하지만 모바일 스킨에서 문단 그림이 표시되면 그 크기 때문에 원치 않은 방식으로 표시될 확률이 높습니다. 문단 그림을 모바일에서도 적절히 사용할 수 있는 가장 쉬운 방법은 CSS 코드로 데스크톱용 문단을 만들고 문단 그림의 바로 아래에 모바일에서만 표시되고, 데스크톱에서는 표시되지 않은 "모바일용 문단"을 추가하면 됩니다. CSS로 이루어진 문단 그림 "Welcome"을 예제로 이용해 봅시다:

CSS를 이용한 그림 문단 이름의 예제

HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>

CSS

.mainpage-header-welcome {
    background: url("http://static.wikia.com/middleearthshadowofmordor7723/images/6/66/Mainpage-Header-Welcome.png") no-repeat scroll 0 0 transparent;
    border-bottom: medium none !important;
    height: 28px;
    margin: 21px auto 8px 12px !important;
    padding-bottom: 0px !important;
    width: 99%;
}

데스크톱에서

Shadow of Mordor image header


이제 여기에 모바일에서만 표시되는 숨겨진 문단을 추가해 봅시다. 다음과 같이 됩니다:

모바일에 최적화하는 법

HTML

<h2 title="Welcome" class="mainpage-header-welcome"></h2>
<h2 style="display:none;">Welcome</h2>

모바일에서

Shadow of Mordor image header mobile


h2 태그와 "display:none" 스타일이 만나면 데스크톱에서는 표시되지 않는다는 사실, 또, 모바일 스킨에서는 아무 스타일(CSS 포함)도 표시되지 않는다는 사실을 기억해두세요. 이 둘을 적절히 조합하면 모바일에서는 표시되지만, 데스크톱에서는 표시되지 않는 요소를 만들 수 있습니다. 파일 태그를 통해 문단 그림을 직접적으로 대문에 추가하셨다면 데스크톱과 모바일에서 모두 정상적으로 표시되도록 하기 위해 CSS를 통한 방식으로 바꾸시는 걸 추천합니다.

자바 스크립트나 CSS를 사용하는 요소편집

일부 위키는 요소를 꾸미기 위해 자바 스크립트나 CSS를 이용하기도 합니다. 이러한 요소는 데스크톱에서는 정말 멋지게 표시되지만, 아쉽게도 모바일에서는 제대로 표시되지 않습니다. 자세한 사항을 지금부터 알아봅시다:

고급 기능을 이용한 요소의 데스크톱에서의 모습과 모바일에서의 모습


모바일 스킨에서는 자바 스크립트와 CSS가 적용되지 않기 때문에 위와 같은 요소를 동일하게 모바일에서 표시하는 건 거의 불가능에 가깝습니다. 가장 적절한 방법은 이러한 요소를 모바일에서 아예 지워버리는 것입니다. 이를 실행하기 위해선 <verbatim> 태그와 CSS에 대한 지식이 필요합니다.

모바일에서 특정 요소를 숨기기 위해선 먼저 미디어위키 페이지를 만들고 그 코드를 Verbatim 태그를 사용한 페이지에 삽입하세요. 그리고 미디어위키 페이지에 <style> 태그를 추가해 해당 코드가 확실히 CSS 스타일로 인식받을 수 있도록 해주세요. 그리고 숨기고 싶은 요소의 "display" 스타일을 "none"으로 맞춰 모바일에선 표시되지 않게 해주세요. 그리고 요소를 모바일에서만 숨기도록 하기 위해 "wkMobile" 태그를 추가해주세요. 예를 들어 "example" 클래스로 요소를 모바일에서 숨기고 싶을 땐 다음과 같이 됩니다:

모바일에서 요소를 숨기는 CSS의 예제

HTML

<div class="example">This element will be hidden on mobile.</div>

미디어위키 페이지에서

<style>
.wkMobile .example {
    display: none;
}
</style>


verbatim 태그는 미디어위키 페이지의 콘텐츠가 제외 없이 모두 적용될 수 있도록 해줍니다. 또한, CSS 코드를 style 태그 안에 넣으면 코드가 모바일 스킨에 직접적으로 적용될 수 있도록 해줍니다. wkMobile 클래스는 코드가 데스크톱에서는 적용되지 않도록 해줍니다.

사례 연구편집

모바일 최적화 전과 후의 몬스터헌터 위키 대문을 비교해 보세요.

함께 보기편집

도움 및 문의편집

Community content is available under CC-BY-SA unless otherwise noted.