무료 피그마 사용법 A~Z까지 단 15분 컷

피그마를 15분 만에 기초부터 배우는 방법은 무엇인가요?

피그마의 다양한 파일 종류, 기본 인터페이스, 핵심 기능(프레임, 도형, 오토레이아웃, 컴포넌트, 프로토타입, 내보내기, 협업)을 익히면 15분 만에 기초를 다질 수 있습니다.

💡 피그마의 주요 파일 종류와 기능은 무엇인가요?

1. 디자인: 웹/앱 UI, 그래픽 등 디자인 작업의 기본 파일
2. 피그잼: 브레인스토밍, 플로우차트, 회의 메모 등 화이트보드형 협업 파일
3. 슬라이드: 프레젠테이션 제작
4. 버즈: 소셜 미디어 게시물, 배너 제작
5. 사이트: 디자인 작업물을 간단한 웹페이지로 배포
6. 메이크: AI 프롬프트로 랜딩 페이지, 프로토타입, 애니메이션 자동 생성

15분 만에 끝내는 무료 피그마 사용법을 통해 디자인 툴 입문 장벽을 단숨에 허물 수 있습니다. 이 콘텐츠는 UI/UX 디자인의 필수 툴인 피그마의 핵심 기능들을 A부터 G까지 압축적으로 설명하며, 특히 프레임 활용법, 오토레이아웃, 컴포넌트 관리 등 실무에서 바로 적용 가능한 효율적인 디자인 관리 노하우를 제공합니다. 디자인 초보자도 이 영상을 통해 실시간 협업과 체계적인 파일 관리의 기초를 다지고, 디자인 작업의 생산성을 즉시 높일 수 있습니다.

15분 만에 끝내는 무료 피그마 사용법 A to Z

이 문서는 UI/UX 디자인의 필수 툴인 피그마의 핵심 기능을 15분 만에 익힐 수 있도록 A부터 G까지 정리한 타임라인 노트입니다. 디자인 초보자도 실시간 협업과 체계적인 파일 관리의 기초를 다질 수 있도록 구성되었습니다.

1. 1. 피그마 소개 및 기본 개요피그마의 중요성: 현재 실무에서 가장 많이 사용되는 디자인 툴이며, UI/UX 디자인 분야로 전향하려는 사람들에게 필수적인 툴이다.
2. 피그마의 장점:
3. 가볍고 직관적인 인터페이스 덕분에 초보자도 금방 익숙해질 수 있다.
4. 파일을 링크로 공유하여 팀원들과 실시간으로 협업할 수 있다는 것이 가장 큰 장점이다.
5. 활용 범위: 스타트업부터 대기업까지 널리 쓰이고 있어 실무에서 바로 활용 가능하다.
6. 학습 목표: 이 영상은 피그마를 처음 접하는 사람도 15분 만에 기초를 끝낼 수 있도록 A부터 G까지 깔끔하게 정리한다.
7. 권장 대상: UI/UX 디자인에 도전하려는 사람들은 끝까지 시청하고 적용해 보는 것이 좋다.

2. 피그마에서 생성 가능한 초안의 종류 그마를 열면 총 여섯 가지 종류의 초안(파일)을 생성할 수 있다.

1. 디자인 (Design):
2. 피그마에서 가장 기본이 되는 파일이다.
3. 웹, 앱, UI, 그래픽 등 디자인 작업을 하는 기본 파일로 사용된다.
4. 포토샵이나 일러스트레이터에 비해 작업 환경이 심플하여 쉽고 빠르게 익힐 수 있다.

1. 피그잼 (FigJam):
2. 아이디어를 브레인스토밍하거나 화면의 플로우 차트, 회의 메모 등을 만드는 화이트보드형 협업 파일이다.
3. 협업 시간을 밀도 있게 사용하기 좋은 타이머 기능이 있으며, 1,000개가 넘는 업무 템플릿을 가져다 쓸 수 있다.

1. 슬라이드 (Slide): 프리젠테이션을 만들 수 있는 파일이다.

1. 신제품 (2025년 5월 업데이트):
2. 버즈 (Buzz): 소셜 미디어 게시물이나 배너 등을 만들 수 있는 파일로, 마케터들이 많이 사용할 것으로 예상된다.
3. 사이트 (Site): 디자인 작업물을 간단한 웹페이지로 배포할 수 있는 파일이다.
4. 메이크 (Make): AI 프롬프트를 입력하면 간단한 랜딩 페이지나 프로토타입 애니메이션을 자동으로 만들어 주는 기능이다.

3. 피그마 초기 화면 구성 및 설정피그마를 열면 나타나는 초기 화면의 구성 요소와 기본 설정을 설명한다.

