안녕하세요!
어느덧 프로젝트가 [19번째 비디오 플레이어 만들기]를 지나 20번째에 접어들었습니다. 이번에는 마케팅이나 SEO 작업을 할 때 가장 번거로운 과정 중 하나인 ‘키워드 조합’을 자동화해 줄 수 있는 자바스크립트 키워드 조합기를 만들어 보았습니다. 시중에는 이미 수많은 조합기가 존재하지만, 실제 업무에서 사용하다 보면 미세한 불편함들이 발목을 잡곤 합니다.
예를 들어, 조합 순서를 갑자기 바꾸고 싶거나, 특정 항목만 빼고 조합하고 싶을 때, 혹은 수천 개의 결과물 중에서 불필요한 단어만 골라 지우고 싶을 때 기존의 툴들은 다소 경직된 모습을 보이곤 했습니다. 그래서 이번 20회차 포스팅에서는 단순히 기능을 구현하는 것을 넘어, 철저히 사용자의 입장에서 편리함을 느낄 수 있도록 ‘사용자 경험(UX)’을 최적화하는 데 집중했습니다.
문자열을 다루는 정교한 로직은 [자바스크립트 텍스트 분석기] 포스팅의 정규표현식 활용법과 함께 읽어보세요.
0. 자바스크립트 키워드 조합기
🧩 커스텀 키워드 조합기
드래그하여 순서를 바꾸고, 체크박스로 조합할 항목을 선택하세요.
조합 결과 (0개)
1. 드래그 앤 드롭으로 결정하는 조합 순서
자바스크립트 키워드 조합기를 만들면서 가장 먼저 고민한 부분은 ‘조합의 자유도’였습니다. 보통 조합기는 A+B+C 순서로 고정되어 있기 마련입니다. 하지만 이번에 제작한 툴은 HTML5 표준인 Draggable API를 도입하여 마우스로 카드를 끌어다 놓는 것만으로도 조합 순서를 즉시 바꿀 수 있게 설계했습니다.
또한, 모든 항목을 다 채우지 않더라도 필요한 부분만 선택해 조합할 수 있도록 각 카드 상단에 체크박스를 배치했습니다. 이 과정에서 라이브러리를 사용하지 않고 순수 자바스크립트만으로 드래그 앤 드롭 로직을 구현하며 코드의 경량화와 성능이라는 두 마리 토끼를 잡고자 노력했습니다.
[중요 코드: 드래그 앤 드롭 로직]
외부 라이브러리 없이 순수 자바스크립트로 구현한 드래그 앤 드롭의 핵심은 ‘어떤 요소 뒤에 배치할 것인가’를 계산하는 알고리즘에 있습니다. 이 로직 덕분에 사용자는 복잡한 설정 없이도 직관적으로 조합 순서를 커스터마이징할 수 있게 되었습니다.
// 현재 마우스 위치와 가장 가까운 카드를 찾아 위치를 변경하는 로직
function getDragAfterElement(container, x, y) {
const draggableElements = [...container.querySelectorAll('.input-card:not(.dragging)')];
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
// 요소의 중앙 지점과 마우스 커서 사이의 거리를 계산하여 삽입 위치 결정
const offset = x - box.left - box.width / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}2. 유연한 조합을 위한 체크박스와 고정 레이아웃
실제 키워드를 조합하다 보면 수천 개의 결과가 쏟아지기도 합니다. 이때 결과창이 끝없이 아래로 늘어나면 정작 중요한 설정 버튼들을 누르기 위해 화면을 계속 위아래로 오가야 하는 불편함이 생깁니다. 이를 방지하기 위해 결과 섹션의 높이를 고정하고 내부 스크롤을 적용했습니다.
이러한 고정형 레이아웃은 특히 결과 내 검색 기능을 사용할 때 그 진가를 발휘합니다. 검색 결과에 따라 화면 전체가 출렁이지 않고 내부 리스트만 부드럽게 필터링되기 때문에 사용자는 시각적인 피로감을 훨씬 덜 느끼게 됩니다. 사소해 보이지만 실무 도구에서는 매우 중요한 디테일입니다.
3. 결과물 가공: 편집보다 강력한 ‘삭제’와 ‘전체 복사’
자바스크립트 키워드 조합기 제작 초기에는 결과물을 수정하기 편하도록 입력창(input) 형태로 만들었으나, 직접 테스트해 본 결과 대량의 데이터를 드래그하여 복사하기에는 일반 텍스트 형태가 훨씬 유리하다는 결론을 내렸습니다.
대신, 개별 항목 옆에 삭제 버튼을 두어 불필요한 조합은 즉시 제거할 수 있게 했으며, navigator.clipboard API를 활용한 ‘전체 복사’ 기능을 하단에 배치했습니다. 이를 통해 수천 개의 조합 결과물을 단 한 번의 클릭으로 워드프레스나 엑셀 시트에 옮길 수 있는 효율적인 작업 흐름을 완성했습니다.
[중요 코드: 다차원 배열 조합 알고리즘]
입력된 그룹이 몇 개든 상관없이 모든 경우의 수를 조합해내는 재귀적 알고리즘의 핵심입니다.
// 입력된 N개의 그룹 배열을 순서대로 순회하며 모든 조합을 생성
function cartesian(args) {
return args.reduce((a, b) => {
// flatMap을 사용해 중첩 배열을 평탄화하며 조합 데이터를 축적
return a.flatMap(d => b.map(e => [d, e].flat()));
});
}20번째로 자바스크립트 키워드 조합기를 만들면서 가장 크게 배운 점은 “개발하기 편한 코드보다 사용하기 편한 UI가 더 중요하다”는 사실입니다. 단순히 forEach 문을 돌려 텍스트를 합치는 것은 금방 끝났지만, 드래그 기능을 넣고 결과창 높이를 고정하며 복사 기능을 다듬는 데에는 몇 배의 시간이 더 소요되었습니다.
하지만 그 결과, 제가 직접 실무에 쓰고 싶을 만큼 만족스러운 도구가 탄생했습니다. 코딩 공부라는 것이 단순히 문법을 익히는 단계를 넘어, 누군가의 불편함을 해소해 줄 수 있는 도구를 만드는 과정임을 다시 한번 느끼는 계기가 되었습니다.
중복된 키워드를 제거하고 모든 경우의 수를 조합하는 알고리즘을 짜면서 배열 메서드의 강력함을 다시 한번 확인했습니다. 실제 마케팅 업무에서 유용하게 쓰일 수 있는 도구를 내 손으로 직접 만들었다는 뿌듯함이 컸던 작업이었습니다.
여러분도 이 코드를 활용해 자신만의 업무 효율화 도구를 만들어 보세요. 작은 아이디어가 모여 세상을 편하게 만드는 멋진 프로그램이 될 수 있습니다. 20번째 포스팅까지 함께해 주셔서 감사하며, 다음 21번째 프로젝트에서는 더욱 놀라운 주제로 찾아오겠습니다!