배수 디자인에 대한 이해, 그리고 나의 오해와 고찰?

주의!) 글쓴이가 수학적 지식, 디자인, 개발에서 dp가 어떻게 계산되어 사용되는지 모르고 예측으로 쓴 글이다.

(안드로이드에서 dp가 실수로 계산 된다던데.. 맞나..? 반올림되서 정수로 쓰이나..?)

 

서론)

누군가 단톡방에서 왜 디자인에서 짝수를 선호하냐는 질문이 나왔다.

이것은 아마 배수 디자인때문에 생기는거로 예상이 되었고,

배수디자인이 뭔지 찾아보았다.

 

그리고 디자이너분들이 블로그에 써둔 글을 보면서,

더욱 더 미궁에 빠져서 chatgpt3.5와 스무고개를 하며 이게 뭔지 더 자세히 생각해보게 되었다.

 

---

 

일단, 나의 오해)

배수 디자인이 8배수면 캔버스 사이즈도 8배로 커지는건줄 알았다.

-> 캔버스 사이즈가 커지는게 아니라 8의 배수로 마진이나 여백, 컴포넌트들의 사이즈를 정해주는 것이다.

 

그리고 이 배수디자인이. . 8의 배수로 아이콘을 만들면, 밀도 대응해서 사이즈 바꿀때 이미지 손실이 적은가 보다???

 

---

 

chatgpt3.5 와 스무고개)

 

Q1.

앱 디자인에서 말하는 그리드시스템이랑 배수디자인이 다른 말이야?

 

(일단, 8point, 4point 그리드시스템이랑 배수디자인이랑 비슷한 말인 것 같던데, 헷갈려서 물어봤다)

 

 

A1.
그리드 시스템과 배수 디자인은 둘 다 앱 디자인에서 중요한 원칙이지만 약간 다른 개념이에요.

그리드 시스템(Grid System):

그리드 시스템은 레이아웃을 조직하고 요소들을 정렬하기 위한 구조를 의미합니다.
화면을 일정한 격자로 나누고, 컨텐츠를 이 격자에 배치함으로써 디자인을 일관되고 균형있게 만듭니다.
예를 들어, 12개의 열로 구성된 그리드 시스템을 사용하면 콘텐츠를 1, 2, 3, 4, 등의 열에 배치할 수 있으며, 이를 통해 디자인을 구성합니다.
배수 디자인(Modular Design 또는 Modular Scale):

배수 디자인은 폰트 크기, 간격, 여백 등의 요소를 일정한 배수(예: 1.2배, 1.5배)로 증가 또는 감소시키는 디자인 접근법입니다.
이러한 배수를 사용하면 텍스트와 다른 디자인 요소 간의 일관성을 유지하고 시각적 균형을 유지할 수 있습니다.
요약하면, 그리드 시스템은 레이아웃을 구성하는 데 사용되고, 배수 디자인은 디자인 요소의 크기와 간격을 일관되게 유지하기 위해 사용됩니다. 두 가지 개념은 함께 사용되기도 하며, 디자인의 일관성과 조화를 유지하는 데 도움을 줍니다.

 

=>  gpt의 말을 요약하자면, 

두개가 사실상 약간은 다르지만, 섞어서 쓰일 수 있는 개념인거 같다.

 

- 그리드 시스템은 요소들을 어떻게 쪼개둘지를 말하는 것. 여기에서 4point, 8point얘기가 나오면, 배수디자인과 엮어서 말하는 거 같다.

- 배수디자인은 n이라는 수의 배수로 여백을 주면서 비율을 맞춰서 안정감을 주게 되는 방식인거 같다.

 

---

 

Q2.

그럼 8배수 디자인이 캔버스 사이즈를 8배 키우는게 아니라, 8의 배수로 여백 같은거를 지정해주는 거지?

(내가 오해하고 있었구나 싶어서 다시 물어본 내용)

 

 

A2.

네, 맞아요! 8배수 디자인은 캔버스 사이즈를 8배로 키우는 것이 아니라, 디자인 요소의 크기, 여백, 폰트 크기, 선의 두께 등을 일정한 배수로 조정하는 디자인 원칙을 나타냅니다. 이렇게 하면 디자인 요소들 간에 일관성을 유지하고 시각적 조화를 창출할 수 있습니다.

예를 들어, 8배수 디자인을 사용하면 텍스트 크기를 8의 배수로 설정하거나 여백을 8의 배수로 정의할 수 있습니다. 이렇게 하면 디자인이 일관되고 조화롭게 보이며, 사용자 경험을 향상시킬 수 있습니다.

