피그마 기초 스터디로그 · 총정리
피그마 기초 총정리
피그마 기초 총정리
10일의 기록
피그마 수업이 끝났어요!
하루하루 따로 정리할 땐 몰랐는데, 한 번에 이어서 보니 쌓이는 순서가 있는 수업이었더라고요.오늘은 10일 치를 한 장으로 묶고, 용어와 단축키까지 한꺼번에 정리해봤어요.
10
일간의 수업
3
단계의 흐름
1
개의 큰 그림
THE BIG PICTURE
한 장 지도
아래에서 위로, 기본기 위에 재사용이 쌓이고, 그 위에 접점 설계가 올라가요.
7 – 10일차
접점으로 설계하기
사용자 행동 · 사례 분석과 재구성 · 반응형과 디바이스 · 종합
▲ 위에 올라가요
4 – 6일차
한 번 만들고 계속 쓰기
컴포넌트 · 컬러 스타일과 변수 · 디자인 시스템
▲ 위에 올라가요
1 – 3일차
화면을 만드는 기본기
프레임 · 레이어 · 그리드 · 오토 레이아웃 · 타이포 · 섹션
WHAT I LEARNED
날짜별로 다시 보면
하루에 네 가지씩, 10일 치를 빠짐없이 적어뒀어요.
PHASE 11 – 3일차
화면을 만드는 기본기
"피그마에서 화면은 어떻게 짜이지?"
DAY 1프레임 · 레이어 · 레이아웃 그리드
1. 프레임
작업을 담는 화면 하나의 틀이에요.
2. 레이어와 눈 아이콘
쌓인 요소를 정리하고, 눈 아이콘으로 잠깐 숨겨요.
3. 레이아웃 그리드
요소를 정렬하는 기준이 되는 투명한 격자예요.
4. 이름 바꾸기와 단축키
프레임·레이어 이름을 알아보기 쉽게 바꾸고, 단축키로 속도를 높여요.
DAY 2레이아웃 규칙
1. 오토 레이아웃
요소 사이의 간격과 정렬을 자동으로 맞춰줘요.
2. 크기와 정렬
어느 기준선(가운데·위·아래 등)으로 맞출지와 간격을 정해요.
3. UI 요소
버튼처럼 재사용하는 조합을 오토 레이아웃으로 만들어요.
4. 허그 · 필 · 픽스
내용에 맞춤 / 부모만큼 채움 / 고정 크기를 골라요.
DAY 3타이포
1. 위계
크기와 굵기 차이로 읽는 순서를 만들어요.
2. 글자 스타일
폰트·크기·줄간격 조합을 저장해두고 재사용해요.
3. 글자 규칙
줄간격과 자간의 기준을 정해서 통일해요.
4. 섹션
여러 프레임을 묶어서 캔버스를 정리해요.
PHASE 24 – 6일차
한 번 만들고 계속 쓰기
"어떻게 하면 매번 새로 만들지 않을까?"
DAY 4컴포넌트
1. 컴포넌트 만들기
디자인을 재사용 가능한 원본으로 만들어요.
2. 인스턴스
원본과 연결된 사본을 여러 화면에 가져다 써요.
3. 컴포넌트 속성
기본·호버·비활성 같은 상태를 한 세트(variant)로 관리해요.
4. 전체 반영
원본을 고치면 모든 인스턴스가 한 번에 바뀌어요.
DAY 5컬러 및 스타일 시스템
1. 컬러 스타일
자주 쓰는 색을 저장해두고 골라 써요.
2. 컬러 변수
하나의 이름에 모드별 값을 담을 수 있어요.
3. 시맨틱 네이밍
색 이름이 아니라 Primary처럼 역할로 이름 붙여요.
4. 다크모드 대응
변수의 모드를 바꿔서 화면 전체를 한 번에 전환해요.
DAY 6디자인 시스템 기초 및 확장
1. 디자인 시스템이란
지금까지의 조각들이 하나의 일관된 체계로 묶인 거예요.
2. 구성 요소
기초값(Foundation) 위에 컴포넌트가 쌓여요.
3. 라이브러리 공유
스타일과 컴포넌트를 다른 파일에서도 쓰게 발행해요.
4. 확장하기
기존 체계를 깨지 않고 새 컴포넌트와 variant를 더해요.
PHASE 37 – 10일차
접점으로 설계하기
"이 화면은 사용자의 어느 순간을 위한 거지?"
DAY 7사용자 행동 기반 접점 설계
1. 행동 여정 그리기
사용자가 거치는 단계를 먼저 그려요.
2. 행동 신호 읽기
클릭·스크롤·체류·이탈에서 막힌 곳을 찾아요.
3. 단계별 접점 설계
단계마다 필요한 화면을 정하고 섹션으로 묶어요.
4. 검증하고 고치기
행동 데이터로 다시 확인하고 수정해요.
DAY 8접점 사례 분석 및 재구성
1. 사례 고르기
목표가 분명한 서비스와 분석 범위를 정해요.
2. 접점 분해하기
접점마다 사용자가 하는 일과 느낌을 적어요.
3. 문제 진단하기
감정이 꺾인 접점을 일관성·막힘·불안 기준에 대봐요.
4. 재구성하기
근거 문장을 달아 Before/After로 다시 설계해요.
DAY 9반응형 및 디바이스 접점
1. 디바이스별 상황
기기마다 쓰는 상황과 입력 방식이 달라요.
2. 브레이크포인트
화면 폭 구간마다 그리드를 따로 정해요.
3. 늘고 줄어드는 규칙
오토 레이아웃과 Fill·Hug로 알아서 반응하게 해요.
4. 우선순위와 일관성
작은 화면은 핵심만, 터치 영역은 충분히, 같은 시스템으로 일관되게요.
DAY 10디지털 접점 종합
1. 여정 읽기
행동에서 막힌 접점을 찾아요.
2. 진단·재구성
근거를 달아 고치고 다시 확인해요.
3. 기기로 확장
같은 접점을 기기마다 다시 설계해요.
4. 일관성 점검
전체가 한 브랜드로 이어지는지 체크리스트로 봐요.
GLOSSARY
용어 한눈에
헷갈릴 때 돌아와서 보려고 한 줄씩 적어뒀어요.
프레임
화면 하나를 담는 틀이에요.
레이어
쌓인 요소의 목록이고, 눈 아이콘으로 숨길 수 있어요.
레이아웃 그리드
정렬 기준이 되는 투명한 격자예요.
오토 레이아웃
간격과 정렬을 자동으로 맞춰주는 기능이에요.
허그 · 필 · 픽스
내용에 맞춤 / 부모만큼 채움 / 고정 크기예요.
섹션
여러 프레임을 묶는 상위 그룹이에요.
컴포넌트 · 인스턴스
원본과 그 원본에 연결된 사본이에요.
변수
모드별로 다른 값을 담는 이름이에요. 다크모드에 써요.
라이브러리
스타일과 컴포넌트를 다른 파일에서도 쓰게 공유해요.
브레이크포인트
레이아웃이 바뀌는 화면 폭의 기준선이에요.
위계
크기와 굵기 차이로 읽는 순서를 만드는 거예요.
글자 스타일
폰트·크기·줄간격 조합을 저장해둔 설정이에요.
컴포넌트 속성(variant)
기본·호버·비활성 같은 상태를 한 세트로 묶은 거예요.
시맨틱 네이밍
색 이름이 아니라 역할(Primary 등)로 이름 붙이는 방식이에요.
디자인 시스템
기초값과 컴포넌트가 하나로 묶인 일관된 체계예요.
접점
사용자가 서비스를 마주치는 모든 순간이에요.
SHORTCUTS
단축키 정리
1일차 글의 표를 바로잡아서 다시 정리했어요.
프레임 만들기F
사각형 그리기R
텍스트 입력T
이름 바꾸기Cmd/Ctrl + R
숨기기/보이기Shift + Cmd/Ctrl + H
그룹 만들기Cmd/Ctrl + G
오토 레이아웃 적용Shift + A
컴포넌트 만들기Opt/Alt + Cmd/Ctrl + K
Cmd는 맥, Ctrl은 윈도우 기준이에요.
TOOLS & CHECKLIST
접점 설계에 쓰인 도구와 체크리스트
10일차에서 정리한 내용을 한 번 더 모았어요.
섹션
접점 흐름과 Before/After를 한눈에 묶어요
3일차
프레임·그리드
기기별 구간의 기준을 잡아요
1일차
오토 레이아웃
화면 폭에 따라 알아서 반응해요
2일차
컴포넌트
상태와 기기 변형을 한 세트로 관리해요
4일차
변수·스타일
색과 글자 톤을 어디서나 같게 유지해요
5일차
디자인 시스템
이 모든 걸 한 체계로 묶고 키워가요
6일차
접점 설계 마무리 체크리스트
✓모든 기기에서 같은 컴포넌트를 쓰고 있나
✓색과 글자가 변수·스타일로 연결되어 있나
✓접점마다 말투와 분위기가 이어지나
✓기기마다 핵심 행동이 가장 눈에 띄나
✓고친 접점을 다시 확인할 계획이 있나
✓흐름 전체가 한 섹션에서 한눈에 보이나
BX × FIGMA
BX에서 배운 "왜"와 이어지는 "어떻게"
두 시리즈가 따로 있었지만, 사실 같은 흐름 위에 있었어요.
BX · 왜피그마 · 어떻게
BX 3일차폰트의 역할
→
피그마 3일차글자 스타일로 위계 구현
BX 5일차모티브·에셋·세트
→
피그마 4일차컴포넌트로 재사용
BX 12일차어디서 만나도 같은 브랜드
→
피그마 5·6일차변수와 디자인 시스템
BX 21일차리서치를 디자인 근거로
→
피그마 8일차근거를 달아 재구성
🧭 10일을 돌아보며
피그마는 도구 사용법이 아니라, BX에서 정한 방향을 화면 위에서 흔들리지 않게 지키는 방법이었어요.
다만 아는 것과 손에 익는 건 다르다는 것도 알아요.
배운 건 정리됐으니, 이제 직접 파일을 만들면서 몸에 익히는 단계예요.
'Figma' 카테고리의 다른 글
| 디지털 접점 종합 (0) | 2026.10.15 |
|---|---|
| 디지털 접점 사례 분석 및 재구성 (0) | 2026.10.13 |
| 사용자 행동 기반 디지털 접점 설계 (0) | 2026.10.12 |
| 디자인 시스템 기초 및 확장 (0) | 2026.10.08 |
| 컬러 및 스타일 시스템 설계 (0) | 2026.10.07 |
