소결

7. 읽기 앱 ‘Rsearcher’ 디자인

7.4. 소결

7. 읽기 앱 ‘Rsearcher’ 디자인 7.1 인터랙션 디자인

설문에 따르면 태블릿의 경우 읽기 전, 읽는 동안, 읽은 후 과정 모두에 걸쳐 있다. 모바일의 경우는 대부분이 새로운 콘텐츠를 접하고자 하지만 패드 는 새로운 콘텐츠와 저장한 콘텐츠를 선택하는 기준이 자신이 처한 콘텍스트 에 달려 있음을 설문을 통해 알 수 있었다. 따라서 [그림66]에서와 같이 메인 화면에서 세 가지 테스크를 바로 수행 할 수 있도록 최신 뉴스, 마지막으로 읽었던 페이지, 작성하던 문서를 보여줌으로서 한 눈에 자신이 하던 리서치 테스크를 골라서 이어 갈 수 있도록 제안하였다.

[그림 66] 태블릿 메인화면 와이어프레임

검색한 결과는 사용자의 현재 위치가 사무실이면 학술검색 결과, 뉴스 검 색 결과 순으로 보여 준다[그림67].

[그림 67] 검색 결과 페이지

메인에서 들어온 콘텐츠 리스트 페이지는 사용자가 집인 경우에 New Stuffs먼저 보여주고 사무실이나 도서관 같은 곳이면 저장한 콘텐츠인 My cloud를 먼저 보여준다. 이러한 저장 기능은 에버노트(Evernote)나 드롭박스 (Dropbox)와 유사하지만 저장콘텐츠 뿐 아니라 새로운 콘텐츠로 같은 앱 안 에서 접한다는 면과 사용자가 먼저 접하게 되는 콘텐츠를 장소에 맞게 제공 한다는 면에서 사용자들이 리서치에 집중 할 수 있도록 돕는다[그림 68].

Evernote Dropbox [그림 68] 저장기능을 가진 앱

My Cloud에서는 디폴트로 모든 유형의 콘텐츠를 날짜순으로 보여주지만 필터링 기능을 통해 웹에서 저장한 콘텐츠, 다운 받은 문서, 캡처한 이미지, 생성한 폴더, 앱에서 작성한 노트만 찾아서 볼 수 있다. 또한 마이 클라우드 (My Cloud)에서 뉴스터프스로(New Stuffs) 상단에 토글링 버튼을 이용하여 쉽게 이동한다. 저장된 콘텐츠들은 제목, 날짜, 요약글 또는 이미지 순으로 배치 하여 보여준다. 이것은 앞의 연구에서 밝힌 우선순위에 따르는 것이다[그림 69].

[그림 69] My Cloud 페이지

뉴스터프스(New Stuffs)메뉴에서는 앞의 설문조사에서 많은 사람들이 SNS를 통하여 주로 뉴스에 접근한다고 답하였기 때문에 SNS에서 공유되는 뉴스들을 상단에서 접근하기 쉽게 배치하였다[그림 70].

[그림 70] New Stuffs화면

그 다음으로 자신의 관심사에 맞는 카테고리를 골라 구독하여 받아보도록 하였다. 플립보드(Flipboard)와 최근에 페이스북에서 출시한 페이퍼(Paper)에 서도 SNS와 연관지어 뉴스의 인기도를 파악하고 SNS에서 공유된 뉴스들을 따로 모아 보여주는 방식을 제공하고 있다[그림71].

Flipboard Paper

[그림 71] 콘텐츠 구독을 통한 접근 사례

또한 새로 업데이트 된 뉴스를 중요도 순서에 따라 면적을 달리하여 보 여주고 공유된 숫자를 보여줌으로서 뉴스기사의 인기도를 파악할 수 있도록 돕는다. 이것은 마셔블(Mashable)과 플립보드(Flipboard)와 유사하지만 창조를 목적으로 한다는 측면에서 뒤에서 기능이 달라진다[그림72].

Mashable Flipboard

[그림 72] SNS를 통한 가치 판단 사례

