Windows 8의 "일정 앱" 설계

이 글은 메일 앱피플 앱의 연장선상에서 일정 앱에 대해 자세히 소개합니다. 이러한 앱들을 최근 가장 중요시되고 있는 클라우드 서비스와 연동하여 완벽한 커뮤니케이션 제품군으로 거듭날 수 있도록 최선의 노력을 다하였습니다. 이 글에서는 Windows 8과의 통합, 현재 프리뷰의 일부 기능 및 현재 개발 중인 기능에 대해 자세히 설명하겠습니다. 또한 배경 설명으로 디자인에 얽힌 이야기와 반복 작업에 대해서도 잠시 살펴보겠습니다. 이 글은 Windows Live 팀의 수석 프로그램 관리자인 Colin Anthony가 작성했습니다. - Steven


처음 Windows 8용 일정 앱 설계를 시작했을 당시 설계 방향에 제한을 두지 않았습니다. 일정 앱의 긴 역사와 Windows 고객의 다양성을 고려하여 우리 스스로에게 다음과 같은 질문을 해 보았습니다. 뛰어난 일정 앱의 필수 조건은 무엇이며 Windows 8의 풍부한 기능을 사용하여 뛰어난 일정 앱을 구현하려면 어떻게 해야 할까요?

그 결과, 뛰어난 일정 앱을 구현하려면 다음 조건을 갖추어야 한다는 결론을 내렸습니다.

  • 명확한 일정 표시. 집, 회사, 학교 등 앞으로 어떤 일정이 잡혀 있는지 명확하게 알 수 있어야 합니다.
  • 간편하게 날짜 이동. 신속하고 효율적으로 날짜를 앞뒤로 이동할 수 있어야 합니다. 이벤트 및 약속을 자연스럽게 열 수 있어야 합니다.
  • 간편하게 새 항목 추가. 살다보면 언제나 새로운 일이 생기기 마련입니다. 뛰어난 일정 앱은 새로운 계획을 간편하게 작성할 수 있어야 합니다.
  • 일정 알림. 계획을 아무리 잘 짜더라도 사용자가 늦으면 아무 소용 없습니다! Smile
  • 다양한 작업. 사용자가 바쁠수록 일정 관리도 복잡해집니다. 일정 앱은 사용자의 변화하는 요구 사항을 문제 없이 처리할 수 있어야 합니다.

명확한 일정 표시

일정 앱의 가장 중요한 기능 중 하나는 "내일은 어떤 일이 있지?" 및 "다음 일은 뭐지?"라는 질문에 대답하는 기능입니다. 우리는 일정 앱을 설계할 때 이러한 질문에 대한 명확한 정보를 제공하고 불필요한 부분을 제거하는 작업에 집중했습니다. 디지털 일정 관리 프로그램의 모든 잠재적 기능을 고려할 때 이러한 기능에만 계속 집중하기란 사실상 쉽지 않습니다. 벨소리와 호루라기 소리를 추가하고 싶은 유혹이 정말 강했습니다. 한편, 우리가 집중한 기능은 사실상 종이 수첩의 가장 큰 특징 중 하나입니다. 종이 수첩은 그리드로 구성된 일정표에 사용자가 기록한 내용을 보여 줍니다.

이러한 개념과 뛰어난 Metro 스타일 앱이 되기 위한 원칙을 염두에 두고 명확한 정보 전달 기능에 집중했습니다. 일정 앱은 그 무엇보다도 사용자의 일정과 콘텐츠에 초점을 맞추도록 디자인되었습니다.

2012년 6월 보기이며, 그리드에 휴일과 약속이 표시되어 있습니다.

불필요한 부분을 제거하고 사용자의 일정에 초점을 맞추었습니다.

읽기 편한 일정 앱이라도 필요한 모든 정보를 제공하지 못하면 쓸모가 없습니다. 회사에서 약속을 확인하거나, 가족 활동을 관리하거나, 학교에서 수업을 준비할 때 일정 앱이 필요한 모든 정보를 가져와서 완전한 그림을 제공합니다.

