쓰는 규칙
화면 글, 색, 접근성, 부품을 늘릴 때의 규칙입니다.
글
화면 글, 메일, 설명서, 안내 페이지 모두 이 규칙으로 씁니다. 문장을 넣을지 말지는 그 문장이 없을 때 읽는 사람이 다르게 행동하는지로 정합니다. 달라지지 않으면 뺍니다.
문장
- 한 문장에는 사실 하나만 씁니다.
- 같은 말을 두 번 쓰지 않습니다. 제목, 부제, 이름표, 버튼이 같은 말을 나눠 갖지 않게 합니다.
- 문장은 "~합니다", "~해 주세요"로 끝냅니다.
- "봅니다"는 쓰지 않습니다. 사람이 할 수 있는 일은 "확인하실 수 있습니다", 서비스가 하는 일은 "확인합니다"로 씁니다.
- 비유를 쓰지 않습니다. 무엇을 하고 하지 않는지 씁니다.
- 격언처럼 쓰지 않습니다. "A가 아니라 B다", "~이 먼저다" 같은 문장.
- 줄표로 이름과 설명을 잇지 않습니다. 문장으로 풀거나 줄을 나눕니다.
- 영어 단어 뒤 조사는 붙여 씁니다. oodot이, VocaShot을, tokens.css를.
- 이메일이나 주소 바로 뒤에는 조사를 붙이지 않습니다. '주소로', '계정을'처럼 낱말을 하나 넣습니다.
가리키는 것
무엇인지 알 수 없는 말은 쓰지 않습니다. 문장 안에서 무엇인지 알 수 있으면 됩니다. oodot 화면 글에 다른 서비스 이름을 쓰지 않습니다. 서비스는 계속 늘어납니다.
낱말
쓰는 사람이 아는 낱말로 씁니다. 업로드, 다운로드, 로그아웃처럼 누구나 쓰는 말은 우리말로 바꾸지 않습니다. 서비스 이름은 번역하지 않습니다.
기능을 말하는 낱말
일상에서 쓰는 동사나 비유 대신 그 기능의 정확한 이름을 씁니다. 같은 기능은 모든 화면에서 같은 낱말로 씁니다.
문장을 다듬는 규칙
- 가리키는 말은 "이" 대신 "해당"을 씁니다. "이 차례로" 대신 "해당 차례로", "이 값보다" 대신 "해당 값보다".
- 빠진 주어나 목적어를 채웁니다. "잊어버리면 되살릴 방법이 없습니다" 대신 "비밀번호를 잊어버리면 복구할 수 없습니다".
- 문장 조각으로 끝내지 않습니다. "엑셀에서 열어 보려면. Day 열이 함께 들어갑니다" 대신 "Excel과 같은 프로그램에서 확인할 수 있습니다".
- "~어요", "~없어요"를 섞지 않습니다. 모든 문장을 "~습니다"로 맞춥니다.
- 안심시키려고 덧붙인 말은 뺍니다. "단어장은 아무 영향 없어요", "선택을 풀면 그때부터 올리지 않습니다"처럼 행동을 바꾸지 않는 문장.
- "통째로", "그대로", "원문 한 줄까지"처럼 느낌만 주는 꾸밈말은 뺍니다. 그 형식으로 무엇을 할 수 있는지 씁니다. "해당 형식으로 나중에 데이터를 복원할 수 있습니다".
- 지금 상태를 보여 주는 줄은 짧은 명사형으로 씁니다. "지금은 전부 올립니다" 대신 "모두 선택됨", "아무것도 올리지 않습니다" 대신 "선택한 책 없음", "3권 · 나머지 2권은 이 기기에만" 대신 "3권".
- 할 수 없는 것은 "설정할 것이 없습니다"가 아니라 "설정할 수 없습니다"로 씁니다. 기기에 따라 다르면 "안드로이드 전용 기능입니다"처럼 기능 이름으로 밝힙니다.
- 정확한 이름을 씁니다. AI에 넣는 키는 "AI 키"가 아니라 "API 키", 엑셀은 "Excel".
실제로 고친 문장
위 규칙으로 고친 화면 글입니다. 새 글을 쓸 때 기준으로 삼습니다.
가운뎃점
화면 글에 가운뎃점(·)과 굵은 점(•)으로 낱말을 잇지 않습니다. 쓰임새에 따라 아래처럼 바꿉니다.
- 개수나 상태를 나란히 보여 줄 때는 넓은 여백으로 띄웁니다. "책 3권 Day 12개 단어 300개".
- 위치를 나타낼 때는 빗금을 씁니다. "토익 보카 / Day 3", "내보내기 / 시험지", "AI / Claude".
- 문장 안의 나열은 쉼표나 "와, 나"로 씁니다. "홈, 학습, 단어장이", "욕설이나 광고가".
- 소개 페이지의 나열은 빗금으로 씁니다. "사진 / PDF / 글로 단어장 만들기".
- 줄 맨 앞 글머리표는 그대로 둡니다(처리방침 항목, 오류 이유 줄 등).
가운뎃점을 바꾼 예
넣지 않는 문장
- 홍보 문구. 그 자리에서 판단하는 데 필요 없는 장점 소개
- 자동으로 되는 일에 대한 안내
- 이름표나 제목이 이미 한 말을 되풀이하는 설명
- 사람 탓으로 돌리는 오류 문장
남기는 문장
- 되돌릴 수 없다는 것. "이 페이지를 지울까요? 되돌릴 수 없습니다."
- 다른 곳에 영향이 간다는 것. "다른 기기는 모두 로그아웃됩니다"
- 넣을 수 있는 값의 범위
제목, 버튼, 숫자
- 제목은 무엇에 관한 곳인지 명사로 씁니다. "알림", "보안", "로그인한 기기".
- 부제는 제목이 말하지 못하는 사실이 있을 때만 둡니다.
- 버튼 이름은 하는 일로 씁니다. "확인" 대신 "지우기", "예" 대신 "보내기", 닫는 쪽은 "그만두기".
- 숫자에는 비교할 값을 붙입니다. "1,284명" 대신 "지난주보다 12% 늘었습니다".
파랑과 검정
파랑(#2A64F6)은 누르면 무언가 일어나는 것과 켜진 값에만 씁니다. 지금 있는 곳과 고른 것은 검정이나 회색으로 표시합니다.
- 파란 버튼은 한 화면에 하나입니다. 나머지 버튼은 회색 테두리나 글자만 쓰는 버튼을 씁니다.
- 제목, 아이콘, 넓은 면에는 파랑을 칠하지 않습니다.
- 초록, 노랑, 빨강은 성공, 주의, 실패를 알릴 때만 씁니다. 분류를 나누는 데 쓰지 않습니다.
- 누르는 것이 아닌데 강조해야 하면 검정을 씁니다. 고른 칩, 지금 탭의 밑줄, 꽉 찬 배지가 그렇습니다.
접근성
아래를 지키지 못한 화면은 배포하지 않습니다.
하지 않을 것
번지는 배경색이나 무지개 테두리. 그 위의 글이 잘 읽히지 않습니다.
비교할 값이 없으면 숫자로 판단할 수 없습니다.
기능마다 색 동그라미에 아이콘을 넣어 늘어놓는 것.
구역은 간격으로 나누고, 모자라면 선을 긋습니다.
페이지에 붙은 카드는 테두리를 씁니다. 그림자는 메뉴, 모달처럼 위에 뜨는 것에만 씁니다.
로고는 상단바와 바닥에만 둡니다. 겹친 사각형을 배경이나 배치에 쓰지 않습니다.
padding: 18px, #3b6df0 처럼 값을 직접 적는 것. 토큰을 바꿔도 그 자리는 바뀌지 않습니다.
부품 늘리기
여기 없는 부품이 필요할 때 이 순서로 확인합니다.
- 1기존 부품에 변형(--)을 붙일 수 있는지 확인합니다.테두리나 여백만 다르면 .od-card--flush 처럼 변형으로 만듭니다. 변형이 다섯 개를 넘으면 부품을 나눕니다.
- 2한 서비스에서만 쓰면 그 서비스 CSS에 둡니다.
- 3두 번째 서비스에서도 필요해지면 공용 파일로 옮깁니다.
- --od-blue-500 같은 원시 색은 tokens.css 안에서만 씁니다.
- 공용 파일을 고치면 개요의 '바뀐 것'에 한 줄 적고 버전을 올립니다.
- 토큰 이름이 바뀌거나 없어지면 앞자리, 값만 바뀌면 뒷자리를 올립니다.