같은 관심 분야의 사람을 팔로잉하여 그들이 공유한 뉴스기사들을 보고 또한 그들이 읽었던 책 리스트를 볼 수 있도록 한다. 또한 그들의 관심분야 키워드가 상단에 노출되어 관심 키워드를 클릭하여 해당 컨텐츠만 읽어 볼 수도 있다. 팔로잉 하는 사람과 유사한 관심사를 가진 사람을 추천하여 팔로 잉 리스트에 추가할 수 있도록 한다[그림73].

[그림 73] 팔로잉을 통한 정보 접근

읽기 화면에서는 간단한 좌우 플릭킹(Flicking)인터랙션으로 읽기 목록 페 이지와 노트 페이지로 접근이 가능하다. 탭을 하면 본문 콘텐츠를 전체 화면 으로 볼 수 있다[그림 73].

[그림 74] 논문 읽기 화면

뉴스 읽기 화면에서는 문단 별로 강조하여 독자로 하여금 짧은 목표를 달 성하도록 하여 짧은 집중으로도 장문의 글을 읽는데 어렵지 않도록 디자인 하였다[그림 74].

[그림 75] 뉴스 읽기 화면

스크롤할 때 문단별로 관련 이미지를 매치하여 관심을 지속적으로 유지시 켜 내용 파악을 빠르게 할 수 있도록 제안하였다[그림 75].

[그림 76] 스크롤 화면

[그림77]에서 보듯이 궁금한 단어를 응시 한 상태로 3초간 멈추면 그 단어 에 하이라이트가 그려지고 몸을 앞으로 살짝 화면에 가까이 움직이면 [그림7 8]과 같이 팝업에서 위키피디아에 연결하여 의미를 알려준다.

[그림 77] 멀티모달 인풋 - 줌인

[그림 78] 검색 화면

[그림79]과 같이 몸을 뒤로 빼면 [그림80]과 같이 현재 문서에 인용된 레퍼 런스와 이 논문이 인용된 문서 리스트를 한 눈에 보여줌으로서 읽기 흐름을 유지할 수 있도록 돕는다. [그림81]은 뉴스 본문 화면에서 줌아웃 하였을 때 관련뉴스와 코멘트를 모아놓은 페이지로 넘어간다.

[그림 79] 줌 아웃

[그림 80] 논문 줌아웃 화면

[그림 81] 뉴스 줌 아웃 화면

[그림82]을 보면 소셜 하이라이트를 통하여 빠르게 요지를 파악 하도록 돕 고 또한 특정 내용에 대해서 토론을 할 수 있도록 본문 안에 코멘트를 달 수 있는 기능을 제공한다. 논문의 경우는 설문 결과 소셜 기능을 그다지 필요로 하지 않는 다는 결과를 반영하여 같이 논문을 공저하는 연구 그룹들끼리만 공유할 수 있는 기능을 제안한다.

[그림 82] 문장별 코멘트

한 문서에서 하이라이트 한 부분들만 따로 모아 읽을 수 있는 기능을 제 공한다.

[그림 83] 하이라이트 전체 보기

글을 읽다가 자신의 생각을 손쉽게 노트에 정리할 수 있다. 오른쪽 상단 에 쓰기 버튼을 누르거나 또는 좌측으로 플릭킹(Flicking)을 하면 읽기 화면이 줄어들면서 오른쪽으로 노트 페이지가 나온다[그림84].

[그림 84] 노트기능

또한 본문에서 발췌를 원하는 글이 있을 때 문장을 선택하고 바로 오른쪽 노트에 드래그 하여 붙이거나 저장하기 버튼을 눌러서 오른쪽 노트에서 확인 한다. 이때 하단에 레퍼런스가 각주와 같이 정리되어 출처를 따로 검색하여 찾지 않아도 된다. 저장한 글에는 번호로 태깅 되어 손쉽게 찾을 수 있다. 작 성한 글과 저장한 글 모두 선택해서 지우거나 위 아래로 옮겨가며 글의 구조 를 쉽게 바꿀 수 있다[그림85].

[그림 85] 발췌 기능