고객 미팅 및 자원 봉사 일정은 파란색으로, 밤에 있을 졸업 파티 및 가족과 영화 감상 일정은 녹색으로 표시

업무 및 사적인 약속을 한눈에 알아볼 수 있습니다.

또한 사용자는 앱에서 이러한 일정이 표시되는 방법을 완벽하게 제어할 수 있습니다. 예를 들어, 어떤 일정이 사용자에게 특별한 의미가 있다면 다른 색을 사용하여 눈에 띄게 표시할 수 있습니다. 자주 사용하는 소셜 네트워크에서 사귄 사람들의 생일이 너무 많이 표시되어 정신이 없을 정도라면 생일 항목을 감추어서 다른 항목이 잘 보이게 할 수 있습니다.

불필요한 항목들로 인해 정신없이 보이는 것을 막기 위해 개인 설정을 통해 항목별로 제어가 가능합니다.

옵션: Colin의 일정 표시/숨기기, 파란색; 생일 일정 표시/숨기기, 라임색; 커플 일정 표시/숨기기, 청록색.

사용 빈도가 낮은 일정 옵션은 설정에 숨김 처리되므로 깔끔한 화면에서 앱을 제어할 수 있습니다.

간편하게 날짜 이동

일정 앱의 또 다른 필수 조건은 날짜를 이동하는 기능입니다. 우리가 세운 가장 중요한 목표는 다음과 같습니다.

  • 간편하게 앞뒤로 날짜 이동
  • 예측 가능한 보기 전환
  • 간단하게 기존 이벤트를 열어서 검토

앞뒤로 날짜 이동

우리가 설계 초반부터 확신을 갖고 추진한 기능 중 하나는 앞으로 이동하는 제스처를 취하면 다음 날짜로 이동하고 뒤로 이동하는 제스처를 취하면 이전 날짜로 이동하는 날짜 이동입니다. 단추를 클릭하거나 컨트롤을 조작하지 않아도 됩니다.

하지만 이렇게 간단한 설계에서도 사용자가 앞뒤로 이동할 때 얼마나 많은 날짜를 이동해야 하는지에 대한 문제가 있었습니다. 이 기능으로 인해 다른 사용자 경험 및 기술적 측면이 훼손되지는 않는지를 고려해야 했습니다.

제스처의 속도에 따라 한 번의 밀기로 수개월 앞으로 이동할 수 있도록 한다면 사용자는 자연스러우면서도 강력한 방법으로 시간을 이동할 수 있습니다. 하지만 사용자가 이동되는 날짜를 예측할 수 있도록 하는 작업이 만만치 않습니다. 예를 들어, 사용자가 6월 일정을 보다가 7월로 이동하고 싶은데 너무 빨리 미는 바람에 8월까지 이동할 수 있습니다. 이런 경우가 자주 발생한다면 사용자는 일정 앱을 제대로 제어할 수 없다는 느낌을 받게 됩니다.

또한, 월 사이의 경계가 명확하게 정의되어 있기 때문에 정확도가 중요합니다. 예를 들어, 7월과 8월의 경계 중간에 도착하는 경우는 절대 없습니다. 이는 사진의 2차원 그리드 이동과 대조되는 부분입니다. 사진에서는 보고 있는 사진의 일반 영역에 도착하는 한 "가까이 보기"가 가능합니다.

이러한 문제를 피하기 위해 밀기 제스처를 하든, 키보드의 Page Down 키를 누르든, 앞으로 단추를 클릭하든 한 번에 한 달 단위로만 이동할 수 있도록 했습니다. 그 결과 앱 경험의 예측 가능성과 제어 기능이 대폭 향상되었습니다. 현재 6월 일정을 보고 있는데 8월로 이동하고 싶다면 두 번 클릭하거나 두 번 밀면 됩니다. 아주 간단하지 않습니까? 원하는 날짜를 건너뛰는 경우는 절대 발생하지 않습니다.

손가락을 사용하여 6월에서 7월 또는 8월로 이동하는 그림

