페미위키:2026년 디자인 가이드

📁 페미위키 개발

페미위키 개발

• 공지사항
  • 기술 블로그
  • 업데이트
• 정보·안내
  • 기술 정보
  • 트윗봇
  • 편집 필터
• 워크스페이스
  • 깃헙 프로젝트
• 메모
  • 개선이 필요한 부분
    • 알려진 문제
    • 개선요청
    • 잘못된 메시지
  • 자동화가 필요한 문서
    • WikiApiary 기록
    • 구글 애널리틱스 기록
  • 개발 필요
    • 자동 맞춤법 교정
  • 기타
  • 토론 시스템 간 비교 분석 보고서
  • 편집 필터 오작동 기록
  • 디스코드 백업
• 보존
  • 디자인/보존
  • 디자인(2)
  • 게시판
  • 사이트 개발
  • 할일
  • 시각편집기 개선점
  • 미디어위키 성능 개선
  • 기술
  • 소스 코드

vdeh

페미위키 화면의 디자인 원칙입니다. 이전 가이드는 페미위키:2020년 디자인 가이드에 있습니다.

원칙

본문은 줄로 나눕니다. 제목 밑줄과 얇은 구분선으로 글의 구조를 보입니다.

정의

페미니즘은 하나의 고정된 의미를 가진 것이기보다는 여러 갈래로 이어져 온 사상과 운동이다.

어원

한국어로는 여성주의라고도 한다.

이렇게제목 밑줄과 구분선으로 절을 나눕니다.

정의

페미니즘은 하나의 고정된 의미를 가진 것이기보다는 여러 갈래로 이어져 온 사상과 운동이다.

어원

한국어로는 여성주의라고도 한다.

이렇게 하지 않습니다본문의 절을 카드에 담지 않습니다. 카드는 웹사이트의 요소에 씁니다.

웹사이트의 요소는 모서리와 깊이로 나타냅니다. 버튼처럼 누르는 것은 둥글고 도드라지게 해서 손에 잡히는 물건처럼 보이게 하고, 카드처럼 묶음이 필요한 것은 흰 면을 살짝 띄웁니다. 평평한 요소는 누를 수 있는지 알아보기 어렵고, 모양으로 단서를 줄 때 더 빨리 찾습니다.

미리 보기저장

가사노동

집안일에 드는 노동

이렇게버튼은 둥글고 도드라지게, 카드는 흰 면을 살짝 띄웁니다.

미리 보기저장

가사노동

집안일에 드는 노동

이렇게 하지 않습니다평평하고 각진 버튼은 글자나 꼬리표처럼 보여서 누를 수 있는지 알기 어렵습니다.

색은 뜻이 있을 때 칠합니다. 보라는 페미위키 자체를, 연두는 할 일과 새것을 나타냅니다.

문서 편집

바꾼 내용은 편집 지침에 따라 저장합니다.

취소미리 보기저장

이렇게연두는 한 화면에서 가장 중요한 동작 하나에만, 줄과 링크는 보라로 씁니다. 이 두 예시는 다크 모드에서도 밝은 화면의 색으로 보입니다.

문서 편집

바꾼 내용은 편집 지침에 따라 저장합니다.

취소미리 보기저장

이렇게 하지 않습니다여러 버튼과 제목, 링크를 연두로 칠하면 무엇을 해야 할지 알 수 없습니다.

길잡이는 본문 밖에 둡니다. 목차와 책날개처럼 문서 안팎을 오가는 도구는 화면 폭이 1120px 이상이면 본문 옆에, 그보다 좁으면 서랍에 두어 본문을 가리지 않게 합니다. 서랍을 쓰는 화면에서는 위로 스크롤하면 상단 막대가 다시 나타나고, 제목이 화면 밖에 있을 때는 막대에 목차 단추가 생깁니다.

정의

어원

갈래

역사

페미니즘

이렇게넓은 화면에서는 목차를 본문 옆에 두고, 읽는 절을 보라 줄로 표시합니다.

페미니즘

목차

1 정의

2 어원

3 갈래

4 역사

이렇게 하지 않습니다목차를 본문 가운데에 끼우면 글이 끊기고, 읽는 중에는 목차를 다시 찾을 수 없습니다.

읽는 동안 쓰지 않는 것은 숨깁니다. 지금 보고 있는 화면의 탭(문서, 보기)은 감추고, 역사 탭 대신 제목 아래의 최근 편집 시각을 역사로 가는 링크로 둡니다. 그 밖의 문서 도구는 제목 옆의 메뉴 단추 하나 뒤에 모으고, 메뉴는 본문을 밀어내지 않고 단추 아래에 떠서 열립니다. 숨기는 만큼 다음을 지킵니다.

