지오아빠의 일상다반사

그림 3. 단추 크기 비교

그림 3에는 세 가지 크기의 단추가 나와 있습니다. 첫 번째 단추는 가장 권장되는 크기로 도구 상자에서 끌거나 두 번 클릭하면 기본적으로 생성되는 크기입니다. 텍스트를 추가로 입력하려면 단추를 더 크게 만들어야 합니다. 두 번째 단추는 약간 더 크지만 사용할 수 있는 크기입니다. 다른 컨트롤의 배치를 방해할 정도로 크지는 않기 때문이죠. 그러나 세 번째 단추는 사용하기 어려운 크기입니다. 이 크기의 단추를 사용하면 Windows에서 테마가 적용된 컨트롤을 그릴 때 사용하는 테마 비트맵까지 흐트러진다는 것을 알 수 있습니다. 또한 이 단추 주변에 다른 컨트롤을 맞추기도 매우 어렵습니다.

위에 나온 그림 1의 경우 대화 상자의 크기와 오른쪽의 여백을 감안할 때 두 개의 입력란이 너무 작다는 것을 알 수 있으며 이에 비해 그림 2는 좀 더 적절히 조정된 크기입니다. SnapLines는 크기 조정에도 도움이 됩니다. SnapLines는 특정 상황에서 가장 구체적인 크기 또는 위치를 제안하므로 따르는 것이 좋습니다.

그룹화

거의 모든 응용 프로그램에는 수많은 컨트롤이 있습니다. 적절하고 알아보기 쉽게 그룹화해야만 이러한 컨트롤을 사용하기 쉽게 만들 수 있습니다. 기능에 따른 그룹화 또는 범주별 그룹화를 가장 잘 수행하려면 탭 컨트롤을 사용합니다. 예를 들어 일반적인 비즈니스 응용 프로그램에서는 '계정', '보고서', '직원' 및 '프로젝트'를 탭으로 사용하는 것이 가장 좋습니다. 동일한 최종 결과를 가져오도록 제어하는 형제 그룹화를 가장 훌륭히 수행하려면 그룹 컨트롤을 사용합니다. 이러한 그룹화에 테두리가 있는 패널은 사용하지 않는 것이 좋습니다. 그룹 컨트롤을 사용하면 추가적인 레이블 컨트롤을 사용하지 않아도 됩니다. 특히 하위 컨트롤이 그 자체만으로도 알아보기 쉬운 경우에는 더 그렇습니다.

그룹 컨트롤 내에 그룹 컨트롤을 배치하는 것은 하나의 큰 그룹 컨트롤 안에 2~3개의 컨트롤만 있는 경우가 아니면 권장되지 않습니다. 그룹 컨트롤 안의 다른 그룹 컨트롤 내에 그룹 컨트롤을 배치하는 것은 더더욱 권장되지 않습니다. 이렇게 쓰는 것조차 이상합니다.

사용 편이성

사용 편이성은 훌륭한 사용자 환경에 있어 실제로 중요한 측면입니다. 이해가 쉬운 UX인 경우 설명할 필요가 줄어듭니다. 사용자들이 컨트롤의 기능을 곧바로 알기 때문입니다.

알아보기 쉬운 디자인에서 가장 중요한 것은 색 구분입니다. 가장 좋은 예는 Windows XP 출시 전에 Microsoft에서 발표한 Windows XP Design Guidelines (영문)에 나와 있습니다. Windows XP에서는 테마별 응용 프로그램, 로그오프, 시스템 종료 대화 상자 등에서 탐색과 같은 기능을 위해 모서리가 둥근 새로운 단추를 제공했습니다.

이러한 컨트롤의 색은 해당 단추를 눌렀을 때 나타나는 결과의 심각도에 따라 결정됩니다. 탐색은 '보행' 신호등과 같이 녹색이고 작업 손실이 야기될 수 있는 시스템 종료는 경고 신호와 같이 빨간색이며 로그오프나 최대 절전 모드와 같은 심각도가 덜한 단추는 노란색입니다. 도움말과 같이 사용자의 작업 프로세스에 심각한 영향을 미치지 않는 중립적인 단추는 옅은 파랑색입니다. 스킨이 적용된 UI를 만들 때 이러한 색 구분을 염두에 두어야 합니다.

