UI에 쓰이는 용어를 정리해봤다!
with 실제로 쓰인 이미지
기획을 하기 위해선 자신의 머리속에서만 아이디어가 끝나는 게 아니라 소통을 통해서 자신의 아이디어를 설명할 줄 알아야한다. 그러려면 자신의 머리속에 구현된 것이 무엇인지 이야기를 해야하는데, 용어를 모르면 개발자든 디자이너든 내 말을 답답해할 수 밖에 없을 것이다. 이를 해결하기 위해선 기획을 하는 사람도 용어를 배워야하는 건 너무나 당연할 것이다. 그래서 UI에서 기본적으로 사용되는 버튼, 박스등의 용어를 알아보고자 한다.
플로팅버튼
화면에 떠있는 버튼으로 앱 내에서 핵심이 되는 테스크를 수행하는 버튼이다. 사진의 이미지는 알람시계 앱인 알라미 내에 있는 플로팅 버튼이다. 해당 플로틴 버튼을 누르면 알라미의 핵심 테스크인 알람 설정에 관한 버튼들이 나오게 된다.
CTA(Call To Action/행동유도)버튼
CTA버튼은 페이지 내에서 목표를 달성하기 위해 행동을 유도하는 버튼으로 해당 피드나 광고 이미지의 목적과 이어지는 문구가 삽입되는 게 기본이다. 왼쪽 이미지는 크림의 광고 이미지로 해당 광고의 최종 목적은 물품을 고객이 구매하게끔 하는 것이다. 이러한 목적을 달성하기 위해 '지금 거래하기'라는 CTA 버튼을 삽입하여 고객이 클릭을 유도하게끔 한다.
토글
토글은 특정 기능을 끄고 키거나 스위칭 용도로 사용하는 버튼이다. 좌측의 네이버 앱을 보면 팝업 차단이나 재 실행시 네이버앱 홈으로 이동하는 것에 대한 기능을 끄고 킬 수 있게 도와준다. 우측의 무신사 앱이 토글을 사용한 방법은 스냅이나 패션톡을 들어갈 때 토글을 이용하여 쉽게 페이지 스위칭을 가능하게끔 하였다. 이로 인해 다른 카테고리의 메뉴를 들어갈 필요 없이 한 페이지 내에서 쉽게 두 페이지를 오고갈 수 있게끔 하였다.
옵션버튼/체크박스
옵션버튼은 사용자가 인터페이스 요소 중 한개만 선택이 가능하게끔 하는 단추로 용도는 여러가지가 된다. 좌측의 심플캘린더 앱처럼 알람을 반복 설정할 때, 일간, 주간, 월간 등 하나만 선택하게끔 하는 단추로 설정할 수 있다. 혹은 남자, 여자를 선택할 시 한가지만 선택하게끔 유도하는 버튼이다.
체크박스의 경우 인터페이스 요소 중 여러가지 요소를 선택이 가능하게끔 하는 단추다. 우측의 네이버지도 앱처럼 사용자가 좋아하는 지역을 여러개 선택하여 해당 장소에 대한 데이터를 확보할 수 있으며, 투표 같은 곳에서 복수의 데이터를 확보할 때 사용할 수도 있다.
