[HIG] Drag & Drop
콘텐츠를 끌어서 이동, 복제하는 드래그 앤 드롭
본 문서는 Apple의 Human Interface Guideline(이하 HIG) 문서를 한글로 번역한 것입니다. iOS 생태계 내에서 HIG를 읽으시는 분들이 번역본이 없어 불편함을 겪는 것을 알게 되었고, 이에 한글로 번역을 하게 되었습니다. iOS 커뮤니티 Async Swift에서 자율적으로 모인 9명이 함께 번역했으며, 일체의 상업적인 목적을 띄지 않습니다. 이 문서를 학습에 적극적으로 이용해 주시돼, 상업적인 용도로 이용하시는 것은 지양해 주시기 바랍니다. 감사합니다.
Introduction
드래그 앤 드롭을 사용하여 선택한 사진, 텍스트 및 기타 콘텐츠를 한 위치에서 다른 위치로 끌어서 이동하거나 복제할 수 있습니다.
iOS, iPadOS 및 macOS는 드래그 앤 드롭을 터치 스크린과 입력 장치(Pointing Device) 및 전체 키보드 접근 설정을 통해 드래그 앤 드롭을 지원합니다. 유니버설 컨트롤은 사람들이 맥과 아이패드 사이에서 콘텐츠를 드래그할 수 있게 해 줍니다. Mac에서는 VoiceOver 사용자가 드래그 앤 드롭을 사용할 수도 있습니다.
역자설명 : Pointing Device는 사용자가 공간 데이터를 컴퓨터에 입력할 수 있도록 해주는 컴퓨터 입력 장치를 일컫는 말입니다. 예를 들면 마우스가 있습니다. 그리고 전체 키보드 접근은 아이폰 설정에서 다음과 같이 사용이 가능합니다.
드래그 앤 드롭을 사용하기 위해 사용자들은 콘텐츠를 선택합니다. 이후 사용자가 원하는 위치에 콘텐츠를 끌어서 놓습니다. 콘텐츠의 위치는 같은 화면 안에 있을 수 있고(Text View) 다른 화면에 끌어서 놓을 수도 있습니다.(Split View) 또는 아예 다른 앱에 끌어다 놓을 수도 있습니다.
다양한 요인에 따라 드래그 앤 드롭 동작은 선택한 콘텐츠를 대상으로 이동하거나 복사할 수 있습니다. 성공적인 드롭 후 이동된 콘텐츠는 대상에만 존재합니다. 복사된 콘텐츠는 두 위치에 모두 존재합니다. 일반적으로 동일한 화면 내에서 선택한 콘텐츠를 놓으면 이동되고 다른 화면에 콘텐츠를 놓으면 복사됩니다. 앱 간에 콘텐츠를 끌어다 놓으면 항상 복사본이 생성됩니다.
Best practices
가능한 앱 전체에서 드래그 앤 드롭을 지원하는 것이 좋습니다. 대부분의 사용자들은 끌어서 놓는 드래그 앤 드롭에 익숙합니다. Text Field 및 Text View와 같은 시스템 구성요소(System Components)를 사용하면 드래그 앤 드롭에 대해 다양한 기능을 기본으로 제공합니다.
드래그 앤 드롭 작업을 수행할 수 있는 다른 방법을 제공하는 것이 좋습니다. 드래그 앤 드롭을 할 때 사용자들이 사용하기에 불편하거나 불가능할 수 있습니다. 따라서 동일한 작업을 수행할 수 있는 다양한 방법을 제공하는 것이 중요합니다. 예를 들어, 사용자들이 항목을 복사하고 다른 위치로 이동하는 데 사용할 수 있는 Context Menu를 사용자들에게 제공할 수 있습니다. iOS 및 iPadOS에서는 Accessibility API를 사용하여 사용자들이 쉽게 드래그 앤 드롭을 사용할 수 있습니다. 개발자 가이드라인은 accessibilityDragSourceDescriptors와 accessibilityDropPointDescriptors를 참고하세요.
역자설명 : 다음과 같은 Context Menu를 통해 사용자들에게 다양한 선택지를 제공합니다.
앱 내에서 콘텐츠를 드래그 앤 드롭하면 이동 또는 복사하는 시점을 결정합니다. 일반적으로 이동은 문서 내의 한 위치에서 다른 위치로 텍스트를 드래그하는 것과 같이 원본 및 대상의 화면이 같을 때 이동되며, 한 문서에서 다른 문서로 이미지를 드래그하는 것처럼 사본이 다를 때 복사됩니다. 사람들에게 익숙한 드래그 앤 드롭 동작과 사람들이 동작을 수행하는데 불편함이나 데이터 손실이 발생하지 않도록 고려를 해야 합니다.
필요한 경우 다중 항목 드래그 앤 드롭(multi-item drag and drop)을 지원합니다. 사용자들은 각 항목을 개별적으로 드래그하는 대신 여러 개의 항목을 그룹으로 함께 드래그하는 것에 편리함을 느낍니다. iOS, iPadOS 및 macOS에서 사용자들은 여러 항목을 선택하고 그룹으로 드래그할 수 있습니다. iPadOS에서 사람들은 항목을 선택하고 드래그를 시작하고 드래그 작업을 중지하지 않고 그룹에 다른 항목을 추가할 수 있습니다.
사용자들이 드래그 앤 드롭 작업을 취소할 수 있도록 해야 합니다. 사람들은 의도치 않게 콘텐츠를 잘못 드롭하여 작업을 취소해 돌아가고 싶어 할 수 있습니다. 작업을 완료하기 전에 작업을 확인해 사용자들이 실수하는 것을 방지하는 것이 좋습니다. 예를 들어 macOS에서 Finder는 사람들이 파일을 쓰기 전용 폴더로 드래그하면 폴더를 열 수 없고 항목을 제거할 수 없기 때문에 확인 메시지를 보냅니다. 때문에 사용자들에게 작업의 결과를 되돌릴 수 있는 방법을 제공하는 것이 좋습니다. 예를 들어 사진앱에서 사진을 공유 폴더에 이동했더라고 해도 사용자는 사진 공유를 취소할 수 있습니다.
가장 좋은 형태의 드래그 앤 드롭 방식에서 가장 좋지 않은 형태의 드래그 앤 드롭 순으로 사용자에게 제공하세요. 사용자에게 드래그 앤 드롭의 여러 대안을 제공함으로써 다양한 선택지를 줄 수 있습니다. 예를 들어 사용자들이 그림판에서 그린 선을 드래그 앤 드롭한다면, PDF 벡터 표현 > 투명도가 있는 무손실 PNG 이미지 > 투명도가 없는 손실 JPEG 이미지 순으로 사용자에게 제공하는 것이 좋습니다. 또 다른 예는 차트처럼 다양하고 복잡한 객체를 사용하는 앱입니다. 이런 앱은 차트를 지원하지 않는 대상에 대해 기존의 차트 개체와 차트 이미지와 같은 간단한 버전을 제공할 수 있습니다.
spring loading(자동 열림 지연 시간)을 사용하는 것을 고려하세요. 자동 열림 지연 시간을 사용하면 선택한 콘텐츠를 드래그하여 버튼 및 세그먼트 컨트롤과 같은 특정 컨트롤을 활성화할 수 있습니다. 예를 들어 캘린더를 사용하면 도구 모음에서 선택한 이벤트를 일, 주, 월 또는 연도별로 드래그할 수 있으므로 이벤트를 다른 날짜로 편리하게 이동할 수 있습니다. Magic Trackpad가 장착된 Mac에서 사용자가 콘텐츠를 계속 누르고 있는 동안 강제로 클릭하면 버튼 또는 세그먼트 컨트롤이 활성화될 수 있습니다. iPad에서 이러한 구성 요소는 콘텐츠를 잡고 있는 동안 사람들이 구성 요소 위로 마우스를 가져가면 활성화될 수 있습니다.
역자설명 : Spring Loading은 한국말로 자동 열림 지연 시간으로 파인 터의 폴더를 다른 폴더로 옮길 때 드래그해서 위에 가만히 들고 있으면 뿅 하고 폴더가 열리면서 안에 들어가는 피드백 기능입니다.
Mac의 설정 > 손쉬운 사용 > 포인트 제어기 > 자동 열림 지연 시간을 선택해 사용할 수 있습니다.
Providing feedback
드래그 앤 드롭은 여러 결과를 사용자에게 보여줄 수 있는 수 있는 Dynamic process입니다. 사람들이 불편함을 느끼지 않게 하려면 앱 사용 전체에 걸쳐 명확하고 지속적인 피드백을 제공하는 것이 중요합니다.
사람들이 콘텐츠를 약 3개 지점으로 드래그하면 드래그 이미지가 표시됩니다. 반투명한 드래그 이미지는 원본 콘텐츠와 드래그 이미지를 구별하는 데 도움이 되며 사용자들이 목적지를 지나갈 때 목적지를 볼 수 있도록 합니다. 사람들이 콘텐츠를 드롭할 때까지 드래그 이미지를 표시해야 합니다.
역자설명 : 드래그할 때 콘텐츠가 반투명 해지는 것을 드래그 이미지라고 합니다.
드래그 앤 드롭의 다양한 드래그 이미지를 사용자에게 보여주며 사용자에게 피드백을 줄 수 있습니다. 예를 들어 사진을 문서로 끌 때 이미지가 확장되어 문서에 어떤 크기로 드롭될지 미리 사용자에게 보여줄 수 있습니다. 또한 드래그 앤 드롭할 때 여러 콘텐츠가 겹쳐 보이는 드래그 이미지를 사용해 사용자에게 여러 콘텐츠가 성공적으로 드래그되는 것을 보여줄 수 있으며, 드롭할 때 그룹이 해제되며 드롭되는 피드백을 줄 수 있습니다. 다양한 방식의 드래그 이미지를 보여주며 사용자에게 중요한 피드백을 제공할 수 있지만 드래그 이미지가 지속적으로 급격하게 변경되는 산만한 환경을 만들지 않는 것이 좋습니다.
역자설명 : 아래 예시와 같이 드래그 앤 드롭은 다양한 피드백을 사용자에게 제공합니다. 여러 콘텐츠가 겹쳐있으며 몇 장인지 보여주는 피드백입니다.
사용자들에게 드래그 앤 드롭의 허용 여부를 보여줘야 합니다. 예를 들어 드래그 앤 드롭이 가능한 상황에서 사용자에게 콘텐츠의 드롭 지점을 표시해 줄 수 있습니다. 콘텐츠가 목적지 위에 있는 동안에만 강조 표시 또는 기타 시각적 신호를 표시하고 사람들이 콘텐츠를 멀리 끌 때 시각적 피드백을 제거합니다. 가능한 목적지가 여러 개인 경우 사람들이 한 번에 하나씩 식별하는 데 도움이 되는 시각적 단서를 제공하는 것이 좋습니다.
사용자들이 잘못된 곳에 드롭을 하거나 드롭이 실패할 경우 시각적 피드백을 제공하는 것이 좋습니다. 예를 들어, 콘텐츠가 현재 위치에서 해당 파일로 다시 이동하거나. 성공적으로 이동하는 대신 콘텐츠 드롭이 실패한 듯한 인상을 주기 위해 스케일업 및 페이드아웃할 수 있습니다.
Accepting drops
필요한 경우 화면의 내용을 스크롤합니다. 콘텐츠가 많은 스크롤 화면 내에서 사용자가 콘텐츠를 끌면 해당 콘텐츠 위로 이동할 때 내용이 자동으로 스크롤될 수 있습니다. 이 동작을 통해 사람들은 드래그 앤 드롭할 적절한 위치를 쉽게 찾을 수 있지만, 화면 밖에서 드래그 작업을 계속하면 더 이상 자동 스크롤이 적용되지 않습니다. 시스템에서 제공한 Text View 및 Text Field는 기본적으로 이러한 방식으로 작동합니다.
앱에서 사용자에게 제공 가능한 범위에서 가장 좋은 콘텐츠 버전을 제공하세요. 예를 들어 사람들이 다른 앱에서 차트를 드래그하는 경우 드래그 작업은 기본 차트 개체와 간단한 이미지를 모두 제공할 수 있습니다. 앱이 차트를 지원하는 경우 기본 차트를 추출하고 표시합니다. 그렇지 않으면 대신 이미지를 표시합니다.
필요한 경우 드롭된 콘텐츠의 중요한 부분만 추출합니다. 예를 들어, 사람들이 연락처를 이메일의 수신자 필드로 드래그하면 Mail은 연락처의 주소 정보가 아닌 이름과 이메일 주소만 표시합니다.
외장 키보드가 부착된 경우 드롭 시 Option 키를 확인합니다. 사람들이 드래그하는 동안 Option 키를 누르고 있으면 동일한 화면 내에서 강제로 드래그 앤 드롭 작업으로 복사본을 생성합니다. 사람들이 동일한 화면에 콘텐츠를 놓기 전에 Option 키를 중지하면 드래그 작업으로 인한 이동이 발생합니다.
드롭된 콘텐츠를 전송하는 데 시간이 필요한 경우 피드백을 제공하는 것이 좋습니다. 예를 들어 사람들이 전송에 걸리는 시간을 예측하는 데 도움이 되도록 진행률을 보여줄 수 있습니다. 컬렉션, 목록 및 테이블에서 드롭되는 위치를 표시해 줘서 사용자들이 전송을 마친 후 콘텐츠의 위치를 쉽게 찾을 수 있습니다. 앱 간에 시간이 많이 소요되는 전송이 발생하면 시스템에서 경고를 표시할 수 있습니다.
드롭된 콘텐츠가 작업 또는 작업을 시작할 때 피드백을 제공합니다. 사용자들이 인쇄와 같은 작업을 시작하는 작업에 콘텐츠를 드롭하면 작업이 시작되었음을 사람들에게 보여주고 진행 상황을 계속 알려줍니다.
드롭된 텍스트에 적절한 스타일을 적용합니다. 원본과 대상이 모두 동일한 텍스트 스타일을 지원하는 경우 드롭된 텍스트가 원래 글꼴, 서체, 크기 및 기타 속성을 유지하는지 확인하십시오. 그렇지 않으면 대상 스타일을 드롭된 텍스트에 적용합니다.
드롭 후 대상에서 콘텐츠의 선택 상태를 유지하고 필요에 따라 원본에 맞춰 업데이트합니다. 사람들은 드롭한 콘텐츠가 선택된 상태로 유지되어 즉시 조치를 취할 수 있기를 원합니다. 원본과 대상이 동일한 화면인 경우 드래그 작업을 통해 원본을 이동하면 콘텐츠가 원래 위치에서 사라집니다. 동일한 화면 내에서 드래그 작업이 복사를 수행할 때 원래 위치에 남아 있는 콘텐츠에서 선택 상태가 취소됩니다. 사용자들이 선택한 콘텐츠를 다른 컨테이너로 드래그하면 원본에서 콘텐츠를 선택 해제합니다.
Platform considerations
Not supported in tvOS or watchOS.
iOS, iPadOS
사용자들이 동시에 여러 드래그 활동을 수행할 수 있게 하세요. iPadOS에서 사람들은 진행 중인 드래그 작업에 여러 콘텐츠를 순차적으로 추가하여 손가락으로 처리할 수 있는 만큼 많은 콘텐츠를 한 번에 작업할 수 있습니다. 예를 들어, 사람들은 홈 화면에서 앱 아이콘을 선택하고 드래그해서 다른 홈 화면이나 폴더에 모든 아이콘을 놓기 전에 추가로 다른 앱 아이콘을 선택할 수 있습니다. 이 기능 지원하려면 사람들이 드래그하는 동안 콘텐츠를 추가하고 simultaneous drops(동시 드롭 지원)을 허용해야 합니다.
macOS
사용자들이 앱에서 Finder로 콘텐츠를 드래그하도록 허용하는 것을 고려하세요. 이를 지원할 때 나중에 앱에서 열 수 있는 형식으로 콘텐츠를 제공해야 합니다. 예를 들어 캘린더를 사용하면. ics 파일로 Finder에 드래그할 수 있습니다. 사용자들은 이 파일을 다른 사람과 공유하거나 캘린더로 다시 드래그하여 열 수 있습니다. 필요한 경우 드래그된 콘텐츠를 저장하기 위한 임시 화면인인 클리핑에 드래그한 콘텐츠를 보여줄 수 있습니다. 예를 들어, 대부분의 시스템 앱은 사람들이 텍스트를 Finder로 드래그할 수 있도록 하며 여기에서 클리핑으로 나타납니다. 나중에 사람들은 클리핑을 텍스트 필드나 텍스트를 허용하는 다른 위치로 드래그할 수 있습니다. 클리핑은 클립보드와 관련이 없습니다.
역자설명 : 밑에 예시처럼 클리핑을 통해 드래그되는 텍스트를 보여줄 수 있습니다.
사용자들이 창을 활성화하지 않고 비활성 창에서 선택한 콘텐츠를 드래그할 수 있습니다. 비활성 창에서 선택한 콘텐츠를 Background Selection이라고 하며 활성 창에서 선택한 콘텐츠와 모양이 다릅니다.
사용자들은 Bacground Selection(배경 선택 요소)에 영향을 주지 않고 비활성 창에서 개별 항목을 드래그할 수 있습니다. 예를 들어, 사용자들은 윈도의 선택된 파일을 선택 해제하지 않고 비활성 Finder 윈도에서 선택되지 않은 파일을 드래그할 수 있습니다.
다중 항목 드래그 작업 중에 배지를 표시하는 것을 고려하세요. 배지는 사람들이 드래그하는 항목의 수를 나타내는 데 사용할 수 있는 숫자가 포함된 채워진 작은 타원입니다.
사용자들이 콘텐츠를 드롭할 때 어떤 일이 일어날지 나타내기 위해 포인터 모양을 변경하는 것을 고려하세요. 포인터를 사용하는 것 외에 상황에 따라 drag link, disappearing item 그리고 operation not allowed pointers를 사용할 수도 있습니다. Pointers를 참고하세요.
최대한 사람들이 한 번의 동작으로 콘텐츠를 선택하고 드래그할 수 있도록 하세요.
