brunch

You can make anything
by writing

- C.S.Lewis -

by 위승용 uxdragon Feb 11. 2019

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


웹 기획자가 알아야 할 서비스 글쓰기의 모든 것 이라는 책을 읽었다. 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




Seungyong, Wi (a.k.a uxdragon)

-

pxd UI lab.

작은 차이로 감동을 줄 수 있는 UX 디자이너를 지향합니다.

작은 동작을 꾸준히 연마해 머지않아 '필살기'를 쓰려고 노력중입니다.

email : sywi@pxd.co.kr

-

Pages

https://brunch.co.kr/@uxdragon

https://www.facebook.com/uxdragon

http://instagram.com/seungyong_wi

https://sites.google.com/site/uxdragonarchive

-

pxd team blog

http://story.pxd.co.kr





매거진의 이전글 [독후감] 새로운 디자인 도구들

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari
;