7. 개발시 작성하는 문서유형 - UI와 메시지

ChatGPT로 효율적 영어쓰기

사용자 인터페이스(UI, User Interface)는 사용자가 소프트웨어에 지시하거나, 소프트웨어가 사용자에게 정보를 제공하는 환경입니다. 크게 나누면, 아이콘이나 버튼을 사용하는 GUI(Graphic User Interface)와 문자 입력을 통한 명령을 사용하는 CUI(Character User Interface)가 있습니다.

이번에는 GUI를 중심으로 다루며, 우선 버튼 또는 메뉴와 같은 UI요소를 영어로 작성할 때의 요점을 정리합니다. 이어서 오류 메시지등을 포함해 소프트웨어가 사용자에게 표시하는 메시지 작성방법에 대해 설명합니다.

⑴ UI와 메시지의 예시

UI와 메시지 예시에서는 읽은 책을 기록할 수 있는 웹애플리케잇견 "Simple Book Tracker"를 예로 들어 설명합니다. 애플리케이션의 UI와 거기에 표시되는 메시지를 사례를 제시합니다.

① 예시(1): UI

우선 애플리케이션의 UI입니다. 3가지 화면을 예로 들고 있습니다. 왼쪽메뉴에서 [Bookshelf], [Add], [Settings], [Account]를 클릭하면 표시되는 화면입니다.

Bookshelf 화면

Add 화면

Settings 화면

Account 화면

② 예시(2): 메시지

소프트웨어에 표시되는 메시지입니다. 여기서는 사용자 관점에서 Simple Book Tracker를 조작하는 시나리오를 4개 상정하고 ,시나리오ㄹ에서 표시되는 메시지를 영어 예시로 설명합니다.

시나리오1: 책 추가

Add화면에서 "Pynchon"을 포함한 책을 검색하자 몇가지 결과가 표시되었습니다. 결과 목록의 3번째에 있는 "Gravity's Rainbow"를 읽었기 때문에 이것을 추가하고자 생각하여 "Add to bookshelf"버튼을 클릭했더니, 다음 메시지가 표시되었습니다.

이번에는 결과 목록의 2번째에 있는 "The Crying of Lot 49"의 "Add to bookshelf" 버튼을 클릭하면 다음 메시지가 푯기되었습니다.

시나리오2: 이메일주소를 변경하고 저장

이메일 주소가 변경되었기 때문에 Account화면의 Email필드에 "hong.gd@example.com"이라고 입력하고 [Save]버튼을 클릭하니 아래 메시지가 표시되었습니다.

그래서, "hong.gd@example.com"으로 수정하고 다시 [Save]버튼을 클릭하자 아래 메시지가 표시되었습니다.

시나리오3: 비밀번호를 변경하고 저장

비밀번호를 변경하려고 Account 화면에서 새 비밀번호를 입력하고 [Change password]버튼을 클릭했더니, 다음 메시지가 표시되었습니다.

[Change]버튼을 클릭하자, 아래 메시지가 표시되었습니다.

비밀번호를 다시 입력하자, 다음 메시지가 표시되고 변경이 완료되었습니다.

시나리오4: 계정 삭제

앱을 더이상 사용하지 않기로 했기 때문에 계정을 삭제하려고 합니다. Account화면에서 [Delete account]버튼을 클릭했더니, 아래 메시지가 표시되었습니다.

[Delete]버튼을 클릭하자 다음 메시지가 표시되었습니다.

"개발사(개발자)에게 연락해 주십시오."라는 지시를 받았습니다. 결국 처리는 실행되지 않았습니다.

③ 참고 번역

시나리오1: 책 추가

시나리오2: 이메일 주소를 변경하고 저장

시나리오3: 비밀번호 변경하고 저장

시나리오4: 계정 삭제

⑵ 문서의 주요요소와 구성: UI

계속해서 ,문서의 주요 요소와 구성을 살펴봅시다. 우선 첫번째 예시로 다룰 UI입니다. 모바일이나 데스크톱, 웹애플리케이션등에 표시되는 정보는 다양한 전문가를 작성합니다.

IT 엔지니어가 주로 작성하는 것은 버튼이나 메뉴에 표시되는 문구입니다. 그래서 UI의 주요 요소로서 버튼과 메뉴같은 컨트롤을 중심으로 몇가지를 다루겠습니다.

① 메뉴(1)

사용자가 선택할 수 있는 항목을 정리하여 표시합니다. 예시에서는 화면의 왼쪽에 배치되어 있지만, 애플리케이션에 따라 다른 위치에 놓이는 경우도 있습니다.

② 드롭다운 리스트 (2)

클릭하여 선택이 완료될 때까지 선택할 수 있는 항목이 열려있는 상태가 되는 드롭다운 리스트입니다. 예시처럼 "Layout:" 또는 "Sort by:"등을 보기 쉬운 텍스트를 추가하는 경우가 있습니다.

