UI 요소(1)
by
Dec 22. 2022
UX Writer인데 이것도 알아야 해요?
네, 당근이에요
사보기획자로 일할 때도 그랬지만, 기획을 하고 콘텐츠를 '쓴다'고 해서 글 쓸 줄만 알면 된다고 생각하지 않는다. UXW도 마찬가지다. UXW로 쓴 글이 어디에 쓰일지 알아야 더 잘 쓸 수 있다. 그런 의미에서 UX Writing이 쓰이는 몇 가지 UI 요소들을 짚어보려고 한다.
1. 레이블lable & 플레이스 홀더Placeholder
"레이블, 레이블 해서 뭔가 봤더니 라벨이네 라벨 ㅋㅋㅋ" 처음 UXW가 됐을 때 내 옆자리 동료가 던진 말이다. (TMI_외래어 표기법으로는 레이블, 라벨은 한국식 표현) 그냥 라벨이라고 생각하면 어떤 역할을 하는지 정도는 유추해볼 수 있다.
텍스트 필드 레이블 Text field lable: 사용자가 어떤 내용을 입력해야 하는지 알려주는 요소
▼
플레이스홀더 텍스트 Placeholder Text: 사용자가 무엇을 입력할지 미리 알려주는 텍스트
- 통상 '연한 회색' 글씨로 표기
- 사용자가 클릭하면 사라짐
- 사용자가 꼭 입력하길 원하는 레이블에 표기
검색창=텍스트 필드 레이블 / Google 검색 또는 URL 입력=플레이스 홀더 텍스트
검색창=텍스트 필드 레이블 / SEARCH=플레이스홀더 텍스트▼
도움말 Helper Text: 사용자가 입력할 정보 힌트
도움말의 위치는 통상 레이블 아래지만, 경우에 따라 레이블을 마우스로 클릭하면 보이는 경우도 있다.
- 힌트나 설명은 레이블 하단 또는 툴팁에 사용(by 마이크로카피)
▼
에러문구 Error Text: 말 그대로 잘못된 정보를 입력했을 때 빨간색으로 표기되는 문구
출처_아보카도 UX/UI 레벨 테스트 중에서 발췌▼
< 레이블 관련 > 가볍게 참고하면 좋을 브런치
https://brunch.co.kr/@joojun/45
https://brunch.co.kr/@chulhochoiucj0/20
2. 버튼명 & CTA·Call to Action
마케팅 메시지를 쓸 때도 버튼 문구는 등장한다. 사용자의 결정을 행동으로 유도하는 접점이므로 짧고 강렬해야 한다. 시중에서는 ① 사용자가 해야 할 행동 말고 얻을 수 있는 내용을 ② 구체적으로 써야 전환율이 높다고 하는데 이게 직접 쓰려고 보면 생각보다 어렵다. 버튼문구 하나가 이토록 영향력이 있을 줄이야.. 사실 쉽게 생각하면 쉬운데 자꾸 더 나은 걸 생각하려다 보니 어렵게 느끼는지도 모르겠다. 아무튼 버튼 디자인에도 여러 가지가 있는데 각각의 역할과 쓰임에 맞게 라이팅한다.
Solid CTA: 바탕색이 있는 버튼, 아우트라인 버튼보다 임팩트를 주는 만큼 중요한 기능을 요하는 버튼이다
▼
Outline CTA: 박스라인만 있는 버튼
▼
텍스트 버튼: 웹/앱 하단에 글자로만 되어 있는 버튼으로 클릭하면 다른 페이지로 이동할 수 있다
▼
비활성화 버튼: 사용자가 이미 실행한 경험이 있거나 활성화할 조건을 충족하지 못한 경우 연회색으로 보이는 버튼
▼
아이콘 버튼: 텍스트 없이 아이콘으로만 되어 있는 버튼 ex) 인스타
