애플 휴먼 인터페이스 가이드라인(10) User Interaction -6 Drag and Drop

Drag and Drop

With a single finger, a user can move or duplicate selected photos, text, or other content by dragging the content from one location to another, then raising the finger to drop it.

사용자는 손가락으로 콘텐츠를 다른 곳으로 드래그 후 손을 떼어 선택된 사진, 텍스트 혹은 기타 콘텐츠를 옮기거나 복제할 수 있습니다.

 

플레이는 원문에서 가능

 

Touching and holding selected content makes it appear to rise and adhere to the user's finger. As the content is dragged, animations and visual cues identify possible destinations. The system also displays a badge that indicates when dropping isn’t possible, or will result in duplicating the content rather than moving it. For developer guidance, see Drag and Drop in UIKit.

콘텐츠를 터치 후 유지하면 콘텐츠가 떠올라 손가락에 부착되는 것 처럼 보이게 됩니다. 콘텐츠가 드래그되면, 애니메이션과 시각적 신호가 최종 시를 보여줍니다. 또한 시스템에선 드롭이 불가능한 경우 뱃지를 표시하거나, 콘텐츠를 이동시키는 대신 복제하는 결과를 냅니다.  

Sources and Destinations

Drag and drop involves moving selected content from a source location to a destination. These locations can be in the same container, like a text view, or in different containers, like text views on opposite sides of a split view. In Notes, for example, the user can drag selected text to a new location within the same note. In Reminders, the user can drag individual reminders out of one list and drop them into another.

드래그 앤 드롭은 선택된 콘텐츠를 시작점(출발지)에서 목적지까지 이동시키는 과정을 포함합니다. 이 지점들은 텍스트 뷰와 같이 같은 컨테이너 안에 있는 경우도 있고, 반대쪽 스플릿 뷰의 텍스트 뷰와 같이 다른 컨테이너 안에 있는 경우도 있습니다. 한 예로, 메모 앱에서는 사용자가 텍스트를 선택해 동일한 메모 내에 다른 곳으로 드래그할 수 있습니다. 미리 알림 앱에선 사용자가 한 리스트 안에 있는 각각의 개별 알림을 다른 곳으로 옮길수도 있습니다.

 

On iPad, source and destination locations can also exist in different apps, enabling cross-app interactions like dragging a photo from a webpage in Safari to a new message in Mail. While dragging content, the user can access another app through multitasking, exiting to the Home screen, or swiping up from the bottom of the screen to reveal the Dock.

아이패드에선 시작지와 목적지가 다른 앱이 될 수도 있습니다. 사파리 웹페이지의 사진을 메일 앱의 새 메세지에 드래그하는 등 앱을 교차해 상호작용할 수 있습니다. 콘텐츠를 드래그하는 동안엔 홈스크린으로 나가거나, 화면의 아래를 위로 스와이프 해 Dock을 보이거나, 멀티태스킹 기능을 통해 다른 앱에 접근할 수 있습니다. 

NOTE

Dragging and dropping content between apps always results in duplication, not movement, of content.

앱 간의 콘텐츠를 드래그 앤 드롭하는 것은 언제나 콘텐츠를 '이동'시키는 것이 아닌 '복제'하는 것입니다.

Supporting Drag and Drop

Drag and drop is an efficient, intuitive feature that users expect to be implemented pervasively throughout the system. If your app includes or produces text, photos, video, audio, or other content that people might want to move, copy, or insert, your app should support drag and drop.

드래그 앤 드롭은 시스템을 통틀어 사용자들이 완성도 있다고 기대하는 효율적이고 직관적인 기능입니다. 만약 당신의 앱이 텍스트, 사진, 비디오, 음성 혹은 그 외 이동시키고 복사하거나 삽입하는 콘텐츠를 포함하거나 생산한다면, 드래그 앤 드롭을 꼭 지원해야 합니다.

 

Make drag and drop available for all selectable and editable content. Selectable content should be draggable, and editable content should accept dropped content. Also make sure your app supports copy and paste in these areas.

선택 및 수정 가능한 모든 콘텐츠에 드래그 앤 드롭 기능을 사용할 수 있도록 하세요. 선택 가능한 콘텐츠는 드래그 할 수 있어야하며, 수정 가능한 콘텐츠는 드롭된 콘텐츠를 수용할 수 있어야 합니다. 또 이 영역에 있어선 복사 및 붙여넣기 기능을 제공하도록 하세요.

 

