빠른 정보 검색을 돕는 컴포넌트, Tag
잘 써먹기 위해 정리하는 UI 2편
Tag는 일반 용어 의미와 컴퓨터 용어 의미가 있다. 위키 백과와 네이버 영어 사전에 나와있는 내용에 따르면,
일반 용어
: 우편물이나 화물, 택배물 등에 붙여 화물의 분류나 송수신인, 취급 주의 등을 나타내는 인식표(위키백과)
: 옷이나 물건에 상표나 세탁 방법 등을 설명하는 꼬리표(위키백과)
: 어떤 표시를 하기 위해 또는 사람이나 사물을 묘사하기 위해 붙인 꼬리표(네이버사전)
컴퓨터 용어
: 어떤 항목을 보충 설명하는 낱말 혹은 키워드(위키백과)
: 어떤 물체에 연관된 디지털 정보를 담고 있는 메타데이터의 한 종류(위키백과)
: 정보 검색을 쉽게 할 수 있도록 부여하는 키워드나 단어(네이버사전)
이렇게 Tag의 의미가 크게 2가지로 나뉘듯이 Tag 컴포넌트도 디자인 시스템에 따라 2가지 방향으로 정리되는 것을 발견할 수 있다. 하나는 앞서 살펴본 Badge 컴포넌트와 묶어서 하나로 정리하는 방향과 다른 하나는 Badge와 Tag 컴포넌트 각각 분리하여 기능을 정의하는 방향이다. '어떤 표시를 하기 위해 붙이는 꼬리표' 의미로서의 Tag가 Badge 컴포넌트와 비슷한 기능을 담고 있기에 디자인 시스템이나 프로덕트에 따라 하나로 묶어 관리하기도 한다. 이 글에서는 '정보 검색을 쉽게 할 수 있도록 부여하는 키워드나 단어' 의미에 중점을 두어 Badge 컴포넌트와 분리된 Tag 컴포넌트의 기능을 살펴보고자 한다.
1. 정보 검색을 쉽게 할 수 있도록 부여하는 키워드, Tag
해시태그는 게시물에 일종의 꼬리표를 다는 기능으로, 특정 단어 또는 문구 앞에 해시(#)를 붙여 연관된 정보를 하나로 묶을 때 쓴다. '해시(hash) 기호를 써서 게시물을 묶는다(tag)'고 해서 해시태그라는 이름이 붙여졌다. ... 처음에는 관련 정보를 묶는 정도의 기능으로 쓰였지만 지금은 검색 등 다른 용도에도 쓰인다.
- 네이버 지식 백과 <용어로 보는 IT 해시태그>
Tag하면 가장 먼저 떠오르는 것이 해시태그다. '#키워드'의 형태로 인스타그램이나 유튜브 등 SNS에서 쉽게 찾아볼 수 있다. 자신이 등록한 게시물이 타인의 게시물과 묶여 검색되길 원할 때 사용하거나 해당 키워드로 연관된 정보를 빠르게 찾을 때 활용된다. 이러한 Tag의 기능이 확대되면서 텍스트 형태뿐만 아니라 Rectangle, Round rectangle 등의 컨테이너나 Icon, Avatar 등의 컴포넌트와 조합하여 UI 요소로서 사용되고 있다.
2. Tag의 활용은 크게 '추천'과 '연관'
Tag 컴포넌트가 사용된 레퍼런스를 찾아보니, 태그를 직접 등록하는 사용자 입장이 아닌 제공자의 입장에서 크게 '추천'과 '연관' 2가지로 정리할 수 있다.
추천 태그는 검색 서비스에서 쉽게 찾아볼 수 있으며, 검색 UI와 함께 활용되어 추천 검색어뿐만 아니라 최근 검색어 형태로도 사용된다. 또한, 홈 또는 추천 화면에서 실시간 핫 키워드나 사용자 정보와 매칭된 키워드를 제공하여 빠른 정보 검색과 개인화 마케팅 전략으로 활용되고 있다.
연관 태그는 리스트나 이미지 등의 컴포넌트와 함께 활용되어 해당 컴포넌트의 부가 정보를 나타내는 동시에 클릭 인터랙션을 통해 연관 콘텐츠에 빠르게 접근할 수 있도록 돕는다.
(1) 추천 - 검색 서비스와 함께 활용
(2) 추천 - 홈 또는 추천 서비스에 활용
(3) 연관 - 리스트, 이미지 컴포넌트와 함께 활용 / 콘텐츠 상세 화면에 활용
3. Tag의 형태
Tag 컴포넌트 형태는 상태에 따라 'Clickable(or Default)', 'Deletable(or Editable)', 'Checked'로 정리해 볼 수 있다.
(1) Clickable (or Default)
Tag의 기본적인 형태다. Label은 짧은 단어 사용을 원칙으로하며, 부득이하게 긴 단어 또는 문장을 사용할 경우 줄임표(...)를 사용하여 적정 길이를 유지해야한다. Container는 직사각형 또는 둥근 사각형의 형태가 있으며, Enabled / Active / Disabled / Selected 상태를 고려한 디자인 시스템을 구축해야 한다.
(2) Deletable (or Editable)
Tag를 제거하여 편집할 수 있는 형태이며, Close button 요소가 함께 사용된다. 2개 이상의 Tag 그룹이 형성될 때 Clear all(전체삭제) 기능이 필요한지 고려해봐야 한다.
(3) Checked
토글 형태의 Tag로, 선택되어 있는 상태를 시각적으로 표현하기 위해 Check Icon 요소가 함께 사용된다. 스타일에 따라 Icon은 생략될 수 있다.
[참고자료]
1. Goldman Sachs Design System
2. Adobe Spectrum - Adobe Design System
3. Helsinki Design System
[레퍼런스 서비스]
하나원큐
오늘의집
TVING
알라딘
네이버 쇼핑
다음 금융
카카오 이모티콘
