웹 페이지의 레이아웃에 대한 단상

작년부터 관련된 프로젝트들이 사용자와의 상호작용이 많은 프로젝트들이라 그런지 지금까지의 일반적인 웹 레이아웃에 대한 고민을 해볼 기회가 자주생기는군요.

문제점

디자이너도 아니면서 웹 디자인 레이아웃에 대해 고민하게 된 것은 브라우저의 스크롤바 때문이었습니다. 블로그 글이나 신문 기사같이 쭉 읽어내려가는 웹페이지의 경우에는 보통 잡지나 책과 같은 구성을 하고 있어서 읽어내려가기 쉽게 가로보다는 세로로 긴 구성을 하고 있습니다. 하지만 모니터는 어떻습니까? 거의 대부분이 세로보다는 가로로 길죠. 더군다다 요즘에는 와이드 모니터들이 많아져서 가로 길이가 상대적으로 더 길어지고 있습니다. 그래서 어쩔 수 없이 거의 대부분 브라우저에 상하 스크롤바가 생기게 되죠. 그래도 마우스 스크롤을 하거나 스페이스 키(Page Down)를 톡톡 쳐가면서 보면 하번에 웹페이지의 내용이 다 나오지 않더라도 그럭저럭 볼만은 합니다. 즉, 의도한 목적(글 읽기)를 하는데 별 불편함은 못 느낄 정도입니다.  (읽기 위주의 페이지에서도 스크롤바가 문제되는 경우도 있는데 이 이야기는 다음번에 하도록 하겠습니다.)

하지만 편집, 관리와 같이 사용자와의 상호작용이 많은 페이지들은 기존의 위에서 아래로 스크롤이 생길 정도로 길게 흐르는 구성으로는 불편할 수 밖에 없습니다 . 우선 이러한 페이지들은 사용자가 화면에서 정보를 읽어내는 것 뿐만이 아니라 상호작용 요소를 통해서 액션을 취할 수도 있고 때로는 정보를 거꾸로 전달할 수도 있는데 이러한 상호작용 요소가 브라우저에 스크롤바가 생기면 움직이기 때문이죠. 자꾸 버튼이나 입력 필드가 왔다갔다 움직이는 것도 신경쓰이는데, 더 안 좋은 경우는 웹페이지가 상하로 길고 상호작용 요소가 상, 하단에 흩어져 있다면 한 화면에 모두 나타나지 않아서 스크롤을 해가며 액션을 취해야합니다.

현상적으로는 스크롤바의 존재 유무나 위치로 인해 불편함이 느껴지는데 이는 웹 페이지의 레이아웃 구성 자체가 상호작용에는 적합하지 않게 되어있기 때문에 발생하는 문제라 생각됩니다. 또한 반대로 적절한 스크롤바의 사용이나 적절한 요소에 스크롤바가 생긴다면 오히려 편리하게 느껴질 수도 있겠죠.

글쓰기 화면을 생각해봅시다.

좀 더 구체적인 얘를 생각해봅시다. 블로그에서 글을 쓰려면 제목도 입력해야하고 때로는 공개 설정도 입력해야합니다. 태그도 입력해야하고, 파일 첨부도 해야합니다. 상당히 기능이 많고 기능의 수에 비례해서 버튼이나 입력 필드와 같은 상호작용 요소의 수도 많습니다.

보통 웹에서 제공하는 글쓰기화면에서는 제목, 카테고리와 같은 필수 설정 영역들이 맨 위에 있고 바로 이어서 툴바를 비롯한 에디팅 영역이 나오고 그 하단에 파일 첨부나, 공개 설정, 태그와 같은 부가 설정 영역들이 뒤따라오는 것이 일반적인 구성입니다.

보통은 에디팅 영역의 상하 길이도 꽤 길기 때문에 에디팅 영역조차 전부 나오지 않는 경우도 있습니다.

이렇게 배치된 경우, 사용자가 착실하게 필수 설정 영역 -> 에디팅 영역 -> 부가 설정 영역의 순으로 편집을 하게 되면 별 문제가 없을 수 있습니다.