Allow content to be dropped on controls when applicable. In general, configure controls that enable data entry or selection, like text fields, to accept dropped content.

해당되는 경우 콘텐츠를 설정에서도 드롭할 수 있도록 허용해주세요. 보통의 경우, 텍스트 필드와 같이 데이터를 입력하거나 선택이 가능한 설정에선 콘텐츠를 드롭할 수 있도록 하세요.

 

Use standard text views and text fields whenever possible. These system-provided elements include built-in support for drag and drop. For related guidance, see Text Fields and Text Views. For developer guidance, see UITextField and UITextView.

가능하다면 표준 텍스트 뷰와 텍스트 필드를 사용하세요. 시스템에서 제공되는 이 요소들은 드래그 앤 드롭을 할 수 있도록 기본 지원을 제공합니다. 연관 가이드는 Text Fields, Text Views 에서 확인할 수 있습니다.

 

For greater efficiency, consider supporting multi-item drag and drop. In many apps, the user can drag a single item with one finger, and while dragging, select additional items by tapping them with another finger. The selected items move together and appear stacked beneath the finger that's dragging the original item. The user then drags the items as a group and drops them over the desired destination. For example, the Home screen allows multiple app icons to be selected and dragged into a folder all at once. Some apps, like Photos, offer a selection mode that enables the selection of multiple items prior to dragging.

 

더 좋은 효율성을 위해, 여러 아이템을 드래그 앤 드롭 하는걸 고려해보세요. 많은 앱애서 사용자들은 한 손가락으로 하나의 컨텐츠를 드래그할 수 있으며, 드래그하는 동안 다른 손가락으로 여러 아이템을 탭하며 추가할 수 있습니다. 이 선택된 아이템들은 함께 움직이고 드래그하는 손가락 아래에 쌓여 함께 보입니다. 사용자는 이 아이템들을 그룹으로 드래그하고 목적지에 함께 드롭할 수 있습니다. 한 예로, 홈스크린에선 여러 앱 아이콘을 선택하고 한번에 하나의 폴더에 드래그할 수 있게 합니다. 사진과 같은 몇몇 앱은 선택모드를 제공해 드래그 하기 전 여러 아이템을 미리 선택할 수 있게 하기도 합니다.

 

Determine whether dragging and dropping content within your app should result in a move or a copy. In general, a move makes sense when the source and destination containers are the same (dragging text within a document), and a copy makes sense when they’re different (dragging between documents, or between apps). This isn’t always the case, however. Above all, drag and drop should behave intuitively. In Reminders, dragging reminders between lists moves them instead of copying them because that’s what people expect. Dragging and dropping content between apps always results in a copy.

드래그 앤 드롭 시 콘텐츠가 이동되는건지 복사되는건지 정하세요. 보통의 경우 드래그 앤 드롭의 시작점과 목적지의 콘테이너가 같은 경우엔 이동을 선택하는 것이 상식적입니다 (문서 안에서 텍스트를 드래그). 반면 같지 않은 경우엔 복사가 상식적입니다(문서, 앱 간 드래그). 그러나 이가 항상 따라야하는 방식은 아닙니다. 무엇보다도 드래그 앤 드롭은 직관적이어야 합니다. 미리 알림 앱에서 알림을 리스트 사이로 드래그하는 것은 복사가 아닌 이동이며, 이는 이 방식이 사용자들이 기대하는 것이기 때문입니다. 그러나 앱 간 드래그 앤 드롭은 언제나 복사입니다.

 

Whenever possible, let people undo drag and drop. Generally, when users inadvertently drop content in the wrong destination, they should be able to use Undo to return your app to its previous state. That is, the dropped content should be removed and, if it was moved from elsewhere in your app, restored to its original location.

가능한 경우 드래그 앤 드롭 액션을 취소할 수 있도록 하세요. 일반적으로 사용자들이 실수로 잘못된 목적지에 드롭했을 때, 그들은 실행취소하고 이전 상태로 앱을 돌릴 수 있어야 합니다. 즉 드롭된 콘텐츠는 삭제될 수 있어야하며, 앱의 어느 다른 곳에서 온 것이라면 원래 위치에 돌아갈 수 있어야 합니다.

 

