[연구] 필터 조건을 선택하는 컴포넌트

많은 자료를 목록으로 표시하는 경우에 몇가지 조건으로 표시 항목수를 압축하게 된다. 예를 들면 아이튠즈(iTunes) 플레이어에서 장르, 아티스트, 앨범이라는 필터 조건을 선택(클릭)함으로 해당하는 곡목을 표시하는 것으로 원하는 데이터에 쉽게 접근할 수 있는 접근성을 구현한다.

조건 입력을 받는다

이러한 경우 내부적으로는 데이터베이스를 활용할 것이므로 "SELECT * FROM TABLE_NAME WHERE conditions" 등의 SQL문을 사용하면 된다. 문제는 조건에 해당하는 부분을 어떻게 입력을 받을 것인가하는 것이 접근성의 열쇠가 된다.

지금은 아이튠즈 플레이어에서 필터 조건을 표시하는 기능을 디폴트로 제공하지 않고 이미지를 디폴트로 제공하고 있다. 그것은 필터보다 앨범명의 문자보다 이미지로 앨범을 찾는 것이 더 직관적이기 때문이라고 생각되는데 이미지가 없는 항목등은 여전히 필터를 선택하면서 항목수를 줄이는 것이 작업에 편리함을 가져온다.

컴포넌트(컨트롤)의 비교

컴포넌트	설명	특징
리스트박스 (ListBox)	예) 아이튠즈 플레이어(장르, 아티스트, 앨범) 검색 필터의 내부 항목을 항상 표시한다.	화면 리사이즈에 의해 표시가능한 항목수가 변경가능하다. 같은 카테고리의 복수 항목이 선택가능하다.(예: 두개의 앨범을 선택) 항목이 항상 표시되어 있기 때문에 선택하기 쉽다. (이는 스크롤의 이동거리가 짧다는 의미다.) 화면 일정 공간을 차지하고 필터 카테고리의 갯수를 늘이면 화면의 디자인이 곤란해 진다.
콤보 박스 (ComboBox)	선택된 검색필터의 항목만 표시된다.	화면 공간을 차지하지 않기 때문에 필터 카테고리의 갯수가 늘어나도 화면 디자인 변경의 부담이 적다. 선택 항목을 변경하려면 불편하다. 드롭다운을 열어야 하고 스크롤의 이동거리가 길다. 같은 카테고리의 복수항목이 선택불가능하다.
리스트뷰 (ListView)	겉모양은 리스트박스와 비슷하다.	리스트박스와 거의 같다.
트리뷰 (TreeView)	필터 카테고리를 트리의 노드로 표시한다.	화면 리사이즈에 의해 표시가능한 항목수가 변경가능하다. 노드 자체가 복수 항목이 선택불가능하다. 화면 공간을 차지하지 않기 때문에 필터 카테고리의 갯수가 늘어나도 화면 디자인 변경의 부담이 없다.

(공원의 나무: 키가 크니까 멋있어 보인다.)

트리뷰의 개량 아이디어

3개의 필터 조건을 사용하고자 하는 경우에 가장 좋아보이는 조건의 입력 컴포넌트(Component 또는 Control)는 리스트박스를 사용하는 것이다. 그러나 이번 연구에서는 리스트박스를 썼을 경우 전체 화면 디자인이 매우 조잡해지는 것을 고려하여 단점이 있은나 일목요연한 트리뷰를 사용하고자 하는 것이 목적이다. 트리의 단점은 복수개 조건의 조합 선택이 불가능하다는 점이다. 따라서 기본 컴포넌트만으로는 약점이 생기기 때문에 화면에서 클릭한 순서에 따라 이력을 적용하는 방법을 채용하여 복수개의 조건을 계산하는 아이디어이다.

예를 들어,
+장르
  + AAA
  + BBB
+앨범
  + DDD
  + EEE
의 형태라고 하자.

1) AAA를 클릭한 후 DDD를 클릭
WHERE (장르 IN ["AAA"]) AND (앨범 IN ["DDD"])로 판단

2) AAA를 클릭한 후 DDD를 클릭. 다시 장르를 클릭
WHERE (앨범 IN ["DDD"])로 판단

3) AAA를 클릭한 후 BBB를  Ctrl+클릭
WHERE (장르 IN ["AAA", "BBB"])로 판단

개량 트리뷰의 접근성

이러한 개량된 트리뷰를 써서 필터 조건을 구현했을 때 화면 디자인성이 리스트박스보다 유연하고 우수하였다. 필터 조건의 갯수를 증감하더라도 전체 화면의 디자인은 변경하지 않아도 되고 항목의 그룹핑이 가능한 점에서 외견적으로도 보기 좋았다.

  선택할 전체 항목을 한꺼번에 다 보여 주기 때문에 다량의 항목인 경우에는 상하 스크롤을 피할 수 없게 되는데 이런 경우는 처음부터 필터 조건으로서는 부적합하다고 보아야 할 것이다.