디자인, 비율, 그리드
미신에서 벗어나기 위해 미신을 쫓지 말자.
황금비라는 말이 있다. 황금비는 미의 기준 같지만, 황금비가 그렇게 아름다운 거라면, 왜 우리가 보는 스크린은 황금비가 아닌가 의심해 볼만 하다. 인터넷 검색 조금만 해보면, 이게 일종의 미신이라는 것을 알 수 있다. 실제로 디자인에는 여러가지 비율이 있다.
디자인에는 여러가지 방법이 있는데, 그 방법의 기원은 대부분 기술적인 한계와 제약 효율성에서 온다.
환경과 기술, 바탕이 변했는데도 어떤 이상적인 비율이 있어서 그걸 사용하면, 좋은 디자인이 나올 것이라고 생각하는 미신이다.
비율은 어떻게 만들어졌을까?
검색해보자.
A4지의 비율은 1:1.414다.
1:1.414 비율로 종이를 자르면 자르고 남는 종이, 손실이 없다. A0을 4번 자른게 A4다.
책의 인쇄에서는 페이지의 기능과 종이의 제약에 따라 다양한 그리드를 만들어왔다.
디스플레이는 4:3(1.33:1)이다. 이건 영화에서 비롯되었는데, 필름을 되감기 위한 구멍이 4개마다 1프레임을 써서, 가로 24.13mm, 세로 18.67mm가 되었고 이게 4:3의 시작이 되었다.
http://news.samsungdisplay.com/15024
텔레비전의 크기는 영화 필름의 사이즈에서 왔고, 모니터의 크기는 텔레비전에서 왔다. 그리고 웹사이트는 화면 크기와 해상도에 맞춰서 그리드 시스템을 만든다.
스크린의 크기는 기술적인 특성으로 가로 크기가 800, 1024, 1280으로 늘어난다.
960 Grid System은 프레임워크로 HTML 페이지를 효과적으로 만들 수 있게 해준다.
그런데 스크린 크기가 많아지면서 좀 더 가변적인 그리드 시스템이 나왔다. 부트스트랩 그리드를 사용하면, 디자인에서 퍼블리싱까지 좀 더 쉬워진다.
https://getbootstrap.com/docs/4.0/layout/grid/
하지만 이건 또 작은 스크린에서 잘 맞지 않는다. 폭이 좁고, 길이가 긴 스크린에서는 횡으로 나누는 비율과 그리드가 잘 적용되지 않는다. 그럼에도 불구하고 디자인의 격차가 벌어지기 시작했고,
이제는 bit-grid라고 하는 8pt 그리드가 나왔다.
8pt 그리드는 화면의 픽셀이 비트, 8의 배수로 늘어난다는 것에 착안해서 8의 배수로 오브젝트와 컴포넌트를 배치하면, 픽셀 뭉게짐을 막을 수 있고, 협업하기 좋은 디자인의 패턴을 만들 수 있다. 8pt 그리드는 자연스럽게 화면의 높이에 따른 비율과 그리드에 영향을 주기 시작했다.
현재는 많은 모바일 디자인에서 차용하고 있고, 웹페이지 디자인에도 많이 쓰인다.
참고로 현재 모바일에서 가장 많은 스크린 비율은 9:16이고, 아이폰X의 화면 비율은 9:19.5다. 모바일에서는 주로 좌우 여백만 잡은 후에 컴포넌트를 자동으로 배치하는 Auto-Layout이 적용되는 경우가 많다.
https://brunch.co.kr/@blackindigo-red/8
그럼에도 불구하고 굳이 황금비를 계산하고 싶다면,
다양한 비율을 계산해서 사용할 수 있다.
https://voidism.net/metallicratio/
여담으로 황금비, 3등분의 법칙 등은 모두 경험 법칙이다. 사람의 인지는 익숙한 것을 좋아한다. 모든 사람들이 좋아하는 비율을 모아 보면, 어느 영역이 생기게 된다. 그래서 황금비에 약간씩 더하거나 빼는데, 황금비는 1:1618이고 이것에 맞지 않으면 당연히 황금비가 아니다.
피보나치 수열은 아름다움의 비밀일까? 꽃잎이나 가지가 자라는 비율이 피보나치 수열인 이유는 꽃잎이나 가지가 아름다움을 추구해서가 아니라 최소한의 에너지를 들여서 최대한의 효과를 내야하는 자연의 제약 때문이다.
좋은 디자인에는 간결함과 효율성을 추구하는 규칙이 있다. 규칙이 일정한 패턴을 만든다. 어려운 것은 다양한 환경 속에서 일관성을 유지하는 것이다. 좋아보이는 것들을 간단하게 설명하는 그럴싸한 비밀은 없다.
황금비의 허구성에 대해서는 다음 번역글을 보시면 좋습니다.
https://brunch.co.kr/@refreshstudio/10