Consider enabling spring loading. With spring loading, users can activate certain controls, like buttons and segmented controls, by dragging selected content over them and pausing briefly without dropping the content. For example, in Mail, selected messages can be dragged onto the navigation bar’s Back button to reach other locations in the mailbox hierarchy. Never make spring loading the only way to activate a control. Use it as an embellishment that can be discovered. In most cases, a spring-loaded control should also respond to a tap gesture. For developer guidance, see UISpringLoadedInteraction.

스프링 로딩을 사용을 고려해보세요. 스프링 로딩을 사용하면 콘텐츠를 드래그한 뒤 드롭하기 전 잠깐 멈추어 버튼이나 세그먼트 컨트롤*과 같은 몇몇 설정을 활성화시킬 수 있습니다. 메일 앱을 예로 들면, 메세지들을 선택하고 내비게이션 바의 뒤로가기 버튼 위로 드래그하면 메일박스의 다른 위계 목적지로 이동시킬 수 있습니다. 설정을 활성화하기 위한 방법으로만 스프링 로딩을 사용하지 마세요. 발견 가능한 꾸밈으로 사용하세요. 대부분의 경우 스프링 로딩된 설정은 탭 제스처에도 반응해야 합니다. 

Providing Dragged Content

Customize the drag item preview if necessary. In general, the preview that’s displayed under the user’s finger should be a translucent representation of the content being dragged. This appearance provides context, indicates that a drag is in progress, and enables the user to see destinations beneath the dragged content.

필요한 경우에만 드래그된 아이템 미리보기를 커스터마이징 하세요. 대개의 경우 사용자의 손가락 아래에 뜨는 미리보기는 실제 콘텐츠의 반투명한 모습이어야 합니다. 이 모습은 맥락을 나타내고, 드래그 되는 중이라는 것을 보여주며 사용자가 드래그되는 콘텐츠 너머로 목적지를 볼 수 있게 합니다.

 

Whenever possible, offer multiple representations of dragged data, ordered from highest to lowest fidelity. For example, when providing line art, your app could offer a PDF vector representation, a lossless PNG image with transparency, and a lossy JPEG image without transparency, in that order. That way, the destination can choose the highest quality representation that it can import.

가능하다면 드래그된 내용의 여러 모습을 제공하세요. 가장 충실도가 높은 버전부터 낮은 버전까지. 일례로 라인아트를 제공한다면, 당신의 앱은 PDF 벡터, 투명배경의 무손실 PNG, 불투명한 JPEG이미지를 순서대로 고려해볼 수 있습니다. 이 방법을 통해 목적지는 임포트할 수 있는 가장 높은 퀄리티의 파일을 선택할 수 있습니다.

 

When applicable, present native versions of custom objects as the richest form of data. For example, an app that lets people drag charts should present the native chart object first. Then, it should offer alternatives—like image versions of the chart—for apps that don’t support chart objects.

해당되는 경우 오브젝트의 원본을 최고급 버전의 데이터로 설정하세요. 예를 들자면 사용자들이 차트를 드래그할 수 있게 하는 앱은 차트의 원본을 먼저 제공해야 한다는 것입니다. 그리고, 차트 자체를 지원하지 않는 앱을 위해 차트의 '이미지'들을 대체품으로 제공해야 합니다.

 

Implement a file provider extension when the transfer of your app’s content is time consuming or resource intensive. A file provider extension manages the transfer process and ensures that it completes, even if your app is no longer running. Note that the transfer process doesn’t begin until the user drops the content. For developer guidance, see NSFileProviderExtension.

앱의 컨텐츠를 이동시키는데 시간이 오래걸리거나 리소스가 많이 소모된다면, 파일 프로바이더를 사용하세요. 파일 프로바이더는 이동 절차를 관리하고 앱이 실행되지 않는 중에도 이동을 마치게 할 수 있습니다. 이 파일 이동과정은 사용자가 콘텐츠를 드롭하지 않으면 시작되지 않는다는 것을 알아두세요. 

 

Supply progress information when your app’s content needs time to transfer. Provide progress information if content must be downloaded or large files require time to copy. At minimum, provide the total size of the content so the destination can calculate the amount of time remaining and display an appropriate progress indicator. For developer guidance, see NSProgress.

