태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'IOS'에 해당되는 글 6건

  1. 2013.06.26 우분투(ubuntu)란 무엇인가? 2 (6) by 문한별
  2. 2012.07.13 [openUI] Lazy touch scroll 오픈 소스 UI (5) by 無異
  3. 2012.04.13 아이폰,아이패드를 위한 Touch Scroll UI (4) by 無異
  4. 2011.07.15 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사 (3) by 이 재용
  5. 2011.06.09 아이폰,아이패드에서 나눔고딕으로 웹페이지 보기 (3) by 無異
  6. 2010.10.29 [UI 디테일] 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로 (3) by 위승용 (uxdragon)
2013.06.26 08:50

우분투(ubuntu)란 무엇인가? 2

  1. 2013/06/18 1. 우분투(ubuntu)란 무엇인가? 1 (철학과 역사)
  2. 2013/06/26 2. 우분투(ubuntu)란 무엇인가? 2. (데스크탑과 모바일 UI)
  3. 2013/07/04 3. [pxd talks 31]우분투 디자인 경험 (Ivo Weevers강의)

앞서 1편에서 우분투의 역사로 간략히 소개해 드린 우분투 데스크탑은 버전이 올라가면서 점점 더 나은 사용자 경험을 제공하였습니다. 그러다가 Unity(유니티) 인터페이스의 등장으로 완전히 새로운 경험을 제공하기 시작 하였는데, 이것은 여러 디바이스에 통합된 경험을 제공하기 위한 우분투의 주력 무기가 되었습니다. 그 결과로 'Ubuntu TV', 'Ubuntu for Android' 가 나왔으며, 최근에는 'Ubuntu Touch'가 공개 되었습니다.

'우분투(ubuntu)란 무엇인가?' 두 번째 편은 우분투 데스크탑의 첫 배포판인 4.10 버전부터 최근까지의 주요 버전들을 살펴 보면서 유니티 인터페이스의 등장과 특징에 대해 알아 보겠습니다. 그리고 TV와 폰, 태블릿에 적용되어 데스크탑 밖으로 나온 유니티 인터페이스에 대해 소개 합니다.



1. 데스크탑 UI의 변화


우분투 데스크탑의 첫 버전이 배포된 후 9년 동안에는 몇 가지 주요한 버전이 있었습니다. 위 그림에 표시한 여섯 개의 버전을 대상으로, 데스크탑 UI에 어떠한 변화가 있었는지 알아 보겠습니다.


1-1. Ubuntu 4.10 (Warty Warthog)

우분투 4.10은 캐노니컬 재단의 첫 번째 배포판입니다. 데비안 계열의 새로운 리눅스 배포판으로서, 사용자들에게 아무 문제 없이 리눅스의 경험을 제공하는 것을 목표로 하였습니다.


1-2. Ubuntu 6.06 LTS (Dapper Drake)

우분투의 네 번째 배포판이자 첫 번째 LTS 버전입니다. 여러 유선 및 무선 연결을 쉽게 전환하는 등의 새로운 기능들이 추가 되었으며, 밝은 오렌지색의 휴먼 테마를 적용하고 창 모서리에 라운드를 주는 등 보다 정돈된 화면을 볼 수 있습니다.


1-3. Ubuntu 8.04 LTS (Hardy Heron)

우분투의 여덟 번째 배포판이자 두 번째 LTS 버전입니다. 데스크탑 환경 GNOME을 2.2로 업데이트 했으며 Wubi라는 기능을 통해 윈도우 하위에 우분투를 설치할 수 있게 했습니다. 또한, 이전 버전인 7.10 부터 적용된 컴피즈 퓨전(Compiz fusion)을 이어 받았습니다. 이전에는 컴피즈와 베릴(Beryl)이라는 두 방법을 통해 화면 효과를 주었습니다. 하지만 컴피즈 퓨전을 통해서 정육면체 회전(Cube Rotation)이나 맥 OSX에서 볼 수 있었던 Exposé와 같은 작업 공간(Work space) 설정이 가능해 졌고, 데스크탑 창에 보다 화려하고 역동적인 트랜지션을 제공했습니다. 컴피즈 퓨전 데모영상


1-4. Ubuntu 10.04 LTS (Lucid Lynx)

우분투의 열 두 번째 배포판이자 세 번째 LTS 버전입니다. 이전과는 확연히 달라진 테마를 볼 수 있습니다. 우분투는 이 새로운 스타일을 '빛'이라는 아이디어에서 영감을 받았다고 합니다. 기능적으로는 SNS를 고려하여 설계하였기 때문에 페이스북이나 트위터, MSN, 네이트온, IMAP 메일 등의 많은 서비스들이 브라우저를 통하지 않고도 연동이 가능하게 되었습니다.


1-5. Ubuntu 11.04 (Natty Narwhal)

우분투의 열 네 번째 배포판이며 데스크탑에 유니티 인터페이스가 적용된 최초의 버전입니다. 11.04 버전은 기존 노선에서 탈피하여 완전히 새로워진 우분투의 시작을 알렸습니다. 우분투 데스크탑은 이때부터 GNOME Shell 대신에 Unity를 기본 인터페이스로 채택하였고, 우분투의 오랜 사용자들은 너무나 확 달라진 모습에 적지 않은 충격에 빠졌었습니다. 물론 데스크탑 환경을 이전으로 되돌릴 수 있게끔 정식으로 지원도 했습니다만, 많은 사용자들이 보다 향상된 GNOME 3와 우분투를 기반으로 하는 또 다른 리눅스 배포판인 Mint(민트)로 유출되는 결과를 낳기도 했습니다. 사실 UI의 낯설음 보다는 많은 시스템 자원을 요구했던 성능이 더욱 문제였습니다.


1-6. Ubuntu 12.04 LTS (Precise Pangolin)

우분투의 열 여섯 번째 배포판이며 가장 최신의 LTS 버전입니다. 이 버전의 가장 큰 특징은 HUD(헤드 업 디스플레이)라고 불리는 새로운 검색 인터페이스의 도입이였습니다.



2. Unity 인터페이스의 특징

