Drag and Drop UX 구현: 포스트잇 자바스크립트 아이디어 보드

작성자:
자바스크립트 아이디어 보드 main

안녕하세요!

저번 시간에 만들었던 자바스크립트 영단어장에 이어서 이번에 만들어볼 주제는 자바스크립트 아이디어 보드입니다. 우리가 웹 서비스를 이용할 때 가장 ‘도구답다’고 느끼는 순간은 언제일까요? 저는 화면 속의 요소를 마우스로 직접 잡고 원하는 위치로 옮길 때라고 생각합니다. 단순히 버튼을 클릭하는 것을 넘어, 실제 사물을 만지는 듯한 경험을 제공하기 때문이죠.

이번 프로젝트는 복잡한 외부 데이터나 API 연동 없이, 오직 자바스크립트의 이벤트 처리 능력만으로 구현한 ‘드래그 앤 드롭 아이디어 보드’입니다. 화면 위에 자유롭게 포스트잇을 붙이고 옮기며 생각을 정리하는 이 대시보드를 통해, 웹에서 인터랙티브한 사용자 경험(UX)을 어떻게 설계하고 구현하는지 깊이 있게 다뤄보겠습니다.

① 자바스크립트 아이디어 보드 영상

자바스크립트 아이디어 보드 play

② 드래그 앤 드롭의 원리와 좌표 계산

// 클릭 시 마우스 커서와 메모지 사이의 거리 측정
let shiftX = e.clientX - note.getBoundingClientRect().left;
let shiftY = e.clientY - note.getBoundingClientRect().top;

자바스크립트에서 요소를 드래그하는 기능은 보기보다 정교한 계산을 필요로 합니다. 마우스를 클릭한 지점과 요소의 왼쪽 상단 모서리 사이의 거리(이격 거리)를 정확히 계산해야만, 드래그를 시작할 때 요소가 마우스 커서 위치로 ‘점프’하지 않고 부드럽게 따라오게 됩니다.

clientX는 화면 전체에서의 마우스 좌표를 나타내고, getBoundingClientRect()는 요소의 현재 위치를 나타냅니다. 이 둘의 차이를 미리 저장해두었다가 마우스가 움직일 때마다 반영해주는 것이 자연스러운 드래그의 핵심입니다. 실무적으로는 이러한 디테일이 사용자가 느끼는 앱의 완성도를 결정짓는 중요한 요소가 됩니다.

화면에서 자유롭게 요소를 조작하는 방식은 [자바스크립트 캔버스 그림판]의 좌표 활용법과 연결해서 공부하면 더욱 효과적입니다.

③ 사용자 몰입을 돕는 UX 최적화 전략

이번 자바스크립트 아이디어 보드의 핵심 패턴은 ‘사용자가 조작에 집중하게 만드는 환경 설계’입니다. 이를 위해 몇 가지 중요한 UX 요소를 코드에 녹여냈습니다.

  1. 시각적 우선순위(Z-index): 여러 개의 메모지가 겹쳐 있을 때, 현재 내가 잡고 옮기는 메모지가 가장 위로 올라와야 합니다. 드래그가 시작될 때 zIndex를 일시적으로 높여 다른 요소들에 가려지지 않게 처리했습니다.
  2. 커서의 변화: 메모지 위에 마우스를 올리면 grab(손바닥), 클릭하면 grabbing(쥔 손)으로 커서 모양을 변경했습니다. 이는 브라우저가 사용자에게 “이 물체는 잡을 수 있다”는 신호를 주는 아주 강력한 시각적 피드백입니다.
  3. 이벤트 버블링 제어: 메모지 내부의 텍스트 입력창(textarea)을 클릭했을 때는 드래그 로직이 작동하지 않도록 방어 로직을 짰습니다. 글을 쓰려는데 메모지가 움직여 버린다면 사용자는 큰 불편함을 느끼기 때문입니다.

④ 데이터의 영속성: 위치 정보까지 기억하는 LocalStorage

// 위치와 내용을 동시에 관리하는 데이터 구조
{
    id: 1705214000000,
    x: 150,
    y: 280,
    text: "다음 프로젝트 아이디어 정리하기"
}