이동시키는데 시간이 걸린다면 진행과정 정보를 제공하세요. 콘텐츠가 다운로드 되야하거나 복사하는데 오래 걸리는 큰 파일이라면 진행과정 정보가 제공되어야 합니다. 최소한 콘텐츠의 크기를 알려주어 목적지에서 남은 시간이 얼마나 될지 계산하고 적절한 진행 상태바를 보여줄 수 있도록 하세요.

Accepting Dropped Content

Use visual cues to identify potential destinations and preview the effect of dropping content. Highlighting, insertion point indicators, and animation are all good ways to identify possible destinations. A view could subtly flash and change color as content is dragged over it, or paragraphs could move apart to make room for a dragged image. When there is more than one possible destination onscreen, identify one at a time. Highlighting may be unnecessary if the source and destination containers are the same, unless the content is dragged completely out of the source and then reenters it. Make sure highlighting is removed when content is dropped or is no longer positioned above a destination.

시각 효과를 사용해 잠재적 목적지를 보여주고 드롭했을 때 효과를 미리 보여주세요. 하이라이트, 삽입지점 표시자, 애니메이션 모두 목적지를 보여줄 수 있는 좋은 방법입니다. 콘텐츠가 위로 드래그 됨에 따라 그 부분이 미묘하게 빛날 수도 있고 색이 변할수도 있으며, 문단이 드래그된 이미지의 자리를 만들어주기 위해 멀찍이 움직일 수도 있습니다. 만약 드롭될 수 있는 목적지가 두개 이상이라면, 한번에 한곳만 보여주도록 하세요. 시작지접과 목적지의 컨테이너가 같다면 하이라이트는 필요 없을 수도 있습니다. 콘텐츠가 시작점에서 완전히 나와서 다시 짜리로 돌아가지 않는 이상 말이죠. 콘텐츠가 드롭되거나 목적지 위에 떠있지 않으면 하이라이트를 지우도록 하세요.

 

Automatically scroll the contents of a destination when appropriate. When content is dragged outside the bounds of a destination, your app may need to determine whether to scroll the contents of the destination or to allow the user to continue dragging to an entirely different destination. If your app lets the user continue dragging, consider defining a region that causes automatic scrolling when the dragged item is positioned above it. For example, a lengthy draft message in Mail automatically scrolls when content is dragged to the top or bottom of the body area. Standard text views and text fields automatically adopt this behavior.

적절한 경우 목적지로 이동하는데 자동스크롤이 되도록 하세요. 콘텐츠가 목적지의 범위 밖으로 넘어갔을 때, 목적지의 콘텐츠를 스크롤 할지, 사용자가 목적지로 갈 때까지 계속 드래그 시킬지 정해야 합니다. 만약 사용자가 계속 드래그 할 수 있게 정했다면, 자동 스크롤이 되기 시작한 지점을 보여주는 것을 고려하세요. 한 예로, 메일 앱의 길이가 긴 메세지는 콘텐츠가 상단 혹은 아래로 드래그 되면 자동으로 스크롤 됩니다. 기본적인 텍스트 뷰와 텍스트 필드는 이 경우를 자동으로 설정해놓죠.

 

Extract and display the richest possible representation of dropped content. For example, your app might be offered several representations of a chart. If your app supports charts, it could extract and display the native chart object. If your app doesn’t support charts, it could extract and display an image version of the chart instead.

드롭된 콘텐츠의 최고급 이미지를 추출하고 보여주세요. 예를 들자면, 당신의 앱은 차트의 몇몇 모습을 제공할 수 있습니다. 앱에서 차트를 지원한다면 차트의 원본 오브젝트를 추출해 보여줄 수 있을 것입니다. 그러나 차트 기능을 제공하지 않는다면, 차트의 원본이 아닌 이미지를 추출해 보여줄 수 있을 것입니다.

 

When applicable, extract only the relevant portion of dropped content. For example, if a user drags a contact from Contacts to a recipient field in a Mail message, only the name and email address are used, not the contact’s address information.

해당되는 경우 드롭된 콘텐츠의 유의미한 부분만 추출하세요. 만약 사용자가 연락처 앱에서 연락처 하나를 메일의 지정된 수신인 필드에 드래그한다면, 이름과 이메일 주소만 사용되는 것이지 그 사람의 집주소까지 사용되는 것은 아니라는 것입니다.

 

