영상대본 / 후기 : 3화 영상
UI 디자인을 위한 게슈탈트 시각이론 - 영상의 대본과 제작후기
작업방식
2회차 작업을 끝마친 이후, 새벽에 갑작스레 영상을 만들고싶어져서 시작한 3회차 영상. 개인적으로 시각화하기 가장 어려웠고, 복잡한 내용들이었다. 기존에 번역했던 게슈탈트 시각이론에 대한 부분들 중에, 핵심적인 4개 사항들만 정리했던 영상이다. 대본작업시에 시각화된 시안들이 없는 상태에서. 대본을 작성했기 때문에. 중간중간 계속 수정을 해줘야했다. 게다가 시각물과 음원 사이의 간격조절 역시도. 꽤나 중요한 이슈였다. 개인적으론 가장 어려웠고, 작업 후 만족도가 높았던 영상. 어려운 이론을 풀어 설명하는 영상이라는 말이 딱 알맞았다.
영상 완성본
소개 게시글
https://brunch.co.kr/@clay1987/119
글자수 : 4000자 / 음원 길이 : 13분
안녕하세요, 리플러스입니다. 오늘은 UI 디자인을 위해 거의 필수적인 시각이론 중 하나인, 게슈탈트 이론에 대해서 이야기해보려합니다.
UI 디자이너는 항상 여러가지 시각물들을 다뤄야하는 상황에 놓이게됩니다. 그렇기 때문에 시각물을 바라보는 방식과, 분석하는 방식에 대해 익숙해져있어야해요. 여러가지 규격에 맞는 시각물들도 만들 수 있어야하구요. 그러나 대부분의경우 - 시각물 자체를 분석하는 방식에 대해서는 깊이있게 이해하지 못하는 않는 경우가 많은데요. 오늘 이 이야기에서는, 사람의 뇌가 동작하는 방식과. 시각물을 바라보는 방식. 그리고 여러 시각물들을 들여다보는 좋은 방법에 대해 이야기해볼겁니다.
일단 게슈탈트 이론이라는게 뭔지에 대해서 알아봐야겠죠?
게슈탈트 이론이란 1920년대, 독일 심리학자들에 의해 개발된 - 시각적 인지방법에 대한 이론이에요. 좀 간단하게 말하자면, 사람이 무언가를 바라보고 인식할 때. 일정한 경향이 있다는 내용입니다. 그리고 UI 디자이너들은 이런 시각적 경향을 이용해서 더 나은 구조나. 시각요소들을 한데 묶어서 정리할 수 있는 거죠.
간단히 예시 화면을 하나 들어볼게요.
(작은 점) 뭐가 보이시나요? 점들이 놓여있죠. 그렇다면 이걸 좀더 작게 바라볼까요? 달마시안 강아지가 되었네요.
이처럼 사람의 눈은 개별 시각물들의 요소요소를 관찰하는게 아니라. 전체를 모아서, 스스로가 생각하는 '가상의 원형'을 바라보게됩니다. 말 그대로 우리가 생각하는 것처럼, 사람의 시각이라는건 간단하지 않다는 이야기에요. 이걸 설명하기위해서는 포지티브 영역과 / 네거티브 영역이라는 - 시각적 인지의 단위를 좀 설명해야합니다. 어려운 말처럼 들리지만, 별거 없어요. 바라보려는 대상을 A라고 친다면. 그 이외의것들을 B로 치고, 하나로 묶어서 본다. 이런 이야기입니다.
포지티브 영역 / 네거티브 영역
그림을 보시면 잔이 하나 보이죠?
(색상반전)
이렇게하니 두 사람의 얼굴이 보이네요. 이런 디자인에 쓰인 방식을 포지티브 영역 / 네거티브 영역을 통한 디자인이라고 부르는데. 말 그대로 그려진 내용을 어떻게 바라보는가에 따라 전혀 다른 모습이 되는걸 알 수 있어요. 그리고 이 역시도 UI 디자인에 있어서 매우 중요한, 실루엣을 다루는 역할을 합니다.
자, 그럼 이제 - 실제 UI에서 이 내용을 적용해볼까요?
이 시안을 보면, 똑같은 박스형태의 UI 요소들이 나란히 서있는걸 볼 수 있어요. 그러나 이걸 단순화하면 이런 박스 형태의 모습이 됩니다. 저는 이박스들을 비슷한것들끼리 모아서 단순화해볼게요. 매우 간단한 박스들이 되었죠?
우리가 UI 요소들을 바라볼때. 우리의뇌는 더 커다란 요소들을 바라보게 됩니다. 그렇기에 우리는 원본 UI 시안을 보더라도, 사실 머릿속으로는 여러개의 박스가 가지런히 놓여있는 모습을 바라보게되죠. 또한 기존에 이야기했던 포지티브 / 네거티브 영역으로 나눠서 생각해보면. 우리가 바라보고있는건, 여러개의 박스가 아니라, 구멍이 뚫린 커다란 틀일 수도 있다는 이야기입니다.
결국 UI 디자인에있어서 가장 중요한 이 '간격과, 배치'에 대한 부분은. 단순히 중요한 요소들의 비례 뿐 아니라. 비어있거나, 덜 채워진듯한 간격. 그리고 두 영역 사이의 상대적 비례가 중요하다는걸 알 수 있어요. 그리고 동일 요소들이 서로 동일한 색상을 갖고있을 경우. 더욱더 강한 효과가 난다는 것도 알 수 있죠.
1. 근접성의 원칙
여기 여러개의 원들이 있습니다. 색상과 관계없이 서로 가까이에, 일정한 간격을 가진 원들은 '마치 한 집합'처럼 보이게 돼요. 이것을 게슈탈트 이론에서는 '근접성의 원칙'이라고 합니다. 단순히 가까이에있고, 거기에서 규칙성을 찾을 수 있기 떄문이에요. 이런 법칙을 이용해서 만들어지는 것이 '패턴이고, 동시에 UI 요소들을 하나로 크게 묶는 중요한 기술이 됩니다.
실제 시안을 한번 보죠.
이 시안을 보면, 굉장히 복잡해보이지만, 사실 단순하게 만들면 - 이런 형태의 박스와 동그라미들이 모여있게된다는걸 알 수 있습니다. 그리고 그 사이에는 이렇다할 구분선도 없는데도. 서로 얼마나 가까이에 두었느냐에따라 마치 '한 묶음'처럼 보이게됩니다. 이처럼 UI 요소들의 간격이 중요한 이유는. 그 간격에따라 - 어떤 정보들이 한데 묶여있는 것처럼 보이는지가 달라지기 떄문입니다.
UI 디자이너들은 이런 '묶여져보이는 현상'을 자주 이용하게됩니다. 그래서 연관된 정보들을 한데 묶고, 통일성있게 보여줘서, 사용자가 원하는 정보를 찾을 수 있도록 도와주는 것이죠.
2. 공통영역의 원칙
자 이번에는 원들을 모아둔 그림으로, 돌아가볼까요? 기존과 다를바 없는 상황이지만. 여기에 배경을 그려서, 구역을 한번 나눠볼게요. 자, 어떤가요. 간격이 달랐던 시각물들조차도. 박스가 그려지고나니, 마치 한 묶임처럼 보이게됐죠? 이것을 공통영역의 원칙이라고 부릅니다.
실제 UI 디자인에서도 마찬가지로. 이런 '배경,이나 구분선'을 통해서 구획을 지어지는 형태를 자주 사용하게됩니다. 특히나 '색상'적으로 대비가 확실한 경우, 더욱더 깔끔한 결과가 나오게되죠. 이처럼 ui 디자인에 있어서 가장 자주 사용되는 '영역구분'방식은, 색상과 간격을 통한 경우가 많습니다.
3. 유사성의 원칙
마지막은 조금 다른 형태의 요소들을 한데 모은 그림이네요. 보시면 아시겠지만, 비슷하게 생긴 원들과 사각형들은 서로 동료인것 처럼 보이고. 그렇지 않은 녀석들은 서로 다른 종류처럼 보이게되죠? 이것을 게슈탈트 이론에서느 유사성의 원칙이라고 부릅니다.
https://www.youtube.com/watch?v=HkUTGbtZP6A
실제 시안을 통해서 확인을 해볼게요.
여러가지 아이콘들이, 각기 다른 실루엣을 갖고있네요. 그렇다보니 좀 정신이 없다고 느껴지네요. 실제로 UI디자인은 항상 통일성과 균일함. 일관성이 중요합니다. 그런 면에서, 서로 다른 형태의 아이콘들이 쓰인 시각물들과. - 동일한 형태의 아이콘들이 쓰인 시각물을 비교해볼게요.
어느쪽이 더 일관성이있고, 안정적이라고 느끼시나요?
사람의 눈은 여러가지 색상 뿐아니라, 전체적인 실루엣을 바라보는데에 익숙해져있습니다. 그리고 그 순서는 색과 형태 순서로 이어지죠.만약 위의 시안에서, 모든 아이콘들이 동일한 색상을 갖고있었다면 어떨까요? 더 안정적이지만, 동시에 지루하다고 느껴질 수 있겠죠.
4. 관념 속 원형 원칙
이번에는 조금 특이한 그림을 볼게요. 그려져있진 않은데. 그려진것처럼 느껴지는 것들이 있죠?
A 그림에서는, 존재하진 않지만, 마치 사각형 두개가 이곳에 있는 것처럼 느껴지고.
B 그림에서는, 거의 뚜렷하게 사각형이 보이는 것 같네요.
C 그림에서도 마찬가지로, 마치 삼각형이 놓여있는 것 처럼 느껴지실겁니다.
그러나 정작 '그려진' 부분만을 바라보면.
A 그림은 끊겨있는 호가 두개 그려져있을 뿐이고
B 그림은 삼각형 네개가 네 방향으로 놓여있을 뿐입니다.
C 그림 역시도 화살표 세개와, 팩맨같은 원형이 세개 놓여있을 뿐이죠.
이런식의 도형적 배치는 사람의 인식을 통해서 - 보이지않는것들을 보이게 만들고. 동시에 인식하게 만듭니다. 이것을 관념속 원형 원칙이라고 이야기합니다. 실제로 디자인에서는 이런방식으로, '시각적 안정감'이나, 도형적인 구성을 만드는 방법이 여럿 있는데요. 그중 대표적인 것이, 바로 이런 로고들입니다.
존재하지않는 글자를 보이게만들거나 손 모양과 사각형으로 집 모양을 보이게 만들기도하죠. 이런 방식으로 - 그려내진 않았지만, 실제로 그려낸 것처럼, 가사으이 도형이나, 실루엣을 보이도록 만드는 방식은 디자인에서 여러가지 방식으로 응용될 수 있습니다. 그 응용방법중 또다른 하나가, 바로 '보이지않는 도형'을 그려내는 방식인데요.
여기 한 디자인을 보겠습니다. 이 시안을 보면, 개별 사진과, 텍스트, 아이콘들. 그리고 버튼들이 놓여있는 것 같지만. 사실상 여기에는 숨어있는 도형이 하나 있습니다. 잘 보면 삼각형이 보이네요. 놀랍죠?
실제로 사진가들이나, 일러스트레이터, UI 디자이너들은 이런 보이지않는 틀을 바라보고. 그 레이아웃을 적극적으로 이용해야합니다. 그리고 그 형태가 얼마나 안정적인가에 따라서, 시각적 완성도 역시 많이 달라지게 되죠. 이외에도 게슈탈트 이론에는 대칭의 원칙이라거나, 연속성의 원칙, 동시이동의 원칙 등, 여러가지 원칙들을 갖고있습니다. 하지만 실무에서 자주 쓰이는 것은 위의 세가지입니다. 다시 정리를 해볼까요?
1. 근접성의 원칙
근접성의 원칙은 가까이에있는 녀석들을 묶어줘서, 마치 연관된 것처럼 보인다! - 라는 방법을 이야기합니다. 가까이에 붙을수록, 묶여져보인다. - 라고 기억하시면 될 것 같네요.
2. 공통영역의 원칙
공통 영역의 원칙은, 박스나 선 등으로 묶어주면, 연관된 것 처럼 보인다! 라는 방법을 이야기합니다. 말 그대로 면적을 가진 색이나, 선 등으로 묶어주면 정리되어보인다 - 라고 기억하시면 될 것 같아요.
3. 유사성의 원칙
유사성의 원칙은 비슷한 색이나, 형태를 가지고있으면, 연관된 것처럼 보인다! 라는 방법을 이야기합니다. 다수의 시각물들을 함께, 안정적으로 보이려면 비슷하게 보이려면 색이나, 형태를 비슷하게 만들면 된다 - 라고 기억하시면 될 것 같아요.
4. 관념 속 원형 원칙
관념 속 원형의 원칙은, 우리가 바라보는건 개별 요소가 아니라, 전체의 큰 그림이다! 라는 방법을 이야기합니다. 그렇기에 의도적으로 도형이나, 실루엣을 그려넣지 않고도, 사람에게 인식하게 만들 수 있다 - 라고 기억하시면 될 것 같아요.
-
오늘은 UI 디자인을 위해서, 매우 중요한 이론중 하나인. 게슈탈트 이론중 네가지 원칙에 대해서 이야기해보았습니다. 시각물을 만드는데 있어서, 매우 도움이 되는 이론이기떄문에. 실제로 UI 디자인을 하거나, 공부하시는 분들은 꼭 알아두시면 좋을 것 같아요. 해당 내용에 대해서 좀더 궁금하신 분이 있다면, 영상 설명에 게슈탈트 이론에 대한 링크를 참조해둘테니, 읽어보시면 좋을듯 합니다. 자 오늘은 여기까지, UI 디자인을 연구하는 리플러스였습니다.
후기
글자수도 많았고, 마지막에 총정리를 하는 부분 덕에 길이가 더 길어졌다. 하지만 이론을 알려주는 영상이라는 점에서, 마지막 요약정리는 꼭 필요한 부분이었다. 게다가 이론의 시각화를 위해. 이론을 먼저 설명하고. 실제 UI의 시안을 단순화해서 - 해당 내용을 증명하는 단계를 거쳤다. 그리고 이런 증명과정을 위해서 이론마다 1~2개 이상의 시안을 단순화를 따로 작업해줘야했다. 그래서 실제 작업은 약 9시간 정도 소요되었고, 지금까지 작업해본 영상중 가장 길고, 어려운 작업이었다. 다만 이런 과정을 겪고나니, 왠만한 내용들은 내가 글로 써서 영상화가 가능하다는걸 알게됐다. 이론의 시각화라는 부분은 나중에도 굉장히 중요한 무기가 될 것이고. 그 가능성을 확인해본 시간들이었다.