따라서 8배수 디자인은 디자인 요소들의 크기와 간격을 일정한 배수로 조정하여 일관된 디자인을 만드는 것을 의미합니다.

---

Q3.

그럼 왜 디자인에서 8배수를 이용할까?

 

 

A3.

8배수 디자인 또는 다른 배수를 사용하는 이유는 주로 디자인의 일관성과 조화를 유지하며 사용자 경험을 향상시키기 위함입니다. 다음은 8배수 디자인 또는 배수 디자인을 사용하는 이유 몇 가지입니다:

일관성 유지: 배수 디자인을 사용하면 텍스트 크기, 여백, 간격 등의 디자인 요소를 일정한 배수로 조정할 수 있습니다. 이로써 디자인 내의 모든 요소가 일관되게 보이고 조화롭게 연결됩니다.

시각적 균형: 배수를 사용하면 디자인 요소 간의 비율적인 균형을 유지할 수 있습니다. 이는 사용자가 디자인을 더 쉽게 이해하고 인지할 수 있도록 도와줍니다.

반응형 디자인: 배수 디자인은 반응형 디자인과도 호환됩니다. 화면 크기가 변경될 때 디자인 요소들을 일관되게 조절하거나 배수에 맞게 재배치할 수 있어, 다양한 디바이스와 화면 크기에 대응하기 쉽습니다.

향상된 가독성: 일관된 폰트 크기와 간격은 텍스트의 가독성을 향상시킵니다. 사용자들은 콘텐츠를 더 쉽게 읽을 수 있으며, 디자인이 혼란스럽지 않습니다.

디자인 효율성: 배수 디자인을 사용하면 디자인 프로세스가 효율적으로 진행될 수 있습니다. 일정한 배수에 따라 디자인 요소를 조정하므로 디자이너들이 일관성 있는 결과물을 쉽게 생성할 수 있습니다.

따라서 배수 디자인은 디자인 일관성과 효과적인 사용자 경험을 구축하기 위한 중요한 디자인 원칙 중 하나입니다.

 

=> 내가 원했던 답변이 아니다, 질문을 잘못했다.

 

---

Q4.

아니 굳이 2배수나 4배수를 하지않고 8이 주로 사용되는가가 궁금해

 

 

A4.

8배수가 주로 사용되는 이유는 주로 디자인의 단순함과 다양한 요소의 조합에 있습니다. 이런 이유 때문에 8배수가 자주 선택되는 경향이 있습니다:

단순한 계산: 8은 2의 거듭제곱으로 표현할 수 있기 때문에, 디자이너와 개발자가 디자인 요소의 크기, 여백 등을 계산하기 쉽습니다. 예를 들어, 8배수로 작업하면 2배수나 4배수로 비교적 간단하게 나눌 수 있습니다.

다양한 조합: 8배수는 다양한 디자인 요소의 크기와 위치를 결정하는 데 다양한 조합을 제공합니다. 이로 인해 다양한 디자인 요소를 일관되게 배치하고 조정할 수 있습니다.

시각적 균형: 8배수는 디자인 요소들 간의 시각적 균형을 유지하기 쉽도록 도와줍니다. 이로써 디자인이 조화롭게 보이며 사용자에게 좋은 시각적 경험을 제공합니다.

반응형 디자인: 8배수는 반응형 디자인과도 잘 호환됩니다. 화면 크기가 변할 때 디자인 요소를 쉽게 조절하고 재배치할 수 있습니다.

물론, 디자인에서 8배수 외에도 다른 배수를 사용할 수 있습니다. 하지만 8배수는 특히 디자인의 일관성과 효율성을 유지하기 위해 널리 선택되는 옵션 중 하나로 인기가 있습니다.

 

 

=> 배수 디자인에 대해서 찾아보면, FHD같은 해상도 1920 x 1080 같은 수치가, 8로 잘 떨어져서라는 얘기가 나오는데, 8을 선택하는게 이것과 일단 관련이 있다.

그리고 4배와 2배로 바꿀때 나누기해서 쉽게 변환할 수 있다. (이거 때문에 짝수가 디자인에서 선호되어 지게 된거 같다.)

근데 왜 굳이 4나 2를 쓰지 않을까? 

 

1920 x 1080을

8로 나누면, 240 x 135 가 된다.

4로 나누면, 480 x 270

2로 나누면, 960 x 540

 

2, 4로 나누면 구획이 너무 많고 여백의 미를 살리지 못해서 적당히 작은 수 8이 고려된게 아닌가 싶다.

 

그럼에도 요새 8POINT GRID시스템보다 4Point 그리드 시스템이 더 낫다라는 글들이 있던데, 