살짝 밀어 신속하고 정확하게 날짜를 이동할 수 있습니다.

보기 전환

대부분의 사람들은 일정 앱을 사용할 때, 일정이 많고 적음에 따라 같은 보기에서 일정을 확인하기를 원합니다. 약속이 별로 없는 사람들은 월별 보기를 선호하고, 일정이 많은 사람들은 일별 보기를 선호하는 경향이 있습니다. 따라서 보기 전환을 항상 표시되는 최상위 명령으로 만들지 않고 앱 바에 배치했습니다. 사용자는 Windows 8에서 마우스 오른쪽 단추를 클릭하거나 화면 아래에서 위쪽으로 살짝 밀어 앱 바를 불러올 수 있기 때문에 필요할 때만 보기 전환 메뉴를 사용하고 나머지 시간에는 불필요한 내용 없이 일정을 확인할 수 있습니다.

일정 아래에 표시된 앱 바 영역

필요할 때 앱 바를 열어 간단하게 보기를 전환할 수 있습니다.

개별 이벤트 열기

다음과 같은 상관관계가 있기 때문에 간편하게 이벤트를 열 수 있도록 하는 것이 그렇게 쉽지는 않았습니다.

  • 각 이벤트를 크게(높이 및 너비) 표시하면 마우스 또는 손가락으로 더 쉽게 타기팅할 수 있습니다.
  • 이벤트 크기를 줄이면 한 번에 더 많은 콘텐츠를 볼 수 있습니다.

차트에서 X축은 마우스 및 터치 정확도, Y축은 이벤트 크기, 우상향 곡선은 두 변수의 함수 관계를 나타냅니다.

사용자가 쉽게 타기팅할 수 있으면서도 각 보기에 어느 정도 이상의 콘텐츠가 표시되는 솔루션을 찾아야 했습니다. 이 문제는 각 날짜의 공간이 가장 좁은 월별 보기에서 특히 중요하게 작용합니다. 이러한 핵심 변수를 염두에 두고 최적의 이벤트 크기를 설계했습니다. 그 결과 월별 보기의 각 날짜마다 2개(고객의 평균 이벤트 개수)의 이벤트를 표시하면 마우스 및 터치 타기팅도 거의 100%에 가까운 정확도를 보였습니다. 집, 회사 및 학교의 일정이 이보다 많을 경우 주별 보기로 전환하면 타기팅 정확도를 그대로 유지하면서 모든 이벤트를 볼 수 있습니다.

간편하게 새 항목 추가

갑자기 새로운 이벤트가 발생할 수 있기 때문에 언제든지 명확한 방법으로 즉시 이벤트를 추가할 수 있도록 했습니다. 종이 수첩을 떠올려 보세요. 날짜를 확인하고, 원하는 날짜로 손을 이동한 후 적으면 됩니다. 매우 직관적이죠. 대부분의 사람들이 이 모든 과정을 별 생각 없이 자연스럽게 진행하며, 이것은 바로 종이 수첩의 단순한 디자인과 명확성 때문일 것입니다. 이와 마찬가지로, Windows 8의 일정 앱에서는 원하는 날짜 또는 시간을 클릭하거나 탭하여 새 이벤트를 추가할 수 있습니다

월별 보기의 6월 12일에 마우스 커서를 가리키고 있는 그림

클릭하여 추가하기 기능은 연필로 종이에 적는 것과 비슷합니다.

이 디자인은 기본 명령 화면으로 그리드를 사용하기 때문에 단추 없이도 자주 하는 작업을 완료할 수 있습니다. 모든 작업이 그리드 안에서 수행됩니다. 이는 크롬 위 콘텐츠에 대한 Metro 디자인 원칙을 강화합니다. 화려하지는 않지만 간단하고 정확하게 이벤트를 생성할 수 있는 깔끔한 경험을 제공합니다.

일정 알림