우분투 데스크탑의 변화를 보니 2011년에 배포된 11.04 버전과 유니티 인터페이스가 매우 큰 변화의 한 축이였다는 것을 확인할 수 있었습니다. 성서로 따지면 구약과 신약 정도의 차이로 비유해 볼 수도 있을 것 같습니다.

캐노니컬과 우분투 커뮤니티가 2년 간 추진한 설계 및 엔지니어링의 결정체인 유니티는, 이전 버전에 비해 더 간단하고 쉽게 우분투를 사용할 수 있게 만들었습니다. 이는 스마트폰과 태플릿에서 영감을 받아 비주얼적으로도 풍부하고 화려한 인터페이스를 제공하였습니다. 그럼 유니티 인터페이스는 어떠한 특징을 갖고 있을까요?


위와 같이 네 항목이 유니티의 특징적인 구성요소라고 할 수 있으며 화면에서 패널과 런처, 대쉬의 위치는 다음과 같습니다.



2-1. Panel

패널은 활성화된 응용 프로그램에 대한 메뉴만을 표시합니다. 글로벌 메뉴(Global menu)라고도 불리는 이것은 모든 응용 프로그램의 메뉴를 스크린 상단에 같은 장소에 모아주는 역할을 합니다.


2-2. Launcher

맥 OSX에서 볼 수 있는 Dock 과 비슷하며 화면 측면에 고정되어서 응용프로그램의 아이콘을 올려 놓을 수 있는 런처는 3가지 기능을 갖습니다. 첫째는 응용프로그램의 실행입니다. 아이콘을 클릭하면 해당 아이콘과 연결된 응용 프로그램을 실행 시킵니다. 둘째는 실행되고 있는 응용프로그램의 시각적 표시 입니다. 위의 사진을 보면 파이어 폭스가 3가지 방법으로 표시되고 있습니다. 삼각형이 양쪽에 표시된 첫번째는 현재 실행중이며 제일 위에서 활성화 되고 있다는 상태를 알립니다. 다음 두 번째는 좌측에 하나만 표시되어 있는데 이것은 실행 중이긴 하나 제일 위에 있지 않다는 것을 알립니다. 마지막 세번째는 오픈 되어 있는 삼각형인데 이것은 다른 작업 공간에서 실행되고 있음을 표시합니다. 런처의 기능 마지막은 응용 프로그램의 스위칭입니다. 런처에 있는 아이콘을 클릭하여 화면 뒤에 가려진 해당 응용프로그램을 앞으로 전환 할 수 있습니다.


2-3. Dash

대쉬는 메뉴의 계층 구조를 탐색하는 대신에, 열고자 하는 응용프로그램이나 문서의 이름을 입력하는 필드를 제공합니다. 그리고 대쉬에서 검색을 하면 단일 로케이션에 파일, 응용 프로그램, 음악, 동영상 등을 모두 모아서 표시해줍니다. 이것은 마치 구글 사이트의 첫 페이지에서 검색을 하는 방법과 매우 비슷합니다. 대부분의 사용자가 인터넷을 시작하는 방식으로 검색을 선호하는 것처럼, 웹에서 비롯된 추세를 우분투가 적극적으로 수용한 것입니다. (여기서 말하는 인터넷 사용 패턴은 네이버가 주류인 국내 사용자 환경과는 차이가 있습니다.)


2-4. HUD


HUD는 우분투 12.04 버전에서 등장하여 Dash와 함께 응용 프로그램과 상호 작용하는 강력한 검색 인터페이스입니다. 응용 프로그램의 기능을 메뉴에서 일일이 찾지 않고, Alt키를 눌러서 HUD를 띄운 다음 수행 할 작업을 입력하는 방식입니다. 어떤 새로운 프로그램을 사용 하면서 이에 대한 기능의 종류와 위치를 적응해 나갈때는 메뉴를 하나씩 짚어 가면서 확인하는 과정이 필요할 때가 있습니다. 하지만 HUD는 검색의 방법으로 이러한 과정을 생략 시키는 인터페이스이며, 우분투 내에서 더 많은 프로그램들을 쉽게 다룰수 있도록 접근성을 넓혀 주는 장점이 있습니다.

한편, 최신 인터페이스가 왜 키보드를 이용한 CLI(Command-Line Interface)로 제공 되는가에 대한 물음이 생기기도 합니다. Dos나 터미널과 같은 CLI 방식에서 GUI(Graphical User Interface) 환경이 대세가 되면서 생긴 가장 큰 이득은 보다 많은 사람들이 쉽게 컴퓨터를 쓸 수 있게 되었다는 점입니다. 복잡한 명령어를 알지 못해도 컴퓨터로 작업을 하고 시스템을 관리 할 수 있게 된 것이지요. 그러면서 CLI 조작 자체가 점점 전문가들의 영역처럼 되어 버렸는데, 우분투의 HUD는 이러한 경계를 느슨하게 만들면서 CLI의 자유도를 경험해 볼 수 있게 만드는 것 같습니다. 또한 뒤에서 소개할 우분투 태블릿에서는 이 HUD 인터페이스가 음성 인식과 결합되고 있기도 합니다. HUD의 데모 영상



3. Unity 인터페이스의 확장과 모바일 UI

2011년, 캐노니컬의 설립자인 마크 셔틀워스는 다음과 같이 예고했습니다. “일상적인 컴퓨터 사용자는 점점 더 폭넓은 디바이스에 걸쳐 컴퓨팅을 이용하기 시작했다”, “캐노니컬은 우분투를 휴대폰과 태블릿, 스마트 스크린 등 모든 개인용 컴퓨팅 장치에 적용하고자 한다.”

이 말은 곧 현실이 되었고, 우분투 TV 개발을 시작으로 유니티 인터페이스를 데스크탑 밖으로 확장시키며 우분투 인터페이스의 통합된 경험을 제공하는데에 박차를 가합니다.


3-1. Ubuntu TV


CES 2012에 선보인 시연 영상을 다음 링크에서 확인할 수 있습니다.
우분투 TV 프로토타입


3-2. Ubuntu for Android