색으로 콘텐츠를 구분할 수 있는 가장 좋은 예는 Microsoft Office OneNote입니다. 이 응용 프로그램의 탭은 전체 Windows XP 스타일 디자인에 무난하게 어울리도록 하면서도 다양한 색으로 설정할 수 있습니다.

또 하나의 중요한 측면은 응용 프로그램의 텍스트입니다. 최근 소프트웨어에 작성된 명령에서는 표현이 단순화되었습니다. 소프트웨어 내의 텍스트에 대해서는 나중에 설명하도록 하겠지만 사소하면서도 중요한 한 가지 세부 사항에 주목해 주시기 바랍니다. 예를 들어 살펴보겠습니다.

MSN Messenger에는 옵션 대화 상자에 "웹캠 기능 공유"라는 확인란이 있었습니다. 물론 개발자나 해박한 기술 지식이 있는 사람들은 이 기능이 무엇을 의미하는지 압니다. 그러나 초보 사용자는 대화 상대방과 자신의 웹캠을 함께 사용할 수 있는 기능이라 생각할 수 있을 것입니다. 혼동을 주는 설명이었죠. 그래서 최신 버전에서는 "웹캠: 내 웹캠을 통해 다른 사람이 나를 볼 수 있도록 허용"이라는 옵션으로 변경되었습니다. 이 메뉴 옵션은 기술적 지식이 없고 단순한 표현에 익숙한 사람들도 완벽하게 이해할 수 있습니다.

단순한 표현은 이해하기 쉬울 뿐 아니라 나중에 살펴보게 되겠지만 또 다른 이점이 있습니다. 과학적 연구에 따르면 무언가 새로운 것을 이해하려고 할 때 단순한 표현은 의미 파악이 더 쉬운 것으로 나타났습니다. 흔히 인간의 두뇌는 '그것', '~에 대한', '저것'과 같은 단어와 기타 일반적인 단어는 매우 빠르고 쉽게 이해하지만 위의 예에서 볼 수 있듯이 '웹캠' 또는 '다른 사람'과 같은 단어를 이해하는 데는 더 많은 사고 영역을 할당합니다.

메시지 상자 제목, 그룹 상자 캡션 및 기타 비슷한 종류의 텍스트 블록을 사용하면 몇 단어만으로 최종 사용자에게 많은 컨트롤의 기능을 쉽게 전달할 수 있습니다.

사용 편이성은 친숙함에서도 나옵니다. 예를 들어 확인/취소 단추를 함께 배치하는 것은 매우 일반적이므로 우리들의 머리 속에 이 순서대로 각인되어 있어서 만약 어떤 대화 상자에서 확인 다음에 취소가 있지 않고 반대 순서로 취소 다음에 확인이 있는 경우 취소를 누르게 될 수 있습니다. Windows 기반 응용 프로그램과 같이 어떤 작업에 대해 특정 표준을 1년 이상 사용해 온 결과 습관으로 자리잡게 되었습니다. 문서화되어 있지는 않지만 이러한 산업 표준을 따르면 소프트웨어를 사용하기 쉽게 만들 수 있습니다.

다른 예를 살펴보도록 하겠습니다. 초기 Windows Vista 시험판 빌드 중 하나에서는 창의 최소화, 최대화 및 닫기 단추의 순서가 달랐습니다. 이전 버전의 Windows에서는 특히 단일 모니터를 사용하는 경우 화면의 오른쪽 상단 모서리에 커서를 "어림짐작으로 가져가서" 무의식적으로 클릭하는 습관이 생기게 되었습니다. 이렇게 하면 항상 창이 닫히게 되었죠. 그러나 위에서 말한 Windows Vista 빌드에서는 닫기 단추와 창의 가장 오른쪽 가장자리 사이에 8픽셀 정도 되는 여백이 있었기 때문에 오랫동안 자리잡은 "어림짐작으로 하는 클릭"으로는 창이 닫히지 않았습니다. 여분의 공간이 있어 외관상으로 좋아 보이는 것은 물론이며 아마도 이 단추를 누르면 시작되는 화려한 애니메이션에 이러한 공간이 필요할 수도 있었겠지만 창이 닫히지는 않으니 짜증나는 일이었습니다. 습관을 바꾸는 것은 어려운 일이었으니까요. 다행히도 이후 빌드에서는 이 문제가 해결되었습니다. 아마도 저와 같이 어림짐작으로 클릭했던 많은 사람들이 Microsoft에 의견을 보내지 않았을까 싶습니다. 이제 창의 가장자리와 닫기 단추 사이에 공백이 있기는 하지만 그 공백을 클릭해도 창이 닫힙니다. 문제가 해결된 것이죠.

