Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

오프라인 사용자 환경 고려 사항

이 글에서는 느린 네트워크와 오프라인에서 훌륭한 경험을 창출하는 데 필요한 여러 가지 디자인 고려 사항을 살펴보겠습니다.

네트워크 연결의 품질은 다음과 같은 여러 요인의 영향을 받을 수 있습니다.

  • 공급자의 커버리지 영역에서 벗어남
  • 악천후
  • 정전
  • 사용자가 네트워크 연결을 차단하는 건물과 같은 '사각지대'로 이동
  • 기차를 타고 터널 통과
  • 공항이나 호텔과 같이 제3자가 관리하는 인터넷 연결에 시간 제한이 있음
  • 특정 시간 또는 날짜에 인터넷 액세스를 제한하거나 차단하는 문화적 관습

연결 상태 변경의 영향을 최소화하여 좋은 경험을 제공하는 것을 목표로 해야 합니다.

네트워크 연결이 불안정할 때 사용자에게 무엇을 보여줘야 하나요?

먼저 네트워크 연결 성공 및 실패 시 어떤 모습인지 알아야 합니다. 연결에 성공한 경우 앱은 정상적으로 온라인 상태를 유지합니다. 그러나 연결에 실패한 경우 앱은 네트워크 지연 시 나타나는 작동 방식을 보이거나 오프라인 상태일 수 있습니다.

네트워크 연결 성공 또는 실패를 고려할 때 다음과 같은 중요한 사용자 환경 관련 질문을 자문해야 합니다.

  • 연결 성공 또는 실패를 판별하려면 얼마나 기다려야 하는가?
  • 성공 또는 실패를 판별하는 동안 무엇을 할 수 있는가?
  • 실패한 경우 어떻게 해야 하는가?
  • 위 정보를 사용자에게 어떻게 알려줄 것인가?

현재 상태 및 상태 변경을 사용자에게 알림

네트워크 오류 시 취할 수 있는 조치와 애플리케이션의 현재 상태를 사용자에게 알려줍니다. 예를 들어, 다음과 같은 알림이 제공될 수 있습니다.

“You seem to have a bad network connection. [Not to worry!] Messages will be “sent when the network is restored.”

상태 변경이 발생한 경우 Emojoy(emoji 메시징 앱)가 사용자에게 알려줍니다.
상태 변경이 발생한 경우 가급적 빨리 사용자에게 그 사실을 명확하게 알려주세요.
상태 변경이 발생한 경우 I/O 2016 앱이 사용자에게 알려줍니다.
Google I/O 앱은 오프라인일 때 머티리얼 디자인 '알림(toast)'을 사용하여 사용자에게 알려줍니다.

네트워크 연결 개선 또는 복원

날씨 앱의 예
이 날씨 앱과 같은 일부 앱은 이전 데이터가 사용자에게 유용하지 않으므로 자동으로 업데이트해야 합니다.

네트워크 연결 개선 시 사용자에게 알리는 방법은 애플리케이션에 따라 많이 다릅니다. 주식 시장 앱과 같이 업데이트 정보를 우선순위로 표시해야 하는 앱의 경우 신속한 자동 업데이트 및 사용자 알림이 중요합니다.

또한 마지막으로 앱을 업데이트한 시간을 항상 눈에 잘 띄는 공간에 표시할 수 있습니다. 이는 통화 변환기 앱 등에도 유용합니다.

오래된 Material Money 앱 업데이트된 Material Money
Material Money는 최신 통화를 보여주고, 앱이 업데이트되지 않은 경우 사용자에게 알려줍니다.

뉴스 앱과 같은 다른 애플리케이션은 탭 업데이트(tap-to-update) 기능을 사용하여 최신 내용이 있음을 사용자에게 알려주는 간단한 알림을 표시할 수 있습니다. 이렇게 하는 이유는 사용자가 현재 기사를 읽는 동안 자동 업데이트가 페이지를 새로 고치면 마지막으로 읽은 부분에서 벗어나기 때문입니다.

정상 상태의 뉴스 앱 Tailpiece의 예 업데이트할 준비가 된 경우의 뉴스 앱 Tailpiece의 예
온라인 신문인 Tailpiece는 최신 뉴스를 자동으로 다운로드하지만 기사에서 마지막으로 읽은 부분에서 벗어나지 않도록 수동으로 새로 고치는 기능을 사용자에게 제공합니다.

