해시태그 입력 UI 구현 방법 (폼 UX 개선 + jQuery 예제)

원인은 무엇인가

처음에는 일반적인 input 태그 하나만 사용해서 해시태그를 입력받는 경우가 많습니다.

예를 들면: <input type="text" name="hashtags">

하지만 실제 서비스를 운영해보면 여러 문제가 발생합니다.

• 태그 구분 기준이 애매함
• 중복 입력 방지 어려움
• 입력된 태그 확인 불편
• 삭제 기능 구현 필요
• 모바일에서 사용성이 떨어짐

1. UI 구조 (HTML + CSS)
   • input은 하나만 유지
   • 태그는 span으로 추가
   • flex로 자연스럽게 줄바꿈

<div class="hash-wrap">
	<label for="tagInput" class="hash-label">해시태그</label>

	<div id="tagBox" class="hash-box">
		<input type="text" id="tagInput" class="hash-input" placeholder="해시태그를 입력 후 엔터">
	</div>
</div>
<input type="hidden" id="hashtags" name="hashtags">

2. 입력 처리 (jQuery)

• Enter / , 입력 시 태그 생성
• 자동 제거
• 중복 방지

let tags = [];

$("#tagInput").on("keydown", function(e) {
	if (e.key === "Enter" || e.key === ",") {
		e.preventDefault();

		let val = $(this).val().trim().replace("#", "");

		if (!val || tags.includes(val)) return;

		tags.push(val);
		renderTags();
		$(this).val('');
	}
});

3. 렌더링 함수 (핵심 로직)

• UI는 항상 tags 배열 기준으로 다시 그림
• DOM 상태를 믿지 않고 데이터 중심으로 관리
• hidden input으로 서버 전송

function renderTags() {
	let $box = $("#tagBox");
	let $input = $("#tagInput");

	$box.find(".hash-tag").remove();

	let html = "";
	tags.forEach((tag, i) => {
		html += `
		<span class="hash-tag">
			<span class="hash-tag-text">#${tag}</span>
			<button type="button" class="hash-tag-remove" data-idx="${i}">×</button>
		</span>
		`;
	});

	$input.before(html);

	$("#hashtags").val(tags.join(","));
}

4. 태그 삭제 처리

$(document).on("click", ".hash-tag-remove", function() {
	let idx = $(this).data("idx");
	tags.splice(idx, 1);
	renderTags();
});

blur 시 자동 생성

$("#tagInput").on("blur", function() {
	let val = $(this).val().trim();
	if (val) {
		tags.push(val);
		renderTags();
		$(this).val('');
	}
});

서버에서 배열 처리 (PHP)

$hashtags = explode(',', $_POST['hashtags'] ?? '');

foreach ($hashtags as $tag) {
	$tag = trim($tag);
	if ($tag === '') continue;

	// 저장 처리
}