[펌] 웹 기획자가 알아야 할 서비스 글쓰기의 모든 것

[펌] 웹 기획자가 알아야 할 서비스 글쓰기의 모든 것

웹 기획자가 알아야 할 서비스 글쓰기의 모든것이라는 책을 읽었습니다. NHN의 테크니컬라이터가 쓴 책입니다.

이 책은 개발자나 디자이너가 보는 UI 문서가 아니라, 사용자들이 보는 'UI 텍스트' 에 대한 글쓰기 방법이 기술되어 있습니다.(UI 텍스트: 웹 서비스나 애플리케이션 사용자가 이용하는 버튼, 메뉴, 대화상자, 입력란, 확인란 등과 같은 UI 요소에 적힌 텍스트와 오류 메시지들을 지칭함)

pxd같은 에이전시의 경우 별도의 전문 테크니컬라이터가 없기 때문에 평소 UI 기획자가 테크니컬 라이팅에 대해서도 고민을 하게 됩니다. 이런 관련 지식들을 배우고 싶었는데 적당한 시점에 좋은 책이 나왔네요.

새롭게 배운 부분 위주로 발췌한 내용 공유드립니다. 평소에 내가 쓰던 표현중에 무의식적으로 잘못 쓰고있던 표현이 있는지 비교해보면서 읽어보시면 더 흥미로우실것 같습니다.

---

1. 웹 서비스 글쓰기의 기본

1.1. 정확하게 쓴다.

필요한 정보를 생략하지 않는다. (p.23)

"UI 텍스트는 문서를 쓸 때와는 다르게 짧은 문장으로 필요한 내용만 정확하게 써야 한다. 그런데 문장을 줄이다 보면 필요한 정보까지 생략해 버리는 일이 생긴다. 필요한 정보가 생략되면 그 뜻을 제대로 이해하지 못할 수 있다. 따라서 작성한 텍스트를 여러 번 읽고 빠진 내용은 없는지 반드시 확인하고 고쳐야 한다."

정확하게 쓴다. (p.29)
"Internet explorer와 Firefox는 고유한 제품 이름이므로 정해진 그대로 써야한다.” 
레이블의 공간이 부족해서 부득이하게 약어를 써야하는 상황이 생긴다면 어떻게 해야할지에 대한 궁금증이 생기더군요.

1.2. 보편적으로 쓴다.

외국어, 한자어는 한글로 바꾼다. (p.40) 
보통 기획을 할때 화면상에 외국어를 많이 쓰는 경향이 있는데 이해하기 쉽게 한글로 써야겠다는 생각이 들더군요. 특히 More 버튼.

My top 30 → 자주 들은 음악 30 
Help → 도움말 
FAQ → 자주 묻는 질문 
More → 더 보기 
Top → 맨 위로 
Sync → 동기화 

1.3. 일관되게 쓴다.

마우스 동작 표현 (p.49) 
기획을 하다보면 UI 텍스트에 드래그 앤 드랍 같은 용어를 쓰는데 주의해야 겠습니다.

마우스커서 → 마우스포인터 
마우스 왼쪽 버튼 → 마우스 버튼 
마우스우클릭 → 마우스 오른쪽 버튼 클릭 
드래그 앤 드랍 → 끌어다 놓기

체크 → 선택

UI 요소 표현 (p.56)

"UI요소를 가리킬 때는 UI 요소의 이름만 쓰고 '드롭다운 목록 상자'와 같은 용어는 쓰지 않는다."
사용자 설정 보기 드롭다운 목록 상자 → 사용자 설정 보기 

모바일 동작 표현 (p.58) 
"운영체제와 제품에 공통으로 사용할 수 있는 용어를 쓰라."

누르기 
두 번 누르기 
끌기 
길게 누르기 
쓸어 넘기기 
손가락 오므리기, 벌리기 

1.4. 간결하게 쓴다.

불필요한 단어를 넣어 늘어 쓰지 않는다. (p.64)

정말 삭제하시겠습니까? 같은 UI 텍스트는 저도 예전에 썼던 기억이 있습니다.

정말, 참, 매우, 성공적으로 X
정말 삭제하시겠습니까? → 삭제하시겠습니까? 
메일을 성공적으로 보냈습니다. → 메일을 보냈습니다.

조사는 꼭 필요할 때만 쓴다. (p.67) 

채택을 하지 → 채택하지 
해지를 한 후 → 해지하지 
가입을 할 수가 → 가입할 수

1.5. 형식을 갖춰 쓴다.

메뉴에 줄임표를 넣는다. (p.71) 
"버튼이나 메뉴를 클릭했을 때 바로 기능이 실행되지 않고도 다른 대화 상자나 창이 나타나 추가 정보를 입력해야 할 때는 버튼이나 메뉴 이름 뒤에 줄임표(...)를 넣는다."