상황별 상태 및 찾아보기 모드

각 UI는 성공적인 연결이 필요한지 여부에 따라 변경되는 고유한 컨텍스트와 기능을 가질 수 있습니다. 일례로, 연결을 다시 설정할 때까지 구매 버튼과 가격 책정은 비활성화되지만 오프라인으로 찾아볼 수 있는 전자 상거래 사이트가 있습니다.

상황별 상태의 다른 형태로 데이터가 포함될 수 있습니다. 예를 들어, 주식을 구입할 수 있는 재무 애플리케이션 Robinhood는 색상과 그래픽을 사용하여 사용자에게 개장 시간을 알려줍니다. 폐장하면 전체 인터페이스가 흰색으로 변했다가 회색으로 표시됩니다. 주가가 상승 또는 하락할 때 각 개별 주식 위젯은 상태에 따라 초록색 또는 빨간색으로 바뀝니다.

오프라인 모델을 이해하도록 교육

오프라인은 모든 사람을 위한 새로운 심리 모델입니다. 연결되지 않은 경우에 변경되는 사항에 대해 사용자에게 교육해야 합니다. 대규모 데이터의 저장 위치를 알려주고 기본 동작을 변경할 수 있는 설정을 제공해야 합니다. 아이콘과 같은 단일 디자인 요소에 의존하지 말고 정보를 담은 언어, 아이콘, 알림, 색상 및 이미지와 같은 여러 UI 디자인 구성 요소를 사용하여 이러한 아이디어를 종합적으로 전달해야 합니다.

기본적으로 오프라인 경험 제공

앱에 많은 양의 데이터가 필요하지 않은 경우 기본적으로 해당 데이터를 캐시하세요. 네트워크 연결을 통해서만 데이터에 액세스할 수 있는 경우 사용자는 점점 더 좌절할 수 있습니다. 가급적 안정적인 환경을 만들도록 노력해야 합니다. 불안정한 연결은 앱의 신뢰성을 떨어뜨리지만, 네트워크 오류의 영향을 줄여주는 앱은 사용자에게 마법적인 느낌을 줍니다.

뉴스 사이트는 당일의 최신 뉴스 콘텐츠를 자동으로 다운로드하고 저장하는 방식을 사용하므로, 사용자는 기사 이미지가 없는 텍스트를 다운로드하는 등의 방식으로 연결하지 않고서도 오늘의 뉴스를 읽을 수 있습니다. 또한 사용자의 행동에 맞춰야 합니다. 가령, 사용자가 스포츠면을 주로 보는 경우 스포츠 데이터를 우선적으로 다운로드하는 것이 좋습니다.

Tailpiece는 다양한 디자인 위젯을 사용하여 오프라인 상태임을 사용자에게 알려줍니다. Tailpiece에는 오프라인으로 사용할 준비가 된 섹션을 보여주는 탐색 창이 있습니다.
기기가 오프라인인 경우 Tailpiece는 사용자에게 앱을 계속 사용할 수 있음을 알리는 상태 메시지를 사용하여 사용자에게 알려줍니다.

앱이 오프라인으로 사용할 준비가 되면 사용자에게 알림

웹 앱을 처음 로드할 때 오프라인으로 사용할 준비가 되었는지 사용자에게 알려줘야 합니다. 예를 들어 섹션이 동기화되거나 데이터 파일이 다운로드된 경우, 화면 하단의 메시지를 통해 작업에 대한 간단한 피드백을 제공하는 위젯으로 이를 수행합니다.

사용하는 언어가 대상 사용자에게 적합한지 다시 생각해보세요. 메시징이 사용되는 모든 인스턴스에서 동일하게 제공되는지 확인하세요 . 오프라인이라는 용어는 일반적으로 전문가가 아닌 사람들이 오해할 수 있으므로 대상 사용자가 관련될 수 있는 작업 기반 언어를 사용하세요.

오프라인 I/O 앱 오프라인 Chrome Status 사이트
앱을 오프라인에서 사용할 준비가 되면 Google I/O 2016 앱과 Chrome Status 사이트에서 사용자에게 알려줍니다.

