제가 만들고 싶은 앱을 피그마로 디자인하고 싶어서 배워봤지만, 뭔가 제가 만들었던 건 잘 디자인된 느낌은 아니었어요. ㅜㅜ

그래서 피그마를 잘 쓰기 위해선 UI 디자인에 대해 이해하고 있어야 할 것 같은 생각이 들었어요.
피그마 사용법보다는 디자인을 어떤 의도로 해야할지 정리한 글로 생각해 주세요!

해상도와 단위의 이해#

물리적 픽셀(PX)과 논리적 픽셀(DP)의 차이가 있어요.
웹에서는 CSS가 px를 논리적 픽셀로 인식하며, em과 rem 같은 상대적 단위도 사용돼요.

해상도와 화면 크기
해상도: 화면의 총 픽셀 수 (가로 x 세로) ex) 1920x1080 1280x1024
인치: 화면 대각선 길이 (1인치 = 2.54cm) ex) 24, 27, 32인치 모니터

픽셀 밀도
PPI (Pixels Per Inch): 인치당 픽셀 수
DPI (Dots Per Inch): 실제 화면 영역의 픽셀 수

디자인 단위
DP(Density-independent Pixels): Android의 크기 단위
SP(Scale-independent Pixels): Android의 텍스트 단위
PT(Point): iOS의 크기 단위

DPI는 1x가 흐릿하게 보일 때가 많아 2x로 PNG로 Export하는 것이 나아요.
일러스트레이션이나 아이콘 같은 경우 벡터인 SVG 파일을 사용하면 깨지지 않아요.

8px 그리드 시스템#

8px 그리드 시스템은 디자인의 일관성과 개발 친화성을 높이는 방법이에요.
모든 요소의 크기와 간격을 8의 배수로 설정하는 걸 말해요.
ex) 아이콘 기본 사이즈: 16, 24, 32, 64px 등

디자인 에셋의 사이즈와 간격 및 모든 수치를 8단위로 맞추면 모든 디바이스에서 픽셀이 깨지지 않고 개발 친화적인 디자인을 할 수 있어요. 스크린 사이즈가 8bit(1byte)를 기준으로 발전했기에 8을 기본으로 해야 이미지가 깔끔하게 렌더링돼요.

꼭 8의 배수만을 고집하지 않고 필요에 따라 4px이나 2px 단위도 사용해요.

8px 그리드 시스템을 UI에 적용할 수 있는 영역 예시: 폰트 크기(Font size), 행간(Line height), 패딩(Padding), 마진(Margin), 모서리 반경(Radius), 고정 너비/넓이(Fixed width/height) 등

모든 환경을 신경 쓰는 경우가 아니라면 8px 그리드를 꼭 지키지 않아도 되긴 해요.

피그마에서는 Preferences > Nudge amount를 8px로 설정하여 쉽게 적용할 수 있어요.

박스 모델 이해#

모든 요소는 박스 영역 안에 들어 있어요. 모든 UI 요소는 박스 모델을 따르게 할 수 있어요.

• 콘텐츠: 실제 내용
• 패딩: 콘텐츠와 테두리 사이의 공간
• 테두리: 요소의 경계
• 마진: 요소 간의 간격

콘텐츠와 패딩은 테두리 안에 존재하고 테두리 바깥 영역은 마진이 있어요.
콘텐츠와 테두리 사이에 간격은 패딩이 담당하고, 테두리와 박스 영역 사이는 마진이 담당해요.
터치 영역은 일반적으로 44 x 44px 이상을 권장하지만, 상황에 따라 작아지는 경우도 있어요.

폰트#

운영체제별로 기본 폰트는 다를 수 있어요.
일관된 폰트 경험을 주고 싶다면 디자인/앱에도 미리 폰트를 설정하는게 좋아요.

• Android: Noto Sans CJK KR (한글), Roboto (영어)
• iOS: Apple SD Gothic Neo (한글), SF Pro Display (영어)
  폰트 선택 시 가독성과 브랜드 일관성을 고려해야 해요.

디자인 시스템 활용#

이미 잘 만들어진 일관된 디자인을 위해 디자인 시스템을 활용하는 걸 추천해요!

• Material Design System
• Apple Human Interface Guidelines
  새로 컴포넌트를 만들어야 한다면 이미 잘 만들어진 디자인에서 조금씩 바꿔가며 만들어 나가는 게 좋아요.
  이러한 가이드라인을 참고하면 플랫폼별 특성을 고려한 디자인이 가능해요.

반응형 디자인#

다양한 디바이스에 대응하기 위한 반응형 디자인도 고려하시면 좋아요.

1. 컴포넌트에 반응형 속성 적용
2. 디바이스별 최소/최대 크기 설정
3. 모바일: 최소, 최대
4. 태블릿: 최소, 최대
5. 데스크톱: FHD, QHD, 4K 등

반응형 디자인 고려해 볼 수 있는 다양한 기기들:
Mobile, Tablet, Desktop, Watch, Car, VR

에셋 관리#

• 피그마에서는 sRGB 색 공간으로만 에셋 내보내기 가능
• 벡터 형식(SVG)을 사용하여 해상도 독립적인 아이콘과 일러스트레이션 제작
• 래스터 이미지의 경우, 2x DPI로 PNG 내보내기 권장

추가로 생각해 볼만한 것
컴포넌트와 스타일을 활용하여 디자인 일관성 유지하기.
반응형 디자인을 위해 Auto Layout을 사용하여 유연한 레이아웃 구성하기.
프로토타입 기능을 활용하여 개발 전에 상호작용 디자인 테스트해보기.
개발에선 버전 관리와 협업 기능을 활용하여 팀 작업 효율성 향상하기.

A man is great by deeds, not by birth.

— Chanakya