피그마 기초

1. 주제 정하기

가장 먼저 어떤 서비스를 만들지 결정

예시

카페 앱
게임 웹사이트
병원 사이트
쇼핑몰
전시 홍보 페이지

처음에는 너무 복잡한 주제보다
한 가지 기능 중심으로 만드는 것이 좋음

2. 레퍼런스 수집

비슷한 디자인을 많이 보는 단계

주요 확인 요소

레이아웃
컬러 조합
버튼 스타일
타이포그래피
이미지 분위기

추천 사이트

Behance
Dribbble
Pinterest

검색 예시

Modern UI Design
Mobile App UI
Gaming Website UI
Minimal Landing Page
3. 컨셉 정리

디자인 분위기 방향 설정

예시

스타일 특징
미니멀 여백 중심
다크 게임/영상 느낌
감성 부드러운 컬러
미래형 글로우/네온 효과

이 단계에서 컬러 방향도 같이 정함

4. 와이어프레임 제작

디자인 전에 구조부터 제작

처음에는 흑백 박스로만 구성

예시 구성

헤더
메인 배너
컨텐츠 영역
버튼
푸터

중요한 건 "배치 구조"

5. 프레임 만들기

작업할 화면 크기 설정

일반 기준

기기 추천 사이즈
PC 1440px
Tablet 768px
Mobile 390px

프레임 이름도 정리

Main_PC
Main_Mobile
6. 그리드 설정

정렬 기준 만들기

일반 기준

기기 컬럼
PC 12
Tablet 8
Mobile 4

설정 요소

Margin
Gutter
Column

정렬이 훨씬 깔끔해짐

7. 컬러 정하기

메인 컬러를 먼저 정함

추천 방식

메인 컬러 1개
서브 컬러 1~2개
포인트 컬러 1개

너무 많은 색 사용 금지

예시

Black + White + Blue
Dark Gray + Purple
8. 폰트 정하기

UI는 가독성이 가장 중요

실무에서 많이 사용하는 폰트

Pretendard
Noto Sans KR
SUIT

일반 구성

제목
본문
버튼
설명글

스타일을 미리 저장하면 편함

9. 메인 레이아웃 제작

큰 구조부터 먼저 제작

추천 순서

배경
헤더
메인 이미지
텍스트
버튼
카드 UI

처음부터 디테일하게 만들지 말고
큰 구조부터 완성

10. 컴포넌트 만들기

반복 요소를 하나로 관리

예시

버튼
카드
메뉴
아이콘

수정 관리가 쉬워짐

단축키

Ctrl + Alt + K
11. Auto Layout 적용

반응형 제작 핵심

주요 사용

버튼
리스트
카드 UI
메뉴 정렬

단축키

Shift + A
12. 이미지 및 아이콘 추가

디자인 분위기 강화

추천 플러그인

Unsplash
Iconify

주의사항

이미지 과다 사용 금지
스타일 통일 중요
13. 디테일 작업

마무리 단계

추가 요소

그림자
Blur
Radius
Hover 느낌
간격 조절

이 단계에서 완성도가 올라감

14. 프로토타입 연결

실제 앱처럼 화면 이동 제작

예시

버튼 클릭 이동
메뉴 열기
페이지 전환

포트폴리오 퀄리티 향상에 효과적

15. 최종 정리

마지막 정리 단계

체크 사항

레이어 이름 정리
간격 통일
정렬 확인
컬러 통일
불필요한 요소 삭제
추천 UI 제작 순서

레퍼런스 수집
→ 컨셉 정리
→ 와이어프레임
→ 프레임 생성
→ 그리드 설정
→ 컬러/폰트 지정
→ 메인 레이아웃 제작
→ 컴포넌트 제작
→ 오토레이아웃 적용
→ 이미지 추가
→ 디테일 작업
→ 프로토타입 연결
→ 최종 정리

가장 중요한 핵심
처음부터 예쁘게 만들려고 하지 말기
구조 → 정렬 → 여백 순서로 작업
프레임 기반 작업 습관 만들기
오토레이아웃은 반드시 익히기
실무 느낌은 "정리"에서 나온다