토요일, 9월 10, 2016

Web Project: dragonit


1. Introduction
dragonit은 HTML5의 Drag and Drop API를 활용한 Front end 프로젝트이다. 정적인 웹페이지를 벗어나, 좀 더 어플리케이션에 가깝도록 interactive한 UI/UX를 어떻게 제공할 수 있을지에 대한 고민에서 시작되었다.

기존의 웹 앱에서 레이아웃을 제작할 때는 html과 css를 통한 Front end 작업을 많이 하는데, 특히 이미지같은 요소들을 추가할 때 위치나 크기 설정이 마음처럼 되지 않는다.

이미지 출처: http://www.telerik.com/blogs/styling-forms-like-a-pro-with-kendo-ui
이러한 불편을 해소하기 위해 dragonit은 javascript를 활용하여 사용자가 직접 이미지를 제어할 수 있도록 도와준다. 마우스 드래그를 통해 이미지의 위치와 크기를 손쉽게 설정할 수 있고, Drag and Drop 기능을 통해 외부 파일을 간단히 업로드할 수도 있다. 필요에 따라서는 삭제도 자유자재로 할 수 있다.

현재 이미지 파일에 대한 구현이 되어있으며, 추후에 텍스트 파일에 대한 지원도 추가할 예정이다. Chrome에서 잘 동작하는 것을 확인했으나, IE나 Firefox, Safari 등 다른 브라우저에 대해서는 아직 별도의 지원을 하고 있지 않다.

2. 사용법
크게 '선택(select), 이동(move), 제거(delete)' 3가지의 버튼을 사용할 수 있다.
선택 버튼을 누르면 영역을 선택할 수 있게 되는데, 선택된 영역에 "DragOnIt !"이라는 메시지가 나타나고 사용자는 이 영역에 외부 파일을 드래그 & 드롭하여 이미지를 표시할 수 있다.
이동 버튼은 toggle 형식이다. 버튼을 누르면 이동 기능이 활성화되고, 다시 한 번 누르면 기능이 해제되는 방식이다. 이동 기능이 활성화된 동안은 화면 위의 빈 영역 혹은 이미지들을 자유자재로 이동시킬 수 있다.
제거 버튼도 역시 toggle 방식이다. 제거 기능이 활성화된 상태로 화면 위의 빈 영역 혹은 이미지들을 클릭하면 즉시 제거된다.

소스 코드는 Github에서 볼 수 있으며, 설치 방법도 자세히 작성해두었다.
Github에서 dragonit.js 파일을 다운받아서 자신의 프로젝트에 포함시킨 뒤 다음 소스코드만 추가해주면 간단하게 dragonit을 사용할 수 있다.
<body>
    <div class="dragonit"></div>
    <button type="button" class="dragonit_select">select</button>
    <button type="button" class="dragonit_move">move</button>
    <button type="button" class="dragonit_delete">delete</button>
 
    Your code here
    <script src="dragonit.js"></script>
</body>
여기서 <div class="dragonit"></div>는 <body> 태그의 시작 부분에 두어야 잔 버그들이 없다. 아래쪽에 두게 되면 이미지가 영역 선택이 되면서 귀찮아진다.
그리고 <script src="dragonit.js"></script>는 되도록이면 <body> 태그의 끝부분에 두는 것이 좋다.
버튼의 경우엔 <input> 태그를 사용하든 <button> 태그를 사용하든 상관없다. 다만 <input> 태그의 경우 type을 button으로 설정하기만 하면 된다. 세 종류의 버튼은 간단히 dragonit_select, dragonit_move, dragonit_delete 클래스만 추가해주면 사용이 가능하다. 이때 Bootstrap을 쓰지 않는다면, css를 통해 active 클래스에 대한 style 정의를 해두는 것이 좋다. 버튼을 토글할 때 가시적으로 확인을 할 수 있도록 도와준다. 예를 들어, 이런식으로 설정하면 된다.
<style>
    .active { background-color: red; }
</style>

3. Demo

4. Source Code
더욱 자세한 설명과 소스 코드는 Github를 통해 확인할 수 있다.

댓글 없음:

댓글 쓰기