• 할 일 하나는 늘 보입니다. 문서를 읽는 화면에서 편집 버튼은 숨기지 않습니다.
• 숨긴 것은 한 곳, 메뉴에서 모두 찾을 수 있게 합니다. 새 버튼이나 고정 막대를 더할 때도 메뉴에 없는 기능을 화면 곳곳에 따로 두지 않습니다. 역사는 메뉴의 도구 묶음 맨 위에도 있습니다.
• 탭이 없어도 지금 어느 화면인지 알 수 있습니다. 역사와 편집 화면에서는 보기 링크가 나타나 문서로 돌아가는 길이 보입니다.

본문은 오래 읽기 편하게 짭니다.

• 본문 글자는 19px, 휴대폰에서는 16.5px입니다. 위키백과(Vector 2022)의 큰 글자 설정(20px)에 가깝습니다.
• 줄 간격은 글자 크기의 1.7배입니다. WCAG는 1.5배 이상을, Codex는 1.6배를 권합니다.
• 본문 폭은 43.4rem이라 한 줄에 한글이 40자 남짓 들어갑니다. WCAG는 한중일 글자로 한 줄에 40자 이하를 권하고, 위키백과도 같은 근거로 본문 폭을 줄였습니다.
• 특수 문서(환경 설정 제외), 분류, 역사, 차이, 편집 화면은 표와 두 단 비교가 들어가도록 64rem으로 넓힙니다. 위키백과(Vector 2022)가 넓게 두는 화면과 같고, 대문만 넓히지 않습니다. 넓힌 화면에서는 목차를 늘 서랍에 둡니다.
• 한국어는 어절 단위로 줄을 바꾸고 낱말 중간에서 끊지 않습니다(word-break: keep-all).

색

다음 색을 씁니다. 값은 FemiwikiSkin의 resources/variables.less에 있습니다.

이름	값	쓰임
보라 1	#c3bffd
보라 2	#b9b5d9	제목 밑줄, 면 테두리
보라 3	#aca6e4	진행 색
목차 줄 색(@color-toc-rule)	#8981d3	본문 목차의 위아래 줄, 편집 버튼
보라 4	#736ac9	상단 막대, 목차 줄, 현재 위치 표시, 편집 버튼의 테두리와 마우스를 올린 편집 버튼
보라 5	#5144a3	링크, 누른 편집 버튼
보라 6	#302a45
연두 1	#dae8b2	안 읽은 알림
연두 2	#b2d236
연두 3	#a5c831	새 토론이 있는 토론 탭 아이콘
강조	#bad75b	주 버튼, 편집 추천, 배지
강조 위 글자	#414f0a	강조 색 위의 글자(대비 5.5:1)
진행 보조 면	#ecebfc	주 버튼이 아닌 진행 버튼의 바탕. 보라 5 글자가 6.6:1입니다. 마우스를 올리면 #dfddf8(5.9:1), 누르면 #d3cff4(5.2:1)

코드에서는 이 값을 직접 적지 않고 변수로 씁니다. 표에 없는 색은 쓰지 않습니다.

보라

보라는 페미위키 자체를 나타냅니다. 상단 막대, 링크, 제목 밑줄과 구분선, 목차, 편집 버튼, 주 버튼이 아닌 진행 버튼, 체크된 상자, 포커스와 선택에 씁니다. 칠하는 곳은 상단 막대와 버튼뿐이고, 나머지는 줄과 글자 색으로 씁니다.

