비주얼 인터페이스는 기본 요소 몇 개만으로 이뤄져있다. 이런요소들이 어우러진 방식이 비주얼 인터페이스를 정의한다.
레이아웃
모든 스크린 비주얼 디자인의 핵심은 레이아웃이다.
레이아웃이란 구성요소, 칸트롤, 컨텐츠를 어디에 어떻게 배치할까 고민하는 것이다.
레이아웃은 이런 요소들을 배치할 구조를 만들어 내고 우선순위를 매겨 놓음으로써, 사용자는 무엇이 더 중요하고 무엇이 덜 중요한지 알 수 있다.
레이아웃은 공간이 한정된 작은 스크린에서 더욱 중요하다.
- 그리드시스템
- 그리드 시스템은 디자이너가 유사한 패턴 안에 존재하는 정보를 쉽게 조직화할 수 있게 도와준다.
- 이를 통해 스크린을 단순화하고 기본적인 단위로 분할하고 공간을 가로와 제로로 나눌 수 있다.
- 여기에 이미지, 툴바, 작업공간 같은 요소들을 필요에 따라 격자 위에 배치하고 종황으로 연결된 더 커다란 블록을 만들게 된다.
- 이 그리드 선은 불가침 공간이 아니라 제안선의 역할을 한다.
- 그리드 시스템을 효과적으로 이용함으로써 스크린 상의 개별 요소들을 관통하는, 시각적으로 정렬된 구조와 플로우를 만들어낼 수 있다.
- 그리드 시스템은 시각디자인에서 여백(다른 공간과 구분된 공간)을 계획할 수 있도록 도와준다.
- 일반적으로 저지르는 실수중 하나는 한 화면에 최대한 많은 기능을 끼워넣으려 노력하다가화면을 난잡하게 만드는것이다.
- 난잡한 화면은 시각적으로 혼란을 주고 애플리케이션을 사용하기도 어렵게 만든다.
- 눈의 초점이 한 곳에서 다른곳으로 이동할 떄 명확한 시각적 흐름을 주지 못하고 특정 화면의 한 부분에 집중할 수 없게 만든다.
- 기능들 사이에 여백을 만듦으로써 더 깨긓하고 명확한 디자인을 할 수 있게 된다.
- 화면상에 오브젝트들을 다닥다닥 끼워 넣으면 안 되는 또 다른 이유는 형태심리학적으로 사람의 마음은 가까이 붙어 있는 것을 서로 연관된 것으로 인지하기 때문이다.
- 시각적 흐름
- 눈은 일반적으로 왼쪽에서 오른쪽으로, 위에서 아랴로 움직이므로 이 흐름을 인지하고 여기에 맞춰 디자인해야 한다. 사용자들의 눈이 화면 전체를 여기저기 널뛰게 하는 것은 좋지않다.
- 정렬된 오브젝트는 서로 관련되어 보이며, 이들은 특히 수직이나 수평으로 정렬될 때 시각적으로 깔끔해 보인다.
- 다른 오브젝트의 하단에 한 단 들여넣어 배치된 오브젝트는 상단에 있는 기능의 하위 개념으로 인식되고 위쪽에 있는 오브젝트일수록 멀리 아래쪽에 있는것보다 중요하게 느껴진다
- 비주얼 인터페이스를 점검하려면 일명 '실눈테스트'를 해볼 필요가 있다.
- 눈을 가늘게 뜨고 화면을 바라보면 디테일들이 흐릿해지면서 화면 상에서 어떤 아이템이 더 잘 보이는지를 인식할 수 있다.
- 이를 통해 많은 경우 부차적이거나 그리 중요하지 않은 아이템이 생각보다 비중 있게 디자인되어 있음을 알 수 있다.
- 타이포그래피
- 사용성, 가독성, 명확한 제목과 택스트를 나타내는 바탕요소일 뿐 아니라 개성을 드러내는 요소이기도 하다.
- 서체
- 폰트는 세리프(serif)체와 산세리프(san-serif)체로 구분된다.
- 세리프 체는 대표적으로 타임즈(times)나 가러몬드(garamond)체를 들수 있고, 각 글자의 획 끝단에 세부 장식이 있다. 읽기 쉬워서 긴 문장이 주로 나오는 책에 특히 효과적으로 스인다.
- 산세리프 체는 헬베티카(helvetica)나 애리얼(arial) 체 등이 있는데 획끝단에는 아무런 장식이 없다. 짧은 문단이나 빠르게 훑어 봐야하는 광고판 등에 주로 쓰인다.
- 기본 화면이나 실제물체를 디자인하는 인터랙션 디자이너들에게는 산세리프 서체가 더 일반적으로 사용된다. 버튼의 글자, 소갯글, 매뉴 등에 특히 적합하다.
- 대부분의 프로젝트에서는 중간 너비의 서체가 제일 좋다.
- 적절한 가독성을 위해서는 전통적이고 오랜 시간을 통해 검증된 서체들인 메타(meta), 유니버스(univers), 프루티거(frutiger) 같은 서체를 택하면 거의 실패할 일이 없다.
- 한 번에 한 서체만 사용하려 하지 말고, 너무 비슷한 서체들을 섞어 쓰는 것도 피하는 편이 좋다.
- 타이포그래피 가이드라인
- 일반적인 상황에서 한 번애 크기과 굵기를 너무 잡다하게 사용하는 것은 좋지 않다.
- 기본 굵기와 표준 포인트 크기를 사용하고 표제와 헤더에는 다른 크기와 굵기를 제한적으로 사용하는것이 적절하다.
- 영문이나 텍스트 전체를 대문자로 쓰면 읽기 어려워진다.
- 단어하나나 문장 하나 정도를 제외하고는 대문자와 소문자를 표준에 맞게 사용하고, 작은 대문자(대문자를 소문자 사이즈로 작게 쓴것)와 일반 대문자는 절대 섞어 쓰지 않는다.
- 타이포 그라피에 대한 가이드 라인
- 크기
- 화면에서 글자 크기는 일반적으로 9~12포인트가 적당하고 모바일 기기용 화면에서는 6~10포인트가 일반적이다.
- 어느 경우이든 간에 6포인트 이하면 거의 읽기가 불가능 하다.
- 기기 바깥에 표시되는 폰트의 크기(예를들어 키보드의 키)는 기기ㅢ 크기에 따라 다를 수 있겠으나 6에서 9포인트 정도가 적절할 것이다.
- 정렬
- 왼쪽이 가지런한 상태에서 오른쪽을 잘라낸 왼쪽 맞춤 형태가 오른쪽 맞춤이나 양쪽 맞춤보다 훨씬 읽기 쉽다.
- 한줄의 너비가 충분히 길 때만 양쪽 맞춤을 쓰고, 오른쪽 맞춤은 아주 제한적으로 사용하되 긴 문장에서는 쓰지 않는다.
- 물줄기
- 단어 사이의 여백이 너무 넓어서 전체적으로 봤을때 이런 여백들이 글자 사이에서 세로로 물줄기 같은 형태를 띠는 것을 말한다. 이런것이 생기면 안된다.
- 위도우와 오펀
- 영문에서 전체 라인에서 단어 하나만 떨어져 나오는것을 위도우(widow), 칼럼이나 페이지의 처음이 단어 하나로 시작하게 되는 것을 오펀(orphan)이라 부른다.
- 행 폭
- 텍스트 블록을 구성하는 황금비률
- 너무 길지않게, 너무 짧지 않게, 딱 적당한 만큼만,.
- 영문으로 40자(알파벳 외의 기호, 띄어쓰기, 문장부호 등은 글자의 1/2폭을 차지한다)정도가 텍스트 블록의 최소한의 길이다.
- 일반적으로 55자에서 75자 정도를 사용한다.
- 행간
- 글 줄 사이의 공간
- 일반적으로 글자 크기보다 20% 정도, 혹은 글자보다 2포인트 많게 사용한다.
- 글자 크기가 10이라면 글자 크기는 12 정도로 잡고 글자 크기가 11이라면 간격은 13 정도로 잡는다.
- 만약 글자 크기가 8 이하라면 가독성을 위해서 간격은 더 넓게 잡는 것이 낫다.
- 시각적 회색도(optical gray)는 얼마나 글자가 밀도 있게 보이는가다. 텍스트의 회색도가 낮아질수록 더 읽기 쉽다.
- 행간이 넓을 수록 회색도가 낮아지고, 행 폭이 길수록 행간도 늘려 잡아야 한다. 그러므로 글줄이 길다면 3, 4포인트 정도로 늘려잡는 것도 괜찮다.
- 하지만 4포인트 이상 늘리는 것은 어느경우에도 좋지 않다.
- 자간
- 문자 사이의 공간
- 각 글자 간의 공간은 같게 보일 필요가 있다.
- 글자 크기를 18포인트 이상으로 작업하지 않는다면, 그리고 딱히 글자들을 좁은 공간에 끼워 넣으려고 고민할 필요가 없다면 자간 때문에 고민할 필요는 없을 것이다.
- 복수의 글자나 단어 간에 자간을 조절하는 일은 트레킹(tracking)이라고 부른다.
- 소문자의 경우에는 자간을 굳이 늘일 필요가 없다.
- 크기
- 색상
- 색상은 비주얼 인터페이스 디자인에서 다양한 기능을 수행한다.
- 기본적으로 개성과 분위기를 나타내지만 또한 인터페이스 디자이너들은 색상이 사용성에 대한 힌트를 제공한다는 점에 주목한다.
- 휴대폰에서 빨간 버튼은 '종료'나 '중지'를, 초록 버튼은 '통화'나 '진행'을 나타낸다.
- 색상은 흩어져 있는 오브젝트 간에 관계성을 만들어내기도 한다. ex)웹사이트의 버튼은 위치를 막론하고 같은 색으로 만들 수 있다.
- 색상은 중요성을 나타내는 표지자다.
- 채도가 높은 파란색 박스는 옅은 노란색보다 훨씬 빨리 눈길을 잡아끌 수 있다.
- 색상의 거의 쓰지않으면 매우 지루하고 너무 많이 쓰거나 고채도의 색을 남발해서 서커스 화면처럼 보이기도 한다.
- 남자들의 10%는 어느 정도 색맹이며, 이 사람들은 초록색과 붉은 색을 회색 그림자로 여겨 구별하지 못한다는 사실도 기억해둘 필요가 있다.
- 색상의 기본
- 모든 색상에는 세 가지 기본 속성이 있다. 색조, 색가(혹은 명도), 강도(혹은 채도)이다.
- 색조(hue)는 색상 그 자체를 말하거나, 공학적으로는 특정한 가시적인 광학 스펙트럼 안에서의 특정한 색깔을 가리킨다.
- 색가(value)는 해당 색상에 포함된 검은색의 값을 말한다. 즉 얼마나 어둡거나 밝은가를 가리킨다.
- 강도(intensity)는 색상의 선명도나 흐리기를 말한다.
- 색상환에 익숙해질 필요가 있다.
- 색을 선택하는 데도 중요하지만 색과 관련된 문제를 회피하는 데도 요긴하게 쓰인다.
- 보색이란 이 색상환에서 서로 반대쪽에 있는 색상을 말한다.
- 보색을 사용하는 데 있어서는 많은 주의를 기울여야한다. 색이 서로 더욱 튀어 보이긴 하겠지만 집중을 방해하기 쉽다.
- 흰 배경은 색상을 죽이거나 어둡게 보이게 한다.
- 검은 배경은 색상을 밝게 보이게 한다.
- 배경에 순수한 흰색이나 검은색을 쓰지 말고 밝은 회색을 써보자.
- 옅은 노란 바탕색 위의 검은 글자는 나이든 사람의 눈에도 편안하게 보인다.
- 색입체시라고 불리는 현생에 주의하자. 이는 두가지 색깔을 붙여놓았을때 두 색깔 모두 어지업게 보이는 현상이다. 빨간 바탕에 파란글자는 사람으 눈이 피곤해진다.
- 색깔이 있는 바탕 화면에 색깔 있는 텍스트를 배치하기는 꽤 쉽지 않은 일이다.
- 색상을 쓸때는 사용하는 색과 배경색 사이에 확실한 차이가 있는지를 고려해야 한다.
- 채도와 명도를 다르게 하면 전면의 아이템이 확연히 드러난다.
- 최초의 색 조합을 고를 때는 이들을 같은 색가로 고르도록 노력한다.
- 같은 색가와 채도를 가진 색상들은 서로 어울리고 통일감도 준다.
- 사람의 눈은 색상에 대단히 익숙하고 사람의 뇌 또한 의식적으로든 무의식적으로든 색상에 밥ㄴ응하기 때문에, 색상은 비주얼 인터페이스 디자인의 강력한 도구 중 하나이다.
- 재질과 형태
- 비주얼 인터페이스 디자인은 컴퓨터 화면 안에서만 이뤄지는 것이 아니다.
- 이 화면을 둘러싸고 있는 것과 스크린 자체도 비주얼 디자인의 영역이다.
- 재질은 고유한 개성을 가지고 있으며 손에서 다른 느낌을 주고 시각적으로도 다양한 경험을 제공한다.
- 재질은 휴대용 기기에서 특히 중요한 요소인 무게를 결정한다.
- 물리적인 컨트롤의 재질과 형태는 기기를 막론하고 대단히 중요한 요소다.
ex)키보드의 키들은 수없이 반복되어 눌려도 괜찮을 만큼 단단해야하지만 누르는 조작감을 해칠 정도로 단단해서는 안된다.
----------------------------------------------------------------------------------------------------------------
비주얼 디자인이 인터랙션 디자인에 어떤 도움(혹은 걸림돌)이 되는가?
- 비주얼 디자인은 사용자들에게 뭘 보아야 할지, 어떻게 작동시킬지, 왜 그래야 하는지를 설명한다.
- 비주얼 요소가 자신들이 뒷받침해야 하는 숨겨진 인터랙션에 대한 이해가 없이 배치된다면 사용자들에게는 잘못된 정보가 전달된다.
- 비주얼 스타일은 아주 중요한 인터랙션 옵션이나 경계, 상태 메시지등을 불분명하게 만들어버리거나 혼란스럽게 함으로써 UI에는 확연하게 부정적인 영향을 끼칠 수 있다.
- 비주얼 디자인을 인터랙션디자인과 정보 아키텍쳐의 '전달자로' 보면 애플리케이션에 존재하는 컨텐츠와 작동방식의 중요성(연결성)을 알 수 있다.
인터랙션 디자이너가 비주얼 디자인에 대해 알아야 할 것은 어떤것인가?
- 하나는 비주얼 체계이고 또하나는 개성이다.
- 비주얼 체계라는것은 시각적으로 개연성을 구성하는 지각(우리가 본 것을 어떻게 느끼는가)의 법칙을 통해 이루어 진다.
- 애플리케이션이 무엇이든간에 작업응ㄹ 완료하고, 정보를 조직화하고, 인터페이스 요소 간의 상하구조를 표현할 수 있다.
- 비주얼 체계는 성공적인 인터페이스 디자인에 있어 가장 중요한 요소이다.
- 비주얼 디자인의 효과에 대한 담론들은 비주얼 체계에는 거의 초점이 맞춰져 있지 않고 대신 주관적인 인터페이스의 개성(모양새) 평가에만 한정되어 있다.
- 개성은 사용자들에게 특정한 메시지를 전달하기위해서 색상, 폰트, 패턴, 이미지, 그 외의 시각적 요소들을 잘 배치해서 생겨난다. 어쨌든 모든 비주얼 디자인에는 색상과 폰트가 포함되어 있다보니 비주얼 디자인을 평가할 때 다들 색상이나 글자에만 먼저 주의를 기울인다.
- 인터랙션 디자이너라면 비주얼 체계 아래 숨어 있는 법칙들을 배워야 같이 일하는 비주얼 디자이너, 해당 제품의 사용자들과 더 원활한 커뮤니케이션을 할 수 있을 것이다.
자주하는 인터페이스 실패 사례는?
- 시각적 대비를 과도하게 사용하는 경우. 사용자가 눈길을 어디다 줘야 할 지 모르게 한다. 디자인 요소 간에 질서가 없다 보니 화면 상의 컨텐츠와 액션 사이에 플로우도 존재하지 않게 된다.
- 다양한 시각적 관계를 가진 개별 인터페이스 요소 간의 차이점을 과도하게 강조하는 경우
- 매번 다른 폰트, 크기, 색깔, 정렬을 쓰는것
----------------------------------------------------------------------------------------------------------------
출처 : (에이콘 UX 프로페셔널 시리즈 1-01) 인터랙션 디자인: 더 나은 사용자 경험(UX)을 위한
