쓰는 규칙

화면 글, 색, 접근성, 부품을 늘릴 때의 규칙입니다.

글

화면 글, 메일, 설명서, 안내 페이지 모두 이 규칙으로 씁니다. 문장을 넣을지 말지는 그 문장이 없을 때 읽는 사람이 다르게 행동하는지로 정합니다. 달라지지 않으면 뺍니다.

문장

  • 한 문장에는 사실 하나만 씁니다.
  • 같은 말을 두 번 쓰지 않습니다. 제목, 부제, 이름표, 버튼이 같은 말을 나눠 갖지 않게 합니다.
  • 문장은 "~합니다", "~해 주세요"로 끝냅니다.
  • "봅니다"는 쓰지 않습니다. 사람이 할 수 있는 일은 "확인하실 수 있습니다", 서비스가 하는 일은 "확인합니다"로 씁니다.
  • 비유를 쓰지 않습니다. 무엇을 하고 하지 않는지 씁니다.
  • 격언처럼 쓰지 않습니다. "A가 아니라 B다", "~이 먼저다" 같은 문장.
  • 줄표로 이름과 설명을 잇지 않습니다. 문장으로 풀거나 줄을 나눕니다.
  • 영어 단어 뒤 조사는 붙여 씁니다. oodot이, VocaShot을, tokens.css를.
  • 이메일이나 주소 바로 뒤에는 조사를 붙이지 않습니다. '주소로', '계정을'처럼 낱말을 하나 넣습니다.

가리키는 것

무엇인지 알 수 없는 말은 쓰지 않습니다. 문장 안에서 무엇인지 알 수 있으면 됩니다. oodot 화면 글에 다른 서비스 이름을 쓰지 않습니다. 서비스는 계속 늘어납니다.

고치기 전고친 뒤
이 서비스에 맡겨 둔 것만든 내용과 설정 저장
다른 서비스의 것은 보지 못합니다.다른 앱은 읽을 수 없습니다.
허용하면 이 서비스가 아래를 알게 됩니다.허용하면 이 앱이 아래 일을 할 수 있습니다.
VocaShot 단어장, Space Control 기기 목록이 함께 지워집니다.아래 서비스에 저장한 항목이 함께 삭제됩니다. (아래에 불러온 서비스 이름 목록)
name@example.com 로 확인 코드를 보냅니다.name@example.com 주소로 확인 코드를 보냅니다.

낱말

쓰는 사람이 아는 낱말로 씁니다. 업로드, 다운로드, 로그아웃처럼 누구나 쓰는 말은 우리말로 바꾸지 않습니다. 서비스 이름은 번역하지 않습니다.

고치기 전고친 뒤
요청 처리에 실패했습니다저장하지 못했습니다. 잠시 뒤에 다시 해 보세요.
인증 토큰이 만료되었습니다로그아웃되었습니다. 다시 로그인해 주세요.
URL을 클립보드에 복사주소 복사
유효하지 않은 값입니다1부터 50 사이의 숫자를 넣어 주세요.
업로드 중… (3/7)7개 중 3개 업로드 중
프로젝트 목록은 이제 oodot에서 봅니다프로젝트 목록은 이제 oodot에서 확인하실 수 있습니다

기능을 말하는 낱말

일상에서 쓰는 동사나 비유 대신 그 기능의 정확한 이름을 씁니다. 같은 기능은 모든 화면에서 같은 낱말로 씁니다.

고치기 전고친 뒤
사라집니다삭제됩니다
되살릴 수 없습니다되돌릴 수 없습니다
되살릴 수 있어요복구할 수 있습니다
지운 것을 얼마나 들고 있을지 정합니다지운 항목을 얼마나 보관할지 설정합니다
기기에 저장해 둔 백업을 고릅니다기기에 저장되어있는 파일을 선택합니다
무료에서는 1권까지 올립니다무료에서는 1권까지 업로드됩니다
어디서 걸리는지 단계별로 확인합니다문제가 되는 부분을 단계별로 확인합니다
막힐 때마다 직접 물어봅니다오류가 발생할 때마다 직접 물어봅니다
안 될 때 무엇이 오갔는지 그대로 남습니다오류가 발생할 때 로그를 확인합니다
어느 키로 보낼지어느 키를 사용할지
아직 셀 것이 없습니다아직 통계가 없습니다
여기에 숫자가 쌓입니다여기에 통계가 만들어집니다
그 자리에서 사라집니다즉시 삭제됩니다
바꾼 내용이 사라집니다변경한 내용은 저장되지 않습니다

