팬덤을 이용할 때 모바일 기기와 같은 “세컨드 스크린”을 사용하는 사용자의 수는 점차 증가하고 있습니다. 이미 많은 커뮤니티에서 모바일 사용자의 비율은 상당수를 차지하고 있으며, 일부 커뮤니티에서는 전체 조회수의 60% 가량이 모바일에서 나오기도 합니다.
이렇듯 커뮤니티에 있어서 모바일 사용자는 매우 중요한 존재이며, 커뮤니티를 모바일에 최적화시키는 것은 커뮤니티의 성패를 가르는 요소 중 하나입니다. 오늘 이 글에서는 모바일을 비롯한 다양한 기기에 맞게 커뮤니티 디자인을 최적화시키는 방법에 대해 살펴볼 것입니다.
둘러보기 상자[]
둘러보기 상자는 여러 연관 링크들을 묶어둔 상자를 뜻합니다. 둘러보기 상자는 문서간의 연계성을 높여 준다는 장점이 있지만, 동시에 모바일 친화적이지 않다는 단점 또한 있습니다. 이 때문에 위키백과 같은 곳에서는 모바일 사이트에서 둘러보기 상자를 아예 표시하지 않기도 했었습니다. 이런 둘러보기 상자의 대체제로는, 적절한 분류, 모바일 대문 기능, 간편 정보상자 내 <navigation> 태그 등이 있습니다. 이들은 모두 문서간의 연계성을 높여주면서 동시에 모바일 친화적인 기능들입니다.
다음은 둘러보기 상자를 만들 때 참고할 만한 내용들입니다.
- 둘러보기 상자로 연결하고자 하는 문서들의 순서가 크게 중요하지 않다면, 둘러보기 상자 대신 분류를 사용하는 것도 좋은 방법입니다. 분류는 모바일에서도 쉽게 이용할 수 있으며, 위키문법을 통해 문서와 연결할 수도 있습니다. 또한 분류 문서를 통해 해당 분류에 대한 정보를 담을 수도 있습니다. 분류 문서를 통해 문서들의 연관성을 설명해 준다면, 단순히 링크만 나열하는 것보다 더 좋은 효과를 볼 수 있을 것입니다.
- 연결하고자 하는 문서들의 순서가 중요하다면(예: 이전 글, 다음 글) 정보상자를 이용해 문서를 연결하는 것이 좋습니다.
- 한 문서가 다른 문서를 포함하는 식이라면(예: 특정 문서의 하위 문서) 간편 정보상자의
<navigation>태그를 이용해 문서를 연결하는 것이 좋습니다.
상당수의 커뮤니티에서 하위문서 사이를 이동할 때 태버를 이용하는 방식을 취하고 있습니다. 하지만 이러한 방식은 사이트의 디자인을 복잡하게 만들 뿐 아니라, 모바일 레이아웃에서 의도치 않은 문제를 일으킬 수도 있습니다. 때문에 이러한 문서를 연결할 때는 정보상자를 이용하는 것이 좋습니다.
태버[]
태버는 다양한 정보를 묶어서 표시해주는 기능입니다. 태버를 보다 효과적으로 활용하기 위해서는 기본적으로 다음과 같은 조언을 따르는 것이 좋습니다.
태버는 되도록 간결해야 하며, 태버 내에 또 다른 태버를 넣는 행위는 자제해야 합니다. 또한 그림을 나열하는 데 태버를 사용 중이라면 해당 그림들을 문서 내에 적절히 분산시키거나 태버 대신 <gallery> 태그를 사용하는 것이 좋습니다. <gallery> 태그는 데스크톱에서는 일반 갤러리로, 모바일에서는 모바일에 최적화된 형태의 갤러리로 표시됩니다.
상당수의 태버 내 콘텐츠는 굳이 태버 형식을 필요로 하지 않는 경우가 많습니다. 이런 경우 태버를 사용하기보다는 콘텐츠를 나열해 놓고 각 콘텐츠 사이에 여백을 두는 것이 더 효과적일 수도 있습니다. 태버를 만들 때는 항상 굳이 태버로 콘텐츠의 일부를 숨길 필요가 있는지 생각해 보는 것이 좋습니다.
탭뷰는 특정 문서들의 내용을 태버로 정리해서 보여주는 기능입니다. 단, 탭뷰는 모바일에서는 태버가 아닌 단순 링크 목록으로 대체됩니다. 탭뷰에서 주의할 점은 검색 엔진을 통해 탭뷰 문서에 접속한 사용자들은 메인 문서가 아닌 탭뷰용 문서를 보게 될 것이라는 점입니다. 때문에 탭뷰용 문서에는 메인 문서로 향하는 링크가 있는 게 좋습니다. 메인 문서의 하위 문서(예: [[등장인물/시즌 1]])는 기본적으로 메인 문서로 향하는 링크를 포함하고 있으므로, 메인 문서의 하위 문서를 탭뷰용 문서로 사용하는 것이 좋습니다.
데이터[]
정보상자는 주제와 관련된 주요 정보들을 일정한 형식으로 정리해서 보여주는 상자입니다. 정보상자는 각 문서에 있어서 매우 중요한 요소로 여겨지며, 때문에 모바일 레이아웃에서는 간편 정보상자와 같은 정보상자가 주요 콘텐츠로서 화면의 많은 비중을 차지하고 있습니다. 여기서 이러한 정보상자를 이루고 있는 각 부분을 데이터 요소라고 합니다.
데이터를 적절히 분리하는 것은 커뮤니티 관리에 있어서 매우 중요합니다. 데이터를 분리하는 방법 중 하나로는 주제에 따라 서로 다른 정보상자를 사용하는 것이 있습니다. 예를 들어, 자동차와 비행기 문서 사이에서 서로 다른 정보상자 틀을 이용하는 것입니다. 보다 세분화된 분리가 필요하다면 SUV와 트럭을 분리할 수도 있고, 헬리콥터와 여객기를 분리할 수도 있습니다.
일반적으로 한 데이터의 값에 여러 유형의 정보를 섞어서 사용하는 것은 적절하지 않습니다. 예를 들어, 한 물건의 가격이 “100 골드”라면 가격의 데이터 값은 숫자만 사용한 “100”으로 지정하는 것이 좋습니다. 이후 정보상자에서 자체적으로 해당 데이터 값에 필요한 서식을 추가하도록 할 수 있습니다.
비슷한 종류의 데이터가 여러 개 있다면 각 데이터 값들을 목록으로 묶어서 한 항목 안에 정리하는 것이 좋습니다. 예를 들어, 다음과 같은 데이터는
| 항목1 = 사과 | 항목2 = 바나나
다음과 같이 정리하는 것이 좋습니다.
| 항목 = * 사과 * 바나나
한편, 목록을 데이터 값으로 지정할 때는 반점으로 이루어진 목록보다는 위키문법을 기반으로 한 목록을 사용하는 것이 좋습니다. 위키문법에 기반을 둔 가로 목록이 필요한 경우 이곳을 참고하시기 바랍니다.
이렇게 데이터를 정리할 경우 당장 눈에 띄는 효과는 없지만, 장기적으로 보았을 때 스크립트 및 검색 엔진, 또는 스크린 리더 등이 보다 정확히 문서를 분석할 수 있게 된다는 이점이 있습니다. 또한 데이터 값의 목록화는 언어적인 모호성을 개선할 수 있다는 장점이 있습니다. 또한 목록화된 데이터 값에는 CSS를 통해 별도의 디자인을 적용시킬 수 있습니다.
간편 정보상자는 코드가 상대적으로 단순하다는 장점이 있습니다. 또한 간편 정보상자는 별도의 하위 틀들로 구성된 일반 정보상자와 달리, 하나의 요소만으로 이루어져 있어 서버에 보다 적은 부담을 줍니다. 한편, 이러한 간편 정보상자의 장점에서 볼 수 있듯이 한 정보상자 안에 다른 정보상자를 삽입하는 등의 정보상자를 필요 이상으로 복잡하게 만드는 행위는 자제해야 합니다. 한 주제에서 파생된 하위 주제에 대해 설명할 때는 정보상자 안에 또 다른 정보상자를 사용해 서술하기보다는, 별도의 분리된 정보상자를 통해 서술하는 것이 좋습니다.
한 문서에서 여러 개의 정보상자를 사용하는 것은 적절하지 않습니다. 이는 모바일 환경에서의 불안정성을 야기하기 때문입니다. 일부 커뮤니티는 태버 또는 드롭다운 메뉴를 이용해 한 문서 내에서 여러 정보상자를 사용하는 방식을 택했지만, 이 또한 공식적으로 지원되는 방식은 아닙니다. 대신 여러 정보상자에 흩어져 있는 내용들을 한 정보상자 내에 통합시키는 것이 좋습니다. 예를 들어 “PC 버전” 정보와 “플레이스테이션 버전” 정보를 서로 다른 정보상자에 서술하는 것보다는 한 정보상자 내에서 <group> 태그를 이용해 정리하는 것이 좋습니다.
그림[]
그림을 이용하면 문서 내용을 보다 다채롭게 꾸밀 수 있습니다. 하지만 무조건 그림이 많다고 해서 그 문서가 좋은 문서인 것은 아닙니다. 과도한 그림은 해당 문서를 읽는 독자들에게 혼란을 야기할 뿐입니다.
한 갤러리에 지나치게 많은 그림이 있다면 가능한 한 그림 수를 줄이는 것이 좋습니다. 아니면 갤러리 자체를 제거하는 것도 고려해 볼 수 있습니다. 갤러리 안에 있던 그림들은 문서 내 적절한 곳에 분산시키면 됩니다. 이렇게 할 경우 모바일에서의 지나친 스크롤 부담을 줄일 수 있을 뿐만 아니라, 그림의 텍스트 보완성을 높일 수도 있습니다.
한편, 정보상자를 갤러리로 이용하는 행위는 자제해야 합니다. 정보상자는 주제에 대한 기초적인 정보를 제공하는 상자입니다. 때문에 정보상자에 포함될 그림들은 주제와 직접적으로 연관되어 있어야 합니다. 예를 들어 한 등장인물의 정보상자에 해당 인물의 만화 버전 그림과 애니메이션 버전 그림을 삽입하는 것은 적절하지만, 해당 등장인물이 입었던 의상, 악세사리만을 다루는 그림을 삽입하는 것은 적절하지 않습니다.
기타[]
- 단순히 그림만 사용하는 것은 SEO에 좋지 않습니다.
- SEO를 향상시키기 위해서는 그림과 함께 적절한 텍스트 콘텐츠가 함께 있는 것이 좋습니다.
- 지나치게 많은 문서가 그림으로만 이루어져 있을 경우 검색 노출에서 불이익이 있을 수 있습니다.
- 갤러리 문서의 질을 높게 유지하세요.
- 갤러리 문서에 포함된 그림들을 모두 주제와 관련된 것이어야 합니다.
- 갤러리 문서는 해당 문서와 연관된 메인 문서가 있는 것이 좋습니다. (예: “나루토” 문서와 연관된 “나루토/갤러리” 문서)
- 그림의 이름을 분명하게 하세요.
- 이는 검색 엔진이 보다 정확히 그림을 판단할 수 있도록 하기 위함입니다.
- 예를 들어 “
img012.jpg”보다는 “스파이더맨_거미줄_발사.jpg”가 더 좋습니다.
- 파일 문서의 설명 항목을 작성하세요.
- 파일 문서의 설명 항목은 검색 엔진이 보다 정확히 그림을 판단할 수 있도록 도와줍니다.
레이아웃[]
일부 디자인은 모바일 환경에서 전혀 의도치 않은 결과물을 표시하기도 합니다. 이러한 문제는 디자인의 반응성을 높이는 것으로 해결할 수 있습니다. 데스크톱과 달리 모바일에서는 CSS와 자바 스크립트를 자유롭게 활용할 수 없다는 점을 명심해야 합니다.
표는 팬덤 내에서 자주 쓰이는 기능 중 하나입니다. 하지만, 화면이 작은 모바일 환경 특성상, 모바일에서 표는 제한적으로만 사용될 수 있습니다. 다음은 보다 적절한 표 활용을 위한 정보들입니다.
- 표는 스프레드시트와 같은 방식으로 활용하는 것이 좋습니다.
- 표를 만든 다음에는 실제 모바일 기기를 통해 표를 확인해 보는 것이 좋습니다.
- 표의 열수가 4개를, 가로 폭이 600px을 넘어가지 않도록 하세요.
- 이를 넘어설 경우 모바일 환경에서 표가 화면을 초과할 수 있습니다.
colspan또는rowspan의 사용은 자제하는 것이 좋습니다.- 표 안에 또 다른 표를 넣는 행위는 자제하는 것이 좋습니다.
- 표 이름 부분은 표의 제목과 같은 역할을 합니다. 이를 활용하는 것이 좋습니다.
- 표의 헤더가 해당 열에 적용될 경우에는
scope="col"을, 해당 행에 적용될 경우에는scope="row"를 사용하는 것이 좋습니다. - 표에 스타일을 적용할 때는 클래스 방식보다는 인라인 방식을 사용하는 것이 좋습니다.
- 한 위키 내에 있는 모든 표의 스타일을 변경하고 싶을 때는
Wikia.css에서 “article-table”, “WikiaTable”, “wikitable”와 같은 클래스들을 이용해 변경하는 것이 좋습니다.
- 한 위키 내에 있는 모든 표의 스타일을 변경하고 싶을 때는
- 표 내부에는 그림을 삽입하지 않는 것이 좋습니다.
- 표 내부에 아이콘을 삽입할 때는 모든 아이콘 그림이 일정한 크기로, 작도록 설정하는 것이 좋습니다.
- 아이콘 그림은 가로 폭을 22~25px 사이로 축소하는 게 좋습니다. 그렇게 하면 모바일 화면에서도 아이콘 그림이 확대되지 않습니다.
- 틀을 통해 새로운 행을 추가하는 행위는 자제하는 것이 좋습니다.
- 이러한 행위는 서버가 표를 적절히 파악하는 데 혼란을 줍니다.
- 위의 정보들을 모두 반영해 표를 만들었다면, 해당 표는 모바일에서 줄무늬 스타일로 표시될 것입니다.
일부 위키에서는 레이아웃 또는 디자인을 목적으로 표를 활용하기도 합니다. 하지만 이러한 행위는 적절하지 않습니다. 표는 데이터 정리를 위해 사용하는 것이 가장 바람직합니다.
가로 폭이 600px을 넘어가는 요소는 모바일 기기에서 의도치 않은 문제를 야기할 수 있습니다. 이러한 문제는 해당 요소가 “모바일 친화적”이더라도 발생할 수 있습니다. 예를 들어 CSS를 이용해 가로 폭 전체를 차지하는 간편 정보상자를 만들었다면 이 정보상자는 높은 확률로 모바일 기기에서 비정상적으로 표시될 것입니다. 이는 정보상자 안에 있는 요소들이 모바일 화면에 맞추기 위해 축소되기 때문입니다. 때문에 가로 폭 전체를 차지하면서, 모바일 기기에서도 정상적으로 작동하는 정보상자를 만들기란 매우 어렵습니다. 이러한 정보상자를 만들 때는 정말로 가로 폭 전체를 차지할 필요가 있는지 신중히 고려해야 합니다. 한편, 가능하다면 정보상자의 기본 가로 폭은 바꾸지 않는 것이 좋습니다. 기본 가로 폭을 변경할 경우 그림 크기 조절과 관련된 문제가 발생할 수 있기 때문입니다.
팬덤은 <infobox> 태그 외에도 다양한 모바일 친화적 요소들을 지원하고 있습니다. 그 중에서도 <gallery> 태그는 다양한 용도로 활용할 수 있습니다. 예를 들어 포털에서 링크 나열용으로 쓰거나, 문서 내에서 그림 나열용으로 쓰는 것 등이 있습니다. 또한 <gallery> 태그는 대역폭의 효율적인 사용과 모바일 데이터 절약에 있어서 유리합니다. 한편, <references> 태그는 각주로 활용할 수 있으며, 툴팁의 훌륭한 대체재가 될 수 있습니다. 이러한 태그들을 사용하는 것은 위키 문법이나 자바 스크립트를 사용하는 것보다 더 안전합니다.
옛날 틀들은 인라인 방식을 이용해 스타일을 선언하는 경우가 많았습니다. 하지만 이러한 방식을 사용한 틀은 문서 훼손이나 편집 실수 등으로 인해 쉽게 스타일이 망가질 수 있다는 단점이 있었습니다. 때문에 많은 경우에서, 인라인 방식을 이용하기 보다는 클래스 방식을 이용하는 것이 더 적절합니다. 이렇게 할 경우 스타일이 관리자 차원에서 관리할 수 있는 범위 내로 제한된다는 단점이 있지만, 여전히 보안성과 안정성이라는 큰 장점이 있습니다.
적절한 위치에 적절한 색깔을 사용하는 것은 매우 중요합니다. 사용할 색깔을 선택할 때는 합당한 이유를 가지고 색깔을 선택해야 합니다. 단순히 분홍색이 사용 가능하다고 해서 분홍색으로 강조색을 설정하는 것은 적절하지 않습니다. 분홍색이 위키의 주요 색상과 연관이 있을 때만 해당 색깔을 사용하는 것이 좋습니다. 단순히 색상만을 통해 의미를 전달하는 것 또한 부적절합니다. 이는 색맹 독자들에게 혼란을 야기할 수 있기 때문입니다. 보다 다양한 독자들을 포용하기 위해서는 강한 색상 대비를 가진 색들을 사용하고, 사용하는 색들의 종류를 단순하게 유지하는 것이 좋습니다. 이와 마찬가지로, 문서 배경의 불투명도는 최대한 높게, 보통 90% 이상으로, 설정하는 것이 좋습니다. 문서 배경의 불투명도가 너무 낮을 경우 뒷배경이 그대로 드러나 내용의 가독성을 크게 해칠 수 있기 때문입니다.
색깔을 선택할 때는 위키의 주제와 관련된 색깔을 선택하는 것이 좋습니다. 특히 해당 주제의 로고나 오프닝 화면 등으로부터 어떤 색깔을 사용할지 참고하는 것이 좋습니다. 예를 들어 “슈퍼걸 위키”에서는 빨강, 노랑, 파랑을 주요 색상으로, “워킹 데드 위키”에서는 어두운 색상을 주요 색상으로 선택하는 것이 적절할 것입니다. 사이트의 가독성을 높이고, 동시에 보기 좋은 디자인을 달성하기 위해서는 단순하면서 일관성 있는 색깔들로 주요 색상을 구성하는 것이 중요합니다.
상호작용성[]
설명에 앞서, 팬덤에서는 모바일 내 자바 스크립트를 지원하고 있지 않습니다. 때문에 많은 경우에서 자바 스크립트로 구성된 요소가 모바일에서는 의도한 대로 작동하지 않을 수 있습니다.
상호작용 가능한 콘텐츠를 만드는 데 있어서 유틸리티는 매우 효과적인 수단입니다. 하지만 이러한 유틸리티는 브라우저를 통해 직접 제공되기보다는 애플리케이션의 지원 범위 내에서 제공되는 것이 더 좋습니다.
일부 커뮤니티에서는 자바 스크립트를 사용해 문서 내에 상호작용 가능한 요소(그래프 등)를 삽입하기도 합니다. 이때 독자가 사용하는 기기에 따라 이러한 상호작용 요소가 정상적으로 표시되지 않는 경우가 있을 수 있습니다. 때문에 이러한 요소를 삽입할 때는 다양한 상황에 맞는 대비책을 마련해 두는 것이 중요합니다. 이러한 요소가 모든 기기에서 정상적으로 표시되는 것이 가장 이상적인 상황이겠지만, 상당 부분이 자바 스크립트로 이루어진 요소의 경우에는 현실적으로 모든 기기에서 정상적으로 표시되기는 어려울 수 있습니다.
한편, 특정 요소를 모바일 스킨에서만 표시하기 위해, 또는 숨기기 위해 CSS 클래스를 활용하는 행위는 적절하지 않습니다. 대신 모바일 스킨에서만 숨기고 싶은 요소를 둘러보기 상자 틀로 분류하는 것이 더 적절합니다. 이는 둘러보기 상자로 분류된 틀은 모바일 스킨에서는 표시되지 않는다는 특성을 활용한 방법입니다.
한 문서의 전체 내용이 자바 스크립트만으로 구성되어 있다면 그 문서는 콘텐츠를 제공하는 것보다는 사이트 내에서 기능을 수행하는 데 더 초점을 맞추고 있을 가능성이 높습니다. 커뮤니티 전체에 적용되는 자바 스크립트는 미디어위키 이름공간에 속해 있어야 합니다. 이러한 자바 스크립트의 결과물이 별도의 고정된 콘텐츠를 포함하고 있지 않으면서 동시에 상호작용이 가능할 경우, 해당 결과물은 일반 이름공간 외의 이름공간(예: 특수기능:, 프로젝트:)에 속해야 합니다.
마지막으로, 이러한 요소를 만들 때는 만든 요소를 직접 모바일 환경에서 확인해 보는 것이 좋습니다. 이때 실제 모바일 기기를 통해서 확인해 보거나, 편집 미리보기 기능을 통해서 확인해 볼 수 있습니다. 자바 스크립트로 인해 문서 내의 중요한 정보가, 혹은 문서 내용 전체가 모바일 기기에서 표시되지 않을 경우, 해당 문서의 잠재적 독자 절반 가량을 놓쳐 버리는 결과가 발생할 수도 있습니다. 이러한 문제와 관련해서 도움이 필요하신 경우 포터빌리티 허브에서 자원봉사자분들께 도움을 요청하실 수 있습니다.
유동성[]
오랫동안 일정한 모습을 유지하는 디자인을 만드는 데는 많은 노력이 필요합니다. 커뮤니티에게 있어서는 별다른 개입 없이도 보기 좋은 모습을 유지하는 디자인을 사용하는 것이 가장 바람직합니다. 이러한 디자인은 다양한 기기에서 독자들을 끌어들이는 데 도움을 줄 것입니다.
커뮤니티의 장기적인 발전을 위해 위에서 언급된 방법들을 실제 커뮤니티 디자인에 반영해 보시길 바랍니다.
| 팬덤 중앙 커뮤니티 | 
|
| 문의 - 허브 - 관리자 권한 요청 - 다국어 연결 요청 - 스포트라이트 요청 |  
|
