Content design
팀이 목표에 닿도록 돕는 쉽고 간결하고 친근한 말 — 보이스 앤 톤, 문장 규칙, 메시지 작성법이에요.
콘텐츠는 화면 품질의 중심이에요. 버튼 하나, 오류 메시지 한 줄이 사용자가 일을 계속할지 멈출지를 바꿔요. Steel 의 글은 모든 화면에서 분명하고, 간결하고, 일관되게 써요.
보이스와 톤
보이스는 Steel 의 변하지 않는 성격이고, 톤은 상황에 맞춰 그 성격을 표현하는 방식이에요.
보이스의 세 가지 성격
| 성격 | 뜻 |
|---|---|
| 대담하게 | 필요한 순간에 알맞은 만큼 도와요. 정확한 정보를 줘서 스스로 결정하게 하고, 목표에 닿을 만큼만 안내해요. |
| 긍정적으로 | 사용자가 지금 어디쯤 와 있는지 알아보고 도움이 될 부분을 짚어 줘요. 모든 화면에서 같은 용어를 써서 경험이 끊기지 않게 해요. |
| 실용적으로, 가끔 미소를 | 직접적이고 간결하게 써요. 문화와 언어가 달라도 이해되게 쓰고, 유머는 상황이 허락할 때만 살짝 더해요. |
상황에 맞춰 조절하기
- 숙련된 사용자, 관리자, 매일 쓰는 사람이 자신 있게 일할 때는 더 대담하고 긍정적으로 써요.
- 처음 쓰는 사람, 새 기능이나 개념을 소개할 때는 덜 대담하게, 더 구체적으로 안내해요.
- 오류에 막히거나 바쁘고 지친 순간에는 더 실용적으로 써요.
- 일을 끝내고 뿌듯한 순간(성공 메시지)에만 미소를 더해요.
상황별 톤
| 상황 | 사용자의 기분 | 톤 |
|---|---|---|
| 오류·실패 | 답답함, 스트레스 | 실용적이고 든든하게. 무슨 일이 있었고 다음에 뭘 하면 되는지 |
| 경고 | 불안, 망설임 | 직접적이고 분명하게. 위험과 해야 할 일을 |
| 성공·완료 | 뿌듯함, 안도 | 함께 기뻐하기. 가벼운 미소도 괜찮아요 |
| 새 사용자·새 기능 | 낯섦, 혼란 | 차분하고 안내하듯 |
| 숙련 사용자·관리자 | 자신감 | 간결하고 효율적으로 |
| 마감 임박·막힘 | 부담, 초조 | 아주 실용적으로. 핵심만 |
톤의 원칙
- 알려서 신뢰를 쌓아요 — 지금 필요한 것만 투명하게 알려요. 겸손하고 따뜻한 동료처럼요.
- 가르쳐서 행동하게 해요 — 중요한 순간에 왜, 어떻게 하는지 알려 줘요.
- 막힌 곳에서 응원해요 — 사람들이 멈추는 지점에 다음 단계를 놓아 둬요.
- 가능성을 보여 줘요 — 계속 쓰면 무엇이 좋아지는지 보여 줘요.
- 기대를 채우고 비켜 줘요 — 필요한 걸 주고 방해하지 않아요. 모든 글은 최소한 실용적이어야 해요.
- 작은 기쁨은 아껴서 — 신뢰가 쌓인 다음에 작은 마무리 손길만 더해요. 한 번은 재밌어도 백 번 보면 거슬릴 수 있어요.
Do· 무슨 일이 있었고 무엇을 하면 되는지
"첨부 파일을 올리지 못했어요. 파일이 25MB 이하인지 확인하고 다시 시도해 주세요."
Don't· 답답한 순간에 농담하지 마세요
"앗, 파일이 너무 무거워서 길을 잃었나 봐요!"
문장 규칙
Steel 문서와 UI 글은 한국어 해요체를 기본으로 해요.
문장
- 능동태로 써요. "담당자가 변경되었습니다" 보다 "담당자를 바꿨어요" 가 짧고 분명해요.
- 현재형으로 안내하고, 끝난 일은 과거형으로 알려요. 안내 문구는 "필터를 고르세요", 완료 알림은 "이슈를 옮겼어요".
- 한 문장에 하나의 생각만 담아요. 길어지면 나눠요.
- 사람을 가리키는 말은 최소한으로. 꼭 필요하면 성별을 짐작하지 않는 말을 써요.
- 같은 대상에는 같은 단어를 써요. 한 화면에서 "이슈" 라고 했다면 다른 곳에서 "티켓" 이라고 하지 않아요.
버튼과 레이블
- 버튼은 동사로 끝나는 짧은 말로 써요. "확인" 보다 "이슈 만들기", "저장" 처럼 결과가 보이게요.
- 제목, 메뉴, 레이블, 버튼 끝에는 마침표를 찍지 않아요.
- 영문 레이블은 첫 단어만 대문자로 쓰는 문장형 대소문자를 써요. "Create issue" (O), "Create Issue" (X).
- 본문에서 UI 요소를 가리킬 때는 따옴표 대신 굵게 표시해요. 예: 설정 에서 알림 을 켜세요.
- 메뉴 경로는
>대신 말로 이어요. "프로젝트 설정 에서 권한 을 고르세요."
문장부호
| 부호 | 규칙 |
|---|---|
마침표 . | 완전한 문장(도움말, 메시지)에는 찍어요. 제목, 툴팁, 필드 설명, 메뉴 이름에는 찍지 않아요. 목록은 항목이 완전한 문장일 때만 찍어요. |
느낌표 ! | UI 에서는 피해요. 꼭 필요하면 한 화면에 하나만 써요. |
말줄임표 … | 마침표 세 개 대신 한 글자 … 를 써요. 진행 중 상태("저장 중…")에 써요. |
& | 문장에서는 쓰지 않고 "및", "와/과" 로 풀어 써요. |
줄표 — | UI 에서는 아껴 써요. 문장을 나누거나 다시 쓰는 편이 대개 더 좋아요. |
쌀점 : | 목록이나 단계를 소개할 때 써요. 제목 끝에는 붙이지 않아요. |
숫자와 날짜
- 대부분 아라비아 숫자를 써요. "8자 이상", "3개 선택됨".
- 범위는 "1–10" 이나 "1~10" 대신 공간이 허락하면 "1에서 10까지" 처럼 풀어 써요.
- 단계는 "1/2" 대신 "2단계 중 1단계" 로 써요.
- 천 단위에는 쉼표를 찍어요. "10,000".
- 날짜는 사용자의 지역 설정에 맞춰 보여 주고, 가까운 시간은 "3분 전", "어제" 처럼 상대 시간으로 써요.
줄임말
- 기능과 제품 이름은 줄이지 않고 전체 이름으로 써요.
- "예:", "등" 같은 표현을 문장 중간에 남발하지 않아요. 번역과 화면 읽기 프로그램에서 어색해질 수 있어요.
메시지 작성
| 종류 | 목적 | 색 역할 |
|---|---|---|
| 정보 | 알아 두면 좋은 정보를 줘요 | information |
| 오류 | 문제가 생겼다는 걸 알리고 다음에 할 일을 알려요 | danger |
| 성공 | 일을 마쳤다는 걸 함께 기뻐해요 | success |
| 경고 | 데이터 손실이나 오류로 이어질 수 있는 변화를 미리 알려요 | warning |
| 발견 | 새 기능을 알려요 | discovery |
어떤 컴포넌트에 담을까요
| 컴포넌트 | 쓰는 때 |
|---|---|
| Banner | 데이터 손실, 기능 장애 같은 시스템 수준의 중요한 메시지. 화면 맨 위에 놓이고 내용을 아래로 밀어요 |
| Flag | 확인, 알림, 응답처럼 상호작용이 거의 필요 없는 메시지 |
| Section message | 특정 영역에서 일어난 일. 해당 내용 바로 위에 둬요 |
| Inline message | 꼭 필요한 동작이나 중요한 정보를 아이콘과 짧은 문장으로 |
| Modal dialog | 지금 꼭 끝내야 하는 짧은 작업 |
| Empty state | 보여 줄 내용이 없을 때 — 빈 보드, 결과 없는 검색 |
좋은 메시지의 구조
- 제목 — 무슨 일인지 한 줄로. 마침표 없이.
- 본문 — 왜 그런지, 무엇을 하면 되는지. 필요한 만큼만.
- 액션 — 다음 단계로 바로 가는 버튼이나 링크. 동사로.
Do· 원인과 해결을 함께
권한이 없어 이슈를 옮길 수 없어요 — 프로젝트 관리자에게 편집 권한을 요청하세요. [권한 요청하기]
Don't· 원인만 알리고 끝내지 마세요
오류가 발생했습니다. (코드 403)
포용적인 언어
- 사람의 능력, 나이, 성별, 문화를 짐작하는 표현을 쓰지 않아요.
- "보세요", "클릭하세요" 처럼 특정 감각·기기에 묶인 동사보다 "확인하세요", "고르세요" 를 써요.
- 차별의 역사가 있는 용어(예: 마스터/슬레이브, 화이트리스트/블랙리스트)는 "기본/복제본", "허용 목록/차단 목록" 처럼 바꿔 써요.
- 전 세계 사용자를 생각해 관용구와 말장난은 피해요.