리치 인터페이스 디자인의 75가지 패턴- 첫 번째 드래그 앤 드롭

By | 2010년 4월 12일

웹 페이지를 이용하며 간혹(혹은 자주) 겪는 상황들을 떠올려 봤습니다.

경우 1.



왼쪽 카테고리에서 마우스 오버(Mouse Hover) 반응이 지나치게 빠르다. 도무지 클릭할 틈을 주지 않는다.





경우 2. 
몇 줄짜리 문서 하나 보는데, 가입을 하라고 한다. 꼭 확인해야 하는 거라 열심히 빈칸을 채우며 가입 양식을 작성했다. 거의 다 기입하고 잘못 적은 게 있어 그 칸에 마우스 커서를 놓고 ‘지움’ 버튼을 눌렀더니 커서 위치가 애매했는지 이전 페이지로 돌아가 버렸다.
실낱같은 희망을 품고 ‘앞으로’ 버튼을 눌렀지만, 빼곡했던 텍스트는 간 데 없고, 공백만 가득하다.






경우 3.

서브 메뉴에 들어가야 한다. 그런데 상위 메뉴 바에서 서브메뉴가 나타날 때 마우스가 조금만 빗나가면 서브 메뉴가 사라진다.

상위 메뉴를 클릭하면 서브 메뉴가 고정되려나 싶어 클릭했더니 이번에는 아주 새로운 페이지로 들어가 버린다.







 

공감되시나요? 


단순히 글을 게시하고 읽기만 하던 시절, 또 하이퍼링크를 걸고 다른 페이지로 이동하는 것만 가능했던 시절에서 웹 페이지 이동 없이도 글을 남기거나 스크롤 하면 끝없이 콘텐츠가 로딩되는 시절이 되었습니다.


앞서 말씀드린 사례를 보듯, 기술이 발달하면 웹에 구현 가능한 것도 많아지고, 많은 불편함이 해소될 것 같았는데 사실 그렇지도 않은 모양입니다.


기술만으로는 해결할 수 없는 무언가(!)가 있다는 말이겠지요.

그렇다면 그 무언가가 대체 무엇이냐.

바로 이 기술들을 적재적소에 조합하는 ‘아이디어’가 되겠습니다.


이 아이디어, 엄밀히 말해 ‘사용자 경험을 높여주는 리치 인터랙션 아이디어’를 독자분들과 공유하려 합니다.


4월 12일부터 웹 인터랙션 패턴 가운데 세 개를 업로드하니 관심 있으신 분들의 많은 성원 부탁드립니다. 🙂


오늘은 예고편격으로 하나 올립니다. ^^

다음 패턴은 14일에 만나실 수 있습니다~!



cfile9.uf.200284184BBFDB8F714695.pdf

드래그 앤 드롭


 

1984년 매킨토시가 세상에 내보인 대단한 혁신 중 하나는 바로‘드래그 앤 드롭’이다. 제록스 파크의 스타 정보 시스템S의 GUI의 영향을 받고, 그 후에 애플 리사에서 교훈을 얻어, 매킨토시 팀은 사용자 컴퓨터에서 파일을 손쉽게 이동, 복사, 삭제할 수 있는 드래그 앤 드롭을 창안하였다.

드래그 앤 드롭이 웹 애플리케이션에 등장한 것은 그로부터 한참이 지난 후다. 2000년, 하프브레인이라는 작은 벤처기업이 브레인매터라는 웹 기반의 프레젠테이션 애플리케이션을 출시했다. 이 프로그램은 모두 DHTML 언어로 개발되었으며, 드래그 앤 드롭을 인터페이스 구성의 필수 요소로 사용하였다.

드래그 앤 드롭은 또 다른 벤처기업 오드포스트가 웹 기반의 메일 애플리케이션(그림 2-1)을 출시하면서 다시 등장하였다. 오드포스트가 만든 메일 애플리케이션에서는 사용자가 드래그 앤 드롭하여 메일을 폴더별로 이동할 수 있게 하였다.