알아보기 쉬운 디자인에서 매우 중요한 점은 '생각해야 하는 영역'이 얼마나 되느냐입니다. 즉, 머리 속에서 무언가를 이해하는 데 걸리는 시간이 어느 정도냐 하는 것이죠. 이 '사고 영역'이 적으면 적을수록 훌륭한 UX라고 할 수 있습니다.

소프트웨어 응용 프로그램 사용 "환경"에 기여하는 사소한 항목들도 있기는 하겠으나 이론만으로도 충분합니다. 심지어 저 조차도 "실용적인" 정보를 원하니까요. 그러므로 이제 이론적인 얘기는 접어 두고 실제로 응용 가능한 팁과 트릭을 사용하여 응용 프로그램을 향상시키는 방법에 대해서 알아보도록 하겠습니다.

보다 효율적이고 편리한 사용자 환경 조성을 위한 20가지 팁

보다 나은 UX를 구축하는 목적은 외관이 훌륭하면서도 간단하고 알아보기 쉬우며 기능이 뛰어난 UI를 얻기 위함입니다. 이제 소프트웨어 응용 프로그램을 사용해 본 경험이 별로 없고 기술적 지식이 그다지 많지 않은 사용자들의 일상 업무에 초점을 두고 살펴보도록 하겠습니다. 아마도 이런 '유형'의 소비자들이 대부분 소프트웨어 응용 프로그램을 사용하겠죠. 아래에 나오는 팁은 보다 효과적인 UI를 만드는 데 도움이 됩니다.

1. 표준 준수

운영 체제 수준, 브랜드 수준 또는 응용 프로그램 수준 등 어떤 수준에서 수립된 것이든 소프트웨어 환경에서 수립된 기준은 매우 중요합니다. 브랜드와 더불어 이러한 표준은 사용자에게는 일종의 신뢰할 만한 방식으로 여겨집니다. 어떤 소프트웨어 응용 프로그램을 사용하여 오랜 시간을 작업할 경우 해당 사용자는 소프트웨어와 점점 친숙해지면서 생산성이 자동으로 향상될 것입니다. 이것은 마치 집 근처의 도로를 운전하는 것과 같습니다. 권유하지는 않지만 아마 이런 경우 눈을 감고도 운전할 수 있을 것입니다.

표준에 대해서 더 설명하기 전에 먼저 이러한 표준이 정확하게 무엇을 의미하는지 알아보도록 하겠습니다. 앞에서 말했듯이 확인/취소의 순서로 단추를 배치하는 것처럼 표준에는 대화 상자의 컨트롤을 특정 방식으로 배치하는 것에서부터 Windows XP 대화 상자의 사용자 인터페이스 창 상단의 둥그런 모서리, 아이콘 스타일, 기타 그래픽 스타일, 응용 프로그램의 대화식 동작 등 모든 것이 포함됩니다.

올바른 표준 집합을 선택하려면 응용 프로그램을 간단히 검사해야 합니다. 새 응용 프로그램을 위한 가장 좋은 표준은 현재 Windows 디자인 지침으로, 당장 사용할 수 있는 최신 표준으로는 Windows XP 디자인 지침을 들 수 있습니다. 응용 프로그램을 디자인하는 중에 곧 다른 운영 체제 버전이 출시될 상황인 경우 이전 버전과의 호환성만 유지된다면 다음 버전용 디자인 지침을 사용하는 것도 무방합니다. 그러면 적어도 최종 사용자에게는 "좀 더 앞서간다"는 느낌을 줄 수 있습니다.

