오늘할 것
피그마 작업 환경 → 프레임 → 그리드 → 반응형 배치
핵심 한 줄
프레임으로 화면 크기를 정하고 → 컬럼으로 정렬 기준을 만들고 → 화면이 좁아지면 크기만 줄이지 않고 정보의 순서와 배치를 다시 판단한다.
01. 피그마 작업 환경
화면의 5개 영역
| 영역 | 하는 일 |
|---|---|
| 내비게이션 바 | 파일/페이지 이동 |
| 왼쪽 사이드바 | 페이지·레이어 확인 및 선택 |
| 캔버스 | 실제 디자인 작업 영역 |
| 도구 모음 | 프레임·도형·텍스트 등 생성 |
| 오른쪽 속성 패널 | 선택한 요소의 크기·위치·색 등 수정 |
가장 중요한 작업 흐름
왼쪽에서 대상을 찾고 → 캔버스에서 선택하고 → 오른쪽에서 값을 바꾼다.
오른쪽 패널에 원하는 옵션이 안 보이면 지금 무엇을 선택했는지부터 확인하기.
02. 파일 구조 먼저 만들기
본격적으로 디자인하기 전에 아래 구조부터 만든다.
페이지
01_Layout
페이지는 작업 종류를 구분하는 가장 큰 단위.
프레임 2개
Desktop
- 이름: Desktop_1440
- 너비: 1440px
Mobile
- 이름: Mobile_375
- 너비: 375px
프레임은 F 키 또는 Frame 도구로 생성한다.
이름 붙이는 기준
나중에 레이어에서 바로 찾을 수 있도록 역할 + 구분값으로 이름을 붙인다.
예:
Desktop_1440 / Mobile_375
Header / Hero / KeyMessage / Benefit / ProductInfo / Review / CTA / Footer
반복 요소는:
Card_01 / Card_02
Review_01 / Review_02
Step_01 / Step_02
UI 상태는:
Btn_Primary / Btn_Secondary / Btn_Disabled
Input_Default / Input_Error
텍스트 역할은:
Title / Subtitle / Body / Caption / Price / Label
03. 컬럼 그리드
컬럼은 단순히 화면을 나누는 선이 아니라 요소의 시작점과 정렬선을 통일하기 위한 기준이다.
용어 3개
| 용어 | 의미 |
|---|---|
| Column | 콘텐츠를 배치하는 세로 영역 |
| Gutter | 컬럼과 컬럼 사이의 간격 |
| Margin | 프레임 바깥쪽과 콘텐츠 사이 여백 |
즉,
Margin → Column → Gutter → Column → … → Margin
구조로 생각하면 된다.
Desktop 1440 기준
| 설정 | 값 |
|---|---|
| Frame | 1440px |
| Columns | 12 |
| Type | Stretch |
| Gutter | 24px |
| Margin | 120px |
→ 넓은 화면에서 여러 콘텐츠를 나란히 배치하기 좋은 구조.
Mobile 375 기준
| 설정 | 값 |
|---|---|
| Frame | 375px |
| Columns | 4 |
| Type | Stretch |
| Gutter | 16px |
| Margin | 20px |
→ 좁은 화면에서 콘텐츠가 답답해지지 않으면서 정렬 기준을 유지하는 구조.
기억하기:
Desktop = 12컬럼 / Mobile = 4컬럼
단, 이 숫자들은 절대적인 정답이라기보다 이번 실습에서 구조를 비교하기 위한 시작값이다.
04. 그리드에 요소 배치하기
요소를 아무 위치에 두지 않고 컬럼선에 맞춰 정렬한다.
체크할 것
- 제목과 본문의 시작 컬럼이 같은가?
- 반복되는 카드들의 컬럼 수가 같은가?
- 좌우 요소의 Margin이 같은가?
- 비슷한 역할의 요소가 같은 정렬선을 사용하는가?
예를 들어 제목은 1컬럼에서 시작하는데 본문은 애매하게 그 사이에서 시작하는 식의 배치를 피한다.
왜 쓰나?
그리드를 먼저 정해두면 요소 하나를 놓을 때마다
“여기 둘까? 조금 왼쪽으로 갈까?”를 반복할 필요가 줄어든다.
즉, 그리드는 디자인 결정 횟수를 줄여주는 기준이다.
05. Desktop → Mobile은 단순 축소가 아니다
이번 수업에서 가장 중요한 부분.
1440 화면을 375로 작게 줄이는 것 ≠ 모바일 디자인
화면이 좁아지면 정보의 우선순위·순서·너비·배치 방식을 다시 판단해야 한다.
먼저 내용의 순서를 정한다
이번 화면의 기본 구조:
① 핵심 메시지
→ ② 근거
→ ③ 제품 정보
→ ④ 주요 다음 행동
Day 21에서 정했던 핵심 메시지와 디자인 방향이 여기서 실제 화면 구조로 이어진다.
06. 같은 내용, 다른 배치
| 요소 | Desktop 1440 | Mobile 375 |
|---|---|---|
| 핵심 메시지 | 넓게 강조 | 첫 화면에 유지 |
| 제품 정보 | 2~3열 배치 가능 | 1열로 순서 정리 |
| 주요 다음 행동 | 내용 옆 배치 가능 | 손이 닿기 쉬운 너비/위치 고려 |
즉, 모바일로 갈 때도 정보 자체의 중요도는 유지하지만 보여주는 방식은 달라질 수 있다.
모바일 전환할 때 생각할 것
크기만 줄이지 말고
→ 무엇이 먼저 보여야 하는지
→ 무엇을 한 줄로 쌓을지
→ 어떤 정보끼리 묶을지
→ 버튼/CTA를 어디에 둘지
를 다시 결정한다.
이게 반응형 설계의 시작.
07. 브레이크포인트 개념
브레이크포인트는 단순히 특정 기기 이름이나 숫자를 의미하는 게 아니라,
기존 배치가 더 이상 자연스럽지 않아 레이아웃을 바꿔야 하는 지점
이라고 이해하면 된다.
즉,
화면 너비가 기존 기준보다 좁아짐
→ 기존 배치가 불편해짐
→ 요소를 새롭게 배치
이번 실습에서는 1440 / 375 두 화면을 비교하지만, 이 숫자 자체가 곧 브레이크포인트라는 뜻은 아니다.
08. 오늘 작업 순서
실제로 피그마를 켰을 때는 이것만 보자.
① 01_Layout 페이지 생성
→ ② Desktop_1440 프레임 생성
→ ③ Mobile_375 프레임 생성
→ ④ 각각 Layout Grid 설정
→ ⑤ Day 21의 핵심 메시지를 기준으로 콘텐츠 순서 배치
→ ⑥ Desktop 레이아웃 작성
→ ⑦ 같은 콘텐츠를 Mobile에 다시 배치
→ ⑧ 두 화면의 차이를 메모
특히 모바일을 데스크톱 완성본의 축소판으로 만들지 않는 것이 중요.
09. 과제
이번 과제는 기본 레이아웃 완성.
만들어야 할 것
| 항목 | 결과물 |
|---|---|
| 프레임 | Desktop 1440 + Mobile 375 |
| 그리드 | Desktop 12컬럼 + Mobile 4컬럼 |
| 기본 레이아웃 | Day 21에서 정한 우선순위 1개 적용 |
| 화면 비교 | Desktop / Mobile |
| 변화 메모 | 3줄 |
변화 메모는 단순히
❌ 모바일에서 작게 만들었다
가 아니라,
무엇의 순서가 바뀌었는지 / 무엇의 너비가 바뀌었는지 / 무엇의 배치가 바뀌었는지
적으면 된다.
작업 중 막히면 확인할 것
| 문제 | 먼저 확인 |
|---|---|
| 오른쪽 메뉴가 안 보임 | 현재 선택한 대상 확인 |
| 그리드가 안 보임 | Layout guide 표시 여부 확인 |
| 모바일이 답답함 | 정보 우선순위 → 1열 배치 → 여백 확인 |
| 무엇부터 배치할지 모르겠음 | Day 21의 디자인 결정/번역 표 확인 |
⭐ 오늘 기억해둘 것
프레임 = 화면 크기
컬럼 = 정렬 기준
Desktop 12 / Mobile 4 = 이번 실습 시작값
반응형 = 축소가 아니라 재배치