메모장에 글을 쓰는 것만큼 중요한 것은 그 메모지가 ‘어디에 있었는지’를 기억하는 것입니다. 기존에는 텍스트 데이터만 저장했다면, 이번에는 객체 구조를 확장하여 x, y 좌표값까지 로컬 스토리지에 실시간으로 기록하도록 설계했습니다.

이렇게 데이터를 구조화하면 페이지를 새로고침하더라도 사용자가 배치해둔 레이아웃 그대로 보드가 복원됩니다. 이는 단순한 웹페이지를 하나의 독립적인 ‘앱’처럼 느껴지게 만드는 중요한 장치입니다.

⑤ 시행착오와 해결: 

드래그 중 텍스트 선택 방지

자바스크립트 아이디어 보드를 실행하고 메모지를 빠르게 드래그하다 보면 브라우저가 메모지 내부의 텍스트를 드래그하는 것으로 착각해 파랗게 블록을 씌우는 현상이었습니다. 이는 조작감을 크게 해치는 요소였습니다.

저는 이를 해결하기 위해 note.ondragstart = function() { return false; }; 코드를 추가하여 브라우저의 기본 드래그 기능을 무력화하고, 제가 직접 짠 마우스 이동 로직만 작동하게 만들었습니다. 또한 CSS에서 user-select: none 속성을 고민하며, 기술적인 제약 사항을 코드로 극복하는 즐거운 경험을 했습니다.

메모지가 화면 밖으로 나가는 것을 방지
function moveAt(pageX, pageY) {
    let newX = pageX - shiftX;
    let newY = pageY - shiftY;

    // 화면 경계 제한 로직 추가
    // 왼쪽/위쪽 끝 처리
    if (newX < 0) newX = 0;
    if (newY < 0) newY = 0;
    
    // 오른쪽/아래쪽 끝 처리 (화면 너비 - 메모지 너비)
    if (newX > window.innerWidth - note.offsetWidth) {
        newX = window.innerWidth - note.offsetWidth;
    }
    if (newY > window.innerHeight - note.offsetHeight) {
        newY = window.innerHeight - note.offsetHeight;
    }

    note.style.left = newX + 'px';
    note.style.top = newY + 'px';
    updatePosition(id, newX, newY);
}

처음에는 메모지가 화면 밖으로 영영 사라지는 문제가 있었지만, window.innerWidth를 활용해 가두리 로직을 설계함으로써 사용자가 데이터를 잃어버릴 위험을 원천 차단했습니다.

⑥ 발전 방향

  • Firebase 연동: 실시간 데이터베이스를 연결하여 여러 사람이 동시에 같은 보드에서 메모를 옮기는 협업 툴로 진화시키기.
  • 테마 기능: 메모지마다 색상을 다르게 지정하여 중요도별로 분류하는 기능 추가.
  • 터치 이벤트 지원: 모바일과 태블릿 환경에서도 자유롭게 메모를 옮길 수 있도록 touchstart, touchmove 이벤트 대응하기.

이번에 만들어 본 자바스크립트 아이디어 보드를 통해 자바스크립트가 제공하는 이벤트 시스템이 얼마나 강력한지 다시 한번 체감했습니다. 화면상의 좌표를 계산하고, 사용자의 의도를 파악해 커서 모양을 바꾸는 작은 고민들이 모여 하나의 편리한 도구가 완성되었습니다.

드래그 앤 드롭 기능을 직접 구현하면서 마우스의 좌표 계산(clientX, clientY)과 요소의 위치 이동 로직이 얼마나 정교해야 하는지 알게 되었습니다. 특히 드래그하는 동안 요소가 껌벅거리거나 위치를 놓치는 버그를 잡기 위해 이벤트 전파 방식을 공부했던 것이 큰 자산이 되었습니다. 사용자 경험(UX) 중심의 코딩이 무엇인지 배울 수 있었던 프로젝트였습니다.

우리가 만드는 것은 단순한 코드가 아니라, 누군가의 생각이 담길 공간입니다. 오늘 구현한 ‘드래그 앤 드롭 아이디어 보드’가 여러분의 복잡한 머릿속을 정리해 주는 훌륭한 파트너가 되길 바랍니다. 여러분의 코딩 여정에도 즐거운 아이디어가 쏟아지길 응원하며, 다음 14번째 프로젝트에서 뵙겠습니다!

댓글 남기기