발행모달 태그칸 입력 검증으로 데이터 무결성 강화

UI에 태그칸을 추가하고, 발행모달의 태그 셀렉터 검증 로직을 강화했다. 발행 프로세스에서 태그는 단순한 입력 필드가 아니라 콘텐츠 분류·검색·관리의 핵심이기 때문에, 이번 작업은 사용자 경험과 데이터 안정성 모두를 함께 봤다.

발행 흐름에서 태그가 중요한 이유

발행 시스템이 여러 메타데이터를 수집할 때, 태그는 나중에 시스템이 의존하는 중요한 정보다. 태그가 누락되거나 잘못된 형식으로 저장되면 필터링, 검색, 통계 집계가 모두 깨진다. 특히 모달 폼은 사용자가 한 번에 여러 필드를 채우는 점에서 입력 실수가 더 쉽게 발생한다.

그동안 태그 입력을 선택사항으로 두거나 최소한의 검증만 했다면, 이번엔 "발행할 때는 반드시 유효한 태그를 선택하게 하자"는 정책을 반영하기로 했다. 이건 단순 기능 추가가 아니라, 발행 프로세스의 품질 기준을 한 단계 높이는 의사결정이었다.

셀렉터 검증과 보강 전략

"검증"과 "보강"은 다르다.

검증(Validation)은 사용자가 선택한 값이 실제로 유효한지 확인하는 것이다.
- 빈 값 차단
- 중복된 선택 방지
- 예상 범위 밖의 값 거부
- 형식 체크 (특수문자, 길이 제한 등)

보강(Enhancement)은 UI/UX를 개선해서 사용자가 올바르게 선택하기 쉽게 만드는 것이다.
- 필수 입력 표시 추가
- 선택 가능한 태그 목록 명확하게 표시
- 선택 후 피드백 (선택된 태그 시각적 표시, 개수 카운트)
- 도움말이나 힌트 텍스트

특히 lib_publish.js와 server.js 모두에서 검증하는 게 핵심이다. 클라이언트에서는 UX를 위해 즉각적 피드백을 주고, 서버에서는 데이터 무결성을 최종적으로 보장한다.

프론트/백 이중 검증의 의미

// 클라이언트: 즉각적 피드백 (저장 전)
const isTagValid = selectedTag && 
                   selectedTag.trim().length > 0 && 
                   /^[a-zA-Z0-9_-]+$/.test(selectedTag);

// 서버: 최종 방어선 (무결성 보장)
// server.js 에서도 동일 로직으로 재검증 후 DB 저장

이렇게 양쪽에서 검증하는 게 왜 일반적인가:

• 클라이언트 검증: 사용자가 바로 에러 메시지를 보면 UX가 낫다 (서버 왕복 없이 현장에서 수정)
• 서버 검증: 브라우저 개발자 도구로 클라이언트 검증을 우회할 수도 있고, API를 직접 호출할 수도 있으니 서버는 항상 의심하고 재검증해야 한다

모달이라는 제한된 UI에서는 이 균형이 더 중요하다. 모달 바깥에서 데이터를 건드릴 수 없으니까 모달 안에서 최대한 정확한 입력을 유도해야 한다.

회고: 모달 폼 검증 설계의 주의점

이번 작업을 하면서 느낀 건, 여러 필드가 있는 모달에서는 각 필드의 검증 상태를 어떻게 표시할지가 중요하다는 것.

• 필드별로 실시간 에러 표시를 할 건가, 아니면 제출 버튼 클릭 후 한 번에 모든 에러를 보여줄 건가
• 제출 버튼은 모든 필드가 유효해야 활성화되어야 하나, 아니면 필수 필드만 체크할 건가
• 태그처럼 선택형 필드는 드롭다운인가, 멀티셀렉트인가, 아니면 자유 입력 + 검증인가

이런 것들은 기능 요구사항보다는 정책의 문제라 팀과 함께 결정했다. 완벽한 설계를 추구하느라 스코프를 늘리기보다, 필요한 범위만 먼저 구현하고 사용 패턴을 보며 개선하는 방식으로 진행했다. 태그칸 하나가 모달 전체의 검증 전략을 다시 생각하게 한 작은 변경이었다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.