멋진 검색 환경 디자인 – 기본 사항
최초 문서 게시일: 2012년 12월 14일 금요일
안녕하세요. SharePoint 검색 팀 프로그램 관리자인 Kate Dramstad입니다. SharePoint 2013의 검색 환경은 이전보다 훨씬 확장성이 뛰어납니다. 이제 디자이너와 개발자는 원하는 대로 거의 뭐든지 빌드할 수 있습니다. 그러나 검색 환경을 사용자 지정하는 데에는 주의가 필요합니다. 균형 잡힌 페이지와 어수선한 페이지의 경계는 모호합니다. 이 게시물에서는 보기에 멋지면서도 유용성이 뛰어난 검색 환경을 디자인하는 방법에 대한 몇 가지 생각을 공유하고자 합니다.
전체 페이지 맞춤
SharePoint 검색 환경에 있어 가장 중요한 요인 중 하나는 모든 페이지 요소를 맞추는 것입니다. 기본 디자인을 보시면 구체화 웹 파트(페이지 왼쪽을 따라 정렬 옵션 표시)와 SharePoint 검색 센터 아이콘(왼쪽 위의 돋보기 이미지)이 왼쪽 맞춤되어 있으며, 검색 상자, 탐색 및 결과도 왼쪽 맞춤되어 있습니다. 검색 상자 상단은 아이콘 상단과 맞추어져 있고, 탐색 하단은 아이콘 하단과 맞추어져 있습니다.
그림 1. 검색 결과 페이지의 모든 요소가 그리드(여기서 녹색으로 표시)에 맞추어져 있음
사소한 사항처럼 들릴 수도 있지만, 페이지의 요소를 그리드에 맞추는 것은 실제로 사용자가 페이지를 더욱 쉽게 검토하는 데 도움을 줍니다. 구성 요소가 공백의 강력한 세로줄과 가로줄로 분리되어 있습니다. 따라서 페이지의 여러 구성 요소를 보다 쉽게 구분할 수 있으며, 이는 매우 중요합니다. 제대로 맞추어지지 않은 페이지는 대부분의 사용자에게 "뭔가 잘못되었다는 느낌"을 주는 것은 물론 실제로 결과를 효율적으로 검토하는 데 방해가 됩니다. 구성 요소가 맞추어져 있지 않으면 모서리가 다듬어지지 않습니다. 다듬어지지 않은 모서리를 볼 때에는 시선이 오락가락하며, 곧은 선을 볼 때 더욱 효율적으로 결과를 검토할 수 있습니다.
그림 2. 이 이미지에서는 검색 아이콘이 왼쪽으로 이동하여 그리드에 맞추어져 있지 않음
페이지에 새 구성 요소를 추가하거나 기존 구성 요소를 재배열할 때 검색 환경을 최대한 깔끔하게 다듬고자 한다면 이 그리드를 염두에 두어야 합니다.
그림 3. 여기서는 평가 등급 기능과 일부 추가 메타데이터를 포함하여 인라인 결과를 수정했습니다. 보시다시피 추가된 기능도 그리드에 맞추어져 있습니다.
전체 페이지의 모양과 느낌
맞춤만 중요한 것이 아닙니다. 페이지의 색상, 글꼴 및 리치 컨트롤 개수에도 주의를 기울여야 합니다. 검색 결과 페이지의 중점은 항상 결과 자체에 있어야 하므로 결과 페이지의 구성 요소 스타일을 지정할 때에는 결과에서 시선이 분산되지 않도록 해야 합니다. 다음은 몇 가지 팁과 힌트입니다.
가급적 널리 통용되는 색상 매핑 사용
예를 들어 검색 결과에서 파란색 텍스트는 클릭 가능한 결과 제목이고, 녹색 텍스트는 해당 결과의 URL이라는 것이 일반적인 규칙입니다. 이러한 규칙에서 벗어나면 사용자가 검색 결과를 쉽게 검토하기 힘들어집니다.
그림 4. 제목 및 URL 색상을 표준 방식과 다르게 변경하면 사용자의 주의가 산만해집니다. 널리 알려진 규칙에 따라 색상을 사용하십시오.
가급적 적은 수의 색상 사용
대개 색상은 선택한 필터 옵션, 결과 제목, URL과 같은 몇 가지 중요한 요소를 눈에 띄게 나타내기 위해 사용됩니다. 그러나 너무 많은 색상을 사용하면 모든 것이 두드러지고 사용자의 주목을 끌기 때문에 결과적으로 여러 색상이 뒤범벅되어 아무 것도 눈에 띄지 않게 됩니다.
그림 5. 너무 많은 색상을 사용하면 주의가 산만해져 주목해야 할 항목과 중요한 항목을 파악하기 어려워집니다. UI에 사용되는 색상 수를 제한하십시오.
가급적 적은 수의 서체와 글꼴 크기 사용
글꼴, 글꼴 크기, 굵게/기울임꼴은 색상과 비슷한 이유로 사용됩니다. 즉, 중요한 특정 요소가 눈에 띄게 하는 기능을 합니다. 색상과 마찬가지로 너무 많은 스타일과 글꼴을 사용하면 모든 것이 어수선하게 보입니다. SharePoint 제품 팀에서는 이렇게 하는 것을 여러 잡지에서 오려낸 조각을 한데 꿰맞춘 것과 같다고 하여 "랜섬 노트"라 부릅니다.
리치 컨트롤를 시각적으로 최대한 단순하게 유지
그림 6의 Modified 제목 아래에 있는 날짜 필터 히스토그램 구체화를 살펴보십시오. 이 구체화를 기본 페이지에 두는 것은 처음에 위험스럽게 느껴졌습니다. 복잡하게 보이는 컨트롤로서 텍스트 기반 필터에 비해 두드러질 수 있기 때문입니다. 그러나 페이지의 나머지 부분과 색상을 일관되게 유지하고 모양과 선을 깔끔하고 단순하게 만들었습니다. 사용자 지정 컨트롤을 추가할 때에는 이와 같이 하는 것이 중요합니다.
한 번 원형 차트 필터로 이것저것 테스트해 보았습니다. 그런데 그림 6에서 이 구체화가 얼마나 주의를 산만하게 하는지 보십시오.
그림 6. 사용자 지정 원형 차트 필터가 다른 컨트롤과 어울리지 않는 표시 스타일과 너무 많은 색상으로 지나치게 주의를 산만하게 합니다.
이제 그림 7에서 색상 구성과 모양을 단순화한 후의 결과를 확인해 보십시오.
그림 7. 이미 UI에 사용된 색상을 사용하고 다른 컨트롤과 일관된 표시 스타일을 유지하도록 수정한 후 이 원형 차트 구체화는 사용자가 그 목적을 알아볼 만큼 충분히 흥미로우면서도 필요한 작업으로부터 주의를 분산시키지 않습니다.
페이지의 개념적 구분
검색 환경을 디자인할 때에는 미학적 요소와 개념적 요소를 모두 고려해야 합니다. 일반적인 검색 규칙과 SharePoint 팀의 자체 연구 결과에 따라 기능 및 사용자 상호 작용 모델에 입각하여 페이지 구성 요소를 여러 영역으로 구성했습니다. 구성 요소를 추가하거나 재배열할 때에는 사용자가 특정 작업을 하는 방법을 쉽게 찾을 수 있도록 이러한 개념적 구분을 따르는 것이 가장 좋습니다.
예를 들어 모든 필터 작업은 검색 결과 페이지 왼쪽에 배치했습니다. 따라서 사용자는 결과 집합을 필터링하려고 할 때 항상 왼쪽을 보면 됩니다. 페이지에 새 필터를 추가하려는 경우 사용자가 페이지에서 필터를 찾기 위해 이리저리 살필 필요가 없도록 다른 필터 옆에 추가하는 것이 가장 좋습니다.
그림 8은 기본 검색 결과 페이지의 개념적 구분을 간략하게 보여 줍니다.
그림 8. 검색 결과 페이지가 5개의 기능 영역으로 구분되어 있습니다. 이 페이지를 사용자 지정할 때에는 새로운 요소를 해당 기능 영역에 추가하도록 하십시오.
이 게시물에서는 멋진 검색 환경을 빌드하기 위한 전반적인 지침을 몇 가지 알려 드렸습니다. 여러분의 의견과 질문을 언제든지 환영합니다!
이 문서는 번역된 블로그 게시물입니다. 원본 문서는 Designing a beautiful search experience – The basics를 참조하십시오.