1. 오늘의 아티클
시각적으로 균형있는 디자인하는 방법 (시각 보정 팁)
아티클 원문
2. 아티클 요약
게슈탈트 이론
게슈탈트란? : 구성, 형태 전체등을 의미하는 독일어, 사람이 정보를 인식할때 형태나 관계로 지각하려는 경향성
-근접성의 원리 : 서로 가까이 이는 것끼리 무리를 지어 하나의 의미 있는 형태로 지각하려는경향
-유사성의 원리 : 서로 비슷한것끼리 뭉쳐서 의미있는 형태로 인식하려는 경향
-완결성의 원리 : 불와전한 것을 완전한 것으로 보려는 경향
-연속성의 원리 : 선형요소들의 방향으로 계속되는 것처럼 인식하거나 서로 연결된 것으로 보려는 경향
-전경과 배경 : 눈에 두드러지게 보이는 특징, 사물의 크기, 모양, 색 등의 특징이 하나의 형태를 이루게 되어 배경과 구분되어 인식하려는 경향
1. 측정한 크기와 눈에 보이는 크기
400 픽셀의 사각형과 원중 어떤 것이 더 클까? 둘의 너비와 높이는 동일하나 우리 눈에 사각형이 더 커보인다.
왼쪽은 400픽셀의 원과 사각형을 겹쳤을 때 , 오른쪽은 400픽셀의 사각형과 450픽셀의 원을 겹쳤을때의 이미지다.
왼쪽은 사각형이 원보다 훨신 큰 영역을 차지 한다. 오른쪽은 원과 사각형이 서로다른 높이와 너비를 가지고 있지만 비슷한 영역을 차지하고 있어 균형이 맞춰져 있다.
이러한 효과를 인터페이스에 적용하려면?
예로 들어 우리가 아이콘 세트를 만들 때, 균형을 맞추기 위해서 아이콘을 사각형 영역에 맞춰버리면, 사각형에 가까운 도형들이 더 커보일 것이다. 균형을 맞추기 위해선 시각적으로 더 커보이고 영역을 많이 차지하는 아이콘 사이엔 공간을 남겨두고, 시각적으로 더 작아보이는 아이콘의 영역을 키움으로 도형마다 너비를 보정해야한다.
✨ 시각적 균형을 체크하는 가장 쉬운 방법은 각 모형들을 블러 처리 해보는것.
( 만약 아이콘이 서로 비슷하게 덩어리 진다면, 그들은 동일한 시각적 무게를 가진다.)
-시각적 무게는 인간의 눈이 오브젝트의 중요도와 크기를 인식하는 방법이다. 픽셀 사이즈와 영역이 동일할 필요는 업다.
- 원, 다이아몬드, 삼각형, 그 외 비사각형 도형들은 사각형 도형들과 시각적 균형을 맞추기 위해 더 키워질 필요가 있다.
- 아이콘 영역은 시각적 균형을 위해 조금의 여백을 두어야 한다. 이는 아이콘 세트를 만들 때 일관성을 갖기위해 매우 중요한 요소이다.
2. 다양한 도형의 배열(정렬)
픽셀 기준으로 둘은 길이가 같지만 시각적으로 봤을 때 위의 스트라이프가 더 길어 보인다.
시각적 보정으로 밑의 스트라이프의 길이를 늘려보면 시각적으로 둘의 길이는 같아 보인다.
배경색이 있는 문단은 어떻게 정렬할까?
배경색이 밝다면, 중요한 문단을 배경 크기와 상관없이 나머지 텍스트와 똑같이 정렬한다. ( 배경색이 밝은 경우 기존의 텍스트 흐름을 망치지 않기 때문)
배경색이 어둡다면?
밝은 배경에 비해서 시각적 무게를 지닌다. 문단을 끊김 없게 하고 싶다면 위 이미지처럼 정렬을 하는게 좋다.
텍스트 버튼은 수평 정렬뿐만 아니라, 수직 정렬도 신경 써야한다.
폰트 대문자의 높이에 기반한 정렬(cap height)
"H" , "I" 의 높이와 같음
대문자 상하 여백과 버튼의 가장자리는 동일하다. 어센더(윗부분이 튀어나온 -l,t,d,b,k,h)가 디센더(아랫부분이 빠져나온 -y,j,g,p) 보다 크다
-뾰족한 가장자리를 지닌 도형은 사각형 오브젝트에 가까이 있을 때, 시각적 균형을 맞추기 위해 더 길거나 크게 만들어야 한다.
-Cap-Height 정렬은 버튼명과 버튼 배경을 배치할 때 효과적인 방법이다.
-버튼 위의 삼각형 아이콘 위치를 바로잡을 때 효과적인 방법 중 하나는 삼각형을 원으로 둘러싼 후, 배경과 정렬하는 것이다.
3. 시각적으로 올바른 모서리 바운딩
인간의 눈은 직선이 갑자기 곡선으로 변하는 부분을 즉시 알아차린다.
원을 넘어서 여분의 공간을 만들어 눈에 띄지 않는 모서리 만나는 지점을 만들어주면 자연스러워 보인다.
-기하학적인 둥근 모서리는 갑자기 곡선으로 바뀌는 점을 쉽게 볼 수 있어서 인위적으로 보인다.
-시각적으로 올바른 모서리 라운딩은 특별한 공식이나 수동으로 모양을 조정하는 것이 필요하다.
3. 인사이트
오늘의 아티클을 읽고..
오늘 아티클은 시각적 균형에 대한 주제였다. 게슈탈트 이론을 기반으로 한 내용들이였는데 사전 캠프에서 웹클론과 앱클론을 만들 때 항상 텍스트와 아이콘의을 만들때 마다 뭔가 균형이 맞지 않는다는 느낌이 많이 들었는데 그 원인을 아티클을 통해 알게 되었다.
오늘의 아티클을 한줄로 요약해 보자면 원은 사각형 보다 크게