하지만 대부분 그렇지 않을 겁니다. 글을 먼저 쓰고 제목을 바꾸고 싶을 때가 있을 것이고 태그도 생각나면 태그도 입력 했다가 다시 글을 쓰기도 하고, 색을 바꾸기도 하는등 여러가지 설정들이 많아지면 이리저리 왔다갔다하는 경우가 많아지게 될 겁니다. 위의 그림에서 점선으로 된 박스가 브라우저를 통해서 보이는 영역인데 화면의 아랫단에 있는 공개설정과 같은 부가 설정을 하기 위해서는 아래 그림과 같이 브라우저 스크롤을 이용해 화면을 아래로 이동시켜야합니다.

스크롤을 아래로 이동시켜 놓고 편집을 하다가 카테고리 변경과 같은 작업을 해야하게 되면 다시 또 스크롤을 하여 화면을 올려야합니다. 위의 그림에서만 봐도 스크롤을 하지 않고 한번에 접근할 수 있는 영역이 두 영역밖에 되지 않죠. 다른 기능들을 사용하려면 스크롤을 할 수 밖에 없게 되고, 글이 길어져서 에디팅 영역에 상하 스크롤바가 생기게 되면 커서의 현재 위치에 따라 마우스 휠을 굴렸을 때 움직여지는 스크롤바가 다르니 마우스 휠로 스크롤하는 것도 마우스 커서 위치를 봐가면서 해야하니 불편하게 되겠죠. 쓰고 있는 글에서 편집할 위치를 찾기 위해 마우스를 굴렸는데, 브라우저 스크롤이 작동해서 화면이 흐트러지면 살짝 난감해질겁니다.

마우스 스크롤 하는게 사실 손가락 조금 움직이는 것이라 별로 불편하지 않아서 그 정도는 별 불편함을 못느낀다고 할 수도 있겠지만 글쓰기 화면을 MS워드와 같은 데스크탑 어플리케이션과 비교해보면 생각이 달라질 수도 있습니다. RIA 기술이 발달하지 않았을 때에는 데스크탑 어플리케이션과 비교하기 힘들었겠지만, 요즘 웹 기술로는 데스크탑 어플리케이션과 같은 사용성이나 레이아웃은 충분히 낼 수가 있기 때문에 더욱 욕심이 날 수 밖에 없습니다.

Work-around

보통 어플리케이션이라고 하면 데스크탑 PC에서 실행되는 브라우저나 오피스와 같은 프로그램을 얘기합니다. 사용자가 거의 시스템의 리소스를 독점해서 사용하다시피 하고 네트웍 지연도 없기 때문에 데스크탑 어플리케이션들은 뛰어난 사용성과 빠른 반응성을 보여줍니다. 사용자의 모니터의 크기가 다양하고 선호하는 창의 크기가 다르기 때문에 데스크탑 어플리케이션들은 어플리케이션 창의 크기가 조절되는 것을 당연히 받아들였고 그 결과 유연하고, 상대성을 고려한 디자인, 레이아웃을 가지고 있습니다. 게다가 다양한 상호작용까지 고려를 하고 있습니다. 그리고 이러한 유연한 레이아웃의 구성은 절대적인 위치보다는 상대적인 위치, 절대적인 길이보다는 상대적인 길이, 그리고 정적인 출판물이 아닌 동적인 툴이라는 원칙에서 온 것이라 생각됩니다.

요즘에는 웹에서도 사용자들에게 상당한 상호작용을 원하고 있고, 웹을 사용하는 것이 데스크탑 어플리케이션을 사용하는 것과 구분이 잘 안 되는 상황에 와있습니다. 요즘 웹 서비스들은 데스크탑 어플리케이션을 대체할 수 있을 정도의 사용성, 기능을 보여주는 것들도 많이 있습니다. 구글 캘린더나 오피스, zoho, remember the milk등의 서비스들이 그러한 좋은 예가 될 것입니다.
이제는 "웹 페이지"의 시대가 아닌 "웹 어플리케이션"의 시대입니다. 그리고 웹 디자인의 메타포는 책, 잡지, 포스터, PDF리더 이외에도 MS워드, 오픈 오피스 writer와 같은 것들이 추가되어야 할 것 같습니다.