이거는 기본적으로 8배수로 디자인을 하지만, 그 반값인 4도 사용한다는 의미같음.

 

어차피 4배수로 해도, 밀도한정자가 바뀌어도 소수점으로 가지 않으니까?

 

---

Q5.

그러면 배수디자인이 화면밀도랑도 연관이 있나?

8배수 디자인에서, 안드로이드에서 사용할때 mdpi에서 1dp가 8px이 될텐데, 그림 같은거도 px이 8배 커지게 되나?

 

 

A5.

배수 디자인과 화면밀도 (DPI, Dots Per Inch)는 서로 관련이 있을 수 있지만, 조금 다른 개념입니다. 배수 디자인은 디자인 요소의 크기와 간격을 일정한 배수로 조정하는 것을 나타내고, 화면밀도는 디바이스 화면에서 픽셀 밀도를 나타내는 것입니다.

안드로이드에서 1dp가 mdpi(중밀도)에서 8px이라면, 8배수 디자인을 사용할 때 디자인 요소의 크기를 배수로 조정할 때 dp 단위를 사용하면 됩니다. 예를 들어, 8배수 디자인을 적용하고자 할 때, 8dp, 16dp, 24dp 등을 사용하여 디자인 요소의 크기를 조정할 수 있습니다. 따라서 8dp는 mdpi 화면에서 64px (8dp * 8px/dp)가 됩니다.

그림이나 이미지의 경우에도 화면밀도에 영향을 받습니다. 안드로이드에서는 다양한 dpi 버전의 이미지를 제공하여 다양한 화면밀도에 대응합니다. mdpi에서 사용할 이미지의 경우, 1x (기준) 크기의 이미지를 사용하고, 다른 화면밀도에서는 해당 비율에 맞는 이미지를 사용하는 것이 좋습니다.

요약하면, 배수 디자인과 화면밀도는 서로 관련이 있을 수 있지만, 다른 개념이며, 디자인 요소의 크기와 이미지 크기를 조절하는 데 다른 원리를 적용합니다.

 

=> 나는 계속해서 화면밀도와 관련이 있다고 오해하고 있고 잘못된 질문을 한거 같다.

"mdpi에서 1dp가 8px이 될텐데" 라는 질문이 일단 잘못 된거 같다. 8배수 디자인이면 8dp로 구획을 나누는 것이다.

따라서 8배수 디자인이면, 어느 밀도에서든 8dp가 될텐데~ 라고 말해야할것이다.

dp를 기준으로 캔버스를 만들고 캔버스 사이즈를 8배 키우면 이렇게 될 수도 이겠지만(?), 이렇게 변환할 이유가 없다.

그리고 px을 기준으로 그리면 또 특정 해상도를 기준으로 잡고 그리게 될 것 같다.?

특정 밀도에서, 특정비율의 캔버스에서 dp기준으로 하나만 만들면, 해당 비율에서는 dp기준이기 때문에, 다른 밀도가 된다고 한들 해당 비율에서는 모두 일정하게 컴포넌트들의 비율이 일치 될 것으로 예상된다.

---

Q6. 그럼 8배수 디자인에서 px을 캔버스로 잡으면 8배 큰 캔버스가 되는게 맞지않나?

 

 

A6.
예, 맞아요. 8배수 디자인을 사용할 때, px을 캔버스의 기준 단위로 설정하면 캔버스 크기는 보통 8배 크게 설정됩니다. 이렇게 하면 디자인 요소들을 8배 배율로 디자인할 수 있고, 이 디자인을 화면에 맞게 축소하거나 확대하여 다양한 화면 크기와 화면밀도에 대응할 수 있습니다.

예를 들어, 안드로이드에서 mdpi 화면에서 8dp가 64px이라면, 캔버스 크기를 px 단위로 8배로 설정하면 1dp가 캔버스에서 8px가 됩니다. 이로써 8배수 디자인을 적용한 디자인 요소들을 효과적으로 구성할 수 있습니다.

중요한 점은 디자인을 8배 큰 캔버스에서 작업하더라도, 최종적으로 앱에는 화면 크기에 맞게 축소되거나 확대되어 표시된다는 것입니다. 이런 방식으로 다양한 화면 크기와 화면밀도에 대응할 수 있습니다.

 

 

=> 굳이 이렇게 한다고? 8배 두꺼운 픽셀로 작업을 하는게 아닐거 같음 -> 화면밀도가 변경되면 px이 더 배로 두꺼워지는데 이거를 또 색칠을 할 수 있으려나. 잘못된 질문에, gpt가 굳이? 대답을 해준 느낌이다.

 

---

