도움말:디자인

공용 문서
규정 · 도움말 · 공용 틀 · 양식 · 연 도 · 날짜

도움말

[ 펼치기 · 접기 ]

개요

이 도움말은 읽기 좋고 보기 좋은 문서를 만들기 위한 원리를 다룹니다. 반드시 따라야 하는 규칙은 아니며, 세계마다 개성을 살려 꾸미기를 환영합니다. 다만 개성은 기본기를 갖춘 문서에서 더 잘 드러나므로, 이 문서는 꾸미는 방법보다 그렇게 꾸미는 까닭을 중심으로 설명합니다.

처음이라면 양식을 가져다 쓰기만 해도 충분히 깔끔한 문서가 됩니다. 이 문서는 그다음 단계에서 양식을 고치거나 세계만의 틀과 표를 설계할 때 참고하기 위한 글입니다. 다크 모드와 모바일에서 점검할 항목은 하위 문서인 환경 대응에 따로 정리해 두었습니다.

마음에 드는 디자인을 발견하면 그 문서의 편집 화면을 열어 구조를 살펴보기를 권합니다. 위키에서 디자인을 익히는 가장 빠른 방법입니다. 다만 가져다 쓸 때에는 휘장 틀과 분류를 지우고, 그 세계 전용 틀이라면 대표자에게 미리 알려 두어야 합니다.

위계

독자는 문서를 처음부터 끝까지 읽기 전에 먼저 훑어보며, 그 짧은 시간 안에 이 문서가 무엇을 다루고 어디에 무엇이 있는지를 파악합니다. 문서 디자인은 이 훑어보기를 돕는 데에서 출발하며, 그 수단이 위계입니다.

위키 문서에서 위계를 만드는 수단은 크기, 굵기, 색, 위치의 네 가지입니다. 이 가운데 위치가 가장 효과가 크고 수고도 적습니다. 첫 문단에서 대상을 한두 문장으로 정의하고, 정보상자에 요약을 모으고, 문단 제목으로 내용을 나누기만 해도 위계의 대부분이 갖추어집니다. 크기나 색은 그다음에 생각합니다.

강조는 상대적이어서, 모든 부분을 강조하면 어느 부분도 강조되지 않습니다. 한 화면에서 눈에 띄는 요소는 하나, 많아도 둘이면 충분합니다. 본문을 강조할 때에는 색보다 굵기가 낫습니다. 굵은 글씨는 다크 모드에서도, 흑백으로 인쇄해도, 색을 구분하기 어려운 독자에게도 똑같이 강조로 읽히지만, 색 글씨는 환경에 따라 단순히 색이 다른 글씨로만 보일 수 있습니다.

