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.

iPad에서는 소스 및 대상 위치가 다른 앱에도 존재할 수 있으므로 Safari의 웹 페이지에서 메일의 새 메시지로 사진을 드래그하는 것과 같은 앱 간 상호 작용이 가능합니다. 컨텐츠를 드래그하는 동안 사용자는 멀티 태스킹을 통해 다른 앱에 액세스하거나, 홈 화면으로 빠져 나오거나, 화면 하단에서 위로 스와이프하여 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.

가능한 경우 표준 텍스트 보기 및 텍스트 필드를 사용하십시오. 시스템에서 제공하는 요소에는 드래그 앤 드롭 기능이 내장되어 있습니다.

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.

앱의 컨텐츠를 전송할 시간이 필요할 때 진행 정보를 제공하십시오. 컨텐츠를 다운로드해야하거나 대용량 파일을 복사 할 시간이 필요한 경우 진행 정보를 제공합니다. 최소한 컨텐츠의 전체 크기를 제공하여 대상에서 남은 시간을 계산하고 적절한 progress indicator를 표시 할 수 있습니다.

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.

컨텐츠가 드롭된 후에 테이블뷰 및 컬렉션뷰에 placeholder를 표시합니다. placeholder는 컨텐츠 전송이 완료되면 컨텐츠가 상주할 위치를 일시적으로 나타냅니다.

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.

드롭된 컨텐츠를 전송할 시간이 필요한 경우 진행 상황을 표시합니다. 앱 간에 시간 소모적인 전송이 발생하면 기본적으로 시스템에 앱 모달 경고가 표시됩니다. 사용자가 앱 사용을 차단하지 않도록 테이블뷰 또는 컬렉션뷰 내에서 placeholder에 진행률 표시기를 표시하는 등의 진행률 표시 방법을 사용자 정의하는 것이 좋습니다. 사용자가 컨텐츠를 드롭 하기 전에는 전송 프로세스가 시작되지 않습니다.

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.

드롭된 컨텐츠가 프로세스를 시작할 때 피드백을 제공하십시오. 사용자가 작업을 시작한 컨트롤 (예 : 공유 사이트에 비디오 업로드)에 컨텐츠를 드롭하면 작업이 시작되었음을 나타내며 진행 상황을 사용자에게 알려줍니다.

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.

사용자가 드래그 앤 드롭을 즉시 취소 할 수 없을 때 미묘하고 직관적인 방법으로 벗어나는 방법을 고려해보십시오. 예를 들어 공유 앱은 드롭된 컨텐츠를 게시하기 전에 중간 공유 시트를 제공 할 수 있습니다. 이 공유 시트는 상태 메시지와 같은 추가 컨텐츠를 제공 할 수 있는 방법을 제공하고 취소 버튼도 제공합니다. 사진은 공유 된 사진 스트림으로 사진을 드래그할때 이 동작을 나타냅니다.

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