2010. 6. 15. 19:07ㆍ스터디
Gui 스터디 4장 시각디자인의 조직과 구조
2010.6.10
임 노 박 최 조 유
4장 시각디자인의 조직과 구조 차례
● 배경-인식적조직 시각디자인의 조직과 구조는 사용자에게 작품을 체계적으로 인식하기 위해 필요한 시각적 통로를 제공한다. 사람이 만든 물건의 구조는 자연발생적인 생성물이 아니기 때문에, 디자인 요소들 가운데서 확정된 관계를 의도적으로 이끌어 내야 한다. -통일성(Unity) -통합성(Integration) -가독성(Readability) -컨트롤(Control)
게슈탈트원리 : 부분적이고 아주 작은 요소들이 결합해 어떻게 전체적인 구조로 드러나는지를 설명 대칭성 - 하나의 형상에서 대칭적인 느낌이 크면 클수록 더욱 더 게슈탈트 식의 해석이 확실하게
그룹화 : 비슷한 요소들을 함께 묶음으로써 복잡한 정보를 사용자가 다루기에 적당한 단위로 나누어 줄이는 것이다. 관계 : 그룹화와 계층성은 디자인 요소들이 시각적으로 서로 관계를 가지면서 더욱 강화된다. 이러한 관계는 주로 시각적 변수에 의해 만들어지지만, 그중에서도 위치, 크기, 명암이 가장 효과적인 시각적 신호를 제공한다. GUI 디자인도 형태의 유사성과 정렬에 있어 같은 원리로 시각적인 관계를 만들 수 있다. 균형 : 계층 구조나 관계는 전체적인 구성과 조화를 유지하면서 이루어져야 한다. 균형이 이루어지려면 화면이나 페이지에 있는 요소들의 위치가 안정적이어야 한다. 디스플레이에 있어서의 균형이란 우리가 일상에서 느끼는 물리적 균형과 같다. 하나의 구성은 디자인 요소들이 시각적 축을 중심으로 시각적인 무게가 대략 비슷하게 맞추어질 때 균형을 이룬다.
▶ 테크닉
균형을 유도하는 대칭 사용 대칭의 아름다움은 대부분 균형이다 조화로운 배열에서 나타난다. 비대칭 레이아웃의 효과는 대칭이라는 본질적인 속성을 거부하는 것이 아니라 많은 정보를 목적에 맞는 방법으로 표현하기 위한 도구이다. 시각적 관계를 세우기 위한 정렬 사용 각 요소들을 기준을 잡아 정렬하면 전체적인 내용의 복잡함이 줄어들고 전체적인 형태 또한 깔끔하고 이해하기 쉬워진다. 정렬이란 디자인 요소들을 연결시키기 위한 가장 중요한 수단이며 강한 인식성을 가지고 있으며 즉각적이다. 인간의 눈을 위한 시각 이미지 보정 타이포 그래피에서 곡선적인 요소의 정렬은 기준선과 폰트의 높이에 대한 시각적인 보정이 필요하다. 곡선으로 된 형태는 실제 기준이 되는 정렬선을 약간 넘어야만 정렬이 올바르게 되어 있는 것처럼 보인다. 시각적으로 간격을 맞출 때 중요한 규칙은 요소들의 거리보다는 요소들 사이의 영역을 같게 하는 것이다. 시각적으로 똑 같은 크기로 보이게 하려면 원을 사각형보다 약간 크게 그려야 하고, 마름모형은 원보다 약간 커야 한다. 여백을 이용한 화면 구성 사용자 인터페이스 디자인은 화면의 모든 픽셀들을 최대한 효율적으로 사용해야 한다는 강한 전제에서 시작한다. 여백은 보는 사람의 시선을 중요한 정보로 이끌고 있으며 전체 구성이 의미있는 배열이 되도록하고 있다. ---------------------------------------------------------------------------------------------------------------------------- ●게슈탈트의 원리는 gui에서 중요한 이론을 제시하므로 꼭 알아두자. -> 블로그 검색등 많은 자료가 있음 (계슈탈트 학파..등) 1과 다른숫자간의 간격이 동등한 간격으로 적용하게 되면 시각적으로 불안정해 보인다.
● 기본원리
그룹화
계층구조
관계
균형
● 일반적인 오류들
위험한 레이아웃
대립하는 대칭성
모호한 시각적 관계
부분적 정렬
컨트롤 내부의 정렬
잘못된 구조
지나치게 조밀하게 채워진 디스플레이
혼란스러운 요소들
● 테크닉
균형을 유도하는 대칭사용
시각적 관계를 세우기 위한 정렬 사용
인간의 눈을 위한 시각 이미지 보정
여백을 이용한 화면구성
---------------------------------------------------------------------------------------------------------------------------
▶ 인식적 조직
근접성의원리 : 디자인요소들이 멀리 있는 것보다 가까이 있는 요소들과 좀더 강하게 묶이는 것
유사성의원리 : 디자인 요소들이 기본적인 특질을 공유하는 것 끼리 더욱 강하게 연결되 보이는 것
계속성의원리 : 불완전한 시각적 요소들을 묶어 하나의 완성된 형태로 보려고 하는 인간의 성향
그룹화의원리 : 영역화 - 겹쳐진 두 개의 형태 중에 큰 것은 배경으로 보이고 작은 것은 형태로 보이는 것
적용되는 것
▶ 기본 원리
대부분의 사용자 인터페이스 디자이너는 배경이 어둡고 형태가 밝은 역상적 효과의 화려함을 그다지 즐기지 않는다.
인터페이스에서의 그룹화는 중요한 내용을 주변적인 항목에서 분리시키면서, 또한 기능적 단위로 단단히 묶는 것을 말한다.
▶ 일반적인 오류들
위험한 레이아웃
대립하는 대칭성
모호한 시각적 관계
부분적 정렬
컨트롤 내부의 정렬
잘못된 구조
지나치게 조밀하게 채워진 디스플레이
혼란스러운 요소들
●숫자의 정렬
네버랜드 폰 킬러앱 리니어한 구조를 이용하여 나의 영역과 상대의 영역을 구분지어서 디자인 했음
삼성 피크도 좌우로 구조를 리니어하게 나누어서 관계를 보여준 프로젝트
우리 회사 홈페이지 디자인도 좌우 균형을 이용한 디자인으로서 오른쪽으로 치우쳐진 무게중심을 왼쪽 메뉴바를 나오게 함으로서 균형을 맞춰주는 구조이다.
모바일 화면을 디자인 할 때 화면을 그룹화하면서 종속되는 버튼에 대한 디자인을 여러가지 요소로 집단성을 보여 줄 수 있다. 오륜기를 보면 원 다섯개로 인식을 하는 것도 연속성의 이론이다.
gui디자인에서 게슈탈트 이론은 매우 중요하고 아이콘이나 심볼을 만드는데 있어서도 게슈탈트 이론은 매우 중요하다.
책에서는 형태를 기준으로 그룹화에 대한 얘기가 많은데 색을 이용한 그룹화도 있다. 또는 채도와 명도를 통해서도 그룹화가 가능하다.
실제 작업에서는 굉장히 복합적인 기준으로 그룹화가 이루어지기 때문에 단순히 책에서 나오는 것보다 더욱 많은 요소를 생각해야 한다.
여백을 통해서 그룹을 짓는 방법도 있다.
프로젝트를 해보면서 느낀점은 모바일 화면이 작다 보니 여백을 통한 그룹화는 좀 힘든 것 같고 정보중심의 화면 디자인이다 보니 여백보다는 확실한 라인을 통한 그룹화가 많이 이루어 지는 것 같다.
gui디자인을 하다보면 버튼과 이미지가 헷갈리는 경우가 있다. 실례로 디자인적으로는 플렛한 느낌이 명확하지 않아서 사용자들은 그게 버튼인지 아닌지 헷갈려하는 경우들이 많아서 그 접점을 맞추는게 어렵다.
디자이너라면 무조건 사용자의 기준에 무조건 맞춰주기 보다는 새로운 시도들을 통해서 버튼이 버튼 답지 않지만 사용자들이 버튼으로 인식 할 수 있게끔 하는 새로운 시도를 끊임없이 하는 자세가 필요하다.
윈도우7 모바일 디자인이 그런 의미에서 나름 파격적인 디자인을 시도 한 것같다.
zune 디자인을 보면 굉장히 파격적이면서 매거진 디자인스러운 느낌이다.
기술이 발전 하면서 모바일이라고 언제나 제한적이지만은 않을 것 같다. 그래서 미리미리 점점 새로운 것을 연구하는 자세를 가져야 한다.