상단 막대는 보라 4( #736ac9)로 칠하고, 로고와 글자, 아이콘은 흰색으로 씁니다(약 4.5:1). 다크 모드에서도 같은 색입니다. 마우스를 올리거나 누르면 보라 5 쪽으로 더 어둡게 칠합니다. 밝게 하면 흰 글자의 대비가 4.5:1 밑으로 내려가기 때문입니다.

편집 버튼은 목차 줄 색( #8981d3)으로 칠하고 보라 4로 테두리를 두릅니다. 글자와 아이콘은 굵은 흰색이고, 화면 폭과 관계없이 18.67px(14pt) 이상으로 씁니다. 흰 글자의 대비는 약 3.4:1로 4.5:1에 못 미치지만, 18.67px 이상의 굵은 글자는 WCAG의 큰 글자라 3:1이면 됩니다. 그래서 본문 글자가 16.5px인 휴대폰에서도 편집 버튼 글자는 줄이지 않습니다. 마우스를 올리면 보라 4(약 4.5:1), 누르면 보라 5(약 7.8:1)로 바뀝니다. 다크 모드에서도 같은 색입니다.

연두

연두는 할 일과 새것에만 씁니다.

• 할 일: 한 화면에서 가장 중요한 동작 하나. 가입하기, 저장, 계정 만들기 같은 주 버튼과 편집 추천 버튼입니다. 메뉴와 로그인 화면에서는 로그인보다 가입하기가 주 동작입니다.
• 새것: 알림 수, 안 읽은 알림, 새 토론.

연두 위의 글자는 흰색 대신 #414f0a를 씁니다. 흰 글자는 연두 위에서 대비가 약 2:1이라 잘 읽히지 않습니다. 넓은 면, 링크, 제목, 본문 글자에는 연두를 쓰지 않습니다.

옅은 색 면

옅은 색 면은 마우스를 올린 줄, 선택된 항목, 안 읽은 알림, 경고와 오류 메시지처럼 색이 뜻을 가질 때만 씁니다. 본문의 글(요약, 꼬리말 같은 것)을 꾸미려고 색 상자에 담지는 않습니다. 예외로, 주 버튼이 아닌 진행 버튼은 옅은 보라 면( #ecebfc)을 칠합니다. 색이 상태를 알리지는 않지만, 연두 주 버튼보다 한 단계 가벼운 버튼임을 보이면서 그 위의 보라 5 글자를 6.6:1로 읽히게 하는 데 면이 필요합니다.

페미니즘

페미니스트

⚠ 로그인하지 않았습니다. 편집하면 IP 주소가 공개됩니다.

이렇게마우스를 올린 줄과 경고처럼 색이 상태를 알릴 때 옅은 면을 칠합니다.

요약

페미니즘은 여러 갈래로 이어져 온 사상과 운동이다.

페미니즘은 하나의 고정된 의미를 가진 것이기보다는…

이렇게 하지 않습니다본문의 요약이나 꼬리말을 꾸미려고 색 상자에 담지 않습니다.

글자 대비

글자와 바탕의 대비는 4.5:1 이상으로 합니다. 웹 콘텐츠 접근성 지침(WCAG) 2.2의 최소 대비 기준입니다. 대비는 두 색의 상대 휘도 $L$로 계산합니다.

• 색의 R, G, B 값을 각각 255로 나눈 값을 $c$라 하고, $c\le 0.04045$이면 $c/12.92$, 아니면 $((c+0.055)/1.055{)}^{2.4}$로 바꿉니다.
• $L=0.2126R+0.7152G+0.0722B$
• 대비 $=(L_1+0.05)/(L_2+0.05)$. $L_1$이 밝은 쪽입니다.

예를 들어 흰색은 $L=1$, #aca6e4는 $L\approx 0.416$이라 대비가 $1.05/0.466\approx 2.25$입니다.

연보라( #aca6e4) 위에는 흰 글자를 쓰지 않습니다(약 2.3:1). 상단 막대처럼 보라 위에 흰 글자나 아이콘을 둘 때는 바탕을 #736ac9로 칠합니다(약 4.5:1).

femiwiki바뀐글임의글

약 4.5:1

저장약 5.5:1

이렇게흰 글자는 #736ac9 위에, 연두 위에는 #414f0a 글자를 씁니다. 이 두 예시는 다크 모드에서도 밝은 화면의 색으로 보입니다.

femiwiki바뀐글임의글

약 2.3:1

저장약 2:1

이렇게 하지 않습니다옅은 보라와 연두 위의 흰 글자는 4.5:1에 못 미쳐 잘 읽히지 않습니다.

다크 모드

다크 모드는 화면의 색을 반전하지 않고 따로 정한 색을 씁니다. 반전하면 그림자가 흰 빛으로 번지고 떠 있는 면이 바탕과 구분되지 않기 때문입니다. 바탕과 면, 글자, 테두리, 그림자는 Codex의 다크 모드 값을 쓰고, 보라는 차례를 뒤집어 씁니다. 밝은 화면에서 보라 1이 맡는 곳을 다크 모드에서는 보라 6이, 보라 2는 보라 5가, 보라 3은 보라 4가 맡고, 그 반대도 같습니다. 그래서 링크는 보라 2(#b9b5d9, 바탕 위에서 9.4:1)로 보입니다. 진행 보조 버튼은 #36355b 면에 보라 1 글자(6.7:1)를 쓰고, 안 읽은 알림의 옅은 연두 면은 #303a1e입니다. 상단 막대, 편집 버튼, 연두 주 버튼과 그 위의 진한 글자, 알림 숫자 배지는 밝은 화면과 같은 색입니다.

가사노동

집안일에 드는 노동

미리 보기저장

이렇게다크 모드의 색을 따로 정하면 그림자는 어둡게 남고 카드는 바탕 위에 뜹니다. 이 두 예시는 화면 모드와 관계없이 같은 색으로 보입니다.

가사노동

집안일에 드는 노동

미리 보기저장

이렇게 하지 않습니다화면을 반전하면 그림자가 밝은 테두리처럼 번지고, 연두 버튼은 어두운 풀색이 됩니다.

모서리와 깊이

버튼 그림자는 페미위키 편집 버튼에서 써 온 값(0 1px 2px rgba(0,0,0,0.5))을 씁니다. 메뉴와 카드의 그림자, 반경 이름은 위키백과가 쓰는 Codex의 디자인 토큰을 따릅니다.

• 취소 저장 눌림 버튼: 0.3em, 편집 버튼의 그림자. 누르면 같은 그림자가 안으로 들어갑니다. 주 버튼, 일반 버튼, 편집 버튼 모두 같습니다.
• 옮기기 새 이름 확인 취소 버튼의 무게: 세 가지입니다. 한 화면에서 가장 중요한 동작 하나는 연두 주 버튼, 그다음 진행 동작은 옅은 보라 면에 보라 5 글자를 쓴 보조 버튼, 나머지는 흰 중립 버튼입니다. 지우기처럼 되돌리기 어려운 동작의 보조 버튼은 같은 무게로, 테두리 없이 옅은 빨강 면(Codex background-color-destructive-subtle)에 빨강 글자를 씁니다.
• 새 이름 확인가리키는 문서 보기 붙은 버튼: Codex의 버튼 묶음처럼, 대화상자 테두리나 옆 버튼에 닿는 모서리는 각지게 두고 비어 있는 모서리만 0.3em으로 둥글게 합니다. 대화상자 테두리에 붙은 버튼은 그림자 없이 둡니다. 따로 떨어진 버튼은 네 모서리 모두 0.3em이고 그림자를 줍니다.
• 검색어 입력 입력창, 선택 상자, 체크 상자: 0.3em, 그림자 없음.
• 페미니즘페미니스트 떠서 열리는 메뉴, 대화상자, 팝업: 0.3em, box-shadow-medium.
• 가사노동 카드, 사이트 공지: 0.3em, 흰 면, 연보라 테두리, box-shadow-medium.
• ⚠ 경고 경고와 오류 메시지: Codex 메시지의 색과 테두리 그대로, 모서리만 0.3em. 그림자 없음.
• 3 (일반) ✕ ✎ 완전히 둥글게: 숫자 배지와 지울 수 있는 칩은 border-radius-pill, 떠 있는 버튼(편집 추천, 디스코드)과 라디오 버튼은 border-radius-circle(50%).
• code 모서리 없음: 본문의 제목, 표, 코드, 그림.
• 섬네일 프레임 그림: 본문이므로 평평하게 둡니다. 섬네일은 테두리, 바탕, 그림자 없이 두고 설명은 작은 회색 글자로 씁니다. 프레임은 테두리를 보이는 형식이라 연보라(#b9b5d9) 1px 줄 하나만 두릅니다. 둥근 모서리와 그림자는 문서 위에 뜨는 화면 요소에만 씁니다.

아이콘만 있는 조용한 버튼은 평평하게 두고, 마우스를 올렸을 때만 0.3em 배경을 보입니다. 위에 없는 모서리 값과 그림자 값은 쓰지 않습니다.

🔍 페미니

페미니즘

페미니스트

페미니즘 굿즈

이렇게채우는 입력창은 평평하게 두고, 떠서 열리는 메뉴는 그림자로 띄웁니다.

🔍 페미니

페미니즘

페미니스트

페미니즘 굿즈

이렇게 하지 않습니다입력창에 그림자를 주면 버튼처럼 보이고, 그림자 없는 메뉴는 본문과 섞입니다.

관련 문서

문서

분류

가사노동

노동

돌봄

노동

<ref>출처</ref>

이렇게본문의 제목, 표, 코드는 각지게 둡니다.

관련 문서

문서

분류

가사노동

노동

돌봄

노동

<ref>출처</ref>

이렇게 하지 않습니다본문을 둥글게 하면 누를 수 있는 요소와 구분되지 않습니다.

아이콘

아이콘은 위키백과와 같은 Codex 아이콘을 씁니다. 글자 없이 아이콘만 둘 때는 항목마다 뜻에 맞는 아이콘을 따로 골라 겹치지 않게 합니다. 예를 들어 편집 필터와 편집 필터 기록을 오가는 탭은 깔때기와 목록 아이콘을 씁니다.

• 상단 막대의 아이콘은 흰색으로, 그 밖의 아이콘은 글자 색에 65% 불투명도로 글자보다 한 단계 옅게 씁니다. 다크 모드에서는 밝게 바꿉니다.
• 메뉴 항목은 글자 앞에 아이콘을 둡니다.
• 토론 탭은 아이콘 옆에 토론 수를 적습니다. 최근 30일 안에 댓글이 달린 토론이 있으면 아이콘을 연두 3(#a5c831)으로 칠해 새것을 알립니다.

로고

2021년 1월 2일부터 쓰는 로고입니다. 초창기 로고와 활용례는 페미위키:2020년 디자인 가이드#로고에 있습니다.

• 
• 

한글 로고

한글 로고는 SNS 계정 등에서 사용 중입니다.