Show placeholders in table views and collection views after content is dropped. Placeholders temporarily indicate where the content will reside once it finishes transferring.

콘텐츠가 드롭된 테이블 뷰(표)와 콜렉션 뷰*에는 플레이스 홀더를 보여주세요. 플레이스 홀더는 콘텐츠가 일단 이동을 마치면 어디에 위치할지 일시적으로 보여줍니다.

 

* 콜렉션 뷰

 

Show progress when dropped content needs time to transfer. By default, the system displays an app-modal alert when a time-consuming transfer occurs between apps. Consider customizing the way progress is displayed—such as by showing progress indicators on placeholders within a table view or collection view—so the user isn’t blocked from using your app. Note that the transfer process doesn’t begin until the user drops the content.

드롭된 컨텐츠가 이동하는데 시간이 걸린다면, 진행 상황을 보여주세요. 시스템은 기본적으로 앱 간 시간이 소모되는 이동이 발생하면 모달 형태의 알림을 보여줍니다. 이 알림이 보여지는 방식을 커스터마이징할 방법을 찾아보세요. 진행 표시자를 테이블 뷰나 콜렉션 뷰 내의 플레이스 홀더에 보여주는 방법 등을 통해 사용자가 앱을 사용하는 과정에서 가로막히지 않을 수 있습니다. 이 이동과정은 사용자가 콘텐츠를 드롭하지 않는 이상 시작하지 않는다는 것도 메모해두세요.

 

Provide feedback when dropped content initiates a process. If the user drops content onto a control that initiates a task—for example, uploading a video to a sharing site—show that the task has begun and keep the user informed of its progress.

드롭된 콘텐츠가 어떤 과정을 시작하면 피드백을 제공해야 합니다. 만약 사용자가 컨텐츠를 컨트롤 위에 드롭해 비디오를 업로드 하거나 url를 공유하는 등의 작업을 시작했으면, 그 작업이 시작됐다는걸 보여주고 그 진행과정을 계속 알려주어야 합니다.

 

Inform the user when dropping fails. If the dropped content can’t be inserted, perhaps because a file transfer was interrupted, inform the user that the drop was unsuccessful.

드롭이 실패하면 사용자에게 알려주어야 합니다. 만약 드롭된 콘텐츠가 삽입되지 않았다면 이는 파일 이동에 방해가 생겼기 때문일 것이며, 사용자에게 드롭이 성공하지 못했다는 것을 알려주세요.

 

Apply appropriate styling to dropped text. When the source and destination support the same styled text attributes, dropped text should maintain its original font, typeface, size, and other attributes. Otherwise, dropped text should adopt the destination’s style.

드롭된 텍스트에 적절한 스타일을 제공하세요. 만약 시작점과 목적지가 같은 텍스트 스타일을 제공한다면, 드롭된 텍스트는 원래의 폰트, 서체, 크기 등의 설정을 그대로 가지고 있어야 합니다. 반면, 드롭된 텍스트는 목적지의 텍스트 스타일을 따라야 합니다.

 

Consider providing a subtle, intuitive way to opt out when the user can't immediately undo drag and drop. A sharing app, for example, might present an intermediate share sheet before posting dropped content. This share sheet could offer a way to supply additional content like a status message, while also offering a cancellation button. Photos exhibits this behavior when a photo is dragged into a shared photo stream.

사용자가 즉시 드래그 앤 드롭을 실행취소할 수 없다면, 취소할 수 있는 교묘하고 직관적인 방법을 고민해보세요. 공유 앱을 예로 들자면, 이 앱은 드롭된 콘텐츠를 보여주기 전에 중간 지점의 공유 시트를 보여줄 수 있습니다. 이 공유 시트는 현재 상태 메세지와 같은 추가 내용을 제공할 수도 있고, 이 공유를 취소할 수 있는 버튼 또한 제공할 수 있습니다. 사진 앱에서 사진을 드래그하고 사진 스트림에 공유할 때 이 기능을 사용합니다.

 

 

---

미묘한 차이가 많아서 해석에 난항을 겪었다. 후에 다시 보면서 수정할 것.

원문_

developer.apple.com/design/human-interface-guidelines/ios/user-interaction/drag-and-drop/

Drag and Drop - User Interaction - iOS - Human Interface Guidelines - Apple Developer