brunch

라이킷 28 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 수하피 May 17. 2023

8pt 그리드 어디까지 알고쓰나?

무한대를 그리려고 쓰러진 8 자

디자인 작업을 하다가 문득 든 궁금증. 왜 디자이너는 8px단위로 간격, 폰트를 자연스럽게 맞추고 있을까?

UI작업을 하면 할수록 8이라는 숫자에 익숙해지죠. ~~얼마나 익숙하냐면 볼륨도 8, 16, 32, 64로 맞춥니다.~~

궁금증에서 시작해서 여기저기 찾아보고 물어봐서 알게 된 내용을 제 관점에서 정리해 봅니다.

Team works

먼저 간격, 폰트 사이즈에 단위를 사용하는 이유는 협업과 화면의 통일성 때문입니다. 디자이너 간의 협업이 될 수도 있고, 디자이너와 개발자 간의 협업이 될 수도 있겠죠. 전체적인 화면의 통일성도 중요합니다. 웹이나 애플리케이션을 디자인하고 개발할 때는 컴포넌트를 생성해서 사용하기 때문에 컴포넌트를 생성하는 사람마다 기준이 다르다면 전체적인 화면의 통일성이 사라집니다. 디자이너마다 사용하는 단위가 다르다면, 개발을 할 때도 일일이 사이 간격을 확인하면서 작업해야 합니다. 통일된 단위를 사용한다면 소통의 오류가 적어지죠.

디자이너 : 다른 분이 생성하신 컴포넌트를 섞어서 사용해도 화면 레이아웃을 다시 잡을 필요가 없지.
개발자 : 8px 단위로 디자인하셨으니 이 정도 간격은 16pt.

그게 다인가? 왜 8인가

또 그게 다는 아닙니다. 그냥 아무 숫자나 사용하는 것은 또 아니더라고요. 왜 8인가? 에 대한 대답은 해상도, 화면크기에 있었습니다. 그리고 8px그리드가 아니라 8pt그리드라는 사실도 알게 되었죠. 단위를 맞춰 쓰는 것도 중요하지만 왜? 인지 이유를 알면 상황에 따라 융통성 있게 대응할 수 있지 않을까 하여 알아본 8pt의 근원!

Pixel per Inch

해상도를 이해하시려면 px, pt 단위를 이해해야 합니다. 여기서는 ios에서 사용하는 단위로 설명하겠습니다. android는 pt →dp, ppi → dpi 단위를 사용하고 개념은 같습니다.

해상도의 단위는 ppi입니다. ppi는 pixel per inch로 1inch에 들어가는 픽셀이 몇 개인지를 알려주는 단위입니다. 일정한 거리에 픽셀이 많이 들어갈수록 해상도가 높다라고 할 수 있는 거죠.

그렇다는 것은 pixel이라는 단위에는 절대적인 크기가 없다는 것을 알 수 있습니다. px이 절대적인 크기를 가지고 있다면 1inch안에 들어가는 pixel의 수가 달라질 수 없겠죠.

1인치당 들어가는 픽셀 수로 해상도를 파악한다는 것은
px은 절대적인 크기를 가진 단위가 아니라는 것

아닌데요! 저희 어도비, 피그마에서는 px단위로 작업하거든요!

그러면 우리가 작업할 때 사용하는 px단위는 실제 화면에서 어떻게 표현되는 것인지 확인해봐야 합니다.

화면에서는 px이 아닌 pt단위로 표현이 됩니다. 작업상 화면을 그대로 웹에 옮긴다면 1px=1pt가 되는 거죠. 피그마나 스케치 등 웹/앱에 최적화된 툴을 사용하기 전 포토샵에서 2배 크기로 화면 작업해 보신 적 다들 있으시죠? ~~이 과도기를 겪었다면 당신은 저의 동년배...~~ 1pt=2px 기준으로 작업하신 겁니다.

화면을 표현할 때 @1.5x, @2x, @3x라는 표기를 본 적 있으실 겁니다. 작업물을 렌더링 하여 화면에 표현하기 위한 스케일 팩터입니다. ~~어렵네요.~~ 조금 더 쉽게 이해해 봅시다.

@1.5x, @2x, @3x 라고 한다면 아래 그림처럼 1pt 안에 1px이 배치됩니다.

여기서 한 번! 다시 8pt 이야기로 돌아가봅시다. 홀수 단위에 대한 문제가 나오죠. 만약 @1.5x에서 3pt x 3pt의 네모를 표시한다면 4.5px로 0.5px이 화면에 표시되어 화질이 저하되는 문제가 생깁니다.

Layout

그럼 홀수를 제외하고 짝수 단위를 한 번 볼까요? 한 화면 내에서 적절한 레이아웃을 잡기 위한 이유도 있다길래 궁금해서 직접 확인해 보았습니다. 아래는 statcounter에서 확인한 전 세계에서 가장 많이 쓰는 해상도 순위입니다.

한 화면 내에서 안정적으로 레이아웃을 가져가려면 딱 떨어지는 단위가 좋겠죠? 한 번 나눠봅시다. 홀수는 제외하고 2pt, 4pt는 단위로 잡기에는 작아서 제외하죠. 남은 6, 8, 10으로 화면 크기를 나눠봅시다.

화면 크기를 6, 8, 10으로 나눠본다면?

제가 궁금해서 하나하나 계산기를 두들겨 보았습니다 :)

결과를 보면 6으로 나누어지지 않는 값은 0.3333, 0.6666 무한소수로 나옵니다. 10으로 나누어지지 않는 값은 0.4, 0.6로 나옵니다. 8로 나누어지지 않는 값은 0.5, 0.75 상대적으로 깔끔하게 떨어집니다.

이게 어떤 느낌의 깔끔함이나면 사과를 그래도 반쪽, 반에 반쪽으로 다시 조합하면 되겠는데? 하는 생각이 듭니다.

레이아웃 때문이다!라고 하는 것은 이런 이유가 아닐까 합니다.

제 생각을 더하자면

저는 4pt단위도 종종 사용하고 있습니다. 요새 서비스들은 한 화면에 많은 정보를 넣는 경우가 있다 보니 단위가 작아지더라고요. 아무래도 통일감 있게 사용하려면 8pt단위로 가짓수를 줄이는 것이 좋기는 합니다. 이 지점에 대한 고민이 풀리지는 않았지만 8pt단위의 이유가 늘 궁금했었는데 이런저런 이유를 찾다 보니 설득이 됩니다. 모 개발자 분은 홀수 단위의 0.5px 문제도 요즘 디바이스들이 좋아져서 큰 문제는 아니라고 하시더라고요. 단위에 대한 고민은 위 8pt를 사용하는 이유를 중심으로 앞으로 계속 고민해봐야 할 거 같습니다. 이외에 다른 이유를 아시는 분들은 저에게 알려주세요!