피그마 기초 완전 정복 - UXUI 기초 개념 이해 (피그마 기초 사용법)

1. 오늘 학습 키워드

- 피그마 커뮤니티 자료 사용 시 주의 사항

- 이동 툴

- 크기 조정 툴

- 도형과 글자 만들기

- 레이어

- 아웃라인

- 패스(Path)

---

2. 오늘 학습 한 내용을 나만의 언어로 정리하기

 

<피그마 커뮤니티 자료 사용 시 주의 사항>

• 가격 확인
  - 커뮤니티에 올라가는 자료들은 유료, 무료가 섞여있음
  - 사용 전에 꼭 라이선스나 가격을 확인하기
• 저작권 확인
  - 디자인 자료나 플러그인은 라이선스에 따라 사용 범위가 다를 수 있으므로 사용 전 조건을 확인해야 함
• 문제가 발생 시 제작자에게 직접 문의하기
  - 피그마는 자료 공유 공간을 제공할 뿐, 개별 자료를 직접 관리하지 않음
  - 플러그인이나 파일 관련 문제는 해당 제작자에게 문의해야 함

 

 

<이동 툴>

 

- 도구 메뉴의 첫 번째 아이콘인 무브 툴(Move Tool)

- 기본 선택 도구로, 단축키 V로 사용할 수 있음

- 무브 툴 상태에서 개체를 선택할 수 있음

- 선택한 개체를 원하는 위치로 이동할 수 있음

- 무브 툴 상태에서 개체의 가장자리를 드래그하여 크기를 조절할 수 있음

 

 

 

<크기 조정 툴>

 

- 무브 툴 메뉴를 열면 스케일 툴(Scale Tool) 을 선택할 수 있음

- 단축키 K로 빠르게 사용할 수 있음

- 스케일 툴 상태에서도 개체 선택 및 이동 가능

- 개체의 크기를 조절할 수 있지만, 크기가 강제로 변경됨
→ 무브 툴에서 크기 변경 시 상자 크기만 변경되므로 내부 UI의 크기를 전부 수정해줘야 함

→ 스케일 툴 사용 시 내부 요소까지 함께 크기가 변경됨
→ 강제로 크기가 변경이 되기 때문에 원래 속성이 변경될 가능성이 높음

 

 

 

<도형 만들기>

 

[사각형 만들기]

- 사각형 도구는 단축키 R로 사용할 수 있음

- 드래그하여 원하는 크기의 직사각형을 만들 수 있음

- Shift를 누른 채 드래그하면 정사각형을 만들 수 있음

 

[다각형 만들기]

 

- 다각형의 가장 기본적인 형태는 삼각형임

- 삼각형을 선택하면 외형 패널의 개수를 통해 꼭지점 수를 조절할 수 있음

- 최대 개수 60개이며, 원형 형태가 됨

- 꼭지점 수를 변경해 다양한 다각형을 만들 수 있음

- 3개는 삼각형, 5개는 오각형으로 변경됨
- Shift를 누른 채 드래그하면 정삼각형을 만들 수 있음

 

[원형 만들기]

- 타원 툴은 단축키 O으로 사용할 수 있음

- 원형을 선택하면 외형 패널의 호를 통해 부채꼴 원형을 조절할 수 있음
- Shift를 누른 채 드래그하면 정원(正圓)을 만들 수 있음

 

[곡률(Radius) 사용하기]

- 곡률(Radius, R값) 은 도형 모서리의 둥근 정도를 나타내는 값
- 외형 패널의 모서리 반경을 통해 곡률을 조절할 수 있음

- 정사각형에 일정 곡률 이상을 적용하면 원 형태가 됨

- 모서리 반경 옆 오른쪽 아이콘을 누르면 각 모서리의 곡률을 따로 입력할 수 있음

 

[선 그리기]

- 선 툴은 단축키 L로 사용할 수 있음
- 화살표 툴은 단축키 Shift+L로 사용할 수 있음

- 선을 선택하면 외곽선 패널을 통해 선을 다양하게 변경시킬 수 있음

- 선은 높이가 아닌 두께(Stroke width)로 조절함
- 높이는 항상 0임

- 선 양쪽 끝에 화살표를 추가할 수 있음

- 선의 끝을 잡고 움직이면 원하는 위치로 선을 이동시킬 수 있음
-  Shift를 누른 채 드래그하면 수직 또는 수평의 선을 만들 수 있음

- 선을 선택하면 위치 패널의 회전을 통해 선의 각도를 변경시킬 수 있음

 

 

[회전(Rotate)하기]

- 모서리에서 대각선 방향으로 살짝만 커서를 움직이면 바로 확인할 수 있음

- Shift를 누른 채로 회전하면 15도 간격으로 회전할 수 있음

- 도형을 선택하면 위치 패널의 회전을 통해 도형의 각도를 변경시킬 수 있음

 

 

 

<텍스트 입력하기>

- 텍스트를 선택하면 글씨체 패널을 통해 글씨체를 다양하게 변경시킬 수 있음

- 폰트 종류, 폰트 굵기, 폰트 크기, 폰트 행간, 폰트 자간, 좌우 정렬 방향, 상하 정렬 방향 등

 

 

 

<이미지 첨부하기>