문단 제목은 꾸밈이 아니라 문서의 구조입니다. 목차와 문단 링크([[문서#문단]]), 화면 낭독기가 모두 문단 제목의 단계를 기준으로 문서를 해석합니다. 그러므로 모양이 마음에 든다는 이유로 ===부터 시작하거나 단계를 건너뛰면 목차 번호가 어긋나고 문서의 구조도 틀어집니다. 제목의 크기가 마음에 들지 않으면 단계를 바꾸기보다 문단 구성을 다시 검토하기를 권합니다.

일관성

문서 한 편을 아름답게 꾸미기보다 한 세계의 문서들이 같은 모양을 갖추도록 하면 독자에게 훨씬 큰 도움이 됩니다. 정보상자의 항목 순서, 표 머리글의 색, 테두리의 굵기가 문서마다 같으면 독자는 두 번째 문서부터 모양을 해석하지 않고 내용만 읽게 됩니다.

이를 위해 세계마다 간단한 디자인 규칙을 정해 두기를 권합니다. 대표 색 하나, 보조 색 하나, 테두리 두께, 모서리를 둥글게 할지 여부 정도면 충분합니다. 정한 내용을 세계의 메타 문서에 편집 지침으로 적어 두면 공동 창작자와도 쉽게 맞출 수 있습니다.

나아가 이 값들을 틀 하나에 모아 두는 방법이 있습니다. 세계의 대표 색을 출력하는 작은 틀을 만들고 모든 정보상자와 표가 그 틀을 부르게 하면, 색을 바꿀 때 그 틀 하나만 고쳐도 세계 전체에 반영됩니다. 반대로 문서마다 #81B11F 같은 색 값을 직접 적으면, 바꿀 때 수십 개의 문서를 일일이 찾아 고쳐야 합니다.

위키 전체와의 조화도 고려해야 합니다. 본문 글꼴과 글씨 크기는 원칙적으로 바꾸지 않습니다. 문서마다 본문 모양이 다르면 위키 전체가 어수선해 보이고, 독자는 문서를 옮겨 다닐 때마다 새 글꼴에 적응해야 합니다. 개성은 제목, 표, 정보상자처럼 문서의 틀을 이루는 부분에서 드러내고, 본문은 위키의 기본 모양을 따르면 세계의 개성도 오히려 또렷해집니다.

색

대비

색을 고를 때에는 아름다움보다 명도 대비를 먼저 확인해야 합니다. 글씨와 배경의 명도 차이가 부족하면 아무리 조화로운 색이라도 글씨를 읽을 수 없습니다. 웹 접근성 지침(WCAG)은 본문 글씨에 4.5:1, 큰 글씨에 3:1 이상의 대비를 권하며, 이 기준을 염두에 두면 실수가 크게 줄어듭니다.

흰 글씨를 올리는 머리글 배경에서 문제가 자주 생깁니다. 연두색, 하늘색, 노란색, 주황색처럼 명도가 높은 색은 채도가 높아 화려해 보여도 흰 글씨와의 대비가 부족합니다. 같은 계열에서 한두 단계 어두운 색을 고르면 대부분 해결됩니다. 또 채도가 매우 높은 빨강과 파랑을 맞붙이면 경계가 흔들려 보이므로, 강한 색끼리는 사이에 흰색이나 회색을 두기를 권합니다.

다크 모드

다크 모드에 대응하기 어려운 까닭은, 라이트 모드에서 연한 색으로 고른 값이 다크 모드에서는 밝게 튀는 색이 되기 때문입니다. #ffdddd는 흰 배경 위에서는 은은한 분홍이지만 검은 배경 위에서는 거의 흰색으로 보입니다.

이 문제는 반투명 색으로 가장 자연스럽게 해결할 수 있습니다. #ff000010처럼 투명도를 가진 색은 아래의 배경과 섞여 표시되므로, 흰 배경 위에서는 연한 분홍으로, 검은 배경 위에서는 어두운 적갈색으로 보입니다. 값 하나로 두 모드에 모두 맞는 색을 얻는 셈이며, 배경을 은은하게 칠하는 용도라면 대부분 반투명 색으로 충분합니다.

흰 글씨를 올릴 머리글 배경처럼 반투명으로 해결되지 않는 진한 색은 두 모드의 색을 따로 정해야 합니다. 위키는 이를 위해 아래 자주 쓰는 틀에 있는 틀을 제공하며, CSS를 직접 쓸 때에는 light-dark(#73bfa8, #2d2f34)처럼 라이트 모드의 색과 다크 모드의 색을 함께 적을 수도 있습니다.

색의 의미

색은 의미를 전달하기도 합니다. 빨강은 경고나 위험을, 초록은 정상이나 완료를, 회색은 비활성을 뜻한다는 관습이 이미 독자에게 익숙하므로, 이 관습을 거스르면 독자가 혼란스러워합니다. 또한 색만으로 의미를 전달해서는 안 됩니다. 색을 구분하기 어려운 독자, 흑백 화면, 다크 모드에서 색이 바뀌는 경우를 모두 고려하여 색과 함께 기호나 글자(○·✕, "운행"·"운휴")를 쓰기를 권합니다.

여백과 정렬

여백은 무엇과 무엇이 한 덩어리인지를 보여 줍니다. 서로 관련된 요소는 가깝게, 관련 없는 요소는 멀게 두면 테두리나 색이 없어도 묶음이 드러납니다. 표 칸의 안쪽 여백이 너무 좁으면 글자가 테두리에 붙어 답답해 보이고, 너무 넓으면 한 줄로 읽혀야 할 정보가 흩어집니다.

여백 값은 4px, 8px, 12px, 16px처럼 일정한 배수로 정하면 문서 전체에 규칙성이 생깁니다. 7px, 11px처럼 제각각인 값은 하나씩 보면 눈에 띄지 않아도 여럿이 모이면 어긋나 보입니다.

정렬에도 원칙이 있습니다. 긴 글은 왼쪽 정렬이 기본이며, 가운데 정렬은 짧은 제목이나 한두 단어로 된 표 칸에만 씁니다. 여러 줄의 글을 가운데 정렬하면 줄마다 시작 위치가 달라져 눈이 다음 줄을 찾기 어렵습니다. 숫자는 자릿수가 맞아야 크기를 한눈에 비교할 수 있으므로 오른쪽 정렬이 원칙입니다. 여기에 font-variant-numeric: tabular-nums를 주면 숫자의 폭이 모두 같아져 세로로 가지런히 맞으며, 시각표나 통계표처럼 숫자가 많은 표에서 특히 효과가 큽니다.

표

표는 정보를 두 축으로 비교할 때 쓰는 도구입니다. 항목과 설명을 늘어놓는 정보처럼 축이 하나뿐이라면 표보다 문장이나 목록이 가볍고 모바일에서도 잘 읽힙니다. 그러므로 표를 만들기 전에 그 정보에 가로축과 세로축이 모두 있는지 먼저 확인하기를 권합니다.

표의 기본은 class="wikitable"입니다. 이것만으로도 다크 모드와 모바일에 어느 정도 대응되며, 테두리와 머리글에 세계의 대표 색을 주는 정도면 충분합니다.

{| class="wikitable" style="border: 2px solid #81B11F;"
|+ 표 제목
! style="background: #81B11F; color: #fff;" | 머리글
|-
| 내용
|}

머리글 칸은 반드시 !로 만들어야 합니다. 굵게 처리한 일반 칸은 보기에는 같아도 화면 낭독기와 검색 엔진이 머리글로 인식하지 못합니다. 표 위의 설명은 |+로 표 제목을 달면 표와 한 덩어리가 됩니다. 항목이 많은 표에 class="wikitable sortable"을 주면 독자가 머리글을 눌러 정렬할 수 있습니다.

rowspan과 colspan은 신중하게 써야 합니다. 칸을 합치면 넓은 화면에서는 깔끔해 보이지만, 좁은 화면에서 표를 가로로 밀어 보거나 정렬 기능을 쓸 때 표가 쉽게 깨지고, 화면 낭독기도 어느 칸이 어느 머리글에 속하는지 놓치기 쉽습니다. 합친 칸이 많아지면 표를 둘로 나누는 편이 대개 낫습니다.

폭은 width: 100%와 max-width를 함께 쓰고, 그래도 넓은 표는 {{스크롤}}로 감쌉니다. 한국어가 많은 표에 word-break: keep-all을 주면 어절 단위로 줄이 바뀌어 읽기 편합니다.

정보상자

정보상자는 문서의 요약입니다. 독자 가운데 상당수가 첫 문단과 정보상자만 읽고 떠나므로, 둘만 읽어도 대상의 정체를 알 수 있어야 합니다.

항목은 대체로 정체, 분류, 수치, 관계의 순서로 두면 자연스럽습니다. 인물이라면 이름과 사진, 소속과 직위, 생몰년 같은 수치, 가족 같은 관계의 순서입니다. 항목 이름과 값은 모두 짧게 씁니다. 정보상자 안에 문장이 길어지기 시작하면 그 내용은 본문으로 옮겨야 합니다. 같은 세계 안에서는 같은 종류의 대상에 같은 항목을 같은 순서로 두며, 앞서 설명한 일관성이 가장 큰 효과를 내는 곳이 바로 정보상자입니다.

이미지

이미지는 형식부터 알맞게 고릅니다. 사진은 JPG, 투명 배경이 필요한 그림은 PNG, 선과 면으로 이루어진 도표·지도·로고는 SVG가 알맞습니다. SVG는 확대해도 깨지지 않고 용량도 작으므로, 직접 만든 도표라면 SVG로 올리기를 권합니다.

해상도는 표시할 크기의 두 배를 기준으로 하면 고해상도 화면에서도 선명합니다. 300px로 보여 줄 이미지라면 600px 정도로 올리면 됩니다. 그보다 훨씬 큰 원본을 올리면 용량만 늘 뿐 화질은 나아지지 않습니다.

틀

같은 style="…"을 세 번 이상 되풀이해 쓰고 있다면 틀로 만들기를 권합니다. 틀로 묶으면 문서의 원문이 짧아져 편집하기 쉬워지고, 모양을 바꿀 때 한 곳만 고치면 됩니다. 앞서 설명한 세계의 디자인 규칙도 틀로 구현합니다.

틀을 설계할 때에는 무엇을 인수로 받을지 신중하게 정해야 합니다. 색이나 폭까지 모두 인수로 받으면 쓰는 사람마다 다른 값을 넣어 결국 일관성이 깨집니다. 원칙적으로 내용은 인수로 받고 모양은 틀 안에서 정하며, 꼭 바꿀 필요가 있는 값만 인수로 열어 두고 기본값을 반드시 정해 둡니다.

틀 안에서 다른 틀을 여러 겹 부르거나 복잡한 조건문을 많이 쓰면 문서를 저장하고 표시하는 데 시간이 걸리고, 위키 엔진의 처리 한도를 넘으면 문서의 일부가 아예 표시되지 않습니다. 반복 계산이 많은 기능은 틀 문법보다 모듈(Lua)로 만들면 빠르고 관리하기도 쉽습니다. 새 틀은 연습장에서 충분히 시험한 뒤 옮기기를 권하며, 틀 전반에 관해서는 도움말:틀에 정리되어 있습니다.

지속성

문서는 한 번 만들고 끝나지 않고 계속 고쳐지며, 위키의 스킨과 환경도 계속 바뀝니다. 오래 유지되는 디자인을 위해 피해야 할 방식이 세 가지 있습니다.

첫째, 폭과 크기를 픽셀로 고정하지 않습니다. width: 640px은 지금의 화면에는 맞아도 다른 기기에서는 넘치거나 남습니다. 백분율과 max-width, 글씨 크기에 비례하는 em 단위를 쓰면 환경이 바뀌어도 비례가 유지됩니다.

둘째, 스킨의 내부 구조에 기대지 않습니다. 스킨이 쓰는 CSS 클래스 이름이나 요소의 위치를 전제로 문서를 꾸미면 스킨이 업데이트될 때 문서가 깨집니다. position: absolute로 요소를 특정 위치에 고정하는 방식도 같은 까닭으로 피하기를 권합니다.

셋째, 복잡한 구조에는 주석을 남깁니다. 원문에 처럼 적어 두면, 나중에 자신이나 공동 창작자가 의도를 모른 채 고쳐 구조를 망가뜨리는 일을 막을 수 있습니다.

자주 쓰는 틀

틀	용도
`{{c\|색\|글씨}}`	색 글씨
`{{ad\|#XXXXXX}}`	다크 모드에서 자동으로 바뀌는 배경 색 값
`{{adt\|#XXXXXX}}`	다크 모드에서 자동으로 바뀌는 글씨 색 값
`{{cb}}` … `{{cbx}}`	펼치고 접는 상자
`{{sc}}` … `{{scx}}`	넓은 표를 가로로 밀어 보는 상자
`{{wbr\|앞\|뒤}}`	좁은 칸에서 줄바꿈 위치를 정하는 틀

틀마다 더 많은 기능이 있으며, 자세한 사용법은 각 틀 문서에 있습니다.

하위 문서

다크 모드와 모바일에서 문서가 깨지지 않는지 확인하는 점검표는 환경 대응에 있습니다.