무신사 스냅 UI 디자인 개선하기 (상) | Madia Designer - 실무 디자인 여백 사용 원칙 7가지 Tip

 

 

 

 

작업 계기

한가로운 일요일 오전, 디자인 오픈 톡방에 좋은 아티클이라며 링크가 올라왔다.

Madia Designer님의 '이젠 알아야죠? 실무 디자인 여백 사용 원칙 7가지 Tip' 영상이었다.

10분 정도 되는 짧은 영상이었길래, 바로 시청했는데 내용이 너무 좋아서 블로그에 공유하려고 정리를 간단하게 시작했다.

 

왜 무신사인가요?

직접 영상의 내용을 토대로 실습을 해보면 좋겠다고 생각하던 차에 현재 부트캠프에서 진행하고 있는 '패션' 도메인이 생각났다.

내가 가장 많이 사용하는 앱인 '지그재그'와 '무신사' 등에 들어가 보던 차에,

카드 UI 실습까지 활용할 수 있는 '스냅' 페이지가 있는 무신사 앱으로 선정했다.

 

 

작업 일시

2024년 3월 24일 일요일, 약 1시간 30분 소요

 

 

프로그램

Figma

 

---

 

아티클 - 유튜브 영상

Madia Designer - 🔥이젠 알아야죠? 실무 디자인 여백 사용 원칙 7가지 Tip 영상🔥

 

간단하게 정리해 본 영상 내용은 다음과 같다.

 

 

---

 

1. 여백을 활용한 폰트 그룹

• 적절한 여백을 띄어줌으로 인해서 답답함을 좀 널찍하고 시원하게 공간감을 줄 수 있다 + 코너 간의 그룹핑
• *여백은 너무 타이트하기보다는 넓게 하는 것이 좋음
• Tip. 애초에 과감하게 넓게 띈 다음에 좁히는 게 더 좋음

 

---

 

2. 아코디언 테이블 여백

• 밑에 부분의 여백이 위에보다는 조금 더 넓어야지 하나의 그룹핑으로 감싸져 보임
• 여백이 똑같다면 콘텐츠 자체가 조금 붕 떠보임

 

---

 

3. 연관 검색어 여백 활용

• 클릭하는 영역을 생각하며 디자인하기
• 손가락 두께를 고려해서 여백을 어느 정도 확보해 주어야 한다 
• Tip. 애초에 디자인할 때 폰트를 버튼처럼 영역을 잡아놓고 디자인하기

 

---

 

 

4. 카드 UI 여백 활용 방법

• 상단과 하단 여백 없이 꽉 차게 들어가게 되면 답답한 느낌이 든다

 

• 각각의 라운드에 모서리를 주는 것도 하나의 방법
• 통상적으로 카드 UI의 각각의 모퉁이에는 라운드가 조금씩 들어가 있다
  이유 : 날카롭고 공격적인 성향을 지양하기 위해서 (실제 실물 카드들도 모서리가 라운드가 들어있다)

 

• 텍스트나 오브젝트를 살짝 안쪽으로 넣어주기
  : 콘텐츠 내용이 섬네의 좌측이나 우측에 딱 붙는 게 아니고 약간 안쪽으로 들여 써주는 게 좋다. 끝에 딱 붙으면 정렬이 안 맞아 보이는 시각적 느낌으로 불안해 보인다

 

---

 

 

5. 상품 섬네일 여백 활용 방법

• 상품의 1단, 2단, 3단 등 단별로 넓이 여백값을 충분히 확보하기

 

---

6. 각 타이틀 간의 여백 활용 방법

• 바닥에 뿌리는 디자인 같은 경우는 라인으로 그룹핑을 주던지 여백으로 그룹핑을 반드시 확보해줘야 한다 (그래야 콘텐츠가 정확하게 읽히기 때문)
• But, 여백을 활용한 그룹핑가은 경우 신입이 하기에는 다소 어려운 디자인

 

---

 

 

7. 중요도에 따른 여백 활용

• 그룹핑을 해서 보여주는 것이 과연 효과적인 UI 디자인인가 생각해 보기

 

---

 

다음 글

 

무신사 스냅 UI 디자인 개선하기 (하) | Madia Designer - 실무 디자인 여백 사용 원칙 7가지 Tip