- 원하는 사진을 피그마 캔버스 위로 드래그하면 자동으로 첨부됨

- 피그마는 UI 작업에 특화된 툴이라 너무 크거나 긴 사진은 지원하지 않음

- 가로나 세로 길이가 4096px 이상인 경우 자동으로 리사이징을 해서 첨부됨

- 이미지 리사이징 비교

• Fill(채움) : 이미지의 비율을 유지한 채 도형에 꽉 채움, 넘어가는 부분은 숨김
• Fit(맞춤) : 이미지의 비율을 유지한 채 도형 안에 맞춤
• Crop(자르기) : 원하는 영역만 선택하여 표시, 도형의 비율이 바뀌면 이미지도 비율이 변함
• Tile(반복) : 이미지를 반복하여 보여줌

 

 

 

<레이어(Layer,층)>

- 도형, 텍스트 등 각각의 요소를 구성하는 하나의 층

- 레이어의 높이 : 화면을 보는 사용자가 느끼는 요소의 앞뒤 관계, UI의 멀고 가까운 정도를 의미함

- 원근 : 앞뒤 거리감, 레이어가 화면으로부터 얼마나 떠 있는지를 나타냄

- 사용자에게 가까울수록 더 높이 떠 있고 멀수록 더 낮게 떠있음

 

'떠있다'라는 의미

- 화면은 기본적으로 평면이지만, 요소의 겹침이나 그림자를 통해 입체감을 표현할 수 있음

- 레이어가 떠 있다 = Z축 방향으로 높이가 생긴 상태를 의미
- 화면으로부터 더 높이 떠 있을수록 사용자에게 더 가깝게 느껴짐

*입체도형의 축 → 가로(width) - X, 세로(height) - Y, (수직)높이(z-index) - Z

 

- 예시

화면을 정면으로 보면 순서대로 위에서 아래 방향으로 나열되어 있음

 

화면을 옆에 보면 서로 떠 있는 정도가 다를 수가 있음

 

레이어 변경 방법

1. 마우스 오른쪽 버튼을 눌러 앞뒤로 보내기
2. 레이어 패널에서 순서 바꾸기 (위가 가장 앞에 있음)

 

 

 

<패스(Path)>

- 펜 툴은 단축키 p로 사용할 수 있음

- 선, 모양, 복잡한 형태 등 벡터 형식으로 만들어진 모든 형태를 의미함

- 원형 도구를 이용해 바로 그릴 수 있지만 펜 툴을 사용해도 그릴 수 있음

 

 

 

<아웃라인과 평탄화>

아웃라인(Outline)

- 도형을 선택하면 채우기 패널을 통해 도형 안에 다양한 색을 변경할 수 있음

- 도형을 선택하면 외곽선 패널을 통해 외곽을 다양하게 변경할 수 있음

- 도형 테두리 특징 : 도형 크기가 변하더라도 테두리 크기는 변하지 않음

 

- 테두리 방향은 패스를 기준으로 가운데, 바깥쪽, 안쪽으로 나눌 수 있음

왼쪽부터 바깥쪽, 안쪽, 가운데

 

 

패스 파인더
- 여러 개의 도형이나 패스를 합치거나, 빼거나, 겹치는 부분만 남기는 등 원하는 형태로 가공하는 기능

 

 

 

<피그마 추출 및 저장하기>
파일로 추출하기
1. 추출하고 싶은 개체 선택
2. 디자인 패널의 내보내기 패널 옆 + 아이콘 선택
3. 추출하고 싶은 확장자와 크기 선택 후 내보내기 선택

 

 

피그마 파일로 컴퓨터에 저장하기

- 기본적으로 클라우드 저장 방식
- 따로 저장하지 않아도 피그마가 알아서 서버에 진행 상황을 동기화함

- 백업 방법
1. fig파일로 컴퓨터에 저장하기

 

2.fig파일 열기

 

 

진행 상황 메모해서 클라우드 저장하기

- 변경 사항 확인 가능 및 필요시 이전 버전으로 되돌리기 가능

 

- 저장된 진행 상황 확인하기

 

- 저장한 메모와 날짜 확인

 

원하는 버전에 마우스 우클릭 후 이 버전 복원 누르기

---

3. 학습하며 겪었던 문제점 & 에러

1) 

 학습 과정에서 단축키가 헷갈려 작업 속도가 느려지는 경우가 있었다.

 이를 해결하기 위해 자주 사용하는 단축키를 반복적으로 사용하며 익숙해지려고 노력했다.

2)
학습 과정 도중 강의에서 다루지 않은 다양한 기능들이 눈에 띄어 궁금증이 생겼다.
 이를 해결하기 위해 앞으로 직접 피그마를 사용하면서 기능들을 하나씩 눌러보고, 어떤 용도로 활용되는지 추가로 학습해 볼 계획이다.

3)
 학습 과정 도중 강의 자료와 실제 피그마 화면의 메뉴 위치가 다르거나 강의는 영어 기준인데 내가 사용하는 환경은 한글로 설정되어 있어 기능을 찾는 데 어려움이 있었다.

 이를 해결하기 위해 비슷한 용어를 찾아보며 메뉴를 직접 탐색했고 필요한 경우 추가 검색과 학습을 통해 기능의 위치와 의미를 확인했다.