③ 버튼 (3)

사용자가 클릭하면 어떤 처리가 실행됩니다. 예시에서는 다양한 버튼이 배치되어 있습니다.

④ 텍스트 (5)

사용자에게 텍스트로 정보를 제공하기 위해 사용됩니다. 버튼과는 다르게 길이에 대한 제한은 엄격하지 않습니다.

⑤ 텍스트필드 (6)

검색등을 위한 문자를 입력하는 필드입니다. 예시와 같이 어떤 내용을 입력해야 하는지 보여주는 텍스트나 보충 텍스트를 가까운 곳에 배치할 수 있습니다.

⑥ 라디오버튼 (9)

선택항목 중 하나를 선택하도록 사용되는 컨트롤입니다. 각 버튼을 설명하는 라벨을 가까운 곳에 배치합니다.

⑦ 체크박스 (10)

On/Off를 선택하는 컨트롤입니다. 라디오버튼과 마찬가지로 설명 텍스트 라벨을 가까운 곳에 배치합니다.

⑧ 주요 요소와 구성

UI의 주요요소와 구성은 설계나 디자인에 따라 크게 다를 수 있습니다. 구성을 일반화하기는 어렵기 때문에 여기서는 설명하지 않습니다. Apple, Google, Microsoft와 같은 운영체제를 제공하는 기업들은 애플리케이션 UI의 디자인지침을 정리한 자료를 공개하고 있습니다. UI를 설계할 때는 이런 자료를 참고할 수 있습니다.

Apple HIG(휴먼 인터페이스 가이드라인): https://developer.apple.com/kr/design/human-interface-guidelines

휴먼 인터페이스 가이드라인(HIG) | Apple Developer Documentation

Google Material Design 3: https://m3.material.io/

Material Design

Microsoft Fluent 2: https://fluent2.microsoft.design/

Fluent 2 Design System

⑶ 문서의 주요요소와 구성: 메시지

이제 메시지입니다. 소프트웨어에서 표시되는 메시지는 몇 가지로 분류할 수 있습니다.

① 오류 (15, 17, 21, 25)

사용자가 명령한 처리가 실패했을 때 표시되는 메시지입니다.

② 성공 (16, 19, 23)

사용자가 명령한 처리가 문제없이 완료되었을 때 표시되는 메시지입니다.

③ 확인 (20, 24)

사용자가 명령한 처리가 문제없이 완료되었을 때 표시되는 메시지입니다.

④ 지시 (18, 22, 26)

소프트웨어에서 사용자에게 어떤 작업을 하도록 지시할 때 표시되는 메시지입니다.

⑤ 주요 요소와 구성

메시지 종류를 정리하면 다음과 같습니다.

오류

성공

확인

지시

예시 시나리오를 보면, 사용자와 소프트웨어 간에 아래 그림과 같이 "상호작용(대화"가 발생하고 있음을 알 수 있습니다.

예시시나리오에서의 사용자와 소프트웨어간 대화

메뉴얼이나 API레퍼런스에서는 문서라는 공간안에서 구조가 형성되어 있었습니다. 제목이 있고, 그 아래에 절차가 작성되는 형태의 구조입니다. 한편, 메시지에서는 대화라는 시간 안에서 구조가 형성되고 있습니다.

따라서, 메시지의 구조는 시간적인 흐름을 통해 설명하고자 합니다. 아래 그림을 보면 "사용자 명령"을 제외한 나머지는 소프트웨어가 표시하는 메시지입니다.

메시지구조

⑷ 표현의 포인트: UI

다음으로 표현의 포인트입니다. 우선 UI에 대해 설명합니다.

① UI에서 일반적인 단어를 사용

UI에서는 사용자가 위화감을 느끼지 않고 바로 이해할 수 있도록, 일반적으로 자주 사용되는 단어를 사용합니다. 예를 들어, [Change password]버튼이 있습니다. 동사 "change"와 "동의어 "alter"도 있지만 일반적으로 사용되는 단어는 "change"입니다. 이처럼 UI에서 자주 사용되는 동사는 마지막에 정리한 "중요한 단어와 표현집" 정리내용을 참고하시기 바랍니다.

② 간략하게 짧게 작성

UI는 표시공간에 제한이 있습니다. 예를 들어, 버튼이나 메뉴항목에는 고장 몇 단어정도만 쓸 수 있을 것입니다. 그렇기 때문에 UI의 언어는 짧게 써야 합니다. 짧게 쓰는 방법 중 하나로 활용되는 것이 "생략"입니다.