위의 모든 사항을 갖추었다 하더라도 일정 앱은 사용자가 일정을 준수할 때에만 그 가치가 있습니다. 이러한 목표를 위해 사용자가 중요한 이벤트를 놓치지 않도록 다양한 스마트 기능을 갖추도록 일정을 설계했습니다.

알림 및 미리 알림

이벤트 전체 페이지에서 원하는 알림 시간을 설정할 수 있습니다. 그 시간이 되면 작은 팝업 상자가 나타나 일정을 알려줍니다.

브라우저의 웹 페이지 상단에 5시에 아이 픽업이라는 알림 표시

알림은 다가오는 이벤트를 알려줍니다.

알림은 현재 작업을 차단하지 않습니다. 사용자가 조작할 필요도 없습니다. Windows 8의 기본 알림 시스템을 사용할 경우 일정 알림이 나타나 앞으로 있을 이벤트를 알려준 후 사라집니다.

또한 Windows Phone과 마찬가지로, 잠금 화면 및 시작 타일에서 다가오는 이벤트에 대한 정보를 볼 수 있습니다.

시작 화면의 일정 타일에 "내일 아침 8시에 Debbie와 아침 식사"라는 알림이 표시되었습니다.

일정이 항상 보이도록 동시 보기로 표시

정신 없이 바쁜 날에는 항상 전체 일정을 볼 수 있으면 좋겠다고 생각하는 경우가 많습니다. 동시 보기를 사용하면 다른 앱을 사용하는 동안에도 일정을 볼 수 있습니다.

물론, 슬림형 폼 팩터의 동시 보기에서 일정을 볼 수 있도록 설계하는 작업은 간단하지 않습니다. 일별 보기와 같은 일부 보기는 좁은 공간에서도 매우 자연스럽게 화면에 표시됩니다. 우리는 이렇게 구현하기 위해 이틀이 아닌 하루만 표시했으며, 보기의 전체 모델이 같은 상태를 유지할 수 있게 되었습니다. 문제가 해결된 것이죠.

하지만 주별 및 월별 보기는 문제가 조금 더 복잡합니다. 일주일 전체 또는 한달 전체를 좁은 공간에 맞추고 각 이벤트의 제목을 표시하는 것은 매우 어렵습니다. 또한, 일별 보기는 동시 보기로 표시해도 똑같이 나타나지만 주별 및 월별 보기는 크게 표시할 때와 전혀 다르게 나타나는 상황을 방지하여 시스템의 예측 가능성을 유지하고자 했습니다.

이러한 문제점과 목표를 고려하여 모든 보기가 하나의 동시 보기로 표시되도록 간단하고 일관적인 모델을 설계했습니다 이 단일 보기는 큰 보기의 컨텍스트와 위치를 그대로 유지합니다. 예를 들어, 큰 보기에서 수요일에 있었다면 동시 보기에서도 수요일에 있습니다. 또한 다른 보기와 같은 수준의 명확한 일정 정보 및 간편한 탐색 기능을 제공합니다. 간단한 목록에서 모든 일정의 모든 이벤트를 사용할 수 있습니다. 왼쪽 또는 오른쪽으로 밀거나 클릭하면 날짜를 이동할 수 있습니다.

일정이 오른쪽에 동시 보기로 표시되어 있으며, 화면의 대부분을 차지하는 브라우저에는 Bing에서 시내에 위치한 식당을 검색한 결과가 표시되어 있음

일정을 동시 보기로 표시하면 일정 관리와 브라우징을 동시에 할 수 있습니다.

다양한 작업

마지막으로, 만약 우리가 좋은 일정 앱을 만든다면 일정 앱을 사용하여 집과 회사에서 발생하는 대부분의 일들을 관리하는 고객이 점점 늘어날 것입니다. 이를 염두에 두고 사용량이 늘어날수록 더 많은 작업을 할 수 있도록 일정 앱을 설계했습니다.

주별 보기

여러분도 예상하시겠지만, 주별 보기는 약속이 매우 많을 때 유용하며 특정 주의 일정을 명확하게 표시합니다.

6월 10일부터 16일까지 일주일 동안 하루에 1-3개의 약속