2. 웹 서비스 글쓰기의 실제

2.1. 권장표현과 올바른 표기

한자식 표현은 자제한다. (p.78) 

우선적으로 → 우선으로, 먼저 

아이디가 정상적으로 등록되었습니다. → 아이디가 등록되었습니다.

번역 투를 쓰지않는다. (p.79) 

Have 가지다.
인증을 가진 → 인증을 사용하여

Want, Need 원하다, 필요하다. 
로그인하기 원하시면 → 로그인하려면

Through, Via 통해 
댓글을 통해 → 댓글로

자동완성을 위해 → 자동완성에 등록할 

사용가능한 → 사용할 수 있는

사이시옷은 언제 써야 하나 (p.93) 
평소 많이 헷갈리는 표현입니다. 특히 개수...

최대값, 최소값 → 최댓값, 최솟값,  

꼬릿말 -> 꼬리말 
갯수 -> 개수

외래어 표기는 어떻게 하나 (p.95) 
이 내용을 보고 좀 충격적이었습니다. 섬네일이 맞는 표현이라고 하는군요.

썸네일 → 섬네일 

메세지 → 메시지

2.2. 띄어쓰기

띄어쓰기 기본 원칙. 단어와 단어 사이는 띄어쓴다. (p.98) 
"서비스의 버튼이나 메뉴, 탭 이름등은 메시지를 표시할 공간이 부족한 경우 붙여 쓸 수 있음. (서비스 전체에서 용어별로 띄어쓰기 일관성을 유지하는 게 중요.)"

작은창 → 작은 창 

그때 그때 → 그때그때 

찾아 본 → 찾아본 

지난 주 → 지난주 

살펴 보시기 → 살펴보시기 

전자 우편 → 전자우편 (둘 다 가능함) 

국어사전/영어사전/중국어사전 (띄어쓰기, 붙여쓰기 둘 다 가능함)

조사는 앞말에 붙여 쓴다. (p.101) 
정확도순 같은 표현은 가끔씩 띄어쓰기를 했던것 같은데 이 참에 제대로 배웠습니다.

최대 100개 까지 → 최대 100개까지 

페이지 뿐만 → 페이지뿐만 

쇼핑몰 별, 가격 별, 스팩 별 → 쇼핑몰별, 가격별, 스팩별 

정확도 순, 인기 순, 최신 순, 가나다 순 → 정확도순, 인기순, 최신순, 가나다순 

달력 형 → 달력형

의존명사는 앞말과 띄어 쓴다. (p.106) 

홍길동님 → 홍길동 님 

삭제시 → 삭제 시, 삭제하면 

네이버me등의 → 네이버me 등의 

한개 → 한 개

2.3. 문장부호와 특수 기호

마침표 (p.110)  

저는 평소에 마침표를 항상 긴밀하던 긴밀하지 않던 마침표를 각각 따로 썼었는데, 이런 규칙이 있다는 걸 처음 알았습니다.
연월일의 경우에도 마침표를 쓰고 한칸 띄어쓰기를 한다는 사실도 배웠습니다.

"괄호 안의 문장이 앞 문장과 내용상 긴밀한 관계일 경우 두 문장의 마침표를 묶음"
개수가 많을 때 사용한다(10개 미만일 경우에 사용).

"괄호 안의 문장이 앞 문장과 긴밀한 관계가 아닐 경우 마침표를 각각 따로 씀"
개수가 많을 때 사용한다.(별첨 참조.) 
개수가 많을 때 사용한다.(별첨 참조)

"연월일의 마침표는 띄어쓴다. ‘일’ 다음에 마침표를 빠뜨리지 않도록 주의."
2013.03.27 → 2013. 03. 27. 

쉼표 (p.115) 
"쉼표 앞은 붙여쓰고, 뒤는 한 칸 띄어 쓴다."
아이디,이름,주민등록번호 → 아이디, 이름, 주민등록번호

"특별히 끊어 읽을 필요가 없으면 쉼표를 사용하지 않음."
묻고, 답하고, 알려주세요. → 묻고 답하고 알려주세요.

가운뎃점, 빗금 (p.119, 121) 
날짜는 빗금을 쓰지 않는다는군요;

"가운뎃점은 열거된 여러 단위가 대등하거나 밀접한 경우, 빗금은 대립되는 경우나 분수를 나타내는 경우 사용."
"빗금 앞뒤에 빈칸을 두지 않는다."

만화・웹툰 서비스, 학습・교육 
수입/지출, 클라이언트/서버 
3/4 분기