데이터를 많이 사용하는 앱의 경우 '오프라인용으로 저장'을 인터페이스에 명확히 표시

애플리케이션이 많은 양의 데이터를 사용하는 경우, 사용자가 설정 메뉴를 통해 구체적으로 요구하지 않으면 자동 다운로드 대신 오프라인용 항목을 추가하는 스위치 또는 핀이 있는지 확인합니다. 핀 또는 다운로드 UI는 다른 UI 요소가 가리지 않아야 하며 기능이 명확해야 합니다.

한 예로 큰 데이터 파일이 필요한 음악 플레이어를 들 수 있습니다. 사용자는 관련 데이터 비용을 알고 있지만 오프라인 상태에서 플레이어를 사용하고자 할 수 있습니다. 나중에 사용하기 위해 음악을 다운로드하려면 사용자가 미리 계획을 세워야 하므로 온보딩(onboarding) 동안 이에 대한 교육이 필요할 수 있습니다.

오프라인에서 액세스할 수 있는 항목 명시

제공하는 옵션에 대해 명확히 해야 합니다. 사용자가 스마트폰에 저장한 항목과 저장할 항목을 쉽게 볼 수 있도록 '오프라인 라이브러리'를 보여주는 탭이나 설정을 표시해야 하는 경우가 있습니다. 설정이 간결해야 하며 데이터 저장 위치와 액세스 권한이 있는 사람을 명확히 해야 합니다.

실제 작업 비용 표시

대부분의 사용자는 오프라인 기능을 '다운로드'와 동일시합니다. 네트워크 연결이 정기적으로 실패하거나 사용할 수 없는 국가의 사용자는 다른 사용자와 콘텐츠를 공유하거나, 네트워크 연결 동안 오프라인으로 사용할 콘텐츠를 저장합니다.

데이터 요금제 사용자는 비용을 염려하여 대용량 파일을 다운로드하지 않을 수 있으므로, 사용자가 특정 파일이나 작업을 적극적으로 비교할 수 있도록 관련 비용을 표시할 수도 있습니다. 예를 들어, 위의 음악 앱은 데이터 요금제 사용 여부를 감지하고 사용자가 파일의 실제 비용을 볼 수 있도록 파일 크기를 표시할 수 있습니다.

해킹 방지

사용자가 본의 아니게 해킹할 수 있습니다. 예를 들어, Google Drive와 같은 클라우드 공유 앱이 등장하기 전에는 대용량 파일을 저장하고 이메일에 첨부하여 다른 기기에서 계속 편집할 수 있었습니다. 사용자가 해킹 경험을 하지 않고 원하는 목표에 집중하도록 하는 것이 중요합니다. 즉, 사용자에게 더욱 친숙한 방식으로 대용량 첨부 파일을 첨부할 수 있는 방법을 생각하는 대신, 여러 기기에서 대용량 파일을 공유하는 문제를 해결하세요.

기기 간 전송 가능한 환경

네트워크 연결이 불안정한 경우 전송할 수 있을 정도로 연결 상태가 원활해지면 올바르게 동기화할 방법을 찾으세요. 예를 들어, 예약 도중에 여행 앱의 네트워크 연결이 끊어지는 경우를 가정해봅시다. 연결이 다시 설정되면 앱이 사용자 계정과 동기화된 후 데스크톱 기기에서 예약을 계속 진행할 수 있습니다. 전송할 수 없으면 사용자가 상당히 불만을 가질 수 있습니다.

앱 동기화 여부와 같은 데이터의 현재 상태를 사용자에게 알려주세요. 하지만 메시지 전송으로 사용자에게 지나친 부담을 주지 마세요.

포괄적 디자인 환경 구현

디자인 시 사용자의 진행을 방해하지 않고 동작이나 작업을 완료하도록 안내하는 의미 있는 디자인 기기, 간단한 언어, 표준 아이콘 체계 및 의미 있는 이미지를 제공하는 방식으로 포괄적인 환경을 구현하세요.

간결한 언어로 안내