생략이란, 문장으로는 필요하지만 의미상 문제가 없는 단어를 줄이는 방법입니다. 상황에 따라 생략할 수 있는 것은 주어(명사), 목적어(명사), 한정어(a, the, this, my, your등)과 같은 단어입니다. 구체적인 예는 아래와 같습니다.

UI에서 생략가능한 단어의 구체적인 예

이처럼 UI에서는 생략하여 작성하지만, 충분히 공간이 있는 경우에는 무리하게 생략할 필요가 없습니다. 예를 들어, "This is permanent action and cannot be undone."는 생략없는 완전한 문장입니다.

③ 사용자명령은 동사가 많지만, 명사나 형용사도 사용

사용자명령을 실행하는 버튼등의 UI라벨은 명령문으로 작성되는 경우가 많습니다. 명령문일 경우, 동사원형으로 시작합니다. 예시 중에서는 아래와 같은 예시가 있습니다.

(7)의 "Search"는 동사만으로 구성

(11)의 "Save"는 동사만으로 구성

(12)의 "Change password"는 동사+목적어로 구성

이처럼 동사를 중심으로 한 UI라벨이 일반적이지만, 문맥상 사용자가 오해할 가능성이 낮을 경우, 동사가 아닌 명사나 형용사로 더 짧고 명확하게 작성하는 경우도 있습니다. 명사나 형용사의 예시를 봅시다.

(3)의 "Details"는 명사

⇒ 동사를 포함한 "Show details"도 가능하지만, 문맥적으로 오해의 가능성이 낮기 때문에 더 짧은 "Details"가 적함함

(4)의 "Previous"와 "Next"는 형용사

⇒ 동사를 포함한 "Show previous"나 "Show next"도 가능하지만, 문맥적으로 오해의 가능성이 낮기 때문에 더 짧은 "Previous"와 "Next"가 적합함

⑸ 표현의 포인트: 메시지

이번에는 메시지 표현의 포인트입니다. 주요 요소로 나타낸 4가지 메시지에 대해 설명합니다.

① 오류

우선 오류메시지입니다. 구체적인 표현을 예시로 확인해 봅시다.

(15) Failed to add this book. A book with the same ISBN already exists.

(17) The email address format is invalid.

(21) Passwords don't match.

(25) Unable to delete your account.

오류를 표시할 때 (21)의 "don't"처럼 부정문으로 작성할 수도 있지만, 정형화된 오류표현도 존재합니다. 예를 들어,

(15): "Failed to OO" (OO에 실패했습니다)

(25): "Unable to OO" (OO할 수 없습니다)

이런 표현이 대표적인 구성입니다. 또한 (17)의 "invalid"(무효)같은 단어도 오류 발생시 자주 사용됩니다. 이런 오류 표현에 대해서도 "중요한 단어와 표현집"에서 정리해 두었습니다.

단순히 오류가 발생했다는 사실을 전달하는 것이 아니라, 발생원인과 처리방법의 설명도 추가하는 것이 좋다고 여겨집니다. 예를 들어, (15) "Failed to add this book. A book with the same ISBN already exsits."라는 메시지는 첫문장에서 오류 발생 사실을 전달하고 ,2번째 문장에서 원인(동일 ISBN책이 이미 존재함)을 설명합니다. 원인을 알 수 없으면 사용자는 답답함을 느끼게 될 것입니다. 또한 이후 "지시 메시지"를 활용하여 처리방법도 함께 안내하면 더 친절한 표현이 될 것입니다.

② 성공

다음은 성공 메시지입니다. 예시를 보면 아래와 같습니다.

(16) The Crying of Lot 49" has been added.

(19) Your email address has been successfully changed!

(23) Your password has been successfully changed!

(19), (23)에 나오는 "successfully"(정확히)라는 부사는 성공을 나타낼때 자주 사용됩니다. "successfully"의 명사형은 "success"(성공)입니다.

그래서 단순히 "Success!"와 같이 짧게 표시하는 성공 메시지도 자주 보입니다. 짧은 성공 메시지로는 "Done"이나 "Done saving."과 같은 표현도 있습니다. (16)처럼 "successfully"와 같은 명확한 단어를 사용하지 않아도 성공했다는 것을 표현할 수 있습니다. 특히 현재 완료형을 사용하면, 사용자가 기대했던 상태가 완료되었음을 전달할 수 있어 성공 메시지로 적합합니다.

③ 확인

다음은 확인 메시지입니다. 확인 메시지는 소프트웨어가 사용자에게 확인을 요청하기 위해 작성되며, 일반적으로 의무문 형태가 됩니다. 다이얼로그로 표시되는 경우가 많으며, 메시지 뒤에는 사용자가 누를 수 있는 버튼(예: "Yes", "No", "Cancel", "Delete" 등)을 기재합니다.

예시에 포함된 확인 메시지의 예시는 아래와 같습니다.

