FANDOM


당신이 쓴 멋지고, 아름다운 글을 매달 최소 1억 명의 사람들이 읽는다는 사실을 알고 계셨나요? 또 그중 50% 이상은 태블릿이나 모바일 폰을 사용하고 있다는 걸 알고 계셨나요?[1]

팬덤이 추천하는 관행에 따라 서식을 꾸미고, 글을 작성하면 어느 기기에서든 멋지게 표시되는 완벽한 위키를 만들 수 있습니다. 위키를 사용할 수 있는 기기로는 환경에 따라 유연하게 움직이는 데스크톱 사이트, 독자를 중심으로 디자인된 모바일 사이트, 특정 커뮤니티에 특성화된 팬덤 앱 등이 있습니다.

관행이란 무엇인가요?편집

팬덤은 숙련된 관리자나 커뮤니티 회원들과 함께 위키 콘텐츠에 해도 되는 것과 하면 안 되는 것에 대한 규칙, 즉 관행을 만들었습니다. 이러한 관행의 최종 목표는 팬덤 플랫폼에서 자신의 상상력을 펼치고 싶은 사용자들을 지원하면서 최신 웹사이트의 기준을 너무 넘어서지 않도록 하는 것입니다.

관행은 과 콘텐츠에 간단히 적용할 수 있습니다. 관행을 따른 콘텐츠는 데스크톱에서, 그리고 모바일, 태블릿, 커뮤니티 앱에서도 정상적으로, 예상한 대로 표시됩니다. 또한, 관행을 따르면 페이지의 로딩 시간을 줄여 주고, 커뮤니티의 SEO 랭킹을 쉽게 올릴 수 있도록 해줍니다.

아래 관행을 따르면 일단 시스템이 각 콘텐츠 요소(정보상자, 둘러보기 상자, 인용 틀 등...)를 쉽게 구별할 수 있도록 해주고, 최종적으로는 팬덤이 각 요소에 최적화된 환경을 제공할 수 있도록 해줍니다.

관행편집

정보상자편집

정보상자는 모든 팬덤 커뮤니티를 통틀어 가장 흔히 쓰이는 콘텐츠 요소입니다. 이러한 정보상자를 모바일 기기에서도 정상적으로(예상한 대로) 표시하기 위해선 정보상자 토대에 정보상자임을 구별하는 코드, class="infobox" 코드를 추가하는 것이 좋습니다.

예제

이 틀의 전체 내용은 '못말리는 패밀리 위키'의 틀:배우 정보 (영어)를 참고하세요.