문장을 다듬는 규칙

  • 가리키는 말은 "이" 대신 "해당"을 씁니다. "이 차례로" 대신 "해당 차례로", "이 값보다" 대신 "해당 값보다".
  • 빠진 주어나 목적어를 채웁니다. "잊어버리면 되살릴 방법이 없습니다" 대신 "비밀번호를 잊어버리면 복구할 수 없습니다".
  • 문장 조각으로 끝내지 않습니다. "엑셀에서 열어 보려면. Day 열이 함께 들어갑니다" 대신 "Excel과 같은 프로그램에서 확인할 수 있습니다".
  • "~어요", "~없어요"를 섞지 않습니다. 모든 문장을 "~습니다"로 맞춥니다.
  • 안심시키려고 덧붙인 말은 뺍니다. "단어장은 아무 영향 없어요", "선택을 풀면 그때부터 올리지 않습니다"처럼 행동을 바꾸지 않는 문장.
  • "통째로", "그대로", "원문 한 줄까지"처럼 느낌만 주는 꾸밈말은 뺍니다. 그 형식으로 무엇을 할 수 있는지 씁니다. "해당 형식으로 나중에 데이터를 복원할 수 있습니다".
  • 지금 상태를 보여 주는 줄은 짧은 명사형으로 씁니다. "지금은 전부 올립니다" 대신 "모두 선택됨", "아무것도 올리지 않습니다" 대신 "선택한 책 없음", "3권 · 나머지 2권은 이 기기에만" 대신 "3권".
  • 할 수 없는 것은 "설정할 것이 없습니다"가 아니라 "설정할 수 없습니다"로 씁니다. 기기에 따라 다르면 "안드로이드 전용 기능입니다"처럼 기능 이름으로 밝힙니다.
  • 정확한 이름을 씁니다. AI에 넣는 키는 "AI 키"가 아니라 "API 키", 엑셀은 "Excel".

실제로 고친 문장

위 규칙으로 고친 화면 글입니다. 새 글을 쓸 때 기준으로 삼습니다.

고치기 전고친 뒤
지우면 바로 사라집니다. 되살릴 수 없습니다.지우면 바로 삭제됩니다. 되돌릴 수 없습니다.
기간을 줄이면 그보다 오래된 것은 그 자리에서 사라집니다.기간을 줄이면 해당 기간보다 오래된 항목들은 즉시 삭제됩니다.
30일 안에는 휴지통에서 되살릴 수 있어요.30일 안에는 휴지통에서 복구할 수 있습니다.
보관하지 않기로 해 두셨습니다. 지운 것은 바로 사라집니다.휴지통을 사용하지 않도록 설정되어 있습니다. 지운 항목은 바로 삭제됩니다.
지금은 전부 올립니다모두 선택됨
아무것도 올리지 않습니다선택한 책 없음
선택을 풀면 그때부터 올리지 않습니다. 이미 올라간 것은 계정에 남아 있고, 계정에서도 지우려면 그 책을 지우세요.이미 업로드된 단어장은 계정에 남아있습니다. 삭제하려면 해당 책을 지우세요.
손잡이를 끌어 옮기면 모두 이 차례로 바뀝니다.손잡이를 끌어 옮기면 모두 해당 차례로 바뀝니다.
잊어버리면 되살릴 방법이 없습니다. 그때는 AI 키만 다시 넣으면 됩니다. 단어장은 아무 영향 없어요.비밀번호를 잊어버리면 복구할 수 없습니다. 비밀번호를 잊어버린 경우 API 키만 다시 입력하면 됩니다.
이 기기에서는 설정할 것이 없습니다이 기기에서는 설정할 수 없습니다
알림과 배터리 제한은 안드로이드에서만 해당됩니다.알림과 배터리 제한 관련 설정은 안드로이드 전용 기능입니다.
원문 한 줄까지 통째로. 그대로 복원할 수 있는 형식입니다해당 형식으로 나중에 데이터를 복원할 수 있습니다
엑셀에서 열어 보려면. Day 열이 함께 들어갑니다Excel과 같은 프로그램에서 확인할 수 있습니다
기기에 저장해 둔 백업을 고릅니다기기에 저장되어있는 파일을 선택합니다
아직 셀 것이 없습니다. 단어장 페이지를 한 장이라도 넣으면 여기에 숫자가 쌓입니다.아직 통계가 없습니다. 단어장을 만들면 여기에 통계가 만들어집니다.
막힐 때마다 직접 물어봅니다오류가 발생할 때마다 직접 물어봅니다
쓸 때마다 어느 키로 보낼지 묻습니다.매번 어느 키를 사용할지 묻습니다.
바꾼 내용이 사라집니다.변경한 내용은 저장되지 않습니다.
다 봄학습 완료
둘 다 (가리기)단어와 뜻 가리기
그런 코드가 없습니다. 다시 확인해 주세요.코드가 존재하지 않습니다. 다시 확인해주세요