Q7. 보통 앱 디자이너들은 캔버스를 dp기준으로 잡는가 px기준으로 잡는가??

 

 

A7. 앱 디자인에서 캔버스의 기준 단위로는 주로 dp (Density-independent Pixel)를 사용하는 것이 일반적입니다. 이는 다양한 화면 크기와 화면밀도에 대응하기 위한 좋은 방법입니다.

다음은 dp를 사용하는 이유와 장점 몇 가지입니다:

반응형 디자인: dp는 화면 크기와 화면밀도에 따라 디자인 요소를 자동으로 조절할 수 있도록 도와줍니다. 따라서 다양한 안드로이드 디바이스에 쉽게 대응할 수 있습니다.

일관성: dp를 사용하면 디자인 요소의 크기와 간격을 일관되게 유지할 수 있습니다. 이로써 디자인이 다양한 화면 크기에서도 일관되게 보이게 됩니다.

가독성: dp는 화면밀도에 따라 텍스트와 아이콘 등의 크기를 자동으로 조절함으로써 가독성을 향상시킵니다.

픽셀 독립성: dp는 화면의 픽셀 밀도와 관계없이 동일한 물리적 크기로 표시됩니다. 이는 사용자 경험을 향상시키는 데 도움이 됩니다.

반면에 px (Pixel)를 캔버스의 기준 단위로 사용하는 경우, 디자인이 특정 화면 크기나 화면밀도에 고정되므로 다양한 디바이스에 대응하기 어려울 수 있습니다. 따라서 안드로이드 앱 디자인에서는 주로 dp를 사용하여 화면 크기와 화면밀도에 더 유연하게 대응하려고 합니다.

 

 

=> 그래! px에서 작업하는게 어려워서 dp로 하는게 맞을거 같다?!!

 

---

Q8.

디자이너가 2배수 디자인을 했다고 개발자가 2로 나누는 경우가 있는데, 이거는 디자이너가 베수 디자인을 잘못이해해서 dp캔버스를 2배로 늘려서 생기는 문제지?

 

 

A8.

디자이너가 2배수 디자인을 했고 개발자가 그것을 2로 나누는 경우, 이 문제는 주로 디자이너와 개발자 간의 의사소통 부족 또는 잘못된 이해에서 비롯된 문제입니다. 이것은 배수 디자인과 관련된 문제가 아니라, 단순히 디자인 스펙과 개발 스펙 간의 불일치 문제일 가능성이 큽니다.

일반적으로 디자이너와 개발자는 디자인 스펙에서 사용하는 단위 (예: dp)에 대해 명확하게 이해하고 일치시켜야 합니다. 디자이너가 2배수 디자인을 하더라도, 그것을 개발 스펙에 맞게 해석하고 구현해야 합니다.

만약 디자이너가 dp 캔버스를 2배로 늘려서 디자인을 했다면, 개발자는 그것을 원래의 dp 값으로 다시 나누어야 올바른 크기로 구현할 수 있을 것입니다. 이런 경우, 통신과 협력을 통해 디자인과 개발 단계 간의 오해를 해소하고 일관된 결과물을 얻을 수 있습니다.

 

=> 아마도, 저런 해프닝은 뭔가 2배수 디자인을 잘못 이해하면? 저렇게 되는 것 같다.

 

---

 

추가적으로, 이러한 표가 보이던데,

이 표도 내가 헷갈리게 되는 원흉이다.

밀도 한정자 (바운더리)	1배수	2배수	4배수	8배수
ldpi (0.75x) (~120dpi)	0.75px	1.5px	3px	6px
mdpi (1x) (~160dpi)	1 px	2px	4px	8px
hdpi (1.5x) (~240dpi)	1.5px	3px	6px	12px
xhdpi (2x) (~320dpi)	2px	4px	8px	16px
xxdpi (3x) (~480dpi)	3px	6px	12px	24px
xxxdpi (4x) (~640dpi)	4px	8px	24px	32px

 

기준으로 그리게 되는 밀도한정자와 해상도는 이미 정해져서 고정일텐데,,,

이 표를 어떻게 읽어야하는가?

대충 저 px들이 1dp로 대응인데, 밀도한정자 내에서도 dpi가 제일 높을때의 px라고 봐야겠다.

그래서 휴대폰마다 각기 dpi가 실제로는 다르기 때문에 원하는px가 아닐 수 있을거라고 보인다.

 

특정 휴대폰이 갤럭시 s10이라고 치고, 3040 x 1440 (551ppi) (480~640dpi이므로, xxxdpi휴대폰이다)

이것에서 8배수 디자인을 하려면, 