우분투 블로그 첫 탄에서 안드로이드 OS가 리눅스 커널을 기반으로 한다고 했었습니다. 때문에 안드로이드 스마트폰에서 안드로이드와 함께 리눅스를 구동 시키는 것이 가능했는데, 우분투도 'Ubuntu for Android'라는 명으로 프로젝트를 진행하였습니다. 위의 그림과 같이 스마트폰을 독에 꼽으면, 모니터와 키보드, 마우스 등의 데스크탑 입출력 장치들과 연결되어서 일반 데스크탑 처럼 사용할 수 있습니다.


또한, 안드로이드와 우분투 데스크탑은 서로 긴밀하게 연동되어서 SMS 메시지를 모니터 화면에서 확인 하고 답장 할 수 있습니다. 마찬가지로 전화도 걸고 받을 수 있습니다.


3-3. Ubuntu for Touch


우분투 터치는 스마트폰 및 태블릿 PC의 운영체제를 통칭하는 뜻으로서 현재 'Ubuntu for Phone' 과 'Ubuntu for Tablet' 이 발표 되었습니다.


Ubuntu for Phone


2013년 1월 3일, 캐노니컬은 모바일 운영체제인 'Ubuntu for Phone' 을 발표합니다. 이전에 소개한 'Ubuntu for Android' 와의 차이점은 별도의 입출력 장치를 필요로 하지 않고 스마트폰에 맞춤화 되어 모바일 환경에 최적화된 UI를 제공한다는 점입니다. ('Ubuntu for Phone'도 독에 결합하여 데스크탑 처럼 사용 가능합니다.) 이를 토대로 멀티태스킹을 강화하였으며 화면 전환시 iOS, 안드로이드, 윈도우폰 OS 보다 더욱 역동적인 모습을 보여준다는 평을 받고 있습니다. 그리고 이 UI의 가장 큰 특징은 디바이스의 하드웨어 키를 최대한 배제하고 터치 제스처 만으로 거의 모든 기능을 조작할 있도록 설계 되었다는 점입니다.

화면의 왼쪽 가장자리를 스와이프 하면 유니티 데스크탑에서 보았던 런처가 나타납니다. 이곳에는 좋아하는 앱들을 올려 놓고 빠르게 실행 할 수 있으며, 어떤 상황에서든 작동하기 때문에 앱과 앱을 신속하게 전환할 수 있습니다. 그리고 왼쪽 전체에서 오른쪽으로 스와이프 하면 실행중인 모든 앱들이 표시됩니다. 런처 내에는 대쉬도 그대로 있습니다. 대쉬 위치를 커스텀 할 수 있는지는 모르겠지만, 그림 처럼 제일 아래로 이동한 이유는 한 손 조작의 편의성을 고려한 것 같습니다. 또한, 화면 오른쪽을 스와이프 하면 이전에 실행한 앱으로 전환 됩니다. 스마트폰을 쓰다 보면 여러 종류의 앱을 실행하게 되는데, 이와 같은 멀티태스킹 방식은 앱들 간의 빠른 전환을 가능하게 합니다.

UI model - Phone


'Ubuntu for Phone'의 특징을 정리하면 다음과 같습니다.

1. 제스처 조작의 확대
2. 홈 화면 or 잠금 화면 탈피
3. 기능을 갖는 모든 화면의 모서리

제스처 방식과 각 화면의 모서리가 어떠한 기능을 갖는지는 다음 링크에서 자세히 확인할 수 있습니다.
- 2013 Trailer
- Industry proposition


Ubuntu for Tablet

우분투 태블릿 UI 만의 특징은 'Side Stage'라 불리는 멀티태스킹 입니다. 이 기능을 통해 폰 용 앱과 태블릿 용 앱을 동시에 실행시킬 수 있으며, 위의 그림 처럼 영상 통화를 하면서 문서 작업을 진행하고, 웹 서핑을 하면서 메모를 할 수 있습니다. 또한, HUD 인터페이스가 음성인식으로 작동하면서 보다 간편한 조작을 가능하게 합니다. Ubuntu for Tablet 소개영상

UI model - Tablet



마치는 글

지금까지 우분투의 탄생 배경과 특징을 시작으로 데스크탑 버전의 변천사를 알아 보았습니다. 그리고 유니티 인터페이스에 포커스를 잡고 TV와 모바일로 확장된 모습을 살펴 보았습니다. 2달 전에 출시된 우분투 데스크탑 13.04 버전은 그래픽 처리를 포함하여 전반적인 시스템 속도가 대폭 향상 되어 좋은 반응을 얻고 있다고 합니다. PC에서부터 차근히 쌓아온 사용자 경험을 폰과 태플릿, TV로 이어 나가는 우분투. 유니티를 필두로 하나의 생태계를 구축해 나가는 우분투의 행보를 기대하며 이 글을 마칩니다.

[참고##우분투##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 6
Ad Test...
2012.07.13 11:23

[openUI] Lazy touch scroll 오픈 소스 UI


예전에 소개해 드렸던 아이폰,아이패드에서 웹페이지를 보다 쉽게 스크롤 할 수 있는 Lazy touch scroll UI 스크립트를 오픈 소스로 github에 올려두었습니다. 모두가 더 게으르게 모바일 웹을 사용하는데 도움이 되었으면 좋겠습니다. :)

lazy touch scroll 간단 설명 : 스크린의 좌우 가장자리에 가상의 스크롤바를 만들어서 한 손으로도 쉽게 page up,down을 할 수 있습니다. 터치 휠 기능으로 세밀하게 또는 빠르게 스크롤을 할 수 있으며, 이미지가 잘려보이지 않게 똘똘하게 페이지를 내려줍니다.
 



개발자님, 함께 더 좋아질 수 있게 도와주세요.

https://github.com/taekie/lazy-touch-scroll
github에 자바스크립트 소스를 공개하였습니다. 함께 잘 다듬고, 안드로이드 같은 다른 플랫폼에서도 동작할 수 있도록 도와주세요. 



개인 사용자는 북마클릿을 만들어 사용할 수 있습니다. 

따라하기 동영상 



