피그마 초보 강좌 1편: 피그마 시작하기 – 기본 개념과 인터페이스 익히기

1. 피그마 설치 및 시작하기

1) 피그마 계정 만들기

1. 피그마 공식 웹사이트인 figma.com에 접속합니다.
2. Sign up 버튼을 클릭해 회원가입을 합니다. 이메일이나 구글 계정을 이용해 가입할 수 있습니다.

2) 피그마 데스크톱 앱 설치하기 (선택 사항)

피그마는 웹 브라우저에서 바로 사용할 수 있지만, 데스크톱 앱을 설치하면 더 편리하게 사용할 수 있습니다.

1. Download Figma 링크를 통해 데스크톱 앱을 다운로드하고 설치합니다.
2. 설치 후 피그마 계정으로 로그인하면 웹에서와 동일하게 사용할 수 있습니다.

---

2. 피그마 대시보드 구성

피그마에 로그인하면 대시보드가 나타납니다. 대시보드는 프로젝트와 파일을 관리할 수 있는 곳입니다.

1) 주요 기능 살펴보기

• New File: 새 피그마 파일을 만들 때 사용합니다.
• Drafts: 임시로 저장된 파일이나 개별적으로 관리하는 파일을 모아놓은 섹션입니다.
• Recent: 최근 작업한 파일을 확인할 수 있는 섹션입니다.
• Teams & Projects: 팀으로 프로젝트를 관리하거나 공유할 때 사용합니다.

2) 피그마 파일 생성

1. 대시보드에서 New File 버튼을 클릭해 새 파일을 생성합니다.
2. 생성된 파일이 열리면, 기본적인 피그마 작업 공간이 나타납니다. 작업 공간이 피그마의 인터페이스 중심이므로 하나씩 살펴보겠습니다.

---

3. 피그마 인터페이스 이해하기

피그마 작업 공간은 세 부분으로 나뉩니다: 왼쪽 패널, 상단 툴바, 오른쪽 속성 패널. 이 세 영역을 이해하면 피그마의 기본 사용이 훨씬 수월해집니다.

1) 왼쪽 패널: 레이어와 페이지 관리

• Layers 탭: 디자인의 레이어와 구조를 확인할 수 있습니다. 레이어는 Photoshop의 레이어와 비슷한 개념으로, 요소의 순서나 그룹을 조정할 때 사용합니다.
• Assets 탭: 컴포넌트와 라이브러리를 관리할 수 있는 탭입니다.
• Pages: 하나의 파일 안에 여러 페이지를 생성해 관리할 수 있습니다. 예를 들어, "메인 페이지", "설정 페이지" 등 여러 페이지로 나눠 구성할 수 있습니다.

2) 상단 툴바: 주요 도구 모음

• Move Tool(이동 도구): 요소를 선택하고 이동할 때 사용하는 기본 도구입니다. 단축키는 V입니다.
• Frame Tool(프레임 도구): 작업할 화면의 크기를 설정하는 도구입니다. 모바일, 웹, 태블릿 등의 다양한 화면 크기를 미리 설정할 수 있습니다. 단축키는 F입니다.
• Shape Tools(도형 도구): 직사각형, 원, 선 등 다양한 도형을 추가할 수 있는 도구입니다.
• Text Tool(텍스트 도구): 텍스트를 추가할 때 사용하는 도구입니다. 단축키는 T입니다.
• Comment Tool(댓글 도구): 디자인 파일에 팀원들과 댓글을 추가해 피드백을 주고받을 수 있습니다.

3) 오른쪽 속성 패널: 선택 요소의 속성 수정

선택한 요소의 크기, 위치, 색상, 테두리 등 속성을 수정할 수 있는 영역입니다. 요소를 선택하면 오른쪽 패널에서 해당 요소의 상세 설정이 나타납니다.

• Design(디자인): 크기, 색상, 선, 그림자 등의 디자인 속성을 조정하는 탭입니다.
• Prototype(프로토타입): 화면 전환 및 인터랙션을 설정할 수 있는 탭입니다.
• Inspect(인스펙트): 개발자에게 필요한 CSS 코드나 정보가 표시되는 탭입니다.

---

4. 새 파일에서 프레임 추가 및 화면 구성하기

이제 피그마에서 작업 영역을 설정해보겠습니다. 프레임을 추가해 작업할 화면 크기를 설정하고, 몇 가지 기본 요소를 배치해볼 수 있습니다.

1) 프레임 추가

1. 상단의 Frame Tool(단축키 F)을 클릭합니다.
2. 작업 공간에 프레임을 생성할 위치를 클릭하고 드래그합니다.
3. 오른쪽 속성 패널에서 다양한 프레임 프리셋을 확인할 수 있습니다. 예를 들어, iPhone 13을 선택하면 해당 크기의 프레임이 자동으로 설정됩니다.

2) 도형 추가

1. 상단의 Shape Tool을 클릭하고 **Rectangle(직사각형)**을 선택합니다.
2. 프레임 안에 직사각형을 그리고, 오른쪽 패널에서 크기, 위치, 색상을 설정해봅니다.

3) 텍스트 추가

1. 상단의 Text Tool(단축키 T)을 클릭합니다.
2. 프레임 안에서 원하는 위치를 클릭하고 "로그인" 등의 텍스트를 입력해봅니다.
3. 오른쪽 패널에서 폰트, 크기, 색상 등 텍스트 속성을 조정합니다.

---

5. 기본 레이어 관리 및 정렬

작업을 하다 보면 여러 개의 레이어가 생기기 때문에, 레이어를 관리하고 정렬하는 법을 알아두면 유용합니다.

1) 레이어 정렬하기

• 정렬 도구: 오른쪽 패널에서 요소를 좌우/상하로 정렬하는 도구를 사용할 수 있습니다.
• 레이어 순서 변경: 왼쪽 패널의 Layers 탭에서 각 요소의 레이어를 드래그해 순서를 변경할 수 있습니다.

2) 그룹화 및 잠금

• 그룹화: 여러 요소를 선택한 후, Ctrl + G(Windows) 또는 Cmd + G(Mac)를 눌러 그룹화할 수 있습니다. 그룹화하면 함께 이동하거나 크기를 조정하기 쉽습니다.
• 레이어 잠금 및 숨기기: 특정 레이어를 잠그거나 숨겨서 다른 레이어에 영향을 주지 않도록 설정할 수 있습니다. 왼쪽 패널에서 각 레이어의 잠금/숨김 아이콘을 클릭하면 됩니다.

---

결론

이번 강좌에서는 피그마 설치와 인터페이스를 익히고, 기본적인 도형과 텍스트를 추가하여 화면을 구성하는 법을 알아보았습니다. 이제 피그마에서 작업할 기본 환경을 조성하는 법을 알게 되었으므로, 다음 강좌에서는 도형과 텍스트 속성을 더 자세히 조정하고 색상 스타일을 관리하는 방법을 배우겠습니다.