주별 보기는 일요일부터 토요일까지의 개요를 제공합니다.

이틀 보기

회사, 집, 학교 또는 세 곳 모두에서 정신 없이 바쁠 날들을 위해 몰입도와 정밀성을 높여주는 설계를 만들었습니다. 한편, 컨텍스트를 너무 많이 제거하여 "터널 시야" 현상을 일으키지 않도록 확대 기능을 제한했습니다. 적절한 균형을 유지하기 위해 이틀 보기를 사용하여 일정 앱을 설계했습니다.

오늘과 내일의 일정이 나란히 표시되어 있으며 시간을 나타내는 그리드에 약속이 표시된 그림

이틀 보기는 오늘과 내일에 대한 가장 자세한 정보를 제공합니다.

'오늘'의 시간을 잘 관리하려면 내일 어떤 일이 있는지 알아야 하는 경우가 많기 때문에 이틀 보기를 유용하게 사용할 수 있습니다. 또한, 이틀 보기는 최신 와이드 스크린을 사용하며 여백을 채우기 위해 크롬 또는 불필요한 요소를 추가하지 않습니다. 다른 보기와 마찬가지로, 간단하게 일정 그리드와 이벤트로 구성되어 있습니다. 한 가지 팁을 드리자면, 각 날짜는 인접한 날짜에 영향을 주지 않고 독립적으로 스크롤할 수 있기 때문에 오늘 밤에 있을 이벤트 일정 정보를 살펴보는 동시에 내일 첫 약속을 볼 수 있습니다.

다양한 세부 일정 작업

마지막으로, 이미 수많은 고객이 "전화 요금 납부일", "정오에 학부모/교사 면담" 등과 같이 일정을 빠른 미리 알림의 용도로 사용하고 있습니다. 앞에서 언급했듯이, 일정의 아무 위치를 클릭 또는 탭한 후 원하는 내용을 입력할 수 있습니다.

이러한 일반 시나리오 외에도, 사용자의 요구 사항이 변하면 그에 따라 더 많은 일을 할 수 있도록 일정 앱을 설계했습니다. 디지털 일정의 진정한 가치는 상세하고 풍부한 기능에서 나오기 때문입니다.

예를 들어, 이번 여름에 가족 여행 계획이 잡혀 있다고 가정하겠습니다. 일정 앱에 여행 계획은 물론이고 비행기 시간, 확인 번호, 날짜별 계획표 등 여행과 관련된 모든 정보를 계획에 직접 추가할 수 있습니다. 따라서 별도의 종이나 메모장을 관리할 필요가 없습니다. 앱으로 모든 것이 가능합니다. 또한 일정 앱에서 바로 가족에게 이벤트 정보를 보낼 수 있으므로 모든 가족에게 필요한 정보를 제공할 수 있습니다.

또 다른 예로, 우리 가족의 일정 앱에는 매주 토요일의 청소 당번 목록이 표시된 반복 일정이 있습니다. 종이 일정표를 사용할 경우 청소 당번을 관리하기가 매우 번거롭거나 오직 청소 당번 관리를 위한 특별한 일정표가 필요합니다. 하지만 각 일정 이벤트의 전용 페이지에는 이 모든 관리 작업을 처리할 수 있는 풍부한 기능이 포함되어 있습니다.

이벤트 페이지 본문에 Colin과 Lisa의 청소 목록이 표시되어 있고 왼쪽 창에 날짜 및 시간이 표시되어 있는 그림

이벤트 페이지는 일정 관리에 필요한 다양한 옵션을 제공합니다.

여러분이 즐거운 마음으로 Release Preview의 일정 앱을 사용하셨으면 좋겠습니다. Consumer Preview 기간 동안에 보내주신 피드백을 하나하나 꼼꼼히 살펴보았으며 우리에게 정말 큰 도움이 되었습니다. 감사합니다! Windows 8 최종 버전이 출시될 때까지 향상된 기능을 마음껏 사용해 보시기 바랍니다.

- Colin