"날짜는 빗금을 쓰지 않는다."
12/25 → 12월 25일, 12.25.

괄호 (p.125)
"UI 텍스트를 쓸 때에는 되도록 괄호를 쓰지 않는다."
"불필요하게 괄호를 쓰지 않는다."

(이동 중) → 이동 중…

"괄호 앞에는 빈칸을 두지 않음, 괄호 안의 내용이 긴밀한 관계일 경우 마침표는 괄호 밖에 찍음."
기본 검색의 결과 범위를 줄이고자 할 때 사용한다(상세 검색의 기능이다).

"괄호 뒤에 오는 조사는 괄호 앞에 있는 명사와 호응한다."
메일주소(메일함)을 → 메일주소(메일함)를

대괄호 (p.129)
"메뉴 이름과 창 이름, 버튼 등의 UI 텍스트를 구별하는 서식이 없을 경우 대괄호를 사용한다."
계속하시려면 ‘다음'버튼을 눌러주세요. → 계속하시려면 [다음]을 클릭하세요.

쌍점 (p.136)
쌍점 같은경우에도 제가 평소에 쓰는 규칙과 달라서 깜짝 놀랐습니다.

"쌍점 앞은 붙여쓰고 쌍점 뒤는 한 칸 띄어 쓴다."
정렬기준:날짜순 → 정렬 기준: 날짜순

"시간을 표시할때는 쌍점을 붙여서 쓴다."
오전 10:20

물결표 (p.138) 
"물결표는 앞뒤에 빈칸을 넣어 한 칸씩 띄어 쓴다."
월요일~금요일 → 월요일 ~ 금요일

하이픈 (p.139)
"얼마에서 얼마까지의 의미로 사용하지 않는다."
6자리 - 15자리의 → 6자리 ~ 15자리의

"연월일을 표기하는데 쓰지 않는다."
2013-04-04 → 2013. 4. 4. 또는 2013년 4월 4일

줄임표 (p.143)
"여섯 점을 찍는 것이 원칙이나 마침표를 세번 찍는 것(…)도 허용함."

기타 특수 기호 표기 (p.148) 

"사칙연산을 나타내는 수학 기호를 쓸 때에는 숫자와 기호 사이에 빈칸을 넣는다. "
"단, 나누기 기호 대신 빗금(/)을 사용할 때는 기호 앞뒤에 빈칸을 두지 않는다."
"곱하기 기호는 소문자 x로 표기한다. "
"곱하기 기호로 별표(*)를 사용하지 않는다. "

"기호 앞뒤에 빈칸을 두지 않는다. "
스포츠 & 톡 베스트 10 → 스포츠&톡 베스트 10

2.4. 숫자와 단위 표기

숫자와 단위 표기 기본 원칙 (p.154)
"숫자 범위뒤에 단위를 쓸 때 각 숫자의 단위가 같으면 마지막에 오는 숫자 뒤에만 단위를 쓴다."
10MB ~ 20MB → 10 ~ 20MB 

1개 ~ 100개 → 1 ~ 100개

12시는 오전 또는 오후에 포함되지 않는다.
오전 8시 ~ 오후 12시 → 오전 8시 ~ 밤 12시

영업 시작일 다음날 오전 1시에 영업이 끝난다면 오전 1시 대신 25시와 같이 쓰기도 함.

전화번호 표기 (p.166)
전화번호 표기 같은경우에도 휴대전화와 일반 전화 방식을 구별하지 않고 썼었는데, 구분이 있다는 사실을 처음 알았습니다.

"국번과 가입자 개별 번호는 하이픈(-)으로 구분하고 하이픈 앞뒤에는 빈칸을 두지 않는다."
(02) 000 0000, 02) 000 0000, 02-000-0000 → (02) 000-0000

"휴대전화의 경우 통신망 식별 번호는 국번 앞에 하이픈으로 구분해서 쓴다."

(010) 0000-0000 → 010-0000-0000, +82-10-0000-0000

2.5. 전 세계 사용자를 고려한 가이드

"다국어를 지원하는 서비스를 기획 할 경우 언어별로 길이가 다르므로 UI 설계를 할때 이점을 잘 고려해야 한다.” (p.190)

"국가별로 날짜와 시간을 다르게 사용하므로 이 점을 고려햐여야 한다." (p.197)
한국/중국/일본과 미국 지역은 오전, 오후 표기법을 사용하며 유럽/남미 지역에서는 24시를 사용합니다. 그리고 연/월/일 표기법이 다름을 알 수 있습니다.

한국/중국/일본: 2015년 3월 20일, 오후 8시 10분 
미국 : March 20, 2015, 8:10pm 
유럽/남미 : 20 mars, 2015, 20:10