#12 앱 디자인 일관성의 비밀 [1/3] — Padding 기준을 미리 정해야 하는 이유

포스팅 #12 앱 디자인 일관성의 비밀 [1/3] — Padding 기준을 미리 정해야 하는 이유

---

앱을 만들다 보면 어느 순간 이런 생각이 들어요.

"왜 이렇게 뭔가 어색하지?"

버튼도 만들었고, 입력 필드도 만들었고, 카드도 만들었어요.

각각 보면 나쁘지 않은데, 전체를 보면 뭔가 통일감이 없어요.

어떤 카드는 내용이 테두리에 바짝 붙어 있고, 어떤 카드는 여백이 너무 넓고. 어떤 버튼은 텍스트가 좁게 들어가 있고, 어떤 버튼은 너무 넓게 퍼져 있고. 저도 똑같은 경험을 했어요.

 

QuickLog를 만들면서 초반에 가장 많이 한 실수가 바로 Padding을 그때그때 감으로 설정한 거예요.

어떤 Container는 Padding 10, 어떤 건 Padding 14, 어떤 건 Padding 20. 기준 없이 그냥 보기 좋아 보이는 값을 넣다 보니 나중에 화면 전체를 봤을 때 들쭉날쭉해 보였어요.

그때 깨달았어요. Padding도 시스템이 필요하다는 걸요.

---

Padding이 뭔지 먼저 짚고 가요

Padding은 위젯 안쪽 여백이에요.

Container 안에 텍스트가 있을 때, 텍스트가 Container 테두리에 바짝 붙지 않게 공간을 주는 게 Padding이에요.

Padding이 너무 없으면 답답해 보여요. Padding이 너무 많으면 낭비처럼 보여요. 그리고 Padding이 일정하지 않으면 어수선해 보여요.

---

Padding 시스템을 미리 정해야 하는 이유

앱 전체에서 Padding 값을 통일하면 세 가지 좋은 점이 있어요.

첫째, 디자인이 일관되게 보여요. 어떤 카드를 봐도 같은 여백감이 느껴지면 앱이 정돈되어 보여요.

둘째, 작업 속도가 빨라져요. 매번 Padding을 얼마로 할지 고민할 필요가 없어요. 기준을 정해두면 그냥 그대로 쓰면 돼요.

셋째, 나중에 수정하기 편해요. 기준이 있으면 전체적으로 여백을 늘리거나 줄이고 싶을 때 일관되게 수정할 수 있어요.

---

제가 쓴 Padding 시스템

QuickLog를 만들면서 Padding 값을 딱 네 단계로 정했어요.

단계	값	사용하는 곳
XS	4	태그 상하 여백, 아이콘과 텍스트 사이
S	8	카드 안 섹션 간격, 작은 버튼 여백
M	12	태그 좌우 여백, 카드 안쪽 여백
L	16	페이지 전체 좌우 여백, 섹션 Container 여백

이 네 가지 값만 써요. 13이나 15 같은 애매한 값은 쓰지 않아요.

---

구체적으로 어떻게 적용했냐고요?

페이지 전체 좌우 여백은 항상 16이에요. LogPage든 FeedPage든 PeoplePage든 모든 페이지의 좌우 여백은 16으로 통일했어요.

카드 안쪽 여백도 항상 12예요. 피드 카드, 업체 카드, STATS 카드 전부 Padding 12로 통일했어요.

태그는 좌우 12, 상하 4로 통일했어요. 태그가 어느 페이지에 있든 항상 같은 크기로 보여요.

버튼은 좌우 16, 상하 8로 통일했어요.

---

Padding을 미리 정하지 않으면 생기는 일

처음에 기준 없이 만들다 보면 나중에 이런 상황이 생겨요.

FeedPage 카드 Padding이 10이고, PeoplePage 카드 Padding이 14예요. 두 페이지를 왔다 갔다 하면 뭔가 다른 느낌이 들어요. 사용자는 왜 다른지 모르지만 어색하다고 느껴요.

이걸 나중에 고치려면 카드 하나하나 들어가서 다 수정해야 해요. 페이지가 6개고 카드 종류가 여러 개면 정말 고통스러워요.

처음에 기준을 잡는 데 5분도 안 걸려요. 나중에 수정하는 데 걸리는 시간을 생각하면 무조건 미리 정해두는 게 맞아요.

---

Margin도 같이 정해두세요

Padding과 비슷한 개념으로 Margin이 있어요.

Padding은 위젯 안쪽 여백이고, Margin은 위젯 바깥쪽 여백이에요.

FlutterFlow에서는 Items Spacing으로 위젯들 사이 간격을 조절해요. 저는 이 값도 통일했어요.

사용하는 곳	Item Spacing 값
페이지 전체 Column	8
카드 안 Column	6
태그 Wrap	6
피드 카드 사이 ListView	10
섹션 사이 간격	0 (Container로 구분)

---

처음부터 완벽하게 안 해도 돼요

Padding 시스템을 처음부터 완벽하게 잡으려고 하지 않아도 돼요.

저도 처음에는 몰랐어요. 만들다가 어색한 걸 느끼고 나서야 기준을 잡았어요. 그리고 기준을 잡은 뒤에 이전에 만든 위젯들을 하나씩 수정했어요.

중요한 건 기준을 언젠가는 반드시 잡아야 한다는 거예요. 빠를수록 좋고, 늦더라도 하지 않는 것보다는 훨씬 나아요.

앱을 만들기 전에 종이에 이렇게 적어두세요.

페이지 여백은 16, 카드 여백은 12, 태그 여백은 좌우 12 상하 4, 버튼 여백은 좌우 16 상하 8. 이것만 정해도 앱 전체 일관성이 확 달라져요.

---

다음 편에서는 글자 크기 시스템을 어떻게 설계했는지 이야기해볼게요. 폰트 크기 하나가 앱 전체 분위기를 어떻게 바꾸는지, 그리고 Typography 시스템을 미리 잡아두면 얼마나 편해지는지 다룰 거예요.