좋은 사용자 환경은 잘 디자인된 인터페이스뿐만 아니라 앱에서 사용하는 언어와 사용자가 진행하는 흐름도 포함합니다. 앱 또는 개별 UI 구성 요소의 상태를 설명할 때 기술 전문 용어 사용을 피하세요. '앱 오프라인'이라는 용어는 앱의 현재 상태를 사용자에게 전달하지 못할 수 있음을 고려하세요.

다운로드 아이콘은 좋은 예에 해당합니다.
권장: 작업을 설명하는 언어와 이미지를 사용하세요.
서비스 워커 아이콘은 좋지 않은 예에 해당합니다.
금지: 접근하기 어려운 추상적인 용어는 피하세요.

여러 디자인 기기를 사용하여 액세스 가능한 사용자 환경 구현

언어, 색 및 시각적인 구성 요소를 사용하여 상태 변경 또는 현재 상태를 보여줍니다. 상태를 보여주기 위해 색상만 사용하는 경우 사용자가 알아차리지 못하거나 시각 장애자가 이용하지 못할 수도 수 있습니다. 또한 디자이너는 직감적으로 회색으로 표시된 UI를 사용하여 오프라인을 나타내는데 이는 웹에서 로드되었음을 의미할 수 있습니다. 또한 회색으로 표시된 UI는 양식의 입력 요소와 같이 비활성화된 요소를 나타내기도 합니다. 따라서 색상만으로 상태를 나타내는 경우 혼란을 일으킬 수 있습니다.

오해를 방지하려면 색상, 레이블 및 UI 구성 요소 등 여러 가지 방법으로 서로 다른 상태를 표현해야 합니다.

색상과 텍스트를 사용하여 오류를 표시하는 좋은 예
권장: 다양한 디자인 요소를 사용하여 의미를 전달하세요.
 색상만 사용하는 나쁜 예
금지: 색상만 사용하여 현재 상태를 나타내지 마세요.

의미를 전달하는 아이콘 사용

의미 있는 텍스트 레이블과 아이콘을 사용하여 정보를 정확히 전달해야 합니다. 웹상에서 오프라인은 비교적 새로운 개념이므로 아이콘만 사용하는 경우 문제가 될 수 있습니다. 사용자가 단독으로 사용된 아이콘을 오해할 수 있습니다. 예를 들어, 저장의 의미로 사용된 플로피 디스크를 구세대는 이해하지만 플로피 디스크를 본 적이 없는 젊은 사용자는 혼동할 수 있습니다. 마찬가지로, 레이블 없이 표시된 '햄버거' 메뉴 아이콘도 사용자를 혼동시키는 것으로 알려져 있습니다.

오프라인 아이콘을 도입할 때 업계 표준 시각적 표현(있는 경우)과 일관성을 유지하고 텍스트 레이블 및 설명을 제공하세요. 예를 들어, 오프라인 저장은 일반적인 다운로드 아이콘이거나 (동기화 작업과 관련된 경우) 동기화 아이콘일 수 있습니다. 일부 작업은 네트워크의 상태를 보여주기보다 오프라인 저장으로 해석될 수 있습니다. 사용자에게 추상적인 개념을 제공하지 말고 전달하려는 액션을 생각하세요. 예를 들어, 데이터 저장 또는 다운로드는 액션 기반입니다.

오프라인으로 전달되는 다양한 아이콘의 예

오프라인은 상황에 따라 다운로드, 내보내기, 핀 등 여러 가지를 의미할 수 있습니다. 더 많은 영감을 얻으려면 머티리얼 디자인 아이콘 세트를 참조하세요.

다른 피드백 메커니즘과 함께 골격 레이아웃 사용

골격 레이아웃은 본질적으로 콘텐츠가 로드되는 동안 표시되는 앱의 와이어프레임 버전입니다. 이를 통해 콘텐츠를 로드할 예정임을 사용자에게 보여줄 수 있습니다. 또한 사용자에게 앱이 로드되고 있음을 알려주는 텍스트 레이블과 함께 프리로더 UI를 사용하는 것도 고려하세요. 예를 들어, 와이어프레임 콘텐츠를 진동시켜 앱이 작동하고 로드 중인 듯한 느낌을 줄 수 있습니다. 이렇게 하면 사용자가 무언가 진행되고 있다는 사실을 알 수 있으므로 앱을 다시 제출하거나 새로 고치는 상황을 방지하는 데 도움이 됩니다.

