반응형 UI제작 『Draggable.js』드래그 & 드랍

열심히 CSS를 작성하고, 여러 색상표를 뒤적거려 봐도 뭔가 부족하다. 그렇다고 디자인 영역을 본격적으로 파고들기에는 감각이 부족하다. (감각을 키울 시간이 부족하다고 보는 편이 좋겠다) 개인적인 소견으로, 디자인이 2% 부족한 개발자라면 차라리 훌륭한 디자인 라이브러리를 많이 수집하는 편이 낫다고 생각한다. 

메뉴 디자인, 레이아웃(그리드), 드래그, 색상 라이브러리 등...

개발자는 개발에 집중하고, 나머지는 필요한 디자인 영역을 세분화해서 자신만의 웹디자인 즐겨찾기를 만드는 편이 효율적일 수 있다. 가령, 이번 포스팅의 주제, Draggable.js을 사용하는 것처럼. 

*draggable 

draggable라이브러리는 전형적인 반응형 UI다. 반응형 UI란, 사용자가 드래그 & 드랍을 이용해서 GUI를 변경할 수 있는 UI를 의미한다. 아래 링크를 접속해보면, Draggable을 활용했을 때 구현할 수 있는 효과를 체험해볼 수 있다.

https://shopify.github.io/draggable/examples/multiple-containers.html

1 설계

반응형 UI를 레이아웃으로 사용하기에는 무리가 있다. Draggable같은 반응형 UI는 자유도가 상당히 높기 때문에 임의로 조작하는대로 UI가 변경된다. 따라서 masonry ui처럼 커뮤니티 같은 "1대多" 형태의 사이트 UI로는 불가능하다. 

일정관리 어플이라던가 메모 혹은 데이터 분석 시각화같은 프로그램에서 사용했을 때 괜찮을 듯하다.

2 구현

Draggable 라이브러리에서 자바스크립트 코드가 간단한 편이지만 sass가 문제다. sass를 모른다면 css코드를 이해하기 어렵다. 자바스크립트 경우에는 깃허브 뿐 아니라 아래와 같이 API문서를 정리한 별도의 링크를 제공한다. 

https://shopify.github.io/draggable/docs/

3 결론

Draggable.js의 DOC링크는 보기보다 다소 기능이 많고, 복잡했다. 그래서 메인 페이지에서 전체 코드를 download받아서 예제파일을 하나씩 뜯어봤더니, 여러 모듈로 많이 연결되어 있어서 기타 라이브러리보다 불편했다. react, angular, vue같은 프레임워크도 아닌데 마치 프레임워크처럼 만들어놨다. 

아마도 원래 자바스크립트로 출발하지 않았기 때문이 아닐까한다. 어쨌든 sass를 배워서 Draggable을 사용할 바엔 아래와 같이 CSS + js로 카드UI를 직접 만드는 편이 좋겠다.

*마우스 드래그 & 카드 넘김

Card UI