가운뎃점

화면 글에 가운뎃점(·)과 굵은 점(•)으로 낱말을 잇지 않습니다. 쓰임새에 따라 아래처럼 바꿉니다.

  • 개수나 상태를 나란히 보여 줄 때는 넓은 여백으로 띄웁니다. "책 3권   Day 12개   단어 300개".
  • 위치를 나타낼 때는 빗금을 씁니다. "토익 보카 / Day 3", "내보내기 / 시험지", "AI / Claude".
  • 문장 안의 나열은 쉼표나 "와, 나"로 씁니다. "홈, 학습, 단어장이", "욕설이나 광고가".
  • 소개 페이지의 나열은 빗금으로 씁니다. "사진 / PDF / 글로 단어장 만들기".
  • 줄 맨 앞 글머리표는 그대로 둡니다(처리방침 항목, 오류 이유 줄 등).

가운뎃점을 바꾼 예

고치기 전고친 뒤
책 3권 · Day 12개 · 단어 300개책 3권   Day 12개   단어 300개
단어 30개 · 아직 시작하지 않았어요단어 30개   아직 시작하지 않았습니다
토익 보카 · Day 3토익 보카 / Day 3
내보내기 · 시험지내보내기 / 시험지
AI · ClaudeAI / Claude
홈·학습·단어장이 모두 이 차례로홈, 학습, 단어장이 모두 해당 차례로
욕설·광고가 들어 있습니다욕설이나 광고가 들어 있습니다
아는 단어 · 모르는 단어 분류하기아는 단어와 모르는 단어 분류하기
사진 · PDF · 글로 단어장 만들기 (소개 페이지)사진 / PDF / 글로 단어장 만들기

넣지 않는 문장

  • 홍보 문구. 그 자리에서 판단하는 데 필요 없는 장점 소개
  • 자동으로 되는 일에 대한 안내
  • 이름표나 제목이 이미 한 말을 되풀이하는 설명
  • 사람 탓으로 돌리는 오류 문장

남기는 문장

  • 되돌릴 수 없다는 것. "이 페이지를 지울까요? 되돌릴 수 없습니다."
  • 다른 곳에 영향이 간다는 것. "다른 기기는 모두 로그아웃됩니다"
  • 넣을 수 있는 값의 범위

제목, 버튼, 숫자

  • 제목은 무엇에 관한 곳인지 명사로 씁니다. "알림", "보안", "로그인한 기기".
  • 부제는 제목이 말하지 못하는 사실이 있을 때만 둡니다.
  • 버튼 이름은 하는 일로 씁니다. "확인" 대신 "지우기", "예" 대신 "보내기", 닫는 쪽은 "그만두기".
  • 숫자에는 비교할 값을 붙입니다. "1,284명" 대신 "지난주보다 12% 늘었습니다".