태블릿은 주로 읽기에는 편리하지만 생산성을 위한 작업에는 적합하지 않 다. 하지만 연구를 위한 읽기는 창조를 목적으로 하기 때문에 읽는 것과 동시 에 발췌와 노트 작성이 함께 이루어진다. 따라서 태블릿에서 연구를 목적으로 읽으면서 드래프트로 작성된 노트는 컴퓨터에서 다시 정교하게 편집이 이루

어진다. 따라서 드래프트 상태의 문서를 컴퓨터에서 호환이 잘되는 포맷으로 저장할 수 있는 기능은 사용자로 하여금 상당한 편리함을 제공한다. 따라서 문서작성에 있어서 가장 많이 사용되는 어플리케이션인 워드(Microsoft Word)의 DOC포맷과 발표용 대표 어플리케이션의 파워포인트(Power Point) 의 기본 저장 포맷인 PPT로 저장할 수 있는 기능을 제안하였다(Aamodt).

[그림 86] 포맷팅 기능

7.2 비주얼 디자인

7.2.1 브랜드 아이덴티티

리서처의 이미지와 읽기라는 기능을 상징하는 메타포로서 안경을 선택하 였다. 둥근 안경알에 뾰족한 안경테가 나타내는 시각이미지를 앱 전체 스타일 에 반영시켜 둥근 느낌과 뾰족한 느낌이 공존하도록 디자인 하였다. 또한 읽 기 전, 읽는 동안, 읽은 후의 전체 읽기 과정을 지원하는 앱의 기능을 세 가 지 색상으로 나타내었다.

+

[그림 87] 브랜드 아이덴티티

전체적인 배경 칼라는 [그림88]과 같이 종이의 느낌과 유사한 노란색을 띠 는 미색으로 처리하여 시각적으로 편안함을 주면서 책에서 느껴지는 아날로 그 느낌을 살리고자 하였다.

[그림 88] 리서처 앱 아이콘

[그림89] 전시포스터로서 설문결과에 대한 데이터를 시각화하고

’Reseaecher’ 앱에 대한 컨셉을 설명한 것이다. 전체 브랜드 칼라를 사용하여 읽기 프로세스가 강조되도록 종이사이즈를 가로 형으로 디자인하였다.

[그림 89] 전시 포스터

7.2.2 태블릿 버전

[그림 90]은 메인 페이지에서는 브랜딩에 사용한 세 가지 칼라를 반영하여 읽기 전, 읽는 동안, 읽는 후의 콘텐츠로 접근하는데 있어서 한 눈에 바로 파 악이 되도록 디자인하였다. 또한 읽다가 중단한 글의 경우 어디까지 읽었는지 정확한 위치를 표시하고 또한 퍼센티지로도 표현하여 구체적인 피드백을 주 었다. 이것은 칙센트 미하이가 주장한 몰입의 8가지 요소 중에서 셋째 수행하 는 과제에 대한 명확한 목표가 보이며 넷째, 즉각적인 피드백을 받을 수 있어 야 한다는 것에 부합하는 디자인이라고 볼 수 있다.

[그림89]는 앞에서 와이어프레임으로 앞에서 설명한 바와 같이 저장한 콘 텐츠를 보여주는 카테고리이다. 여기서 그리드 안에 있는 콘텐츠들은 하나의

[그림 90] 태블릿 버전의 메인 화면

폴더로 만들 수도 있다. 읽지 않은 콘텐츠는 오렌지색으로 표시하여 주목성을 주었다. 작성한 문서의 경우 초록색을 사용하여 쉽게 찾을 수 있도록 디자인 하였다. 왼쪽 카테고리 아이콘을 통해 원하는 콘텐츠만 필터링해서 볼 수 있 도록 하였다.

[그림 91] My Cloud 화면

[그림 92] New Stuff화면

[그림 93] Following화면

[그림 94] 목록과 본문페이지의 중간 단계

[그림 95] 본문 페이지에서 문단별로 집중

[그림 96] 스크롤시 이미지 전환

[그림 97] 검색 화면

[그림 98] 소셜 하이라이트

[그림 99] 그룹 하이라이트

[그림 100]관련 뉴스와 코멘트

[그림 101] 레퍼런스 페이지