1. 기본 파일: 처음 열면 오른쪽 파일 목록에 기본적으로 세팅되어 있는 세 개의 파일이 보이며, 이는 피그마 시작을 안내하는 파일이다.

1. 왼쪽 메뉴 구성:
2. 최근 항목: 최근 피그마에서 열었던 파일 목록이 표시된다.
3. 자주 여는 파일은 별표를 눌러 즐겨찾기 하면 왼쪽 메뉴에 바로 뜬다.
4. 템플릿 및 메뉴: 피그마 커뮤니티에 올라오는 다양한 템플릿들을 확인할 수 있으며, 여기서 아이콘, 템플릿, 플러그인 등을 찾아서 사용할 수 있다.
5. 내 메뉴: 계정을 가진 당사자만 볼 수 있는 개인 작업 공간이다.
6. 이 파일에서 공동 작업을 하려면 프로젝트 화면으로 이동해야 한다.

1. 프로젝트 및 공동 작업:
2. 프로젝트 메뉴에서 프로젝트를 생성하고 초대할 사람의 메일 계정을 입력하면 공동 작업이 가능하다.

1. 언어 설정 (한글 버전):
2. 왼쪽 제일 위의 프로필을 클릭하고 '세팅'으로 이동한다.
3. 'Change Language' 버튼을 눌러 한국어를 선택하면 설정이 한국어로 변경된다.
4. 사용자는 한글과 영문을 번갈아 가며 세팅을 바꿔 사용하고 있다.

4. 디자인 파일 열기 및 기본 레이아웃 이해 격적인 디자인 작업을 위해 파일을 열고 화면 구성을 확인한다.

1. 디자인 파일 생성: 초안 옆의 플러스 아이콘을 눌러 '디자인 파일'을 선택하여 생성한다.

1. 파일 이름 변경: 제목 텍스트를 클릭하여 파일명을 수정할 수 있다.

1. 화면 패널 구성:
2. 왼쪽: 파일 및 레이어 정보가 표시되는 패널이다.
3. 중앙: 실제 작업 화면이다.
4. 오른쪽: 레이어를 만들었을 때 상세 정보가 표시되는 패널이며, 선택되는 레이어에 따라 정보가 바뀐다.

1. 툴바 구성: 화면 아래에 툴바가 있으며, 사용 중인 계정이 무료인지 유료인지에 따라 다르게 구성된다.
2. 유료 플랜과 무료 플랜의 기능 차이로 인해 툴바 구성이 다르게 구분된다.

5. 툴바의 기본 기능 탐색 툴바에 있는 주요 아이콘들과 모드 전환 기능을 살펴본다.

1. 주요 아이콘: 툴바에는 순서대로 컨텍스트, 프레임, 도형, 펜툴, 텍스트, 코멘트를 다는 아이콘이 있다.
2. 숨겨진 아이콘: 각 아이콘에 있는 화살표를 클릭하면 비슷한 성격의 아이콘들이 숨겨져 있다.

1. 모드 전환 탭: 툴바 옆에는 드로우(Draw), 디자인(Design), 디버그(Debug) 모드로 전환할 수 있는 탭이 있다.
2. 드로우 모드: 펜, 브러시, 연필 툴이 있으며, 브러시 툴을 선택하면 일러스트처럼 그림을 그릴 수 있다.

1. 도형 작업 (디자인 모드):
2. 도형 툴을 선택하여 도형을 만들 수 있다.
3. 채우기: 색깔을 변경할 수 있다.
4. 외곽선: 외곽선을 선택하거나 없앨 수 있으며, 라운딩을 적용할 수 있다.
5. 그림자: 그림자 효과를 적용할 수 있으며, 안쪽 그림자, 바깥쪽 그림자, 레이어 흐림(겉 테두리가 흐려지는 효과) 기능이 있다.
6. 도형 합치기/빼기: 도형을 합치거나, 뺄 수 있고, 겹쳐진 부분만 뺄 수 있어 아이콘이나 로고 제작에 활용 가능하다.

6. 프레임의 이해와 그룹화의 중요성 피그마에서 도화지 역할을 하는 프레임의 개념과 그룹화 시 프레임을 사용해야 하는 이유를 설명한다.

1. 프레임 생성:
2. 피그마에서 가장 기본적으로 화면 전체를 프레임으로 만든다.
3. 단축키 F키를 누르거나 프레임 아이콘을 눌러 생성할 수 있다.
4. F키를 누르면 오른쪽 패널에 기기별 프리셋이 떠서 원하는 기기를 선택하면 해당 화면 사이즈에 맞는 프레임이 만들어진다.
5. 아이콘을 만들거나 그루핑을 할 때도 거의 대부분 프레임을 사용한다.

