UI 디자인 스터디 : 그리드와 레이아웃 분석 방법
그리드와 레이아웃을 분석하기 위한 최소단위에 대한 이야기
오늘은 그리드와 레이아웃 분석에 대해 좀 더 깊이 파고들어가보기로 하자.
네이버 블로그 UI 요소 분석 - 맛보기편
http://clay1987.blog.me/221393138972
일단, 그리드에 대해서 좀 이야기를 해보도록 하자.
1. 그리드라는건 대체 뭐고
2. 그건 왜 만들어졌고.
3. 무엇에 기반하고있는가?
그리드는 간단히 말해서 모눈종이고.x와 y 좌표로 이루어진 위상체계다. 2차원 평면에 시각물을 재현하기 만들어졌다. 사실 더 깊게 파고들어가면, 그리드란건 절대좌표나 상대좌표. 수학을 넘어서서 철학이나 신학과도 관계가 있는 내용이다. 그치만 이거까지 얘기하면 우리들 머리만 빠개지고 재미도 없을테니 넘어가도록 하자.
면적과 비례의 수학적 균일함은 보는이로 하여금 안정감을 준다. 그 이유를 굳이 증명하진 않겠다. 사실 나중엔 그 이유도 논리적으로 설명하고싶긴 한데. 당장 그걸 하기엔 이야기가 너무 길어지니까. 일단은 넘어가자.
인공물들을 제외한 모든 자연물은 - 면적이 제멋대로고, 일관성이라는게 별로 없다. 실제로 자연물 속에서완전히 같은 면적과 비례란 존재할 수 없다. 그래서 제대로 정돈되지않은 인공물이나, 자연물은 모두 시각적 혼돈을 가져다주기 마련이다.
인간이란 동물은 고대부터 '시각적 안정'에 민감한 동물이었다. 문명의 발전에 따라 기술이 발전함에 따라, 거대한 건축물에서도 자로 잰듯한 깔끔한 배열을 만들어냈다. 아래 사진만 봐도 알겠지만 가능한한 균일한 규격과, 비슷한 면적의 패턴을 가질수록. 모든 시각물은 안정적으로 느껴진다.
이런 반복적 배열과, 동일한 단위를 시각물에도 부여하려고 만들어진 것이 그리드 시스템이다. 모든걸 균일하게 만들기 위해 인공적인 규칙이자, 제한을 만든 것이다.
그리드 시스템의 핵심은 최소단위와 최대단위가 모두 '동일한 최소단위'에서 시작되었다는 점이다. 이걸 수학적으로 보면 최소공배수 개념이고, 실제로 그리드 시스템은 최소의 단위를 다른 시각물들에서 얼마나 잘 지키는가에 따라 수준이 달라진다. 무작정 줄을 긋는게 중요한게 아니다. 최소 단위가 정해졌으면, 그걸 무조건 지켜야한다. 그런 강박적 일관성에서 안정적 패턴이 만들어진다.
사실, 크기의 변화에서도 수학적 패턴이 존재한다. 달라진 크기라 해도 동일한 속성이나, 일정 비례를 유지할수록, 모든 시각물은 안정적으로 보이는것도 이런 이유에서다. 그 대표적인 사례가 러시아의 민속인형이다. 작아져도 원형의 비례를 유지하고있고, 커져도 마찬가지다. 인공적으로 만들어진 특이한 구조지만, 사실 자연계에도 이런 형태가 존재하긴 한다.
가장 작은 구조와, 가장 큰 구조가 동일한 구조. 그게 자연계에도 엄연히 존재한다. 단지 그게 너무 크거나, 역으로 작다보니 잘 안보일 뿐이다. 그런 자연계를 따라 만든 시각물이 바로 피보나치 수열을 기반으로 한 - 프랙탈 패턴이다. 아래 이미지를 보면 가장 작은 육각형은 가장 커다란 육각형과 거의 비슷한 형태를 갖고있다. 자연적인 패턴이다보니 찌그러진 부분들이 좀 있긴 하지만 - 자연물에서도 일정한 패턴이 존재한다는걸 알 수 있다.
자, 빨려들것 같은 프랙탈 패턴은 일단 남겨두고. 이제 UI 디자인의 영역으로 넘어와보자. 사실 UI 디자인에 있어서도 이런 통일성을 지키는게 중요한건 마찬가지다. 일정한 최소단위가 정해진다면, 다른 오브젝트들 모두 해당 최소단위의 배수가 되어야한다. 그래야 시각물이 안정적으로 보인다. 아래의 이미지를 보자. 가장 작은 정사각형과, 커다란 직사각형들이, 어쩐지 프랙탈 패턴처럼 동일해보이지 않는가?
자, 이젠 위의 사각형 박스조각들과 아래의 이미지를 비교해보자. 아래의 이미지는 네이버 블로그의 UI 요소들을 커다랗게 박스로 만들어놓은 그림이다. 위의 그림과 비교했을 때 뭔가 다 비슷비슷하다는 생각이 들지 않는가? 자세히 들여다보면, 최소단위라고 써붙인 아주 작은 빨간 박스에서부터, 가장 큰 회색 박스들. 모두 사각형이라는 공통점을 가진다. 그걸 누가 모르냐고? 하지만 그게 이번에 들여다볼 핵심 내용이다!
방금까지 봤던 이미지를 다시 세세한 구조까지 보이게 만들어봤다. 최소단위라고 써져있는 사각형크기의 모눈종이를 그려넣어봤는데 어떤가. 정확히는 모르겠지만, 대부분의 박스들이 눈금에 정확히 맞아 떨어지지않는가? 여기서 한걸음 더 들어가면 대부분의 오브젝트들이 가장 작은 빨간 박스의 일정 배수라는걸 알 수 있다. 아래의 시각물이 안정적인 느낌이 드는 이유도, 결국 이런 일관적인 패턴화 때문에 생겨나는 것이다.
자, 아직 끝이 아니다. 이번엔 좀더 복잡한 구조를 파고들어가보도록 하자.
오늘의 실험대상은 네이버 PC 메인화면이다. 구조가 크다보니 엄청 복잡해보일 수 있다.
엄청 복잡해 보인다고? 괜찮다. 여러분 보기 편하게 다 정리를 해줄 예정이니까. 이번 시간에는 색은 별로 중요하지 않으니, 일단 흑백 세상으로 가보자.
이젠 어떤가? 그래도 여전히 많이 복잡해보인다고? 하긴, 이런저런 정보가 너무 많이 들어있어서, 복잡한건 맞다. 그러니 한번 더 정리를 해보도록 하자.
자, 친절하게 흑백화면으로 바꾸고, 컨텐츠 영역마다 박스도 둘러줬다. 이렇게 보고 나니 검은 바탕에 회색 박스들이 좀더 두드러지게 보이는걸 알 수 있다. 맨 처음 봤던 화면과는 다르게, 좀더 단순해지지 않았는가?
자, 이제 네이버의 포탈 메인 화면을 분석해보려면, 무얼 먼저 찾아야할까?
UI 디자인의 비례나 면적을 분석할땐 항상 러시아 민속인형을 기억하자. 가장 큰것과 가장 작은것은 서로 동일한 통일성을 갖고있다. 고로 가장 작은 최소단위를 찾아야한다.
아래 그림에서 빨간 박스가 보이는가? 그 박스를 기준으로 모눈종이 패턴을 만들어봤다. 우리가 평소에 쓰는 포토샵 그리드보다 훨씬 커다랗다. 이렇게 보니 회색 박스들이 서로 띄어진 간격이 대부분 동일해보이는데... 기분탓일까?
아니. 실제로 그렇다. UI 요소들간의 간격조차도 동일하게 맞춘 것이다.
그렇다면 과연 박스 안쪽은 어떨까? 내부 컨텐츠들에 대해서도 영역을 박스로 처리해봤다.
작업한 내 입장에서는 시간이 꽤나 걸리는 작업이었지만, 여러분은 그냥 보고 느끼면 된다.어떠한가? 컨텐츠들간의 내부 간격이라던가. 사진 크기라던가. 그런 부분에서 뭔가 느껴지는게 있지 않은가?
여러분이 알아채기 힘들까봐, 직접 빨간 박스를 하나씩 배치해봤다. 자세히 들여다보면 - 컨텐츠들의 간격이 대부분 빨간 박스를 제곱한 면적이라는걸 알 수 있다. 한칸에서 두칸. 세칸짜리도 있고. 떄로는 네칸씩 띄어준 곳도 보인다.
제 아무리 복잡해 보이는 화면이라 하더라도, 결국에는 최소단위를 기준으로 한 그리드를 그리고나면 그 면적과 비례를 분석할 수 있게 된다.
실제로 네이버의 메인 페이지는 빨간색 박스의 단위를 기준으로 개별 UI 요소를 띄어놓았다. 심지어 커다란 박스들과, 내부 컨텐츠들마저 동일한 규칙을 사용했다. 그래서 시각물이 복잡한 구조라 하더라도 안정적으로 보이는 것이다. 앞으로 우리가 반복적으로 해야할 일도 이런 '통일성있는 그리드'를 만드는 일이다.
만약 기본적인 그리드가 잡혔다면. 만들어진 그리드의 일정한 비례만 유지해주면 된다. 그 안에서는 오브젝트를 어떻게 옮기든 간에 안정적인 결과물이 나온다. 말 그대로 '좋은 결과물이 나올 수 밖에 없는 환경'을 만든다는 이야기다.
사실, 웹 디자인에도 디자인 그리드가 있다. 모바일도 마찬가지다. 비례적으로 이것만 지켜도 디자인이 멋져지는 최소단위가 있다. 그걸 위해 만들어진것이 바로 그리드 시스템이라는것만 기억해두도록 하자.
물론 이것만 안다고 모든 UI가 다 예뻐지는건 아니다. 하지만 이 부분까지 이번 시간에 다루기엔 너무내용이 길어지니까. 일단 오늘은 여기까지 하기로 하자.
오늘의 결론
1. 누구나 그리드만 잘 잡으면 좋은 결과물을 내는데 한층 가까워질 수 있다.
2. 네이버도 최소단위의 면적을 잡고, UI 요소마다 비율을 조절하는 방식으로 디자인을 했다.
3. 최소단위 법칙을 지키고있는지. 잘 만들어진 웹사이트나 앱 시안을 역으로 분석해보자.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
