웹 디자인 #22
웹 디자인 #22웹사이트에는 정보를 보여주는 요소만 있는 것이 아닙니다.
사용자가 버튼을 누르고, 내용을 입력하고, 여러 항목 중 하나를 선택하며, 특정 기능을 켜거나 끄는 등 직접 행동할 수 있는 컴포넌트도 필요합니다.
이러한 컴포넌트에는 몇 가지 공통점이 있습니다.
- 클릭과 입력, 선택처럼 명확한 행동이 발생합니다.
- 사용자의 행동에 따라 컴포넌트의 상태가 달라집니다.
- 행동이 정상적으로 처리되고 있는지 피드백을 제공해야 합니다.
- 사용자가 무엇을 할 수 있는지 시각적으로 이해할 수 있어야 합니다.
대표적으로 다음과 같은 컴포넌트가 있습니다.
- 버튼
- 인풋
- 셀렉트
- 텍스트 영역
- 체크박스
- 라디오 버튼
- 토글 스위치
- 드롭다운 메뉴
- 검색창
- 칩
이러한 컴포넌트는 회원가입과 로그인, 문의, 결제, 검색처럼 웹사이트의 주요 기능을 수행하는 데 사용됩니다.
따라서 단순히 보기 좋게 디자인하는 것보다 사용자가 현재 어떤 행동을 할 수 있고, 행동 이후 어떤 상태로 바뀌었는지를 명확하게 이해하도록 만드는 것이 중요합니다.
인터랙션 컴포넌트에는 상태가 필요하다
물리적인 버튼을 누르면 손끝으로 버튼이 내려가는 느낌을 받을 수 있고, 기계음이나 불빛을 통해 정상적으로 눌렸다는 사실을 확인할 수 있습니다.
하지만 웹사이트의 버튼과 입력 요소에는 실제 촉감이 없습니다.
따라서 웹에서는 색상과 테두리, 위치, 아이콘, 애니메이션 등을 통해 컴포넌트의 상태를 시각적으로 전달해야 합니다.
사용자의 행동과 상황에 따라 다음과 같은 상태를 사용할 수 있습니다.
기본 상태
사용자가 아직 컴포넌트와 상호작용하지 않은 기본적인 상태입니다.
버튼과 입력창, 체크박스 등이 화면에 처음 표시될 때의 모습을 의미합니다.
호버 상태
사용자가 마우스 포인터를 컴포넌트 위에 올렸을 때 나타나는 상태입니다.
배경이나 테두리, 글자 색상이 달라지면서 해당 요소가 클릭하거나 조작할 수 있는 요소라는 사실을 알려줍니다.
포커스 상태
인풋과 같은 입력 요소를 클릭해 현재 내용을 입력할 수 있는 상태입니다.
사용자가 지금 어느 항목에 내용을 작성하고 있는지 알 수 있도록 테두리나 배경을 변경할 수 있습니다.
액티브 또는 프레스 상태
사용자가 버튼을 클릭하거나 화면에서 터치하고 있는 순간의 상태입니다.
버튼의 배경을 더 어둡게 만들거나 위치를 살짝 아래로 이동시켜 실제로 눌리고 있는 듯한 피드백을 제공할 수 있습니다.
로딩 상태
버튼을 눌렀지만 작업이 즉시 완료되지 않을 때 사용합니다.
로딩 아이콘이나 진행 상태를 보여주면 사용자는 자신의 행동이 정상적으로 처리되고 있으며 결과를 기다려야 한다는 사실을 이해할 수 있습니다.
비활성화 상태
현재 조건에서는 사용할 수 없는 컴포넌트를 표현하는 상태입니다.
예를 들어 필수 내용을 입력하지 않아 제출할 수 없거나, 선택할 수 없는 기능이라면 버튼을 비활성화할 수 있습니다.
오류 상태
사용자가 잘못된 정보를 입력했거나 필수 입력 조건을 충족하지 못했을 때 사용합니다.
단순히 색상만 변경하는 데서 끝내지 않고 어떤 항목에 문제가 있는지 설명하는 문구를 함께 제공하는 것이 좋습니다.
컴포넌트를 설계할 때는 기본 형태 하나만 만드는 것이 아니라 실제 사용 과정에서 필요한 여러 상태를 함께 준비해야 합니다.
버튼이란?
버튼은 웹에서 가장 기본적인 행동 유도 컴포넌트입니다.
사용자가 버튼을 클릭하면 특정 기능이 실행되거나 다음 단계로 이동합니다.
예를 들어 다음과 같은 행동에 버튼을 사용할 수 있습니다.
- 회원가입하기
- 로그인하기
- 문의하기
- 결제하기
- 저장하기
- 파일 다운로드하기
- 다음 단계로 이동하기
- 영상 재생하기
- 모달 열기
버튼은 사용자가 눌렀을 때 어떤 일이 발생한다는 사실을 시각적으로 이해할 수 있어야 합니다.
일반 텍스트와 구분되지 않거나 현재 누를 수 있는 상태인지 알기 어렵다면 사용자는 버튼의 존재를 알아차리지 못할 수 있습니다.
버튼의 상태
버튼에는 사용자의 행동과 처리 과정에 따라 여러 상태가 필요합니다.
Default
아직 사용자가 버튼에 마우스를 올리거나 클릭하지 않은 기본 상태입니다.
Hover
마우스 포인터를 버튼 위에 올렸을 때 나타나는 상태입니다.
기본 상태보다 배경을 조금 어둡게 만들거나 테두리와 글자 색상을 변경할 수 있습니다.
Active 또는 Pressed
버튼을 클릭하거나 터치하고 있는 순간의 상태입니다.
호버보다 배경을 더 어둡게 만들거나 버튼을 살짝 아래로 이동시켜 눌리는 느낌을 줄 수 있습니다.
Loading
버튼을 클릭한 뒤 결과가 처리되고 있는 상태입니다.
로딩 아이콘을 보여주거나 버튼 문구를 처리 중과 같은 표현으로 변경할 수 있습니다.
Disabled
현재 사용할 수 없는 상태입니다.
버튼의 명도와 대비를 낮춰 다른 버튼과 구분할 수 있습니다.
버튼이 비활성화되었더라도 사용자가 왜 누를 수 없는지 이해할 수 있도록 주변 입력 조건이나 안내 문구를 함께 제공해야 합니다.
버튼에도 우선순위가 있다
한 화면에 여러 개의 버튼이 배치될 수 있지만 모든 버튼이 같은 중요도를 가지는 것은 아닙니다.
사용자가 가장 먼저 수행하기를 원하는 행동과 보조적인 행동을 구분해야 합니다.
프라이머리 버튼
현재 화면에서 가장 중요한 행동을 담당합니다.
다른 버튼보다 배경과 색상의 대비를 강하게 만들어 사용자가 빠르게 발견할 수 있도록 합니다.
예를 들면 다음과 같습니다.
- 시작하기
- 회원가입
- 구매하기
- 문의하기
- 무료 체험하기
세컨더리 버튼
주요 행동을 보조하는 두 번째 선택지입니다.
프라이머리 버튼보다 약하게 표현하며 외곽선이나 옅은 배경을 사용할 수 있습니다.
예를 들어 히어로 섹션에 시작하기와 데모 보기가 함께 있다면, 시작하기를 프라이머리 버튼으로 강조하고 데모 보기를 세컨더리 버튼으로 구성할 수 있습니다.
버튼 우선순위가 필요한 이유
두 개 이상의 버튼을 모두 강하게 강조하면 사용자는 무엇을 먼저 눌러야 하는지 판단하기 어렵습니다.
버튼의 디자인 차이는 단순한 스타일 구분이 아니라 행동의 우선순위를 전달하는 장치입니다.
현재 화면에서 가장 중요한 행동이 무엇인지 먼저 정한 뒤 버튼의 스타일을 구분해야 합니다.
버튼 크기와 형태
하나의 버튼 크기를 웹사이트의 모든 화면에 사용하기는 어렵습니다.
헤더와 히어로, 카드, 입력 폼처럼 버튼이 사용되는 환경에 따라 필요한 크기가 달라질 수 있습니다.
예를 들어 다음과 같이 구분할 수 있습니다.
- 강조가 필요한 큰 버튼
- 일반적인 화면에서 사용하는 기본 버튼
- 좁은 공간에서 사용하는 작은 버튼
버튼의 크기가 달라지더라도 높이와 내부 여백, 글자 크기 등의 규칙은 일정하게 관리하는 것이 좋습니다.
텍스트 버튼과 아이콘 버튼
버튼에는 텍스트와 아이콘을 다양한 방식으로 조합할 수 있습니다.
텍스트 버튼
버튼 안에 행동을 설명하는 텍스트만 들어가는 기본적인 방식입니다.
저장하기, 시작하기, 문의하기처럼 사용자가 수행할 행동을 명확하게 표현할 수 있습니다.
아이콘과 텍스트가 결합된 버튼
텍스트 앞이나 뒤에 아이콘을 함께 배치하는 방식입니다.
아이콘을 통해 버튼의 의미를 보완하거나 시각적인 집중도를 높일 수 있습니다.
예를 들어 데모 보기 버튼에 재생 아이콘을 추가하면 버튼을 누른 뒤 영상이 재생될 수 있다는 사실을 예상할 수 있습니다.
아이콘만 사용하는 버튼
검색과 닫기, 삭제처럼 비교적 익숙한 행동에는 아이콘만으로 구성된 버튼을 사용할 수 있습니다.
다만 아이콘 버튼은 사용자가 아이콘의 의미를 바로 이해할 수 있어야 합니다.
상징이 명확하지 않은 아이콘을 단독으로 사용하면 사용자는 버튼을 눌렀을 때 어떤 일이 일어날지 예상하기 어렵습니다.
CTA 버튼이란?
CTA는 Call To Action의 약자로, 사용자에게 특정 행동을 요청하는 요소를 의미합니다.
현재 화면에서 사용자가 수행하기를 원하는 가장 중요한 행동은 주로 CTA 버튼으로 표현합니다.
대표적인 CTA는 다음과 같습니다.
- 무료로 시작하기
- 지금 시작하기
- 문의하기
- 회원가입하기
- 데모 신청하기
- 상품 구매하기
CTA 버튼은 히어로 섹션뿐 아니라 헤더와 페이지 중간, 마지막 섹션에도 반복해서 사용할 수 있습니다.
사용자가 페이지의 내용을 충분히 확인한 뒤 바로 다음 행동으로 이동할 수 있도록 적절한 위치에 CTA를 제공해야 합니다.
버튼을 더 강조하는 시각적 표현
최근의 웹사이트에서는 기본적인 사각형 버튼 외에도 다양한 시각적 효과를 활용합니다.
- 입체감이 있는 버튼
- 그라데이션 버튼
- 애니메이션이 적용된 버튼
- 마우스의 움직임을 따라오는 마그네틱 효과
- 클릭할 때 눌리는 듯한 움직임
이러한 표현은 사용자의 시선을 끌고 버튼을 누르고 싶게 만들 수 있습니다.
다만 시각적 효과가 버튼의 의미나 상태를 방해해서는 안 됩니다. 사용자는 버튼이 클릭 가능한 요소라는 사실과 현재 상태를 먼저 이해할 수 있어야 합니다.
폼이란?
폼은 사용자의 정보를 입력받는 UI 영역입니다.
회원가입과 로그인, 문의, 결제처럼 웹사이트에서 발생하는 주요 행동은 대부분 폼을 통해 이루어집니다.
폼은 하나의 컴포넌트가 아니라 여러 입력 관련 컴포넌트를 조합해 구성합니다.
대표적인 폼 컴포넌트는 다음과 같습니다.
- 인풋
- 셀렉트
- 텍스트 영역
- 체크박스
- 라디오 버튼
- 제출 버튼
- 라벨
- 헬퍼 텍스트
- 오류 메시지
폼을 설계할 때는 사용자가 어떤 내용을 입력해야 하는지 이해하고, 현재 어디를 작성하고 있으며, 입력한 내용에 문제가 있는지를 확인할 수 있어야 합니다.
인풋이란?
인풋은 사용자가 한 줄의 정보를 입력할 때 사용하는 컴포넌트입니다.
다음과 같은 내용을 입력하는 데 사용할 수 있습니다.
- 이름
- 이메일
- 비밀번호
- 전화번호
- 검색어
- 주소
- 인증번호
인풋에 마우스를 올리거나 클릭하면 커서와 테두리, 배경 등이 달라질 수 있습니다.
사용자가 인풋을 클릭한 상태는 포커스 상태이며, 현재 해당 항목에 내용을 입력할 수 있다는 사실을 알려줍니다.
인풋의 라벨과 플레이스홀더
라벨
라벨은 해당 입력창에 어떤 정보를 작성해야 하는지 알려주는 이름입니다.
예를 들면 다음과 같습니다.
- 이름
- 이메일
- 비밀번호
- 전화번호
인풋 위쪽에 라벨을 배치하면 사용자가 내용을 입력한 뒤에도 해당 입력창의 의미를 확인할 수 있습니다.
플레이스홀더
플레이스홀더는 사용자가 내용을 입력하기 전에 입력창 안에 표시되는 안내 문구입니다.
예를 들면 다음과 같습니다.
- 이름을 입력하세요
- 이메일 주소를 입력하세요
- 비밀번호를 입력하세요
사용자가 내용을 입력하면 플레이스홀더는 사라지고 실제로 입력한 값이 표시됩니다.
플레이스홀더만으로 입력창의 의미를 설명하면 사용자가 내용을 입력한 뒤 어떤 항목이었는지 확인하기 어려울 수 있습니다.
따라서 폼에서는 플레이스홀더와 함께 별도의 라벨을 제공하는 것이 좋습니다.
비밀번호 인풋
비밀번호 입력창에서는 입력한 내용이 외부에 그대로 보이지 않도록 문자를 가려서 표시합니다.
다만 사용자가 입력한 비밀번호를 다시 확인할 수 있도록 우측에 보기와 숨기기 기능을 제공할 수 있습니다.
눈 모양 아이콘을 선택하면 비밀번호가 보이고, 다시 선택하면 가려지는 방식입니다.
비밀번호 입력창에는 조건을 알려주는 헬퍼 텍스트도 함께 사용할 수 있습니다.
예를 들어 다음과 같은 조건이 있을 수 있습니다.
- 여덟 자 이상 입력
- 영문과 숫자 포함
- 특수문자 포함
사용자가 내용을 모두 입력한 뒤 오류를 확인하게 하기보다 입력하기 전에 필요한 조건을 알려주는 편이 좋습니다.
인풋의 유효성 검사
사용자가 입력한 내용이 정해진 조건에 맞는지 확인하는 과정을 유효성 검사 또는 밸리데이션이라고 합니다.
예를 들어 다음과 같은 상황에서 오류를 표시할 수 있습니다.
- 필수 항목을 입력하지 않았습니다.
- 이메일 형식이 올바르지 않습니다.
- 비밀번호 조건을 충족하지 않았습니다.
- 입력 가능한 글자 수를 초과했습니다.
- 서로 다른 비밀번호를 입력했습니다.
오류가 발생했을 때는 어떤 입력창에 문제가 있는지 시각적으로 구분해야 합니다.
테두리와 아이콘, 문구 등을 함께 사용해 오류 상태를 전달할 수 있습니다.
헬퍼 텍스트
헬퍼 텍스트는 사용자가 내용을 정확하게 입력할 수 있도록 조건이나 예시를 알려주는 보조 문구입니다.
예를 들어 비밀번호 입력창 아래에 필요한 문자 수와 조합 조건을 설명할 수 있습니다.
에러 메시지
에러 메시지는 실제로 잘못 입력된 내용과 해결 방법을 설명합니다.
단순히 오류가 발생했습니다라고 보여주기보다 무엇을 수정해야 하는지 알 수 있는 문장이 필요합니다.
셀렉트란?
셀렉트는 여러 항목 중 하나 또는 여러 개를 선택할 때 사용하는 컴포넌트입니다.
사용자가 셀렉트를 누르면 선택할 수 있는 항목이 목록 형태로 펼쳐집니다.
대표적인 사용 예시는 다음과 같습니다.
- 국가 선택
- 지역 선택
- 직업 선택
- 카테고리 선택
- 관심 분야 선택
- 정렬 기준 선택
단일 선택과 다중 선택
단일 선택
여러 항목 중 하나만 선택할 수 있는 방식입니다.
국가 목록에서 대한민국을 선택하면 해당 항목이 입력창에 표시됩니다.
다중 선택
여러 개의 항목을 동시에 선택할 수 있는 방식입니다.
선택한 항목은 입력창 안에서 여러 개의 칩 형태로 표시할 수 있습니다.
예를 들어 관심 분야에서 디자인, 개발, 영어를 동시에 선택할 수 있습니다.
검색 기능이 포함된 셀렉트
선택할 수 있는 항목이 많다면 목록을 처음부터 끝까지 탐색하기 어려울 수 있습니다.
이때 셀렉트 안에 검색 기능을 결합할 수 있습니다.
국가 목록에서 대한을 입력하면 대한민국처럼 검색어와 관련된 항목만 보여주는 방식입니다.
선택 항목이 많은 셀렉트에서는 검색 기능을 제공하면 사용자가 원하는 항목을 빠르게 찾을 수 있습니다.
텍스트 영역이란?
텍스트 영역 또는 텍스트 에어리어는 여러 줄의 긴 내용을 입력할 때 사용하는 컴포넌트입니다.
인풋은 한 줄의 짧은 정보를 입력하는 데 사용하지만, 텍스트 영역은 다음과 같은 긴 내용을 작성할 때 활용할 수 있습니다.
- 문의 내용
- 자기소개
- 상품 후기
- 프로젝트 설명
- 추가 요청 사항
내용이 길어지면 자동으로 줄이 바뀌거나 텍스트 영역 안에서 스크롤이 발생할 수 있습니다.
개발 방식에 따라 사용자가 입력창의 크기를 직접 늘리거나 줄이는 리사이즈 기능도 제공할 수 있습니다.
텍스트 영역의 글자 수 제한
입력할 수 있는 글자 수가 정해져 있다면 현재 입력한 글자 수와 최대 글자 수를 함께 보여줄 수 있습니다.
예를 들어 최대 200자까지 입력할 수 있다면 다음과 같이 표시할 수 있습니다.
42 / 200
사용자가 글자 수 제한에 가까워지거나 초과하면 색상과 안내 문구를 변경해 현재 상태를 알려줄 수 있습니다.
글자 수 제한을 적용할 때는 사용자가 내용을 입력한 뒤에만 알게 하기보다 처음부터 최대 글자 수를 확인할 수 있도록 하는 것이 좋습니다.
체크박스란?
체크박스는 각 항목의 선택 여부를 독립적으로 설정할 때 사용하는 컴포넌트입니다.
사용자가 체크박스를 누르면 선택되고, 다시 누르면 선택이 해제됩니다.
대표적인 사용 예시는 다음과 같습니다.
- 이용약관 동의
- 개인정보 수집 동의
- 관심 분야 다중 선택
- 여러 필터 선택
- 여러 항목을 동시에 선택
- 전체 선택
체크박스는 여러 항목을 동시에 선택할 수 있다는 특징이 있습니다.
체크박스의 클릭 영역
체크박스를 사용할 때는 작은 네모 영역만 클릭할 수 있도록 만들지 않는 것이 좋습니다.
체크박스 오른쪽에 있는 라벨 문구까지 함께 클릭할 수 있도록 해야 사용자가 더 쉽게 선택할 수 있습니다.
예를 들어 이용약관에 동의합니다라는 문구가 있다면 체크박스와 문구 전체가 하나의 클릭 영역으로 동작해야 합니다.
전체 동의 기능이 있는 경우 상위 체크박스를 선택하면 하위 항목이 모두 선택되고, 다시 해제하면 전체 항목이 해제되도록 구성할 수 있습니다.
라디오 버튼이란?
라디오 버튼은 여러 선택지 중 하나만 선택할 때 사용하는 컴포넌트입니다.
하나의 항목을 선택하면 같은 그룹 안에서 기존에 선택되어 있던 다른 항목은 자동으로 해제됩니다.
예를 들면 다음과 같습니다.
- 결제 수단 선택
- 배송 방식 선택
- 성별 선택
- 요금제 선택
- 설문 응답
체크박스는 여러 항목을 독립적으로 선택할 수 있지만, 라디오 버튼은 하나의 그룹에서 하나만 선택할 수 있다는 차이가 있습니다.
체크박스와 라디오 버튼의 차이
| 구분 | 체크박스 | 라디오 버튼 |
|---|---|---|
| 선택 가능 수 | 여러 항목 선택 가능 | 한 그룹에서 하나만 선택 |
| 선택 관계 | 각 항목이 독립적 | 항목이 서로 배타적 |
| 선택 해제 | 개별적으로 선택과 해제 가능 | 다른 항목을 선택하면 기존 선택 해제 |
| 주요 사용 예시 | 약관, 필터, 관심 분야 | 결제 방식, 배송 방식, 요금제 |
사용자에게 여러 선택을 허용할 것인지, 하나의 선택만 허용할 것인지에 따라 적합한 컴포넌트를 사용해야 합니다.
토글 스위치란?
토글 스위치는 기능의 상태를 즉시 켜거나 끌 때 사용하는 컴포넌트입니다.
대표적인 사용 예시는 다음과 같습니다.
- 알림 허용
- 자동 재생
- 위치 정보 사용
- 다크 모드
- 라이트 모드
- 공개 여부
토글을 누르는 즉시 상태가 전환되고 결과가 바로 적용된다는 특징이 있습니다.
따라서 별도의 저장 버튼을 눌러야 변경되는 설정보다 즉시 반영되는 기능에 사용하는 것이 자연스럽습니다.
토글 스위치의 클릭 영역
토글도 스위치 영역만 클릭할 수 있도록 만들기보다 옆에 있는 라벨까지 함께 누를 수 있도록 하는 것이 좋습니다.
사용자가 작은 스위치를 정확하게 클릭하지 않아도 기능을 켜거나 끌 수 있기 때문입니다.
토글의 상태는 켜짐과 꺼짐이 명확하게 구분되어야 합니다.
위치와 배경색, 스위치의 이동 등을 통해 현재 상태를 알아볼 수 있도록 설계해야 합니다.
드롭다운 메뉴란?
드롭다운 메뉴는 버튼과 아이콘, 프로필 등을 선택했을 때 관련 행동이나 하위 메뉴를 펼쳐 보여주는 컴포넌트입니다.
처음에는 메뉴를 접어둔 상태로 유지하고, 사용자가 필요할 때만 목록을 열어 확인할 수 있도록 합니다.
대표적인 예시는 다음과 같습니다.
- 프로필 메뉴
- 파일 관리 메뉴
- 카드의 추가 기능
- 정렬 옵션
- 하위 내비게이션
- 편집과 삭제 메뉴
드롭다운 메뉴는 모든 행동을 화면에 항상 보여주지 않아도 된다는 장점이 있습니다.
현재 자주 사용하지 않는 기능이나 부가적인 행동을 접어두면 화면을 더 간결하게 유지할 수 있습니다.
위험한 행동을 드롭다운 안에 배치하기
삭제와 계정 탈퇴처럼 사용자가 실수로 누르면 문제가 될 수 있는 행동은 화면에서 가장 먼저 보이지 않도록 드롭다운 안에 배치하기도 합니다.
다만 위험한 행동을 숨기는 것만으로 충분한 것은 아닙니다.
드롭다운이 열린 뒤에도 일반 행동과 위험한 행동이 구분되어야 합니다.
삭제처럼 되돌리기 어려운 행동은 다른 메뉴와 분리하거나 시각적으로 구분할 수 있습니다.
검색창이란?
검색창 또는 검색 바는 사용자가 원하는 정보를 직접 찾을 수 있도록 돕는 컴포넌트입니다.
기본적인 형태는 인풋과 비슷하지만 검색에 필요한 기능이 추가될 수 있습니다.
대표적으로 다음 요소를 포함할 수 있습니다.
- 검색 아이콘
- 검색어 입력창
- 검색 실행 버튼
- 입력 내용 삭제 버튼
- 최근 검색어
- 인기 검색어
- 자동 완성 결과
검색창은 콘텐츠와 상품이 많은 웹사이트에서 사용자가 원하는 결과로 빠르게 이동하게 만드는 중요한 도구입니다.
최근 검색어와 인기 검색어
사용자가 검색창을 선택했지만 아직 검색어를 입력하지 않았다면 최근 검색 기록이나 인기 검색어를 보여줄 수 있습니다.
최근 검색어
사용자가 이전에 검색했던 단어를 다시 선택할 수 있도록 제공합니다.
각 검색어 옆에 삭제 버튼을 제공하면 사용자가 불필요한 검색 기록을 개별적으로 제거할 수 있습니다.
인기 검색어
다른 사용자들이 자주 찾는 검색어를 보여주며 사용자가 탐색할 주제를 발견하도록 도울 수 있습니다.
최근 검색어와 인기 검색어는 사용자가 검색할 단어를 아직 정하지 못했을 때도 탐색을 시작하도록 돕습니다.
검색어 삭제 기능
검색창에 내용을 입력한 뒤 우측의 닫기 버튼을 누르면 현재 검색어를 한 번에 지울 수 있습니다.
최근 검색어 목록에도 개별 삭제 기능을 제공할 수 있습니다.
삭제 기능은 사용자가 검색창의 내용을 직접 모두 지우지 않아도 새로운 검색을 빠르게 시작하도록 돕습니다.
칩이란?
칩은 사용자가 짧은 정보 단위를 빠르게 확인하거나 간단한 선택과 조작을 할 수 있도록 만드는 작은 UI 컴포넌트입니다.
버튼과 비슷한 형태를 가질 수 있지만 일반적인 행동 버튼보다 가볍게 표현합니다.
대표적으로 다음과 같은 용도로 사용할 수 있습니다.
- 태그 표시
- 선택한 항목 표시
- 적용된 필터 표시
- 상태 표시
- 짧은 카테고리 표시
- 여러 항목 중 빠른 선택
입력한 태그를 보여주는 칩
태그를 입력하거나 다중 셀렉트에서 여러 항목을 선택하면 각각의 항목을 칩 형태로 표시할 수 있습니다.
칩 안에 닫기 아이콘을 제공하면 사용자는 이미 선택한 항목을 개별적으로 삭제할 수 있습니다.
예를 들어 다음과 같이 표현할 수 있습니다.
- 디자인 ×
- 개발 ×
- 마케팅 ×
적용된 필터를 보여주는 칩
사용자가 상품 목록이나 검색 결과에 여러 필터를 적용했다면 현재 어떤 조건이 선택되어 있는지 칩으로 보여줄 수 있습니다.
예를 들면 다음과 같습니다.
- 무료 배송
- 5만 원 이하
- 서울
- 평점 4점 이상
사용자는 적용된 필터를 빠르게 확인하고, 필요하지 않은 필터만 개별적으로 해제할 수 있습니다.
선택 가능한 칩과 정보형 칩
칩은 역할에 따라 상호작용 방식이 달라질 수 있습니다.
선택 가능한 칩
사용자가 눌러서 선택하거나 해제할 수 있는 칩입니다.
클릭할 수 있는 칩이라면 호버와 선택 상태를 명확하게 제공해야 합니다.
정보형 칩
상태와 태그처럼 짧은 정보를 보여주는 용도로 사용합니다.
사용자가 눌러야 하는 요소가 아니라면 버튼처럼 강하게 보이지 않도록 표현해야 합니다.
칩을 디자인할 때 주의할 점
칩은 작은 공간 안에 짧은 정보를 보여주는 컴포넌트입니다.
따라서 칩 안의 텍스트가 지나치게 길어지지 않도록 해야 합니다.
또한 일반 버튼보다 가볍게 표현해 현재 화면에서 가장 중요한 CTA와 혼동되지 않도록 해야 합니다.
클릭 가능한 칩에는 다음과 같은 상태가 필요할 수 있습니다.
- 기본 상태
- 호버 상태
- 선택 상태
- 비활성화 상태
행동 중심 컴포넌트 비교
| 컴포넌트 | 주요 역할 | 대표적인 사용 예시 |
| 버튼 | 특정 행동 실행 | 저장, 회원가입, 문의, 구매 |
| 인풋 | 한 줄 정보 입력 | 이름, 이메일, 비밀번호 |
| 셀렉트 | 목록에서 항목 선택 | 국가, 카테고리, 정렬 |
| 텍스트 영역 | 여러 줄의 긴 내용 입력 | 문의, 후기, 설명 |
| 체크박스 | 여러 항목 독립 선택 | 약관, 필터, 관심 분야 |
| 라디오 버튼 | 하나의 항목만 선택 | 결제 방식, 배송 방식 |
| 토글 스위치 | 기능을 즉시 켜거나 끔 | 알림, 다크 모드 |
| 드롭다운 메뉴 | 관련 행동과 하위 메뉴 표시 | 프로필, 추가 기능 |
| 검색창 | 원하는 정보 검색 | 상품, 콘텐츠, 사용자 |
| 칩 | 짧은 정보와 선택 상태 표시 | 태그, 필터, 상태 |
컴포넌트의 모양만 보고 선택하기보다 사용자가 어떤 행동을 해야 하고, 선택 이후 어떤 결과가 발생하는지를 기준으로 적절한 컴포넌트를 사용해야 합니다.
행동 중심 UI를 설계할 때 자주 발생하는 실수
기본 상태만 디자인한다
버튼과 인풋의 기본 형태만 만들면 실제 사용 과정에서 필요한 호버와 포커스, 오류, 로딩, 비활성화 상태를 개발자가 임의로 처리하게 될 수 있습니다.
컴포넌트를 설계할 때는 사용 과정에서 필요한 상태를 함께 준비해야 합니다.
모든 버튼을 같은 강도로 강조한다
프라이머리와 세컨더리 버튼이 동일하게 보이면 사용자는 어떤 행동이 더 중요한지 판단하기 어렵습니다.
현재 화면의 핵심 행동을 먼저 정하고 버튼의 시각적 우선순위를 구분해야 합니다.
플레이스홀더만 라벨로 사용한다
플레이스홀더는 내용을 입력하면 사라집니다.
폼에 여러 입력창이 있다면 입력을 완료한 뒤 어떤 항목인지 확인하기 어려울 수 있으므로 별도의 라벨을 함께 사용해야 합니다.
오류 위치를 명확하게 알려주지 않는다
폼 제출에 실패했다는 사실만 알려주고 어떤 항목을 수정해야 하는지 보여주지 않으면 사용자는 다시 모든 입력값을 확인해야 합니다.
문제가 발생한 입력창과 수정 방법을 함께 알려줘야 합니다.
체크박스의 작은 영역만 클릭된다
체크박스와 라디오 버튼, 토글의 작은 도형만 클릭할 수 있도록 만들면 사용하기 불편합니다.
옆에 있는 라벨까지 하나의 클릭 영역으로 처리해야 합니다.
토글을 저장이 필요한 기능에 사용한다
토글은 누르는 즉시 상태가 변경되는 기능에 적합합니다.
토글을 선택한 뒤 별도의 저장 버튼을 눌러야 한다면 사용자는 상태가 바로 적용되었는지 혼란스러울 수 있습니다.
아이콘 버튼의 의미가 불분명하다
아이콘만 있는 버튼은 사용자가 해당 아이콘의 의미를 즉시 이해할 수 있어야 합니다.
익숙하지 않은 아이콘을 단독으로 사용하면 행동을 예상하기 어렵습니다.
칩을 일반 버튼처럼 강조한다
칩은 짧은 정보와 가벼운 선택을 위한 컴포넌트입니다.
CTA 버튼과 같은 수준으로 강조하면 어떤 행동이 더 중요한지 구분하기 어려울 수 있습니다.