1. 그룹 vs 프레임 비교:
2. 그룹: 그룹으로 묶은 사각형의 사이즈를 늘리면 사각형의 모양이 고정되지 않고 바뀐다.
3. 프레임: 프레임 박스만 늘어나고 그 안에 있는 사각형의 크기와 모양은 그대로 고정된다.
4. 결론: 오브젝트를 프레임 안에 넣으면 크기를 변경해도 비율이 깨지지 않게 관리할 수 있어, 피그마에서는 보통 그루핑을 프레임으로 하는 편이다.

1. 섹션 활용: 프로젝트를 정리하기 위해 비슷한 성격의 화면들이라면 섹션을 이용하여 그루핑할 수 있으며, 이를 통해 프로젝트별로 화면을 보기 편리하게 할 수 있다.

7. 오토 레이아웃 (Auto Layout) 기능간격을 일정하게 맞춰주는 오토 레이아웃 기능에 대해 설명한다.

1. 기능 활성화: 간격을 일정하게 맞추고 싶을 때 Shift + A 키를 눌러 오토 레이아웃 기능을 사용할 수 있다.
2. 버튼 예시:
3. 버튼이 선택된 상태에서 Shift + A 키를 누르면 패딩값이 자동으로 적용되는 것을 볼 수 있다.
4. 배경색을 채운 후, 좌우 10픽셀, 상하 10픽셀로 설정할 수 있다.
5. 버튼 텍스트를 복사하면 자동으로 레이아웃이 분할되는 기능이 적용된다.
6. 방향 설정: 가로 또는 세로로 오토 레이아웃을 걸어줄 수 있다.
7. 참고: 오토 레이아웃은 설명이 많이 필요한 기능이므로, 이 영상에서는 자동으로 간격을 조절할 수 있다는 점만 간단히 알아두면 된다.

8. 컨스트레인츠 (Constraints)를 이용한 위치 고정 화면 크기가 달라져도 요소를 원하는 위치에 고정시키는 컨스트레인츠 기능에 대해 설명한다.

1. 기능 정의: 화면 크기가 달라져도 원하는 위치의 요소를 고정시키는 기능이다.
2. 설정 방법 (PPT 슬라이드 하단 페이지 숫자 예시):
3. 오른쪽 하단 정렬 아이콘을 클릭하여 위치를 맞춘다.
4. 제약 조건 아이콘을 클릭하면 위치 설정 패널이 확장된다.
5. 원하는 위치 설정을 완료하면 파란색으로 표시되며, 이는 위치가 고정되었음을 의미한다.
6. 화면 크기를 키우면 고정된 위치를 따라 잘 움직이는 것을 확인할 수 있다.
7. 주의사항: 종종 레이아웃을 변경하면 포지션 설정이 바뀌는 경우가 있으므로, 이 부분을 꼭 확인하고 위치를 고정해야 한다.

9. 텍스트 및 컬러 스타일 등록을 통한 효율적 관리 정보의 중요도에 따라 강약을 조절하기 위해 폰트와 컬러를 스타일로 등록하는 방법을 설명한다.

1. 텍스트 스타일 등록:
2. 제목이나 본문 등 폰트의 크기나 굵기를 미리 정해놓고 스타일로 등록하면 필요할 때마다 가져다 쓸 수 있다.
3. 등록 과정: 폰트 사이즈를 지정하고 'Add Style'을 눌러 스타일을 추가한다.
4. 스타일 등록 후에는 텍스트 스타일 항목에 등록된 스타일이 표시되며, 나중에 텍스트를 쓸 때 사이즈를 다시 설정할 필요 없이 바로 꺼내 쓸 수 있다.

1. 컬러 스타일 등록:
2. 컬러 역시 중요도에 따라 채도와 명도의 단계를 나눠야 한다.
3. 자주 쓰는 컬러를 스타일이나 베리어블(Variable)로 등록하여 디자인을 관리할 수 있다.

10. 컴포넌트(Component)를 활용한 디자인 효율화디자인 요소를 효율적으로 관리하는 컴포넌트 기능에 대해 설명한다.

1. 컴포넌트 정의: 문서 양식이나 공통으로 쓰일 버튼 같은 요소를 컴포넌트로 만들어 놓으면, 수정이 필요할 때 마스터 컴포넌트만 변경하면 된다.