파랑과 검정

파랑(#2A64F6)은 누르면 무언가 일어나는 것과 켜진 값에만 씁니다. 지금 있는 곳과 고른 것은 검정이나 회색으로 표시합니다.

공개 범위누구나 볼 수 있음 · 3분 전에 고침올리기설정

씁니다

공개 범위누구나 볼 수 있음 · 3분 전에 고침올리기설정

쓰지 않습니다 · 어느 버튼을 눌러야 하는지 구별되지 않습니다

  • 파란 버튼은 한 화면에 하나입니다. 나머지 버튼은 회색 테두리나 글자만 쓰는 버튼을 씁니다.
  • 제목, 아이콘, 넓은 면에는 파랑을 칠하지 않습니다.
  • 초록, 노랑, 빨강은 성공, 주의, 실패를 알릴 때만 씁니다. 분류를 나누는 데 쓰지 않습니다.
  • 누르는 것이 아닌데 강조해야 하면 검정을 씁니다. 고른 칩, 지금 탭의 밑줄, 꽉 찬 배지가 그렇습니다.

접근성

아래를 지키지 못한 화면은 배포하지 않습니다.

항목기준
대비본문 4.5:1 이상, 큰 글씨와 아이콘 3:1 이상.
색 말고 하나 더오류를 빨강만으로 알리지 않고 아이콘이나 글을 같이 둡니다.
초점 고리outline 을 지우지 않습니다. tokens.css 의 :focus-visible 이 그립니다.
누르는 크기44×44px 이상. 보이는 크기가 작으면 누르는 범위만 넓힙니다.
아이콘 버튼aria-label 을 붙입니다.
입력 칸<label for> 로 칸과 묶습니다.
움직임 줄이기prefers-reduced-motion 이 켜져 있으면 미끄러지는 움직임을 없앱니다. 누름 표시는 남깁니다.
esc모달, 시트, 메뉴는 esc 로 닫힙니다.
키보드tab 키만으로 모든 버튼과 칸에 갈 수 있어야 합니다.

하지 않을 것

그라데이션 면

번지는 배경색이나 무지개 테두리. 그 위의 글이 잘 읽히지 않습니다.

숫자만 큰 타일

비교할 값이 없으면 숫자로 판단할 수 없습니다.

색 배경 아이콘 목록

기능마다 색 동그라미에 아이콘을 넣어 늘어놓는 것.

구역마다 다른 배경색

구역은 간격으로 나누고, 모자라면 선을 긋습니다.

붙어 있는 카드의 그림자

페이지에 붙은 카드는 테두리를 씁니다. 그림자는 메뉴, 모달처럼 위에 뜨는 것에만 씁니다.

로고 모양 장식

로고는 상단바와 바닥에만 둡니다. 겹친 사각형을 배경이나 배치에 쓰지 않습니다.

토큰 없는 숫자

padding: 18px, #3b6df0 처럼 값을 직접 적는 것. 토큰을 바꿔도 그 자리는 바뀌지 않습니다.

부품 늘리기

여기 없는 부품이 필요할 때 이 순서로 확인합니다.

  1. 1기존 부품에 변형(--)을 붙일 수 있는지 확인합니다.테두리나 여백만 다르면 .od-card--flush 처럼 변형으로 만듭니다. 변형이 다섯 개를 넘으면 부품을 나눕니다.
  2. 2한 서비스에서만 쓰면 그 서비스 CSS에 둡니다.
  3. 3두 번째 서비스에서도 필요해지면 공용 파일로 옮깁니다.
  • --od-blue-500 같은 원시 색은 tokens.css 안에서만 씁니다.
  • 공용 파일을 고치면 개요의 '바뀐 것'에 한 줄 적고 버전을 올립니다.
  • 토큰 이름이 바뀌거나 없어지면 앞자리, 값만 바뀌면 뒷자리를 올립니다.