Tagify(태그 입력 UI) 완벽 가이드: 텍스트 필드 기반 Tags Input + 자동완성·드래그정렬·검증까지
고성능 Tags/Tokens Input
자동완성(Whitelist)
중복 방지
드래그 정렬
편집(더블클릭)
Vanilla JS / React / Vue / Angular
MIT
Tagify는 입력창(input/textarea)을 “태그 입력 컴포넌트”로 변환해 주는 라이브러리입니다. 콤마/엔터로 태그 생성, 중복 자동 차단, 추천 목록(autocomplete), 태그 편집, 드래그 앤 드롭 정렬 같은 실전 기능을 폭넓게 제공합니다.
목차 (버튼 바로가기)
1) Tagify가 필요한 이유: “태그 입력”을 UI/데이터 모두 깔끔하게
태그 입력 UI를 직접 만들면 보통 아래 문제가 빠르게 발생합니다. Tagify는 이 문제들을 “기본 기능”으로 제공해 구현/유지보수 비용을 크게 줄여줍니다.
- 중복 태그 처리: 같은 태그가 여러 번 들어가는 문제
- 입력 규칙: 길이 제한, 허용 문자(정규식), 금지어(blacklist) 등
- 추천/자동완성: 미리 정의된 whitelist 기반 검색 + 클릭 선택
- 편집/삭제 UX: 더블클릭 편집, 백스페이스 삭제, 키보드 내비게이션
- 정렬: 드래그로 태그 순서 변경(예: 우선순위)
2) 핵심 기능 요약
Tagify는 입력 필드(input/textarea)를 태그 컴포넌트로 변환하고, 자동 분리(콤마/엔터), 중복 방지, 추천 목록(whitelist 기반), 태그 편집(더블클릭), 드래그 정렬, 블랙리스트/검증/최대 개수 제한 등 실무형 태그 입력 기능을 한 번에 제공합니다.
| 기능 | 설명 |
|---|---|
| 자동 태그 생성 | 콤마(,) 또는 Enter로 입력을 태그로 분리/생성 |
| 중복 자동 방지 | 같은 value의 태그를 자동 차단(설정으로 제어) |
| 추천/자동완성 | whitelist 기반으로 드롭다운 추천 + 자동완성 |
| 태그 편집 | 더블클릭으로 편집 가능(편집 허용/클릭 수 설정) |
| 드래그 정렬 | 태그 순서 변경을 손쉽게 구현 |
| 검증/제약 | pattern(정규식), validate 함수, maxTags, blacklist 등 |
| 프레임워크 지원 | Vanilla JS 기본 + React/Vue/Angular 래퍼 제공 |
3) 설치 방법(CDN/NPM): 초보자도 실수 없는 순서
3-1) 가장 쉬운 방법: CDN
공식 문서에 안내된 jsDelivr CDN 예시를 그대로 사용하면 됩니다.
<!-- Tagify (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />3-2) 권장 방식: NPM
# NPM
npm i @yaireo/tagify
IE 관련 참고
공식 문서에서는 IE 지원이 중단되었음을 명시하고 있습니다. 레거시 브라우저 대응이 필요하면 운영 환경 정책을 먼저 정리한 뒤 적용하세요.
공식 문서에서는 IE 지원이 중단되었음을 명시하고 있습니다. 레거시 브라우저 대응이 필요하면 운영 환경 정책을 먼저 정리한 뒤 적용하세요.
4) 옵션(설정) 핵심만 정리: “이것만 알아도 80% 해결”
옵션은 많지만, 실제로 자주 쓰는 것은 정해져 있습니다. 아래는 원문 소개와 공식 문서에 반복 등장하는 핵심 설정입니다.
4-1) 입력 분리/검증
- delimiters: 태그를 나누는 구분자(기본 “,”)
- pattern: 정규식 기반 입력 검증(허용 문자/길이 등)
- validate: 태그 데이터 객체를 받아 유효성 검사하는 커스텀 함수
- blacklist: 금지 태그 목록
- enforceWhitelist: whitelist에 있는 값만 허용(추천 기반 “고정 목록 태그” 구현)
4-2) UX 제약
- maxTags: 최대 태그 개수
- duplicates: 중복 허용 여부(기본은 중복 방지)
- editTags: 더블클릭 편집 설정(클릭 횟수/유지 정책 등)
- pasteAsTags: 붙여넣기를 자동 태그로 변환
4-3) 모드(매우 중요)
- mode: null (기본): 일반 태그 입력
- mode: "select": 단일 선택 드롭다운처럼 동작(폼 select 대체)
- mode: "mix": 텍스트 + 태그를 섞어서 입력(코멘트/에디터형 UI)
5) 실전 예시 코드(복사해서 사용)
5-1) 기본: input 태그를 Tagify로 변환
<input name="tags" value="jQuery,Script" />
<script>
const input = document.querySelector('input[name=tags]');
const tagify = new Tagify(input, {
delimiters: ",",
duplicates: false,
maxTags: 10
});
</script>5-2) 추천 목록(whitelist) + 고정 목록만 허용(enforceWhitelist)
const input = document.querySelector('input[name=tags]');
const tagify = new Tagify(input, {
whitelist: ["JavaScript","jQuery","React","Vue","Angular","TypeScript"],
enforceWhitelist: true,
dropdown: {
enabled: 0 // 0이면 포커스 시점부터 추천 표시(환경에 따라 조정)
}
});5-3) 정규식(pattern)으로 허용 문자 제한
const tagify = new Tagify(document.querySelector('input[name=tags]'), {
pattern: /^[A-Za-z0-9_-]{1,20}$/, // 예: 영문/숫자/언더스코어/대시, 1~20자
});
저장(서버/DB) 팁
태그는 보통 “문자열 CSV” 또는 “JSON 배열”로 저장합니다. 공식 문서에서는 change 이벤트를 원본 input/textarea에 연결해 저장하는 패턴을 예시로 안내합니다.
태그는 보통 “문자열 CSV” 또는 “JSON 배열”로 저장합니다. 공식 문서에서는 change 이벤트를 원본 input/textarea에 연결해 저장하는 패턴을 예시로 안내합니다.
6) jQuery로 써도 되나요? 결론: “가능은 하지만, 지금은 Vanilla 권장”
핵심 결론
jQueryScript 소개 페이지는 “v4.23.0부터 jQuery 지원이 Deprecated”라고 명시합니다. 또한 공식 GitHub 문서에서도 jQuery 버전은 deprecated로 안내됩니다. 따라서 신규 프로젝트라면 Vanilla JS 방식으로 적용하는 것이 안전합니다.
jQueryScript 소개 페이지는 “v4.23.0부터 jQuery 지원이 Deprecated”라고 명시합니다. 또한 공식 GitHub 문서에서도 jQuery 버전은 deprecated로 안내됩니다. 따라서 신규 프로젝트라면 Vanilla JS 방식으로 적용하는 것이 안전합니다.
6-1) (참고) jQuery 래퍼 형태의 예시(문서에 존재)
$('[name=tags]')
.tagify()
.on('add', function(e, tagData){
console.log('added', tagData);
});
/* 메서드 접근 */
$('[name=tags]').data('tagify').addTags('aaa, bbb, ccc');위 코드는 “지원이 완전히 불가능”하다는 의미가 아니라, 장기적으로는 유지보수/업데이트 측면에서 Vanilla JS 기반이 더 적합하다는 의미입니다.
7) 운영 팁(보안/성능/업데이트 체크)
7-1) 보안: 릴리스 노트 확인은 필수
GitHub Releases의 v4.36.0 항목에는 XSS 취약점 수정이 포함되어 있습니다. 프로덕션 적용 시에는 “현재 사용 중인 버전”과 “최신 릴리스”를 비교하고 업데이트 여부를 결정하세요.
7-2) 성능: whitelist가 큰 경우(수천~수만) 전략
- 초기 whitelist를 작게 두고, 입력에 따라 AJAX로 가져오는 패턴 고려
- enforceWhitelist를 켜는 순간 “입력 UX”가 바뀌므로, 기획 단계에서 확정
- mix 모드는 자유 텍스트와 섞이므로 저장 포맷을 JSON으로 통일하는 것을 권장
7-3) 티스토리 적용 팁
티스토리 글 본문에 실행용 스크립트를 직접 넣으면 스킨/보안 설정에 따라 동작이 제한될 수 있습니다.
블로그 글에는 “개념/설치/옵션/예시/공식 링크” 중심으로 정리하고, 실제 실행은 서비스 템플릿(프로젝트 HTML)에서 적용하는 방식이 안정적입니다.
블로그 글에는 “개념/설치/옵션/예시/공식 링크” 중심으로 정리하고, 실제 실행은 서비스 템플릿(프로젝트 HTML)에서 적용하는 방식이 안정적입니다.
8) 마지막 추천 태그
#Tagify
#TagsInput
#jQuery
#VanillaJS
#프론트엔드
#폼UI
#자동완성
#Whitelist
#유효성검사
#드래그정렬
#구글SEO
#SearchAIOptimization