(20) Do you want to change the password?

(24) Are you sure you want to delete your account?

(20), (24)는 확인 메시지에서 매우 자주 사용되는 표현입니다. 이 2가지를 포함하여 확인메시지에서 자주 사용되는 구성은 3가지가 있습니다.

Do you want to OO? (OO하고 싶으신가요?)

기본적인 질문 표현, "want"대신 "wish"를 사용하는 예도 있지만, "want"만 사용해도 문제없음.

Would you like to OO? (OO하고 싶으신가요?)

"Do you want to OO?"와 동일한 질문 표현이지만, 다소 더 공손한 뉘앙스임.

Are you sure you want to OO? (정말로 OO하시겠습니까?)

사용자의 의도를 확인하는 표현, 삭제나 중단등 잘못 실행하면 사용자가 곤란할 가능성이 있는 작업의 확인에 사용됨

위의 확인메시지는 생략없이 작성된 완전한 의문문입니다. 공간이 제한되어 있는 경우에는 짧게 표현되기도 합니다. 예를 들어, "Do you want to"나 "Are you sure you want to"부분을 생략하고, 동사로 시작하는 경우가 있습니다. 몇가지 예시는 아래와 같습니다.

Delete? (삭제하시겠습니까?)

Add new book? (새로운 책을 추가하시겠습니까?)

Save changes before closing? (닫기 전에 변경사항을 저장하시겠습니까?)

단, 공간에 문제가 없다면 생략하지 않고 완전한 의문문으로 작성하는 것이 좋습니다.

④ 지시

마지막으로 지시 메시지입니다. 지시 메시지는 소프트웨어가 사용자에게 지시를 내리는 것이기 때문에 일반적으로 명령문 형태가 됩니다. 예시는 아래와 같습니다.

(18) Enter a valid address.

(22) Make sure you have entered the same passwords in both fields.

(26) Please contact the developer.

명령문이기 때문에 동사로 시작합니다. (18), (22)처럼 조작지시할 경우, "please"를 붙이지 않은 간단한 명형형으로 작성됩니다. 이는 매뉴얼의 조작절차를 작성시 동일한 방식입니다.

단, (26)처럼 사용자에게 특별한 조치를 요청하는 경우에는 "please"를 붙여 더 정중하게 작성해도 문제가 없습니다. 또 다른 예로는 발생한 오류에 대한 대처 방법을 나타내는 경우가 있습니다. 오류 메시지를 작성할 땐은 단순히 오류 발생사실뿐만 아니라, 대처방법도 사용자에게 알려주는 것이 좋다고 여겨집니다.

지시 메시지에는 정형화된 표현이 있습니다. 예를 들어 (22) "Make sure (that) OO"와 같은 구조가 대표적입니다. 이외에도 몇가지 정형화된 구성예시는 아래와 같습니다.

Make sure (that) OO

(OO를 확인해 주시고, OO를 확실히 해 주십시오)

Ensure (that) OO

(OO를 확인해 주시고, OO를 확실히 해 주십시오)

예시: Ensure that the latest security updates are installed. (최신 보안업데이트가 설치되어 있는 것을 확인해 주십시오)

It is recommended that OO

(OO를 권장합니다) → 권장하는 형태로 완곡하게 지시

예시: It is recommended that you close all applications before continuing. (진행하기 전에 모든 애플리케이션을 닫는 것을 권장합니다)

⑹ 중요한 단어와 표현집

UI와 메시지에 사용되는 중요한 단어와 표현을 정리합니다.

① UI에 사용하는 동사

UI에서는 조작이나 동작을 표현하는 "동사"가 중요합니다. 예를 들어, "Delete"나 "Change password"와 같은 버튼라벨이 이에 해당합니다. UI에서는 간결한 표현이 선호되기 때문에 짧더라도 충분히 의미가 전달될 수 있는 정확한 동사를 선택해야 합니다. 다음은 UI에서 자주 사용되는 동사를 크게 카테고리로 나누어 제시합니다. 일부 형용사와 부사도 포함됩니다.

"설정"에 해당하는 명사의 사용구분

② 오류 표현

사용자가 지시한 처리가 성고한 경우, 사용자는 특별히 곤란함을 느끼지 않습니다. 그러나, 오류가 발생하면 사용자는 어떤 대처를 요구받게 됩니다. 사용자의 만족도를 높이기 위해서는 적절한 오류 메시지를 작성하는 것이 중요합니다. 자주 사용되는 간단한 오류 표현을 정리합니다.

© 2024 ZeR0, Hand-crafted & made with Damon JW Kim.

Profile: https://gaebal.site

ZeR0 Knowledge Base | Jaewoo Kim resume

강의 및 개발, 컨설팅 문의: https://talk.naver.com/ct/w5umt5

네이버 톡톡