3040 x 1440내의 해상도에서 뭔가 하나를 여백을 주거나 아이콘을 그릴때 대충 32 x 32 px로 그려라?는 의미로 봐야할듯? 아닌가? 맞나? 잘모르겠다?

 

3040 x 1440을 32로 나누면,  95 x 45이 되는데...?

 

자, 아까 위에서 써뒀던,

1920 x 1080을 8로 나누면, 240 x 135 가 된다?

3040 x 1440을 8로 나누면, 380 x 180

3040 x 1440을 16으로 나누면, 190 x 90

3040 x 1440을 24으로 나누면, 126.66 x 60

3040 x 1440을 32으로 나누면, 95 x 45

 

 

같은 해상도에서 밀도(dpi) 가 높아지면 (휴대폰의 디스플레이의 물리적인 사이즈가 작아지는 경우)

-> px로 그린거는 이미지는 더 작게보이게 된다.

-> 따라서 px이 더 커져야 원하는 dp값이 됨.

 

기본 dpi : 단말 dpi = dp : px 

 

다시,

px = dp * 단말 DPI/기본 160

 

px = dp * (단말 DPI/기본 160)

px / (단말 DPI/기본 160) = dp

 

dp = px * 기본 160/단말 DPI 

dp = px / (단말 DPI/기본 160)

 

 

갤럭시s10을 8dp로 잡으면,

8dp * 551 / 160 = 27.55px

 

꽉찬 xxxdpi (640)의 32px과는 차이가 좀 있다?

8dp * 640 / 160 = 32px

 

오히려 4배수의 바운더리랑 가까운데,

24px로 나눠버리면, 

126.66 x 60 소수점이 되어버린다.

 

 

자 이거를 dp사이즈로 바꿔서 해보면,

3040 x 1440 -> 882.75 dp x 418.14 dp

애초에 정수로 안떨어진다.

8dp로 나누면, 대강 110 x 52

 

 

(사실상, 여기서 내가 생각하고 있는거는 그리드 시스템??)

 

 

(근데, 아무튼 나처럼 배수 디자인을 잘 못 이해해서, 3040 x 1440 px 해상도 캔버스를 8배로 커져서, 24,320 x 11,520에서 그려라는게 아닐 것이다.)

 

---

 

그리고 이미지 에셋의 크기를 8배로 키운다?는것도 좀 잘못된 생각같다.

(8배수 디자인이, 캔버스 사이즈는 한정되어있는데, 에셋 사이즈를 키운다는게 아닐것이다!)

8배수 디자인이라고 사이즈를 8배 키우는게 아니라, 8의 배수로 사이즈를 지정하면 될테고,

밀도한정자에 따라서 0.75배~4배로 키워주면 되는듯하다.

 

https://developer.android.com/training/multiscreen/screendensities?hl=ko#TaskProvideAltBmp 

다양한 픽셀 밀도 지원  |  Android 개발자  |  Android Developers

1dp = 1px로 대응 되는 사이즈에서 1px로 선을 그으면, 밀도대응을 안해주면, 안드로이드에서 그림의 스케일바꾸면서, 그려둔 선이 사라질 수가 있다, 밀도 대응을 해서 파일을 크게 더 넣어주더라도,

mdpi같은게 바운더리라서, mdpi의 기기에 대응한 그림을 넣어라도 mdpi기기들도 실제 dpi는 각각 다를 것이고, 어떻게 px로 그려둔 선 같은거는 사라질지 모른다.

이럴때만, 에셋의 사이즈를 2배 키워주면 될 거 같다.

근데 사이즈가 n배 커지면, 그림이 면적이기 때문에 n의 제곱으로 용량이 커지는 문제가 있을 것이다.

 

 

fhd모니터에서, 가로 세로 4배가 커지면, 총면적은 16배 커지는 8k가 된다.

1920x1080 fhd (2M pixels)

3840x2160 4k (8M pixels)

7680x4320 8k (33M pixels)

 

4배수 디자인이라고 나처럼 생각을 잘못해서, 에셋의 크기를 가로세로 4배로 키워서 넣어버리면,

fhd모니터에서 유튜브를 볼때 8k데이터로 보고 있는거랑 같다고 보면 될 듯하다?

 

---

 

 

뭐라 궁시렁궁시렁 북치고 장구치고 했다.

배수 디자인? 아직 온전히는 모르겠지만 내가 예측하는게 대충 맞을거 같긴하다.

내가 실무하면서 디자이너님과 협업을 제대로 한적도 별로 없고, 디자인을 따로 공부한적도 없으니, 상상으로 예측할뿐이다.

 

 

 

 

 

이 글 퇴고도 나중에 심심하면 해야지..