만약 응용 프로그램이 일반적인 응용 프로그램이 아닌 경우 다른 표준 집합을 따르는 것이 좋습니다. 일례로 개발 중인 응용 프로그램이 Microsoft Office OneNote 2003용 응용 프로그램이나 추가 기능을 지원할 경우 Microsoft Office의 UI 스타일과 대화형 작업 표준 및 OneNote 자체의 표준을 따르는 것이 현명합니다. 즉, 시각적, 기능적 면에서 표준 도구 모음이 아닌 Office 스타일 명령 모음을 사용하고 대부분 Office 스타일을 따르는 것을 뜻합니다. 개발 중인 응용 프로그램이 Microsoft Visual Studio .NET 범주에 속할 경우 별도의 표준 집합을 준수해야 합니다. 사실 이러한 추가 기능이나 지원 응용 프로그램을 위해 Microsoft에서는 문서화된 지침을 배포하고 있습니다. 또한 그래픽과 디자인 개념은 종종 보호되는 지적 재산이므로 이러한 디자인을 만들 수 있는 라이선스가 있는지 항상 해당 설명서를 확인해야 합니다.

표준의 세 번째 예는 Tablet PC 환경입니다. 이러한 표준은 운영 체제 지침과 응용 프로그램 지침 사이의 경계를 넘나듭니다. Tablet PC SDK documentation(영문)에는 "응용 프로그램 계획"에 관한 주제와 관련하여 매우 유용한 몇 가지 정보가 수록되어 있습니다. Office 2003 또는 Visual Studio 지침과는 달리 이러한 디자인 권장 사항은 사용자들이 응용 프로그램을 어떻게 사용하는지, 이에 따라 응용 프로그램이 어떻게 작동해야 하는지에 직접적으로 영향을 미칩니다. 예를 들어 응용 프로그램에 고정 창이 있는 경우 설명서에서는 화면 방향이 변경될 경우 감지할 수 있는지 확인하고 필요에 따라 가로, 세로 방향으로 고정 창이 적절히 재구성되도록 하라고 권장합니다. Tablet PC용으로 응용 프로그램을 설계하지 않는다 해도 이러한 지침을 준수하라고 다시 한번 당부 드리고 싶습니다. 개발자인 여러분과 여러분이 개발하는 응용 프로그램은 이러한 지침을 준수함으로 인해 보다 향상될 수 있을 것입니다.

스마트 클라이언트의 출현으로 일반 PC, Tablet PC, 모바일 또는 초소형 모바일 장치, 미디어 센터 PC 등 서로 다른 하드웨어의 경계를 넘어 응용 프로그램이 사용되고 있습니다. 각각의 상황에 맞추어 서로 다른 또는 추가적인 표준 집합을 준수해야 합니다.

응용 프로그램에서 운영 체제 수준 또는 응용 프로그램 수준 표준을 공유할 경우 사용자들은 배우기 쉽고 사용이 편리한 소프트웨어를 통해 편안함을 느낄 수 있으며, 이는 생산성 향상에 직접적으로 이어집니다. 더욱이 사용자들은 프로그램의 사용 방법을 배우기보다는 프로그램을 바로 사용하길 원합니다.

2. 중요 단추에 주의 끌기

때로는 주변에 다른 단추가 4~5개 있는 경우 가장 중요한 단추에 사용자들의 관심을 집중시켜야 하는 경우가 있습니다. 크기, 색상 또는 글꼴 때문에 혼동스럽다면 표준을 위반해도 되기는 합니다. 그러나 물론 권장되지는 않습니다. 대신 간단한 몇 가지 트릭을 사용할 수 있습니다.

그림 4. LinkLabel과 쌍을 이루어 사용하면 단추에 주의가 더 집중됩니다.

첫 번째 트릭은 중요하지 않은 단추를 LinkLable로 변환하는 것입니다. 이렇게 하면 사용자는 이러한 링크가 작업을 수행하게 된다는 것을 알게 되므로 표준 디자인 지침을 위반하지 않고도 먼저 눈에 띄는 단추로 주의를 돌리게 됩니다.

그림 5. 왼쪽에서 오른쪽으로 읽는 습관으로 인해 맨 왼쪽의 단추가 가장 먼저 눈에 띕니다.

두 번째 트릭은 단추를 줄의 가장 처음에 배치하는 것입니다. 즉, 가로로 배치된 경우에는 맨 왼쪽에 세로로 배치된 경우에는 맨 위에 배치합니다. 대상 사용자의 습관에 따라 이러한 배치에 변화가 있을 수 있다는 점을 염두에 두시기 바랍니다. 오른쪽에서 왼쪽으로 읽는 언어로 된 응용 프로그램의 경우 해당 단추를 가장 오른쪽에 두는 것이 좋습니다.