1차로 티스토리 관리의 센터부분과 에디터 부분이 오픈되었고 추후 2주에 걸쳐서 점진적 오픈이 될 예정입니다.
크게 달라진 부분은 다음과 같습니다.
1. Flexible Layout 도입
기존에 정적 레이아웃을 가진 관리화면에서 보다 데스크탑 어플리케이션스러운 동적 레이아웃으로 바뀌어 화면 변화를 보다 효율적으로 수용할 수 있는 구조로 바뀌었습니다. 사용자와의 인터렉션이 많은 관리 화면이기 때문에 전통적인 웹의 레이아웃보다는 데스크탑의 어플리케이션과 같은 유연한 레이아웃이 훨씬 더 효율적이라 생각됩니다.
2. 센터 요소 편집
센터에 나오는 요소들에 대한 편집이 가능하졌습니다. 센터에서 보여줄 요소를 선택하거나 위치를 원하는데로 배치하는 것이 가능합니다. 개인적으로 블로그 방문 통계등이 항상 궁금한데 센터 상단에 유입 경로, 유입 키워드, 방문자 통계등의 컴포넌트를 배치해놓으니 한눈에 볼 수 있어서 좋네요.
3. 에디터 개선
다음 카페에 적용되었던 '다음에디터'(구 파워에디터)가 적용이 되었습니다. 역시 브라우저의 화면을 충분히 활용하는 어플스러운 레이아웃이 디폴트로 사용되어 공간활용도가 높고 원하는 기능을 쉽고 빠르게 가져다 쓸 수 있어서 좋습니다.
가장 마음에 드는건 이제는 MacOSX의 safari에서도 WYSIWYG 글 작성, 편집이 가능해졌다는 것입니다. 전에는 주로 맥에서 safari를 쓰다가도 티스토리에 글을 쓸 때에는 firefox를 쓰곤 했었는데, 이제는 그럴 필요가 없어졌네요. 지금도 맥의 safari에서 글을 작성하고 있는 중입니다.
작년부터 관련된 프로젝트들이 사용자와의 상호작용이 많은 프로젝트들이라 그런지 지금까지의 일반적인 웹 레이아웃에 대한 고민을 해볼 기회가 자주생기는군요.
문제점
디자이너도 아니면서 웹 디자인 레이아웃에 대해 고민하게 된 것은 브라우저의 스크롤바 때문이었습니다. 블로그 글이나 신문 기사같이 쭉 읽어내려가는 웹페이지의 경우에는 보통 잡지나 책과 같은 구성을 하고 있어서 읽어내려가기 쉽게 가로보다는 세로로 긴 구성을 하고 있습니다. 하지만 모니터는 어떻습니까? 거의 대부분이 세로보다는 가로로 길죠. 더군다다 요즘에는 와이드 모니터들이 많아져서 가로 길이가 상대적으로 더 길어지고 있습니다. 그래서 어쩔 수 없이 거의 대부분 브라우저에 상하 스크롤바가 생기게 되죠. 그래도 마우스 스크롤을 하거나 스페이스 키(Page Down)를 톡톡 쳐가면서 보면 하번에 웹페이지의 내용이 다 나오지 않더라도 그럭저럭 볼만은 합니다. 즉, 의도한 목적(글 읽기)를 하는데 별 불편함은 못 느낄 정도입니다. (읽기 위주의 페이지에서도 스크롤바가 문제되는 경우도 있는데 이 이야기는 다음번에 하도록 하겠습니다.)
하지만 편집, 관리와 같이 사용자와의 상호작용이 많은 페이지들은 기존의 위에서 아래로 스크롤이 생길 정도로 길게 흐르는 구성으로는 불편할 수 밖에 없습니다 . 우선 이러한 페이지들은 사용자가 화면에서 정보를 읽어내는 것 뿐만이 아니라 상호작용 요소를 통해서 액션을 취할 수도 있고 때로는 정보를 거꾸로 전달할 수도 있는데 이러한 상호작용 요소가 브라우저에 스크롤바가 생기면 움직이기 때문이죠. 자꾸 버튼이나 입력 필드가 왔다갔다 움직이는 것도 신경쓰이는데, 더 안 좋은 경우는 웹페이지가 상하로 길고 상호작용 요소가 상, 하단에 흩어져 있다면 한 화면에 모두 나타나지 않아서 스크롤을 해가며 액션을 취해야합니다.
현상적으로는 스크롤바의 존재 유무나 위치로 인해 불편함이 느껴지는데 이는 웹 페이지의 레이아웃 구성 자체가 상호작용에는 적합하지 않게 되어있기 때문에 발생하는 문제라 생각됩니다. 또한 반대로 적절한 스크롤바의 사용이나 적절한 요소에 스크롤바가 생긴다면 오히려 편리하게 느껴질 수도 있겠죠.
글쓰기 화면을 생각해봅시다.
좀 더 구체적인 얘를 생각해봅시다. 블로그에서 글을 쓰려면 제목도 입력해야하고 때로는 공개 설정도 입력해야합니다. 태그도 입력해야하고, 파일 첨부도 해야합니다. 상당히 기능이 많고 기능의 수에 비례해서 버튼이나 입력 필드와 같은 상호작용 요소의 수도 많습니다.
보통 웹에서 제공하는 글쓰기화면에서는 제목, 카테고리와 같은 필수 설정 영역들이 맨 위에 있고 바로 이어서 툴바를 비롯한 에디팅 영역이 나오고 그 하단에 파일 첨부나, 공개 설정, 태그와 같은 부가 설정 영역들이 뒤따라오는 것이 일반적인 구성입니다.
보통은 에디팅 영역의 상하 길이도 꽤 길기 때문에 에디팅 영역조차 전부 나오지 않는 경우도 있습니다.
이렇게 배치된 경우, 사용자가 착실하게 필수 설정 영역 -> 에디팅 영역 -> 부가 설정 영역의 순으로 편집을 하게 되면 별 문제가 없을 수 있습니다.
하지만 대부분 그렇지 않을 겁니다. 글을 먼저 쓰고 제목을 바꾸고 싶을 때가 있을 것이고 태그도 생각나면 태그도 입력 했다가 다시 글을 쓰기도 하고, 색을 바꾸기도 하는등 여러가지 설정들이 많아지면 이리저리 왔다갔다하는 경우가 많아지게 될 겁니다. 위의 그림에서 점선으로 된 박스가 브라우저를 통해서 보이는 영역인데 화면의 아랫단에 있는 공개설정과 같은 부가 설정을 하기 위해서는 아래 그림과 같이 브라우저 스크롤을 이용해 화면을 아래로 이동시켜야합니다.
스크롤을 아래로 이동시켜 놓고 편집을 하다가 카테고리 변경과 같은 작업을 해야하게 되면 다시 또 스크롤을 하여 화면을 올려야합니다. 위의 그림에서만 봐도 스크롤을 하지 않고 한번에 접근할 수 있는 영역이 두 영역밖에 되지 않죠. 다른 기능들을 사용하려면 스크롤을 할 수 밖에 없게 되고, 글이 길어져서 에디팅 영역에 상하 스크롤바가 생기게 되면 커서의 현재 위치에 따라 마우스 휠을 굴렸을 때 움직여지는 스크롤바가 다르니 마우스 휠로 스크롤하는 것도 마우스 커서 위치를 봐가면서 해야하니 불편하게 되겠죠. 쓰고 있는 글에서 편집할 위치를 찾기 위해 마우스를 굴렸는데, 브라우저 스크롤이 작동해서 화면이 흐트러지면 살짝 난감해질겁니다.
마우스 스크롤 하는게 사실 손가락 조금 움직이는 것이라 별로 불편하지 않아서 그 정도는 별 불편함을 못느낀다고 할 수도 있겠지만 글쓰기 화면을 MS워드와 같은 데스크탑 어플리케이션과 비교해보면 생각이 달라질 수도 있습니다. RIA 기술이 발달하지 않았을 때에는 데스크탑 어플리케이션과 비교하기 힘들었겠지만, 요즘 웹 기술로는 데스크탑 어플리케이션과 같은 사용성이나 레이아웃은 충분히 낼 수가 있기 때문에 더욱 욕심이 날 수 밖에 없습니다.
Work-around
보통 어플리케이션이라고 하면 데스크탑 PC에서 실행되는 브라우저나 오피스와 같은 프로그램을 얘기합니다. 사용자가 거의 시스템의 리소스를 독점해서 사용하다시피 하고 네트웍 지연도 없기 때문에 데스크탑 어플리케이션들은 뛰어난 사용성과 빠른 반응성을 보여줍니다. 사용자의 모니터의 크기가 다양하고 선호하는 창의 크기가 다르기 때문에 데스크탑 어플리케이션들은 어플리케이션 창의 크기가 조절되는 것을 당연히 받아들였고 그 결과 유연하고, 상대성을 고려한 디자인, 레이아웃을 가지고 있습니다. 게다가 다양한 상호작용까지 고려를 하고 있습니다. 그리고 이러한 유연한 레이아웃의 구성은 절대적인 위치보다는 상대적인 위치, 절대적인 길이보다는 상대적인 길이, 그리고 정적인 출판물이 아닌 동적인 툴이라는 원칙에서 온 것이라 생각됩니다.
요즘에는 웹에서도 사용자들에게 상당한 상호작용을 원하고 있고, 웹을 사용하는 것이 데스크탑 어플리케이션을 사용하는 것과 구분이 잘 안 되는 상황에 와있습니다. 요즘 웹 서비스들은 데스크탑 어플리케이션을 대체할 수 있을 정도의 사용성, 기능을 보여주는 것들도 많이 있습니다. 구글 캘린더나 오피스, zoho, remember the milk등의 서비스들이 그러한 좋은 예가 될 것입니다. 이제는 "웹 페이지"의 시대가 아닌 "웹 어플리케이션"의 시대입니다. 그리고 웹 디자인의 메타포는 책, 잡지, 포스터, PDF리더 이외에도 MS워드, 오픈 오피스 writer와 같은 것들이 추가되어야 할 것 같습니다.
우분투 리눅스 7.10을 쓰고 있다가 8.04 beta버전이 있다고 해서 얼른 업그레이드를 했습니다. Package repository를 8.04용으로 바꾸고 업그레이드를 진행하던 중 virtualbox가 문제가 되어서 업그레이드가 중단되고 virtualbox를 지운 뒤에서야 업그레이드에 성공했습니다.
문제는 업그레이드를 하고 나서 발생하더군요. 그래픽 카드 해상도가 640x480으로 고정이 되어서 변하지 않는 것입니다. 사용중인 그래픽 카드가 nVidia 7300 GS 라서 우분트 7.10에서는 restricted driver를 enable시키고 그래픽 카드를 정상적으로 사용할 수 있었는데 8.04에서는 restricted driver 목록에 nvidia 드라이버가 나오지도 않는 것이었습니다. 4월 중으로 8.04 안정 버전이 나온다고 하던데 그때까지 기다릴 수도 없고 이래저래 해결책을 찾아보다가 결국에 해상도를 정상 해상도인 1920x1200으로 맞출 수 있었습니다.
Update manager를 통해서 가장 최신 버전의 상태로 업데이트를 하니 nvidia restricted driver는 깔리더군요. 먼저 nvidia restricted driver가 제대로 설치 되었는지 확인을 해보구요.
그 다음에 /etc/X11/xorg.conf 파일을 열어서 아래 스크린 샷의 빨간색 부분을 모니터 해상도와 맞도록 고칩니다.
xorg.conf를 수정한 뒤 리부팅을 한번 해줘야합니다. X server를 다시 띄워도 됩니다.
그 다음에는 nvidia-settings를 설치합니다.
sudo apt-get install nvidia-settings
메뉴에 보면 nvidia-settings가 나오는데 메뉴에서 X Server Display Configuration을 선택하면 xorg.conf를 수정하여 지정한 원하는 모니터의 해상도를 지정할 수 있게 됩니다.
여기까지 하면 큼지막하게 보이던 우분투 리눅스 데스크탑이 깔끔하게 원래 해상도로 바뀌어 보이게 됩니다.
디지털 카메라로 사진을 찍고 나면 사진을 PC로 옮기는게 점점 귀찮아지고 있던 즈음 wi-fi가 내장된 니콘 S51c가 눈에 들어오더군요. 디지털 카메라에 무선이 필요했던 가장 큰 이유는 메모리 리더나 케이블을 PC에 연결하지 않고 전송했으면 하는 것이었는데 s51c는 니콘에서 제공하는 사이트로 밖에 전송이 되지 않았고 무선 기능이 내장된 것 이외에 카메라로서의 스펙 역시 눈에 들어오지 않았습니다. 파나소닉의 FX35나 Sigma DP-1 정도 스펙을 보다보니 눈만 높아져서....
암튼, 그러던중 디지털 카메라에 무선 통신 기능을 추가해주는 Eye-Fi라는 것을 알게됐습니다. Eye-Fi를 이용하면 SD메모리 카드에 wi-fi를 내장하여 PC또는 자신이 선호하는 웹 사이트에 사진을 바로 올릴 수 있어서 메모리 카드 리더나 케이블이 따로 필요없게 됩니다.
Eye-Fi로 할 수 있는 것들
1. 무선으로 PC에 사진 업로딩
2. 사진 관련 사이트에 업로딩
3. 2GB 내장 메모리로 무선 연결이 불가능한 곳에서 메모리 카드로 활용
안타까운 것은 아직 국내에서 정식으로 파는 곳이 없습니다. 구매 대행으로 파는 곳이 있긴 하지만 가격을 너무 비 싸게 부르는군요. 외국 나갈 일 있으면 눈에 불을 켜고 찾아봐야겠습니다.
어제 구글 android에 관련된 세션에 이어서 오늘은 openmoko라고 하는 오픈 소스 모바일 플랫폼에 대한 소개가 있었습니다.
Openmoko는 구글 android와는 달리 모바일 운영체제뿐만이 아니라 하드웨어 툴킷까지 같이 제공을 하고 있습니다. Neo라는 하드웨어 킷이 있고 그 위에 Openmoko linux라는 리눅스 기반의 운영체제가 탑재됩니다. 소프트웨어를 비롯하여 하드웨어 관련 정보를 공개하였고 JTAG를 지원하여 디버깅까지 가능하도록 만들어졌습니다. 심지어는 케이스까지 "오픈소스"화하였다고 하는데, 여기서 케이스를 "오픈소스"화했다는 것은 리차드 스톨만이 말한 오픈소스의 정의의 일부인 자유롭게 변형가능한 형태로 제공이 된다는 것이고 케이스의 디자인을 사용자가 변형 가능하도록 IEGS라는 캐드 파일 포맷을 공개했다고 합니다.
현재 Neo는 다 팔리고 Neo Freerunner라고 하는 일반 공개용 제품을 준비중이니 조금만 기다리라고 하는데 우리나라에서 쓸 수만 있다면 하나 사보고 싶더군요.
자문자답으로 나온 openmoko가 iPhone, 구글 android, Qtopia와는 어떻게 다른지에 대한 질문에 대해서는 개발자들이 좀 더 나은 혁신적인 모바일 플랫폼을 만드는 것을 가능케하고 장려한다는 점에서 다르다고 하는, openmoko의 강력한 개방성에 초점을 둔 답변을 하였습니다
오늘 세션 중 Connecting Your Life to the Web, with Android에 대한 기대를 좀 하고 들어가봤습니다. 그렇다고 큰 기대를 한 것은 아니었고 android가 작동하는 샘플을 보여준다고 하여 어떻게 android를 활용하는 예제를 보여줄까 궁금했습니다. 예제로 나온건 와인 목록을 조회하거나 업데이트를 하는 간단한 프로그램이었는데, 신선했던건 와인 데이터를 구글 스프레드쉬트에 저장하고 GData API를 이용하여 android에서 그 데이터를 이용한다는 것입니다. 마치 GData API가 웹에 연결된 데스크탑을 위한 것이 아닌 android를 위해 미리 만들어뒀던 포석이었다라는 생각까지 들더군요. 물론 좀 지나친 생각일 수도 있겠지만.. 그만큼 GData API + android의 조합은 데이터 저장소와 그 데이터를 어디서든 접근할 수 있는 인터페이스를 제공한다는 점에서 너무나도 깔끔하게 연결되는 것 같습니다.
Android가 iPhone에 탑재되어도 상관없다고 하는데 iPhone에 android가 탑재되면 iPhone의 제스처 인테페이스가 android에 제대로 인식이 될지 궁금해지는군요. 프로그래밍을 하면 안 되는게 없긴 하겠지만 iPhone의 매력은 iPhone에 탑재된 OS의 몫도 상당하해서 android가 iPhone에 탑재되면 iPhone의 매력이 떨어질 것 같다는 생각을 해봅니다. Android의 보안 문제에 대한 얘기도 나왔는데 android가 탑재된 폰이 현재 웹과 같은 정도로 개방이 되기 때문에 지금까지의 폰의 폐쇄적인 환경보다는 보안 이슈가 생길 수 있을 것이라 합니다. Android Architecture를 보면 SSL도 포함되어있는데 적어도 보안에 관해서는 현재 웹 보안 이슈와 크게 달라지지는 않을 것 같습니다.
ETech컨퍼런스의 세번째 날 아침, 알람 시계를 작동시켜 놓지 않아 늦게 일어날 뻔 했지만 아침밥 먹을 시간에는 도착하여 키노트부터 들을 수 있었습니다. 오늘 키노트 시간에는 어제와 마찬가지로 총 5개의 키노트가 발표되었습니다.
키노트 장소에 도착하니 어제 키노트 발표를 했던 메가폰에서 제공한 게임이 스크린에서 나오고 있었습니다. 전화를 걸어서 게임에 참석하면 아래쪽에 자기 전화번호와 Tim O'reilly의 얼굴이 나오는데 Tim의 얼굴을 위로 쭉 올려서 지나가는 쉼표 잡게 되면 점수를 따는 방식으로 진행되었습니다. Tim의 얼굴을 위로 쭉 올리려면 전화기에 "Tim"이라고 외치면 되는데 컨퍼런스 장 곳곳에서 게임하고 있는 사람들이 "Tim, Tim"외치는 것을 들을 수 있었습니다. 어제는 동물 소리.. 오늘은 사람 이름.. 참 재밌습니다. <from http://www.flickr.com/photos/scottiev/2313443190/>
첫번째 키노트에서는 LISP의 창시자인 John McCathy가 나와서 elephant 2000이라는 기본적인 자연어로 입출력이 가능한 프로그래밍 언어에 대한 소개를 하였습니다. FireEagle이라는 지역 기반의 서비스에 대한 소개와 개인용 로봇을 위한 오픈 소스 로봇 플랫폼에 대한 소개도 있었습니다.
<Kath Sierra, from http://www.flickr.com/photos/pinarozger/2313142210/> Kathy Sierra가 나와 발표한 How to kick ass라는 주제로 발표된 키노트는 일종의 자기계발에 관련된 내용이었는데, 자신이 원하는 것을 얻기 위해서는 끊임없는 노력을 해야한다는 내용이었고, focus, concentrate, practice를 실천하면서 expert가 되어야한다는 얘기를 합니다. <위의 사진은 Kathy Sierra가 발표한 프리젠테이션의 일부인데 expert는 무언가를 알고 있는 사람이라기 보다는 뭘 해야할지를 아는 사람이라고 합니다. 알아나가는 속도도 빠르다면 금상첨화겠죠. from http://www.flickr.com/photos/34122688@N00/2312165121/> 마지막 키노트로는 personalizing the device라는 흥미로운 주제의 발표가 있었는데, 마치 오픈 소스 소프트웨어 라이브러리를 이용하여 소프트웨어를 제작하듯이 하드웨어 모듈을 조합하고 거기에 소프트웨어를 탑재함으로서 원하는 기능의 디바이스를 만들어낸다는 아이디어입니다. Bug Labs에서 이미 상용화된 제품이 나왔는데eclipse 기반의 매니저를 이용하여 base device를 조작하고 장착된 모듈에 소프트웨어를 선택, 로딩하는 방식으로 원하는 기능의 디바이스를 만들어나갑니다.
아직은 카메라, GPS, 디스플레이, 모션 센서등 4가지 밖에 안되지만 하드웨어를 조합하여 원하는 것을 얻어낸다는 아이디어는 괜찮은 것 같네요.