골격 레이아웃의 예 로드된 기사의 예
골격 레이아웃 전과 후

콘텐츠를 차단하지 마세요

일부 애플리케이션에서는 사용자가 새 문서 작성과 같은 작업을 트리거할 수 있습니다. 일부 앱은 새 문서를 동기화하기 위해 서버에 연결하려고 시도하고, 이를 보여주기 위해 거슬리는 로드 모달 대화상자를 전체 화면으로 표시합니다. 이는 네트워크 연결이 안정적인 경우 정상적으로 작동할 수 있지만, 네트워크가 불안정한 경우 사용자가 해당 작업에서 벗어날 수 없고 UI는 사용자가 다른 작업을 수행하지 못하도록 효과적으로 차단합니다. 콘텐츠를 차단하는 네트워크 요청은 피해야 합니다. 연결 상태가 원활해지면 사용자가 계속 앱을 탐색하고, 앞으로 수행하고 동기화할 작업을 계속 큐에 넣을 수 있도록 허용하세요.

사용자에게 피드백을 제공하여 작업 상태를 보여주세요. 예를 들어 사용자가 문서를 편집 중인 경우, 온라인 상태일 때와는 시각적으로 다르지만 파일이 '저장'되었고 네트워크 연결 시 동기화될 것임을 보여주도록 피드백 디자인 변경을 고려하세요. 이를 통해 사용자에게 사용 가능한 여러 가지 상태에 대해 알려주고 작업이나 동작이 저장되었음을 확인시켜 줄 수 있습니다. 따라서 사용자가 애플리케이션 사용 시 더욱 확신을 갖게 됩니다.

다음 10억을 위한 디자인

많은 지역에서 저급 기기들이 널리 사용되고 있고 연결을 신뢰할 수 없으며 많은 사용자의 경우 데이터 요금을 감당할 수 없습니다. 데이터를 투명하고 간결하게 제공하여 사용자 신뢰를 확보해야 합니다. 연결 상태가 좋지 않은 사용자를 돕고 작업 속도를 높이기 위해 인터페이스를 단순화하는 방법에 대해 생각해보세요. 데이터를 많이 사용하는 콘텐츠를 다운로드하기 전에 항상 사용자에게 물어보세요.

연결이 지연되는 사용자를 위해 낮은 대역폭 옵션을 제공하세요. 이를 통해 네트워크 연결이 느리면 작은 자산을 제공하세요. 고품질 또는 저품질 자산을 선택할 수 있는 옵션을 제공하세요.

결론

사용자는 이러한 개념에 익숙하지 않으므로 교육이 중요합니다. 친숙한 것들과 연관시켜 보세요. 예를 들어, 나중에 사용하기 위해 다운로드하는 것은 데이터를 오프라인으로 처리하는 것과 같습니다.

불안정한 네트워크 연결용으로 디자인할 때는 다음 사항에 유의하세요.

  • 네트워크 연결 성공, 실패 및 불안정에 대해 어떻게 디자인할지 생각하세요.
  • 데이터가 비쌀 수도 있는 사용자를 배려하세요.
  • 전 세계적으로 대부분 사용자에게 기술 환경은 모바일이 거의 독점적입니다.
  • 제한된 저장소와 메모리 및 처리 능력, 소형 디스플레이 및 낮은 터치스크린 품질을 가진 저급 기기가 널리 사용되고 있습니다. 성능이 디자인 프로세스의 일부인지 확인하세요.
  • 오프라인일 때 사용자가 애플리케이션을 탐색할 수 있도록 허용하세요.
  • 현재 상태 및 상태 변경을 사용자에게 알려주세요.
  • 앱이 많은 데이터를 필요로 하지 않는 경우 기본적으로 오프라인으로 제공하세요.
  • 앱이 데이터를 많이 사용하는 경우 오프라인용으로 다운로드할 수 있는 방법을 사용자에게 알려주세요.
  • 기기 간 전송 가능한 환경을 구현하세요.
  • 언어, 아이콘, 이미지, 입력 체계 및 색상을 활용하여 아이디어를 사용자에게 종합적으로 표현하세요.
  • 사용자에게 도움이 되는 재확인 및 피드백을 제공하세요.