[#M_더보기|접기|


오드포스트 웹 메일은 데스크톱 메일 애플리케이션처럼 작동하는데 드래그 앤 드롭을 주요 기능으로 제공하였다.

 

드래그 앤 드롭에서 나타나는 가장 큰 어려움은 사용자가 드래그를 완료한 다음,

화면을 새로 불러오지 않고 변경한 상태를 저장하는 것이었다. 이 방법이 가능하기

는 했지만, 당시 근본적인 기술이 모든 브라우저에서 일관적이지 않는다는 점이 문

제였다. Ajax5 기술이 널리 알려지고 모든 브라우저가 공통으로 이 기술을 지원하

는 지금, 드래그 앤 드롭은 웹에서 더 친숙한 용어가 되었다.

상호작용 순간


언뜻 보기에 드래그 앤 드롭은 대상을 잡아 어딘가에 놓기만 하면 되므로 아주 간단해 보인다. 그러나 언제나 그렇듯, 난처한 문제는 세부적인 데 있다. 상호작용이 일어나는 세세하고 개별적인 상황은 매우 많다. 이러한 미세한 상황들을‘상호작용순간interesting moments’이라고 부른다.


• 사용자는 무엇을 드래그할 수 있는지 어떻게 알 수 있는가?

• 대상을 드래그 앤 드롭 한다는 것은 과연 어떤 의미인가?

• 대상을 드롭할 수 있는 곳은 어디이고, 드롭할 수 없는 곳은 어디인가?

• 드래그할 수 있음을 알리기 위해 어떤 행동 유발성affordance을 시각적으로 사용

할 것인가?

• 드래그하는 도중에 드롭이 가능한 영역과 불가능한 영역을 어떻게 표시해야

하는가?

• 실제 대상을 드래그하는가?

• 아니면 대상의 그림자만 드래그하는가?

• 아니면 드래그 되는 것이 썸네일 이미지인가?

• 드래그 앤 드롭으로 상호작용 하는 동안 어떤 시각적 피드백을 써야 하는가?


흥미로운 점은 드래그 앤 드롭하는 동안 사용자에게 피드백을 제공할 기회가 되는 사건event이 많다는 것이다. 게다가 페이지에는 이 피드백 과정에서 행위자actor 역할을 할 만한 요소가 많다.


 

사건

 

드래그 앤 드롭 상호작용 하는 동안, 최소 15가지 이벤트로 사용자에게 단서를 제공

할 수 있다. 

페이지 로드

어떠한 상호작용이든 일어나기 전에, 드래그 앤 드롭이 가능하다는 사실을 먼저 나타낼 수 있다. 예를 들어 드래그 기능을 안내하는 내용을 페이지에 노출할 수 있다.

마우스 오버

마우스 포인터를 드래그 할 수 있는 대상 위에서 움직인다.

마우스 누름

사용자가 드래그 할 수 있는 대상 위에 마우스 버튼을 누르고 있다.

드래그 시작

마우스 드래그를 시작한 직후(보통 3픽셀 정도 움직였을 때부터 사용자가 드래그를 인지한다).

드래그하여 원래 위치를 떠남

드래그 대상 또는 대상을 포함하는 영역이 원래 위치에서 움직인 다음.

원래 위치에 다시 드래그하여 돌아감

대상이 다시 원래 위치에 돌아갈 때.

유효 영역으로 돌아감

대상을 드롭 가능한 목표 지점 위로 드래그할 때.

유효 영역을 벗어남

드롭 가능한 목표 지점 밖으로 드래그할 때.

특정 무효 영역으로 들어감

드롭이 불가능한 영역으로 드래그할 때.

불특정 영역에 드래그함

유효하지도 무효하지도 않은 영역에 드래그할 때. 유효하지 않은 영역 외에는 모두 무효한 영역으로 처리하고 있는가?

유효 영역 위에서 드래그가 멈춤

사용자가 드롭할 수 있는 영역에서 대상을 드롭하지 않은 채 멈추어 있다. 이 사건은 보통 스프링처럼 탄성을 가진 드롭 영역이 열리는 경우에 발생한다. 예를 들어 폴더 위로 드래그한 다음 멈추면, 폴더가 열리면서 드래그할 수 있는 새로운 영역이 나타난다.

무효 영역 위에서 드래그를 멈춤

사용자가 드롭할 수 없는 영역에서 대상을 드롭하지 않은 채 멈추어 있다. 이러한 상황에 신경이 쓰이는가? 당신이라면 그 영역에 왜 드롭할 수 없는지 알리는 추가 피드백을 바라겠는가?

드롭 성공

유효한 영역에 대상을 드롭했고, 드롭이 성공했다.

드롭 실패

무효한 영역에 대상을 드롭했고, 드롭이 실패했다. 이때 대상을 원래 자리로 다시 되돌리는가?

상위 컨테이너Parent Contatiner에 드롭함

드래그한 대상의 원래 위치가 특별한가? 일반적인 경우는 아니지만, 어떤 상황에서는 이 사실이 특별한 의미를 가질 수 있다.

행위자
 

각 이벤트가 일어나는 동안 여러 행위자에 시각적 장치를 할 수 있는데, 행위자로 사용할 수 있는 페이지 요소는 다음과 같다.


• 페이지(예를 들어 화면에 고정된 메시지를 제공함)

• 마우스 포인터

• 도움말

• 드래그할 수 있는 대상(또는 드래그할 수 있는 대상의 일부분, 예를 들어 해당 영역의

제목)

• 드래그할 수 있는 대상을 포함하는 컨테이너

• 드롭할 수 있는 영역

상호작용 순간표

위에서 본 사례는 15가지 사건과 6가지 행위자로 이루어져 있으며, 이것은 상호작용 순간이 총 90가지가 만들어질 수 있다는 것을 뜻한다. 각 순간은 무수한 형태와타이밍을 포함하고 있어 이에 대한 결정을 필요로 한다. 이제 선택들을 모두 ‘드래그 앤 드롭’을 설명하는 아주 간단한 상호작용 순간표로 엮는다. 다음은 마이야후!에 나타나는 상호작용 순간표를 보여준다. 상호작용 순간표는 어떤 복잡한 상호작용이던 간에 이에 대한 데이터를 수집할 때 사용할 수 있다.

이 표는 드래그 앤 드롭을 하는 동안 발생하는 상호작용 순간들을 기획하는 데 사용할 수 있는 아주 편리한 도구다. 표는 상호작용에‘구멍’이 뚫리지 않도록 점검하는 체크리스트의 역할을 한다. 행위자들은 세로축에, 사건들은 가로축에 배치하고, 교차하는 칸에는 바라는 행동을 적는다.

 


마이 야후! 초기 드래그 앤 드롭을 디자인하고자 작성된 간단한 상호작용 순간표. 이 표는 드래그 앤 드롭의 복잡성을 한 장에 집약하는 방법을 보여준다.

_M#]


덧: ‘리치 인터페이스 디자인: 웹 인터랙션의 75가지 패턴’보다 ‘Designing Web Interfaces’라는 타이틀이 더 익숙하신 분이 많으리라 생각됩니다.


다음과 같은 오라일리의 표지가 




바로 이렇게 바뀌었습니다. ^^




사실 이 빨간색 표지가 결정되기 전까지 고민이 컸습니다. 저희가 항상 전적으로 신뢰하는 디자이너께서 상당히 대담한 표지를 추천했었거든요. 


이 대담한 표지는 혹 다음에 기회가 있을 때 공개할까 합니다.^^


.

8 thoughts on “리치 인터페이스 디자인의 75가지 패턴- 첫 번째 드래그 앤 드롭

  1. 초보

    동물 그림은 안 넣는 건가요? O’Reilly의 동물그림 있는 책을 번역하면 꼭 동물그림을 넣어야 하는 걸로 알고 있었는데, 저 표지로 출간하면 그것만으로도 이슈가 될 것 같네요.

    Reply
    1. ks.han

      책에 따라 별도의 허락을 얻거나 하여 변형할 수 있습니다.
      오라일리의 ‘동물’ 시리즈는 프로그래밍 책 색이 많이 짙어 따로 요청해 허락을 받았답니다.

      Reply
  2. 레몬에이드

    와… 미치도록 공감갑니다 ㅋㅋ
    정말 지독하게도 많이 당했었죠
    이 책을 보고 많은 공부가 될 것 같습니다 ^^

    Reply
    1. JOE;

      항상 겪는 상황이 있을 텐데, 막상 쓰려니 잘 생각나지 않더군요.
      번역자의 의견으로는 ‘번역하며 실무에도 정말 크게 도움이 되었다’고 하니 기대하셔도 좋을 듯합니다. ^^

      Reply
  3. 이광우

    한 동안 못 들렀더니, 이렇게 좋은 내용들이 공유되고 있었네요.
    군침 흘리면서 봐야겠습니다. ^^
    덧. 인사이트의 표지들은 항상 최고에요!!! ^^)b

    Reply
  4. shin-e

    디자인의 변화, 좋은 시도라고 생각합니다.
    내용 또한 출중할 것 같군요ㅡ

    Reply
  5. Pingback: dobiho on HCI

  6. Pingback: The note of Legendre

댓글 남기기