“왜 내가 만든 디자인은 뭔가 이상하고 모든게 안맞아 보이고 이상할까?”
디자인 감각이 부족한 게 아닐지도 몰라요.
레이아웃과 정렬이 안 잡혀 있어서 그래요.
디자인을 예쁘게 보이게 만드는 가장 기본이자 핵심은
바로 그리드(Grid)와 정렬(Alignment)이에요. 이건 정말 디자이너가 아니라면 잘 못느낄수도 있어요.
Figma에서는 이 두 가지만 제대로 사용해도,
누가 봐도 “깔끔하고 좀 디자인을 한다” 소리를 들을지도?
저한테 그런말을 많이 해요. 왜 이렇게 정열에 집착을 하시나요?
1. 왜 그리드와 정렬이 중요한가요?
- 콘텐츠가 질서 있게 정리되어 보여요
- 시각적으로 안정감과 전문성을 줘요
- 보는 사람의 이해와 집중력을 높여줘요
- 디자이너처럼 보이는 가장 빠른 방법이에요
디자인 감각보다 기본 구조가 훨씬 더 중요한 이유입니다.
2. Figma에서 그리드 설정하는 법
Figma에서는 프레임(Frame)에 그리드를 설정할 수 있어요.
🛠️ 설정 방법:
- 프레임을 선택 (
F키로 새 프레임 생성도 가능) - 오른쪽 패널 →
Layout Grid→+클릭 Grid,Columns,Rows중 선택
추천 세팅 (웹 기준)
Columns- Type:
Stretch - Count:
12 - Gutter:
16px - Margin:
24pxor32px
- Type:
Rows: 카드형 UI 만들 때 유용
그리드를 컬러 연하게 설정하면 작업할 때 눈도 편하고 디자인도 깔끔하게 정리됨!
3. 정렬 기능 200% 활용하기
Figma 상단 메뉴에 있는 Align 툴 6가지:
| 아이콘 | 기능 | 설명 |
|---|---|---|
| ↔️ | Align left | 좌측 정렬 |
| ↔️ | Align center | 가운데 정렬 (가로축) |
| ↔️ | Align right | 우측 정렬 |
| ↕️ | Align top | 상단 정렬 |
| ↕️ | Align middle | 가운데 정렬 (세로축) |
| ↕️ | Align bottom | 하단 정렬 |
배치할 때 유용한 단축키:
- T: 텍스트 박스 만들기
- Alt + 드래그: 복사 + 정렬 가이드 보기
- Cmd/Ctrl + Hover: 간격, 사이즈 실시간 보기
- Shift + Arrow: 요소 10px씩 이동
4. Auto Layout 활용으로 정렬 자동화!
“정렬이 너무 귀찮아요”라는 사람에게 딱인 기능이
바로 Auto Layout (Shift + A)!
- 여러 요소를 그룹화해서
→ 간격 자동 조정, 정렬 유지, 버튼 크기 자동 변경 가능 - 버튼, 리스트, 카드, 섹션 등 모든 UI에 활용 가능
예시:
텍스트 + 아이콘을 수평으로 정렬하고 싶다면?
→ 둘 다 선택 → Shift + A → 방향 수평, 간격 8px 설정 → 끝!
5. 정렬 잘된 디자인은 이런 느낌이에요
✔️ 좌우 여백, 그리드 기준선 맞춤
✔️ 요소 간 간격이 일정함
✔️ 제목/본문/버튼이 시각적 흐름을 따름
✔️ 정렬선이 맞아떨어질수록 “프로 같아” 보임
마무리
디자인 감각이 없다고 고민하지 말구요.
그리드 + 정렬 + Auto Layout
이 3가지만 익히면 누구나 안정감 있는 디자인을 만들고 정돈된 디자인으로 보여요.