[클라우딩 어플리케이션 엔지니어링 TIL] 240130 - Part 1. 피그마 툴 학습하기 (기초)

Intro

---

어제에 이어 본격적으로 피그마에 대해 공부했다.

피그마의 감을 익히는 데에 도움이 되었다.

 

 

오늘 학습한 내용

---

피그마 툴 학습하기

 

• 툴바
  • 각종 기능을 포함한 툴 영역
• 왼쪽 사이드바
  • 페이지와 레이어 리스트를 확인할 수 있다.
  • 페이지는 고유의 캔버스를 가지고 있으며 목적에 따라 분리해서 사용한다. (무료버전은 페이지 3개까지만 지원함)
  • 레이어는 도형인지 텍스트인지 등 레이어의 유형을 확인할 수 있다.
• 오른쪽 사이드바
  • 레이어의 프로퍼티를 확인할 수 있다.
• 캔버스
  • 실질적인 디자인 작업을 수행하는 공간이다.

 

툴바

프레임

데스크톱, 모바일 사이즈를 지정해 원하는 크기의 프레임을 선택할 수 있다.

레이어 관리를 효율적으로 하기 위해 레이어를 그루핑 할 때 단순 그룹화 대신 프레임으로 그룹화하는 방법을 사용한다.

 

사용 방법으로는 단축키 F 또는

 

해당 아이콘을 클릭한다.

 

섹션

그루핑할 수 있는 방법 중 하나로 프레임보다 상위 개념이다.

섹션 안에 프레임을 넣는 건 가능하나 프레임 안에 섹션을 넣는 건 불가능하다.

섹션은 주로 워크스페이스를 정돈하는 역할을 한다.

 

사용 방법으로 Shift + S를 누르거나

프레임 아이콘을 선택해 Section을 클릭한다.

 

기본 도형

 

도형의 종류로 Rectangle, Line, Arrow, Ellipse, Polygon, Star가 있다.

• Polygon

Ratio, Sweep 설정이 가능하다.

(차트 만들 때 주로 사용)

 

• Polygon

 

삼각형 뿐만 아니라 육각형, 팔각형 등의 다각형 도형 생성이 가능하다.

 

텍스트

단축키 T 또는

 

아이콘 클릭

 

코멘트

캔버스에서 원하는 곳을 클릭해 코멘트를 남기거나 원하는 영역을 드래그한 후 코멘트를 남긴다.

/ 를 누르면 간단한 멘트를 실시간으로 할 수 있다. (시간이 지나면 사라진다.)

 

사용 방법으론 단축키 C 또는

 

아이콘 클릭

 

좌측 사이드바

• 잠금 기능: 캔버스에서 해당 레이어가 선택되지 않음
• 숨김 기능: 캔버스에서 사라짐

 

우측 사이드바

• 정렬

: 두개 이상 레이어 선택시 활성화 되며 프레임 안에 있는 레이어일 경우 프레임 기준으로 정렬이 가능하다.

 

레이어 간의 간격을 균일하게 분배하는 기능을 수행할 수 있다.

 

 

프레임 사이즈와 오리엔테이션

: 프레임의 크기를 변경할 수 있다.

세로형, 가로형, resize to fit 설정 가능

 

 

 

• 포지션

: 프레임에서 X, Y 값

 

 

 

• 디멘션
  • Width, Height 값
  • 도형 회전 (rotation), 모서리 각 (border-radius) 설정 가능
  • 사칙연산 값도 입력 가능하다. 자동으로 계산해 줌
  • clicp-content: 프레임 범위를 벗어난 레이어를 프레임 밖으로 보여줄 지 숨길 지 결정

 

• 레이어

 

 

• 텍스트

 

▪️ Line Height: 행간 (Auto: 텍스트의 1.3배) 실무에선 숫자보단 비율(%)로 설정한다.
▪️ Letter Spacing: 자간 (글자 사이 간격) 음수도 가능
▪️ Paragraph Spacing: 줄 사이 간격 (잘 사용 X)
▪️ ul, ol 지원
▪️ Truncate text: 말줄임 기능

 

 

• 채우기 (Fill)

 

▪️ solid
▪️ gradient
▪️ image -> fill, fit, crop, tile
▪️ video (무료 버전 사용 X)

 

 

• 선

inside, center, outside 종류가 있다.

 

 

• 선택된 컬러 (Selection colors)

복수의 레이어를 클릭 시 레이어에 사용된 모든 컬러들을 보여준다.

변경 원하는 컬러를 한번에 수정이 가능하다.

 

 

• 이펙트 (Effects)

 

▪️ drop shadow: 레이어 표면 아래에 그림자
▪️ inner shadow: 레이어 안쪽에 그림자
▪️ layer blur: 흐림 효과
▪️ background blur: 레이어 아래에 있는 레이어의 흐림 효과 (fill의 알파 값(투명도)을 반드시 설정해야 함)

 

 

• 내보내기 (export)

레이어 내보내기 가능

 

 

 

 

 

마무리

---

오늘은 피그마의 기본적인 기능들에 대해 하나씩 살펴보았다.

피그마는 사이드 프로젝트 때나 가끔 아이디어 구상 등에 써본 적이 있는데 항상 쓰던 아주 기초적인 기능들만 써봤는데 강의를 들으면서 다양한 기능들을 알게 되었다.

내일 강의들도 기대가 된다.