북마클릿 만들기
1. 아래 코드를 선택 복사합니다.
2. 현재 페이지를 LazyScroll 이란 이름으로 북마크 합니다.
3. 북마크를 편집합니다. 기존 주소를 지우고 복사한 코드를 붙여넣습니다. 
javascript:function%20touchscroll()%7Bvar%20d=document,z=d.createElement('scr'+'ipt'),b=d.body;try%7Bif(!b)throw(0);d.title='(touch)'+d.title;z.setAttribute('src','http://informationredesign.com/lab/lazy_touch_scroll.js');b.appendChild(z);%7Dcatch(e)%7Balert('Please%20wait%20until%20the%20page%20has%20loaded.');%7D%7Dtouchscroll();void(0)


웹 서비스 운영자 & 설치형 블로그 사용자는 사이트에 한 번 시험 적용해 보세요. 
 

아래 코드를 블로그 스킨 html 아래쪽에 추가해주면 iOS 단말에만 추가적으로 터치 스크롤 스크립트가 추가됩니다. 테스트 후 실제 적용 시에는 스크립트 파일을 서버에 복사해서 사용하시면 됩니다.
<script>
if (navigator.userAgent.match(/iPhone|iPod|iPad/)) { 
d=document,z=d.createElement('script'),b=d.body;
z.setAttribute('src','http://informationredesign.com/lab/lazy_touch_scroll.js');
b.appendChild(z);} 
</script>
지금 보시는 pxd 블로그에도 적용되어 있습니다. 아이패드로 pxd 블로그를 보면 쉽게 page up,down을 할 수 있어요. 아이폰으로 보면 모바일페이지로 넘어가니 하단의 [pc화면] 으로 전환해보면 테스트 해 볼 수 있습니다.

이 기능이 적용 되면 좋을 만한 사이트를 알려주세요. 함께 떼로 요청하면 들어 줄지도 모르잖아요 :) 개인적으로 블로그,웹툰,모바일 뉴스 사이트에 적용되면 좋겠습니다. 밀어서 스크롤하는거 너무 귀찮거든요. 안 귀찮으셨어요?