1. 컴포넌트 생성 및 관리:
2. 슬라이드 화면에서 반복되어야 할 텍스트 그룹이 있다면 Ctrl + Alt + K를 눌러 컴포넌트를 만든다.
3. 왼쪽 패널의 에셋(Assets) 탭에서 생성된 컴포넌트를 꺼내 쓸 수 있다.
4. 관리 페이지: 보통 메인으로 만든 컴포넌트는 컴포넌트만 모아 놓는 페이지를 따로 만들어 관리한다.
5. 적용 컴포넌트: 페이지에 적용하는 컴포넌트는 복제본 컴포넌트를 사용하며, 이를 각각 마스터 컴포넌트와 인스턴스 컴포넌트라고 칭한다.

1. 수정 및 삭제:
2. 전체적으로 컬러 수정이 필요할 경우, 마스터 컴포넌트의 컬러만 변경하면 여러 군데 적용된 컴포넌트가 일일이 수정할 필요 없이 한 번에 수정된다.
3. 마스터 컴포넌트 삭제: 마스터 컴포넌트를 삭제하면 에셋 패널에서 컴포넌트가 사라진다.
4. 복원 가능성: 만약 복제본 컴포넌트가 살아 있다면, 마스터 컴포넌트를 실수로 지웠을 때 복원이 가능하다.

11. 프로토타입(Prototype) 기능으로 화면 구현 및 인터랙션 설정 서비스의 흐름을 보여주기 위해 화면 간 연결을 구현하는 프로토타입 기능을 설명한다.

1. 프로토타입 연결:
2. 오른쪽 패널에서 프로토타입 탭을 선택한다.
3. 화면을 선택하고 마우스를 갖다 대면 나타나는 플러스 아이콘을 클릭한다.
4. 끌어다가 연결할 화면에 놓으면 화살표로 화면이 이어지며 작은 인터랙션 팝업창이 뜬다.

1. 트리거(Trigger) 설정:
2. 클릭 시: 해당 화면을 클릭했을 때 넘어가게 하려면 트리거를 '클릭 시'로 선택한다.
3. 지연 후 (After Delay): 시간이 지나서 화면이 전환되게 하려면 '지연 후'를 선택한다.
4. 지연 후를 선택했다면 딜레이할 시간을 설정해야 한다.

1. 애니메이션 설정:
2. 원하는 모션에 따라 애니메이션을 지정할 수 있다.
3. 애니메이션 움직임이 감이 오지 않을 경우, 선택 후 밑에서 미리 보기를 할 수 있다.
4. 속도나 애니메이션 스타일을 확인하여 조절할 수 있다.

12. 이미지 내보내기 (Export) 및 저장 방법 든 아이콘이나 도형 이미지를 저장하는 내보내기 기능을 설명한다.

1. 단일 이미지 내보내기:
2. 내보내기 할 아이콘이나 이미지를 선택한다.
3. 오른쪽 패널의 내보내기 영역에서 '+' 버튼을 누르면 PNG, JPG, SVG, PDF로 저장할 수 있다.

1. 일괄 내보내기:
2. 화면에 이미지가 많아져 하나하나 저장하기 힘들 때 사용한다.
3. 아무것도 선택되지 않은 상태에서 Ctrl + Shift + E를 누르면, 내보내기 적용이 된 이미지를 한꺼번에 저장할 수 있다.
4. 중요: 내보내기를 적용하지 않은 이미지는 자동으로 저장되지 않으므로, 저장할 이미지나 아이콘은 반드시 내보내기 버튼을 눌러야 한다.

13. 실시간 협업 및 커뮤니케이션 기능 피그마의 가장 큰 장점인 실시간 공동 작업 및 소통 방법을 설명한다.

1. 공동 작업 초대:
2. 공유하기 버튼을 눌러 같이 작업할 사람의 메일 계정을 넣고 초대하거나, 링크를 복사하여 공유하면 같은 파일에서 작업할 수 있다.

1. 소통 기능:
2. 코멘트: 수정 사항이나 변경된 부분에 대해 코멘트를 달아 소통할 수 있다.
3. 슬래시(/) 키: 급하게 소통해야 할 때 슬래시 키를 눌러 바로바로 소통할 수 있다.

1. 링크 공유 최적화:
2. 프로토타입이나 파일을 공유할 때는 공유하기 버튼에서 링크 복사를 눌러 공유하면 된다.
3. 작업 화면이 매우 많아질 경우, 파일 전체 링크보다 프레임을 선택한 후 공유하기 버튼을 눌러 링크를 복사하여 공유하는 것이 효율적이다.
4. 이렇게 공유된 링크에 접근하면 선택한 프레임이 포커싱되어 바로 시안을 확인할 수 있다.

1. 14. 마무리 및 다음 단계요약: 오늘 알아본 내용은 피그마 사용법의 핵심(액기스)만 뽑은 것이며, 이 방법들로 기본적인 작업은 충분히 수행할 수 있다.