First timestep Previous timestep Next timestep Last timestep
Timestep selector Exit
다. Geometric widget의 시각 디자인
Geometric widget은 line, plane, cube, sphere 위젯 등으로 구분하는데, 기본적으로 모든 위젯이 꼭짓점과 꼭짓점을 잇는 선분으로 만들어진다.
[그림 5-3] Line widget
[그림 5-4] Plane widget
[그림 5-5] Cube widget
[그림 5-6] Sphere widget
라. 위젯 및 다이얼로그 박스 디자인 (1차)
위젯/다이얼로그 박스를 디자인할 때에는 배경화면 등 사용자가 어플리케이션을 실행하면서 직접 보게 되는 콘텐츠의 색상과 내용을 고려했다. [그림 5-7]은 아이콘/다이얼로그 박스 의 디자인 작업에 사용했던 배경 이미지를 보여준다.
[그림 5-7] 가상현실 어플리케이션의 배경
[그림 7]의 배경을 바탕으로 위젯과 다이얼로그 박스의 1차 디자인 결과는 [그림 5-8]과 같다.
[그림 5-8] 최초 다이얼로그 박스 시안
최초 디자인의 목적은 우선 ‘눈에 보이는 실체’를 만들고 그것을 바탕으로 개선방향을 도출 하는 것이었다. 최초 디자인에 대한 수정사항은 다음과 같다.
• 배경을 이미지([그림 7]의 아래 두 그림)를 이용해서 큐브 맵으로 만들기도 하지만 단순 하고 어두운([그림 5-7]의 위 두 그림) 경우도 있음을 고려해서 다이얼로그 박스 디자 인을 수정하기로 했다.
• 제목영역을 축소하고 실제 내용이 들어가는 영역을 확대해서 제한된 영역 내에 포함되는 정보량을 늘리도록 했다.
• 다이얼로그 박스의 가운데 목록이 있는 영역의 항목 간 공백 라인을 줄이기로 했다.
• 아랫부분의 Accept/Cancel 버튼이 highlight 됐을 때의 색상을 다르게 해서 쉽게 인지할 수 있도록 수정한다.
위의 수정사항을 반영한 결과 [그림 5-9]의 결과를 얻었다.
[그림 5-9] 1차 수정버전 (왼쪽 : white version, 오른쪽 : black version)
마. 위젯 및 다이얼로그 박스 디자인 (2차)
1차 디자인 결과는 무채색을 기반으로 하기 때문에 전체적으로 시인성이 떨어지는 단점이 있었다. 이를 보완하기 위해서 원색을 주로 사용하는 등 전반적인 수정을 진행해서 [그림 5-10]의 2차 디자인을 얻었다.
[그림 5-10] 2차 디자인 결과
(위부터 아래로 키패드 4종류, 리스트, 일반 다이얼로그 박스)
2차 디자인에 대한 수정/확정사항은 아래와 같다.
바. 위젯 및 다이얼로그 박스 디자인 (3차)
2차 디자인에 대한 수정/확정사항을 반영해서 [그림 5-12]의 3차 디자인을 얻었다. 여기서 가장 큰 변화는 2차 디자인까지는 하나의 다이얼로그 박스 내에 모든 기능을 포함시켰지만 3차 디자인부터는 이를 주제별로 묶어서 여러 개의 소형 다이얼로그 박스로 분리한 후, 좌/
우 스크롤 기능을 이용해서 필요한 주제를 선택하도록 했다는 점이다.
[그림 5-12] 3차 디자인 결과 (3가지 색 구성방안 포함)
3차 디자인 결과에 대한 수정사항은 다음과 같다.
• 일반적으로 프로젝터의 색 표현능력은 모니터보다 떨어지는 경우가 많기 때문에 제목이 배경에 묻히지 않도록 했다.
• 개별 다이얼로그 박스의 종횡비를 황금비에 가깝도록 해서 갸름하게 보이도록 수정하기로 했다.
• 다이얼로그 박스의 외형을 구성하는 경계선과 실제 내용이 출력되는 영역 사이의 공백의 크기를 조절해서 시각적으로 더 안정되게 보이도록 수정하기로 했다. 특히 키패드는 버튼 의 경계선이 눈에 잘 띄기 때문에 이 부분에 대한 신중한 접근이 필요했다.
• 키패드의 버튼 크기 역시 다이얼로그 박스의 외형 경계선과의 여백을 고려해서 더 안정적 으로 보이도록 했다.
사. 4차 디자인
[그림 5-13] 4차 디자인
4차 디자인에 대한 수정사항을 다음과 같이 도출했다. 이 시점에 대부분의 형태와 색상이 확정된 것으로 판단하고 세밀한 부분의 조정에 초점을 맞췄다.
• 제목부분 바탕색을 밝게 수정(어두운 배경이 있을 때 프로젝터의 색상 표현 능력이 떨어
지면 아예 보이지 않을 수 있음을 고려)
• 파일목록 다이얼로그 박스에서의 여백을 추가하는 방안을 고려하기로 했다.
• 화살표의 위치를 ‘Select all’이나 ‘target’ 이 아닌, 첫 번째 파일 목록에 붙도록 했다.
• 상태 바(status bar) 가장자리 장식부분의 색을 조정하기로 했다.
아. 최종 디자인
최초 디자인부터 4차 수정 디자인에 이르기까지 나왔던 모든 의견을 반영해서 최종 디자인 을 얻었다. 이 때 다양한 색상 테마도 추가해서 사용자가 다양한 테마를 선택할 수 있도록 했다.
[그림 5-14] 최종 디자인 및 다양한 테마의 적용사례