{| class="infobox"
|-
[...]
결과


인용편집

많은 커뮤니티가 인용 틀을 사용하고 있습니다. 인용 틀에 대한 관행은 두 가지가 있습니다:

  1. 표를 사용하지 않고, div를 통해 만드세요.
  2. 토대에 class="quote" 코드나 class="blockquote" 코드를 사용하세요.
예제

이 틀의 전체 내용은 '헝거게임 위키'의 틀:인용 (영어)를 참고하세요.

<blockquote>''{{{인용문}}}'' — <cite>{{{발언자}}}</cite>
</blockquote>
결과


편집

는 매우 복잡한 콘텐츠 요소입니다. 그러므로 관행에 따르지 않고 부적절하게 사용하면 특정 기기에서 원치 않은 방식으로 표시될 수도 있습니다.

첫 번째 관행은 페이지 전체를 표로 꾸미려고 하지 않기입니다. 표는 무기 파괴 확률 목록, 등장인물 목록같이 특정 데이터를 체계적으로 표시하는 데에만 사용해야 합니다. 명확한 표 디자인을 위해 표를 꾸밀 땐 최신 HTML, CSS 관행을 따르는 것이 좋습니다. 참고: W3Schools.com

두 번째 관행은 표 안에 또 표를 넣지 않기입니다. 표 안에 또 표를 넣기보단 셀 병합 기능을 잘 활용해 보고, 그래도 안 되면 W3Schools를 참고해 보시기 바랍니다.

세 번째 관행은 행과 열의 수는 합리적으로 정하기입니다. 적절한 행과 열을 가진 표는 데스크톱에서도, 모바일에서도 모두 정상적으로 표시됩니다. 데이터의 양을 적절히 줄여 테이블이 데이터를 잘 소화할 수 있도록 해주세요.

예정...편집

아래 관행은 2015년에 새로운 모바일 지원이 출시된 후부터 적용됩니다:

알림편집

알림은 문서 최상단에 위치해서 독자와 편집자에게 필요한 정보를 알려주는 콘텐츠 요소입니다.

이 알림을 모바일 기기에서도 정상적으로 표시하려면 토대에 class="notice" 코드를 추가해 주세요. 알림에서 알리고 있는 내용의 분류를 정하고 싶을 땐 클래스에 알림 분류를 추가해 주세요. (예제: class="notice spoiler")

팬덤에서 지원하는 다섯 알림 분류는 다음과 같습니다: 스포일러 (spoiler), 동음이의어 (disambig), 토막글 (stub), 정리 필요 (maintenance), 정보 (informational)

예제

이 틀의 전체 내용은 '트론 위키'의 틀:갤러리 (영어)를 참고하세요.

<div class="notice">
'''[[{{BASEPAGENAME}}|갤러리: {{BASEPAGENAME}}]]'''<br />이 페이지는 [[{{BASEPAGENAME}}]]에 대한 그림을 모아 표시하고 있습니다. [...]
</div>
결과

모바일은 곧 출시 예정!


둘러보기 상자편집

독자들이 쉽게 다른 문서를 찾아갈 수 있도록 많은 커뮤니티가 둘러보기 상자를 이용하고 있습니다. 대부분의 둘러보기 상자는 문서 최하단에 위치합니다.

이 둘러보기 상자를 모바일 기기에서도 정상적으로 표시하려면 토대에 class="navbox" 코드를 추가해 주세요. 또, nav 태그를 사용하는 것도 추천합니다.

예제

이 틀의 전체 내용은 '스크럽스 위키'의 틀:Ep Nav S1 (영어)를 참고하세요.

<nav class="navbox">
<div class="navbox-title">시즌 1 에피소드</div>
# "[[My First Day]]"
# "[[My Mentor]]"
# "[[My Best Friend's Mistake]]"
# [...]
</nav>
결과

모바일은 곧 출시 예정!


접을 수 있는 콘텐츠편집

접을 수 있는 콘텐츠는 둘러보기 상자나 문서 내에서 "더 보기" 버튼으로 자세한 내용을 숨기고, 공간을 절약하게 해주는 콘텐츠 요소입니다.

이 콘텐츠를 모바일 기기와 편집 환경에서도 정상적으로 표시하려면 토대에 class="mw-collapsible" 코드를 추가해 주세요. class="collapsible" 코드 또한 사용할 수 있습니다. 이 클래스는 다른 클래스들과 함께 사용할 수 있습니다.

예제

이 틀의 전체 내용은 '로스트피디아'의 틀:둘러보기 상자 (영어)를 참고하세요.

<div class="navbox mw-collapsible"> 
[...]
</div>
결과

모바일은 곧 출시 예정!


스크롤할 수 있는 콘텐츠편집

접을 수 있는 콘텐츠와 비슷하게, 긴 데이터를 짧게 표시하기 위해 스크롤할 수 있는 작은 상자를 사용하는 커뮤니티도 있습니다.

이 콘텐츠를 모바일 기기에서도 정상적으로 표시하려면 토대에 class="scrollable" 코드를 추가해 주세요. 이 클래스는 다른 클래스들과 함께 사용할 수 있습니다.

예제

이 틀의 전체 내용은 '파워리스팅 위키'의 틀:스크롤 박스 (영어)를 참고하세요.

<div class="scrollable"> 
[...]
</div>
결과

모바일은 곧 출시 예정!

질문이 있으신가요?편집

위에서 설명해드린 관행에 대한 질문이 있으신가요? 혹은 관행을 귀하의 커뮤니티에 적용하고 싶지만 문제가 있으신가요? 그럴 때는 중앙 커뮤니티 포럼이나 '특수기능:문의'를 이용해 주세요.

알아둘 것 - 미리보기 창의 드롭다운 메뉴에서 'Mobile' 항목을 선택하면 편집한 페이지가 모바일에서 어떻게 보일지 미리 확인할 수 있습니다.

각주
  1. Wikia Network — Quantcast.com

도움 및 문의편집

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