[참고##redesign##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 5
Ad Test...
2012.04.13 23:13

아이폰,아이패드를 위한 Touch Scroll UI

아이폰,아이패드의 터치 스크롤은 정말 직관적입니다. 하지만 자주 쓰면 힘들고 귀찮습니다. 화면이 큰 아이패드에서는 더 힘들어요. 컴퓨터에서는 스페이스바로 페이지 단위로 이동하거나 마우스 휠로 손가락만 까닥하면 스크롤이 되는데 실질적인 이동 거리도 늘어나고 손목이랑 팔의 근육도 사용해야 합니다.

그래서 자주 사용하는 웹페이지에 가상의 스크롤 버튼을 만들기로 했습니다.
우선 두가지 원칙을 정했는데


1. 버튼이 충분히 커서 누르기 쉬울 것
2. 버튼이 컨텐트를 가리거나 눈에 거슬리지 않을 것

서로 모순되어 불가능해 보이는데요. 버튼을 투명하게 하고 고정된 위치에 배치하는 것으로 해결 했습니다.


page up,down 버튼 배치


그 다음은 어떻게 버튼을 배치할 것인가인데, 기본적인 page up,down 버튼 영역을 기존 앱들이 하는 방식을 참고하여 생각해봤습니다.


1.은 만화보기 앱 같은데서 사용하는데요. 웹페이지의 경우 하단의 컨텐트 링크를 클릭할 수 없게 되고, 또 상하가 따로 떨어져 있어 사용이 불편하기 때문에 배제하였습니다. 스크롤을 내리다 다시 올려보는 경우가 많거든요.

2. 대부분 페이지의 좌우 영역에 여백을 두고 있으니까 괜찮은 선택입니다. 하지만 한 손으로 쥐고 볼 때 사용이 불편하기 때문에 탈락.

3. 사실 킨들을 사용하고 있어서  처음 부터  이런 구조를 생각하고 있었습니다. 왼손이나 오른손 한 손으로 쥐고 있어도 쉽게 위 아래로 스크롤 할 수 있습니다. 빈도가 높은 page down의 영역을 더 크게 하고요.
그리고 아주 작게 페이지의 끝으로 바로 이동하는 영역을 두었습니다. 

Touch Scroll Wheel


페이지 단위 스크롤이 쉬워지고 나니 이제는 또 한 손으로 미세하게 스크롤을 조절하고 싶어졌습니다. page down을 했는데 이미지가 중간에 걸리게 잘리면 다시 조금 올려서 이미지를 보는 경우가 많았거든요. 손을 떼서 다시 밀어 올리려니 귀찮았습니다.
그래서 터치 영역을 터치패드의 스크롤 휠처럼 사용할 수 있도록 했습니다. 탭하면 페이지 이동 버튼으로 동작하고 터치 한 채로 밀면 스크롤 휠로 동작하는 거죠. 한 손으로 쥐고 엄지로 조작하는 경우가 일반적이라 작은 조작으로도 많이 움직이게 했습니다. 5배 정도로 하니까 적당히 빠르고 또 적당히 세밀한 이동도 가능해졌습니다.

Fast Direct Scroll


스크롤도 되니 이제는 또 원하는 위치로 더 빨리 이동하고 싶어졌습니다. 스크롤바의 thumb을 잡고 바로 이동 하듯이요. pdf 뷰어 앱 중에 thumb이 있는 스크롤바를 제공하는 것이 있는데, 스크롤바가 표시되면 눈에 거슬리니까 화면을 탭해서 스크롤바를 보이거나 가리게 모드를 전환합니다. 이런 방식은 귀찮고 아름답지 않습니다.
애플의 비디오 scrubber bar(seek bar)에서 사용하는 썸을 잡고 움직이다가 아래로 내려서 움직이면 미세조정이 되는 패턴을 반대로 차용했습니다. 테두리 부분을 touch and swipe 하면 상대적인 휠 스크롤이 되다가 손가락을 안쪽으로 옮기면 전체 페이지의 절대적인 위치로 바로 이동합니다. 스크린에서의 손가락 위치가 스크롤 바의 썸처럼 전체 페이지 길이 중에서 현재 페이지 위치가 됩니다.


Image Aware Pgdn


그래도 뭔가 좀 아쉬워요.
지금 이 블로그를 PC에서 읽고 있다면 글을 내릴 때 키보드의 페이지 다운(또는 스페이스바) 사용하나요? 아니면 마우스 휠을 사용하나요? 
전 게을러서 스페이스바를 주로 사용했는데 요즘은 마우스 휠을 더 자주 사용하더라구요. 톡 톡 키보드 누르는 게 더 편한데 왜 휠을 사용할까 생각해봤는데요. 요즘 블로그에 사진이 많아서 그냥 페이지 다운을 하면 사진이 중간에 잘려서 사진 전체가 보이게 스크롤을 다시 올리더라고요. 아하! 
그런 단순 반복적인 작업을 사람이 하면 안되지요. 페이지 다운 하다 중간에 이미지가 걸리는지를 확인하여 이미지가 모두 보이게 스크롤 위치를 조절하도록 했습니다.

일반적인 페이지 다운에서도 텍스트 글 줄이 중간에 걸릴 수 있기 때문에 정확히 window height 만큼을 내리지 않고  조금 위를 더 보여주도록 하고 있는데요. 간혹 이런 고려를 하지 않고 맨 마지막 줄이 중간에 걸려 글자의 윗쪽 반만 보이고 페이지 다운을 하면 글자의 아랫쪽 반만 보여서 결국 읽을 수 없게 만드는 몰상식한 앱도 있더라구요. 텍스트뿐 아니라 이미지도 잘리지 않게 고려해주면 편합니다.







[참고##redesign##]










팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 4
Ad Test...
2011.07.15 18:29

사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사

UI 디자이너에게 표준을 지키는 일은 중요하다.
그러나 지난 번 글(UI 디자이너는 표준을 지켜야 하는가?)에서 밝혔듯이 표준을 지키는 일이 그리 쉽지는 않다. 하지만 많은 사람들이 이미 따르는 표준이라면 그 중요성은 배가된다. 특히 자신이 개발하고 있는 플랫폼의 표준을 익히고 따르는 것이 매우 중요하다. 이해를 돕기 위하여 4회에 걸쳐서 Mac OS 표준, Windows OS 표준, 그리고 ISO(International Standard Organization) 표준의 역사에 대해서 알아보기로 한다.

1. 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사
2. 마침내 혼란을 극복한 Windows7 - Windows User Experience Interaction Guidelines의 역사
3. 그들만의 리그, 우울한 ISO UI 표준 - ISO 13407 & ISO 9241의 역사
4. 왜 어떤 가이드라인은 실패하는가? - 말보다 행동이 중요하다

참고 UI 디자이너는 표준을 지켜야 하는가? (http://story.pxd.co.kr/317)
안드로이드 UI/GUI 가이드라인 (http://story.pxd.co.kr/162)
Windows 7 Design Principles (http://story.pxd.co.kr/13)



1. 사용자의 80%만을 위해 디자인하라 - Apple Human Interface Guidelines의 역사

UI 개발자에게 표준을 따르는 일은 매우 중요하다. 특히 운영체계(Operating System)의 표준을 따르지 않으면 사용자에게 많은 혼란을 일으키기 때문에 치명적인 불편을 안겨줄 수 있다. 그렇기에 각 OS에서 제공하는 가이드라인을 숙지하는 것이 꼭 필요한 일이다.

하지만 이 Apple의 가이드라인은 여느 OS의 가이드라인과는 다른 위치를 차지하고 있다. UI에 관해 변변한 서적이 없던 시절, 유일하게 교과서적으로 이론을 배울 수 있을 뿐만 아니라 실무적으로 필요한 지식과 팁을 한 번에 배울 수 있는 서적이었기 때문이다. 하지만, 이제 볼 수 있는 책이 많아진 오늘날에도, Apple이 차지하고 있는 UI의 독보적 탁월함에 동의하는 사람이라면, 설령 자신이 Mac OS에서 UI를 개발하지 않더라도, UI 디자이너라면 언젠가는 한 번 꼭 보아야할 책이라고 생각하여 소개한다. (Apple의 기업 문화나 UCD와의 관계에 관해서는 Apple 디자인 성공의 비밀과 UCD)참고.

Apple은 자신의 OS에 대한 가이드라인을 Addison-Wesley와 함께 1985년부터 출판하고 있다. 맥 OS의 역사와 함께 Apple 가이드라인의 역사를 살펴보고자 한다.


1985년 Human Interface Guidelines: The Apple Desktop Interface

Human Interface Guidelines: The Apple Desktop Interface

1984년 1월 24일 애플의 OS인 System 1.0 이 출시되고, 1985년 4월에 System 2.0 이 출시된다. 처음 1985년에 출판된 가이드라인은 찾을 수가 없고 pxd 도서관에 소장하고 있는 것은1987년 11월 판이다. 1987년 11월이면 System Version 3.3 이고, 책에 언급하고 있는대로 Finder Version 5.5를 기준으로 설명하고 있는 책이 되겠다. 다행히 책 뒷면에 보면 원래 책 디자인을 커버만 다르게 한 것이고, 내용은 동일하다고 설명하고 있다.

책의 서문을 보면 매우 감동적이다.

서문에서 데스크탑 소프트웨어의 장점이 '일관성'을 유지해서 사용자가 쉽게 학습할 수 있게 하는 것이 최대 장점이므로 이 가이드라인을 통해서 일관성을 유지하도록하고, 예외적으로 이 가이드라인을 따르지 않으면서도 좋은 소프트웨어들이 있긴 하지만, 충분한 이유가 있을 때만 그러한 예외를 추종하도록 강조하고 있다.

제1장 '철학' 부분에서 애플은 사용자를 어떻게 보는가에 대해 설명한다
People aren't trying to use computers - they're trying to get their jobs done.
그러나 사람들의 일이란 얼마나 창조적이고 예술적인가에 대해 충분히 설명하고 있다.

1장에서 애플이 제시하는 10가지 디자인 원칙을 옮겨보면,
Mataphors from the real world
Direct manipulation
See-and-point (instead of remember-and-type)
Consistency
WYSIWYG (What you see is what you get)
User Control (not computer)
Feedback and dialog
Forgiveness
Perceived stability
Aesthetic integrity

Principles of graphic communication 부분에서는, Visual Consistency, Simplicity, Clarity 등을 별도로 제시하고 있다. 흥미로운 것은 '프로그래머'를위한 철학도 있는데, Modelessness, Event loop(언제나 사용자 이벤트를 받아들여라), Reversible actions, Screen(화면을 중시해라), Plain language가 들어있다. 아마도 당시에는 이런 부분들에 대한 정책은 프로그래머들이 정한 듯 하다. (물론 plain language를 위하여 전문 writer를 고용하라는 말도 들어있다)

또 1장에서는 User testing과 장애인에 대한 고려 사항에 대해서도 설명하고 있다.

2장부터는 각 화면 요소와 구성을 하나씩 설명한다. 특히 흥미로운 부분은 다이알로그 박스에 들어있는 Cancel-Ok 버튼 순서에 관한 설명인데, 이 부분은 설명이 기니까 별도의 기사로 쓸 계획이다.


1992년 Macintosh Human Interface Guidelines

Macintosh Human Interface Guidelines

1987년과 1992년 사이에 애플에서는 'Inside Macintosh' 시리즈를 통하여 각 부분 부분별로 Guideline에 대하여 설명하여 왔던 것 같다. 그리고 Human Interface Notes라는 것도 출판했다고 하는데 전혀 찾을 수가 없다. 사람들에게 가장 대중적으로 읽히고, 또 오늘날 Guideline계의 교과서라고 할 수 있는 Macintosh Human Interface Guidelines는 1992년에 처음 출판되었다. (아마존에서는 2판 판매)

이 책은 맥의 중흥기랄수 있는 System 7 (1991년 5월 출시)을 대상으로 하고 있다. System 7은 그 중간에 PowerPC 칩 적용으로 맥이 본격적으로 많은 사람들의 사랑을 받게된 시기이기도 하다.

 

서문에서 디자인 원칙으로
Mataphors
Direct manipulation
See-and-point
Consistency
WYSIWYG (What you see is what you get)
User Control
Feedback and dialog
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness

이렇게 11가지를 설명하고 있다. 이전의 10개에 프로그래머용 철학 중 Modelessness를 추가하여 11가지가 된 셈이다.

글 서두에 거의 유일한 '실무 교과서'였다고 했듯이, 책의 전반부(Part One)는 다양한 원칙, 팁, 프로세스 등으로 가득차있다. 사용자 관찰 10단계, 복잡성 대처법, 인터페이스 확장법, 시장 요구 대응법 등을 포괄하고 있다. 특히 80% 솔루션에 대한 이야기가 처음 등장한다. 사용자의 80%만 만족시키려고 하면, 매우 단순한 제품이 나온다는 뜻이다. 나머지 20%까지 만족시키려는 순간 망한다는 말이다. 1992년에도 그들은 이걸 알고 있었다.

Part Two에서는 인터페이스의 다양한 요소들에 대해 설명한다. 앞의 책에 비해 언어 부분이 추가되었으며, 여러 리소스들을 부록에 포함시키고 있다. (당시로서는 매우 소중한 리스트였다)


2000년 Apple Human Interface Guidelines

Apple Human Interface Guidelines

2001년 3월 24일 정식 출시된 Mac OS X는 오랜 동안 클래식 맥 OS의 불안정함을 깬 역작이라고 할 수 있다. 초기 골수 사용자들로부터 반대도 많았다고 들었지만 한단계 도약이었음에 틀림이 없다. 디자인면에서는 이전부터 하드웨어에서 사용하던 반투명 디자인을 화면에 옮겨 'Aqua'를 시도하였던 것으로 유명하다. 알파와 베타 버전이 나오던 기간에 이를 위한 가이드라인은 여러 가지 이름으로 불렸다. 2000년 1월 20일에 나온 'Aqua Layout Guidelines'는 'Adopting the Aqua Interface', 'Inside Mac OS X: Aqua Human Interface Guidelines', 등을 거쳐 결국 지금의 이름인 'Apple Human Interface Guidelines'가 되었다.

이 때부터 책으로 나오지 않았기 때문에 온라인에서 언제나 접할 수 있는 장점이 있는 반면 예전 버전은 쉽게 찾을 수 없는 아쉬움이 있다. Pxd 도서관에는 2003년에 만들어진 (OS X 10.3 정식 발표 이전에 배포한)가이드라인 출력물을 보관하고 있다(사진).

 

이 책에서는 11개의 디자인 원칙으로
Mataphors
See-and-point
Direct manipulation
User Control
Feedback and Communication
Consistency
WYSIWYG (What you see is what you get)
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness

등 같은 항목을 약간의 용어를 달리하고, 순서를 달리하고, 설명 분량을 줄여서 기술하고 있다. 또한 더 간략해지긴 했지만, 각종 방법들에 관해 설명한다.

이 시기 책에서 처음 'Experience' 라는 말을 사용한다. 'The Macintosh Experience' 에 대해 설명하면서, 포장, 설치 등에서 일관된 경험을 요구하고 있다. 이 버전부터 (이전 버전에서 열을 내어 설명하던) OK-Cancel 로직 부분이 대거 빠지게 된다. (그림 속에 아주 간단히 나타내는 정도) 그리고 재미있던 어펜딕스들이 대거 빠져 나갔다.


2006년 Apple Human Interface Guidelines

Pxd에서 보유중인 2006년 10월 3일자 가이드라인에는,'좋은 소프트웨어의 특징(Characteristics of Great Software)'라는 부분이 추가되었는데, High Performance, Ease of Use, Attractive Appearance, Reliability, Adaptability, Interoperability, Mobility가 그것이다.

 

또한 이 책에서는 12개의 디자인 원칙으로
Mataphors
Reflect the User's Mental Model
Explicit and Implied Actions
Direct manipulation
User Control
Feedback and Communication
Consistency
WYSIWYG (What you see is what you get)
Forgiveness
Perceived stability
Aesthetic integrity
Modelessness
를 제시하고 있다.

Macintosh Experience 파트에서 '포장'이나 '인스톨'부분은 다 뒤로 돌려 버리고, 그냥 소프트웨어적인 부분 설명하는 것을 맨 앞에 두었다.

Pxd에서 보유중인 2008년 1월 15일자 가이드라인에는, 2007년 10월 26일에 출시된 레오파드 Mac OS X v10.5 업데이트 내용을 반영하였으며, 이 즈음부터 책(PDF) 표지에 파란색 글씨로 'User Experience'라는 말이 들어갔다.


2011년 Apple Human Interface Guidelines

Apple Human Interface Guidelines

마지막으로 현재(2011년 7월) 인터넷 (애플 개발자 라이브러리)에서 다운로드 받을 수 있는 버전은 2011년 5월 31일 판이다. 트랙패드에서의 동작 인식에 관한 것이 추가되었다. 이전 책에서 사용자 입력에서 마우스, 트랙볼, 스타일러스 펜만 언급하였다면 트랙패드가 하나의 부분으로 추가되어, 핀치나 three finger swipe, four finger swipe 등에 대해 설명하고 있다.

Metaphors, Mental Model(Familiarity, Simplicity, Availability, Discoverability), Explicit and Implied Actions, Direct Manipulation, See and Point, User Control, Feedback and Communication, Consistency, WYSIWYG (What You See Is What You Get), Forgiveness, Perceived Stability, Aesthetic Integrity

이상으로 간단(?)하게 Apple Human Interface Guideline의 역사를 살펴보았는데, 예전 책을 들쳐보며 차이점을 찾은 것은... 사실 당장은 최영완님의 OK-Cancel에 관한 글을 읽다가 시작한 일인데, 개인적으로 재미있어서라기 보다는 누군가 한 번쯤 해 두면 다른 사람들이 편리하게 사용할 수 있을 것 같아서이다.

다음 글에서는 '2. 마침내 혼란을 극복한 Windows 7 – Windows User Experience Interaction Guidelines의 역사'에 대해서 살펴볼 것이다.

 

참고

iOS(iPhone,iPad,iPod)에 관심이 없더라도 꼭 보길 권한다.
iOS Human Interface Guidelines (Web) - 2014.01.11 수정함
iOS Human Interface Guidelines (PDF)


[참고##가이드라인##]



팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 3
Ad Test...
2011.06.09 15:34

아이폰,아이패드에서 나눔고딕으로 웹페이지 보기


나는 애플고딕이 싫어요!
MacOS와 iOS에 기본 한글 폰트로 사용되는 애플고딕은 너무 장식이 많아서 보기 불편합니다. 애플 UI의 가장 치명적인 단점은 바로 이 애플고딕입니다. 물론 아마존 킨들의 한글 폰트에 비하면 무난한 편이지만요. 저는 가급적 애플고딕을 나눔고딕으로 대체해서 사용하려고 하는데 iOS 4.3부터는 jailbreak해도 기본 폰트를 변경할 수 없더라구요.


모바일 사파리 웹폰트 지원

그나마 다행히 사파리 브라우저에서는 애플고딕을 안 볼 수 있는 방법이 있습니다. 모바일 사파리가 css3 웹폰트를 지원해서 아이폰이나 아이패드에서 애플고딕을 다른 한글 폰트로 대체할 수 있습니다. 고맙게도 모빌리스에서 웹폰트로 변환한 나눔고딕을 호스팅해 주고 있고요. 
 하지만 추가로 700KB정도의 폰트 파일을 추가로 다운로드 받아야 하므로 블로그나 웹사이트를 운영하는 쪽에서 강제로 적용하는 것은 추천하지 않습니다. 물론 캐슁이 되어서 매번 다운받지는 않지만요.

6/15추가
네이버,다음,티스토리 블로그에서 나눔고딕으로 보기,다음체로 보기를 옵션으로 제공해도 괜찮을 것 같습니다. 쿠키로 옵션을 저장해서 다음번 부터는 항상 애플고딕대신 웹폰트로 보게되는 거죠. 캐쉬가 남아 있으면 로딩없이 동일하게 바로 보여집니다.

저처럼 애플고딕이 너무 꼴 보기 싫은 분은 아래 북마클릿을 이용해서 폰트를 변경 할 수 있습니다.
아이패드에만 되네요.

javascript:function fontswap(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body;try{if(!b)throw(0);z.setAttribute('src','http://informationredesign.com/ios/font.php?u='+encodeURIComponent(d.location.href));b.appendChild(z);}catch(e){alert('something wrong.');}}fontswap();void(0)


이번에 크롬오에스는 한글 기본 폰트를 나눔폰트를 사용한다고 하더라구요. 혹시나 스티브잡스한테 메일도 보내보고 했는데 뭐 어떻게 좀 폰트 좀 바꾸게 할 수 없을까요?








[참고##애플고딕##]
 

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 2 Comment 3
Ad Test...
2010.10.29 15:20

[UI 디테일] 미투데이의 Family UI 비교 – 웹, iOS 앱, 안드로이드 앱을 중심으로



Family UI의 정의
'Family UI'는 자동차 업계에서 사용되는 Family Look 이라는 단어에서 인용한 것으로 한 브랜드에서 나온 모델들에 브랜드 정체성을 부여해주는 디자인 요소를 말합니다. Family Look을 적용한 디자인은 모델이 다르더라도 특정 회사의 제품이라는 것을 바로 구별해 낼 수 있어서 브랜드 정체성을 강조해주는 효과와 함께 향후 구매력에 영향을 준다고 합니다.[각주:1]


미투데이의 Family UI 비교
웹, iOS 앱, 안드로이드 앱 미투데이를 사용하면서 느꼈던 Family UI 의 차이점을 디테일한 면 위주로 비교해 보았습니다. 전반적으로 미투데이는 웹, iOS 앱, 안드로이드 앱을 일괄적으로 가져가기 위해서 애를 쓴 모습이 보입니다만, 이 글은 차이점에 대해서만 기술함을 밝혀둡니다.
(*미투데이는 친구들과 실시간으로 이야기를 나눌 수 있는 150자 마이크로 블로그입니다. 자세한 설명은 여기에서 확인하세요.) 
 
1. 아이콘
미투데이의 아이콘중에서 '찾아보는' 이라는 아이콘이 있습니다. [그림1]에서 '찾아보는'은  키워드를 이용한 검색 기능을 제공하는데, 같은 레이블의 아이콘임에도 불구하고 아이콘을 서로 다르게 표현하고 있음을 알 수 있습니다. 실제 기능을 보면 좌측에 있는 '찾아보는'은 내가 등록한 키워드 위주로 보여주는 역할을 수행합니다. 우측에 있는 '찾아보는'은 키워드를 보여주기는 하나 '검색 기능'이 있기 때문에 다른 아이콘을 쓰고 있습니다. 다른 기능이라면 아이콘만 다르게 할 것이 아니라 레이블을 변경해야 하지 않나 생각합니다.


[그림1]
'찾아보는' 아이콘의 차이 (- 웹, - iOS 앱)

그 다음으로 '프로필'을 나타내는 아이콘을 보시겠습니다. [그림2]를 보시면 좌측에 있는 프로필과 우측 옵션 메뉴 키에 있는 프로필이 레이블은 같은데 아이콘을 다르게 표현하고 있습니다. 내용을 파악해보면 좌측에 있는 프로필은 엄연히 보면 프로필 설정 기능을 수행하며, 우측에 있는 프로필은 프로필 확인으로 해석할 수 있습니다. 마찬가지로 같은 레이블인데 다른 기능을 수행하므로 아이콘 뿐 아니라 레이블을 변경해야 할 것 같습니다.


[그림2]
프로필 아이콘의 차이 (- 웹, - 안드로이드 앱)

[그림3] 을 보시면 우측의 '사람찾기' 아이콘을 웃는 아이콘으로 표현하고 있습니다. 그렇다면 좌측의 아이콘도 과연 사람찾기일까요? 좌측의 아이콘은 아이콘을 변경할 수 있는 아이콘입니다. 이 상황에서는 좌측의 아이콘을 다른 아이콘으로 변경하는 것이 좋을 것 같습니다.


[그림3]
사람찾기 아이콘의 혼용 (좌,우 iOS 앱)

2. 레이블 
자 이제 레이블을 보시겠습니다. [그림4]를 보시면 좌측의 '댓글달기' 버튼과 우측의 '댓글쓰기' 레이블은 같은 기능을 수행합니다. 하지만 레이블의 차이가 있습니다. '쓰기' 버튼과 '올리기'버튼도 사실은 같은 기능을 수행합니다만 레이블의 차이가 있습니다. 물론 UI Flow 상으로는 문제가 없습니다만, 레이블을 통일시켜주는 것이 좋을것 같습니다.


[그림4]
레이블의 차이 (- 웹, - iOS 앱) 


3. 레이아웃
이번에는 레이아웃을 보시겠습니다. [그림5]번을 보시면 좌측의 글을 올린 날짜, 시간은 오른쪽 정렬로 되어있는데, 우측의 글을 올린 날짜, 시간은 왼쪽 정렬로 되어있습니다. 이때에는 두개를 통일시키는 것이 일관된 경험을 줄 수 있겠지요.
또한 날짜 시간 표현방식도 자세히 보시면 미묘하게 다름을 알 수 있습니다. 차이점이 보이시나요?

또한 아래 이미지 표현방식도 차이가 있습니다. 아이폰 앱에서는 한줄에 2개씩 보여주는데, 안드로이드 앱에서는 한 줄에 6개씩 보여줍니다.
* 추가: 아이폰에서 미투한 사람이 몇명이 기준인지는 모르겠습니다만, 많아질 경우 한줄에 5개씩 보여짐을 확인했습니다. 그래도 일관된 UI/GUI는 아니군요.


[그림5]
레이아웃의 차이 (- iOS 앱, - 안드로이드 앱)
 
4. 네비게이션
전체 네비게이션도 OS에 따라 차이가 있습니다. [그림6]을 보시면 좌측 안드로이드 앱에서는 홈(App dashboard) 화면이 있어서 어디를 들어가고 싶을때 홈(App dashboard) 화면을 거쳐서 이동해야 합니다. 하지만 iOS 앱에서는 하단 탭에 자기가 보고 싶은 카테고리 4개를 선택하여 구성할 수 있습니다. 이 차이점은 안드로이드 폰과 아이폰의 태생적인 차이점 일 수도 있겠지만, 한 회사의 서비스이니만큼 어느정도는 일관성을 지켜주는것이 좋겠다고 생각합니다.

[그림6] 네비게이션의 차이 (- iOS 앱, - 안드로이드 앱)

5. 그외에...
미투데이의 '화화'님께서도 iOS의 미투데이와 안드로이드 미투데이 앱의 사용상의 차이점을 기술 해주셨습니다. 작성한 글을 롱탭 했을때 UI가 다르다는 점을 기술하고 있습니다.



정리하며…
다음과 같이 미투데이의 웹, iOS 앱, 안드로이드 앱을 비교해 보았습니다. 
물론 미투데이의 웹 + iOS 앱 + 안드로이드 앱을 모두 사용하는 사람들은 많지 않을수도 있습니다. 그러나 한 서비스를 사용하다가 다른 서비스로 이동하더라도 동일한 경험을 제공하도록 하는것이 사용성 및 서비스의 새로운 가치 창출을 위해서는 꼭 필요하다고 생각합니다. 동일한 경험을 제공하되 각각의 플랫폼의 성격에 따라 최적화된 UI가 나오는것이 좋지 않을까요? 물론 그렇게 하는것이 쉽지는 않을 것입니다. 여러번의 시행착오와 개선이 필요하겠지요. 미투데이는 충분히 잘하고 있고, 잘하고 있기 때문에 더 아쉬운 점을 찾게 되는 것 같습니다. :)


[참고##UI 디테일##]


  1. HCI 2009 학술대회 '멀티플랫폼에서 Family UI의 적용에 대한 사례연구'에서 인용 [본문으로]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 1 Comment 3
Ad Test...