디자이너 트랙 : 7. 피그마 기본 개념

레이어(Layer)

레이어는 디자인 요소들이 쌓이는 순서를 나타내며, 각 요소의 위치와 표시 순서를 관리합니다.

레이어 순서 변경

• 한 칸 앞으로/뒤로 이동: Cmd + [ 또는 Cmd + ]
• 맨 앞으로/뒤로 이동: Cmd + Option + [ 또는 Cmd + Option + ]

레이어 생성 및 이름 변경

피그마에서는 텍스트나 도형을 추가할 때 자동으로 레이어가 생성됩니다. 레이어 이름을 더블 클릭하여 변경하면 관리가 더욱 편리합니다.

그룹(Group)

여러 레이어를 하나로 묶어 관리할 수 있는 기능입니다.

• 그룹 생성: Cmd + G
• 그룹 해제: Cmd + Shift + G

프레임(Frame)

프레임은 디자인의 기본 틀로, 다른 도구의 아트보드와 유사한 개념입니다.

프레임 생성 및 프리셋 활용

• 프레임 생성: F 또는 A 키
• 프리셋 선택: 우측 패널에서 Phone, Tablet, Desktop 등의 프리셋 선택

프레임 복제 및 수정

• 복제: Cmd + D 또는 Option + Drag
• 수정: 우측 패널에서 속성 변경 또는 드래그로 크기 조절

섹션(Section)

섹션은 프레임을 그룹화하여 작업을 정리하는 데 사용됩니다.

섹션 생성 및 활용

• 섹션 생성: Shift + S
• 중첩 사용: 섹션 안에 섹션을 추가하여 복잡한 작업을 체계적으로 관리

페이지(Page)

페이지는 하나의 파일 내에서 여러 작업을 체계적으로 관리할 수 있는 상위 개념입니다.

페이지 생성 및 활용 예

• 페이지 생성: 좌측 패널의 + 버튼 클릭
• 활용 예:
  • 디바이스별 관리: PC, 모바일, 태블릿
  • 작업 단계별 관리: 기획, 와이어프레임, UI 디자인

---

페이지와 레이어의 차이

페이지(Page)	하나의 파일 안에서 여러 작업을 체계적으로 정리하는 상위 개념. 디자인의 큰 틀을 나눌 때 사용.
레이어(Layer)	개별적인 디자인 요소들이 쌓이는 구조로, 개별적인 텍스트, 이미지, 도형 등을 포함.

 

피그마 우측 디자인 패널 기능

피그마의 '디자인' 패널은 개별 요소의 스타일과 속성을 조정하는 기능을 제공합니다.

주요 기능

• 레이아웃: 크기, 위치, 회전 설정
• 색상 및 그라디언트: Fill 및 Stroke 색상 지정
• 텍스트 스타일: 글꼴, 크기, 정렬 및 행간 조정
• 효과: 그림자, 블러 등의 효과 추가
• 오토 레이아웃: 자동 정렬 및 크기 조정 기능 활성화

---

 

실습 1: 피그마 계정 생성 및 새 프로젝트 시작

 

실습 단계:

• 피그마 홈페이지에 접속하여 회원 가입 및 로그인.
• “Create New File” 버튼을 클릭하여 새 디자인 파일 생성.
• 파일 이름을 “1단계_내 첫 피그마”로 변경.

 

실습 2: 인터페이스 탐색 및 기본 도구 연습

\

실습 단계:

• 상단 툴바의 각 도구(Select, Frame, Shape 등)를 클릭하여 기능 미리보기.
• 좌측 레이어 패널에서 “Pages”와 “Layers”의 차이와 구조 파악.
• 우측 속성 패널에서 오브젝트를 선택 후 나타나는 옵션을 탐색.

 

실습 3: 기본 도형 제작 및 스타일 적용

실습 단계:

• 사각형 도구(R): 캔버스에 클릭 후 드래그하여 사각형 생성.
• 속성 패널 활용: 사각형의 Fill 색상, Stroke(테두리) 및 Shadow(그림자) 효과를 적용.
• 원형 도구(O): 캔버스에 원 그리기 후 크기 및 위치를 조정.

---

마무리

처음 피그마를 사용할 때는 다소 낯설었으나, 기존에 사용하던 포토샵과 유사한 점이 많아 적응하는 데 큰 어려움이 없었습니다. 전반적으로 첫인상이 매우 긍정적이었으며, 학습 과정에서 약간의 막히는 부분은 구글링을 통해 해결할 수 있어 다행이었습니다. 또한, 직관적이고 흥미로운 프로그램이라는 인상을 받았습니다. 앞으로의 커리큘럼이 어떨지 새로운 툴은 어떤 느낌일지 무척 기대됩니다.