[UX/UI Design] 2단계: Figma 기본 사용법 익히기

이제 2단계로 넘어가서 Figma 기본 사용법 익히기를 진행하겠습니다. 각 소주제를 하나씩 다루면서 상세히 설명드리겠습니다.

2단계: Figma 기본 사용법 익히기

학습 목표:

• Figma 인터페이스 이해
• 와이어프레임 제작 방법 배우기
• 프로토타입 제작

세부 학습 내용:

1. Figma 인터페이스 이해

Figma는 웹 기반의 협업 디자인 도구로, UI/UX 디자이너들 사이에서 널리 사용되고 있습니다. Figma를 처음 사용할 때 이해해야 할 주요 인터페이스 요소를 소개하겠습니다.

Figma 설치 및 로그인

1. Figma 웹사이트 방문: Figma 공식 웹사이트에 방문하여 회원가입을 진행합니다.
2. Figma 데스크톱 앱 설치: 웹에서 사용 가능하지만, 데스크톱 앱을 설치하면 더 원활하게 사용할 수 있습니다.

Figma 인터페이스 요소

1. Toolbar (툴바):

   • Select (V): 선택 도구. 오브젝트를 선택하고 이동할 때 사용.
   • Rectangle (R), Ellipse (O), Line (L): 기본 도형 도구.
   • Pen (P): 자유롭게 경로를 그릴 수 있는 펜 도구.
   • Text (T): 텍스트를 추가하는 도구.
   • Hand (H): 캔버스를 이동할 때 사용.
   • Comments (C): 협업을 위한 댓글 추가 도구.

2. Layers Panel (레이어 패널):

   • 프로젝트의 모든 오브젝트와 레이어를 계층적으로 볼 수 있습니다.
   • 레이어를 그룹화하거나 잠글 수 있습니다.

3. Properties Panel (속성 패널):

   • 선택한 오브젝트의 속성을 조정할 수 있는 패널입니다.
   • 위치, 크기, 색상, 테두리, 그림자 등 다양한 속성을 조정할 수 있습니다.

4. Canvas (캔버스):

   • 디자인 작업을 실제로 진행하는 공간입니다.
   • 무한 캔버스로, 원하는 만큼 확대하거나 축소하여 작업할 수 있습니다.

5. Pages (페이지):

   • 프로젝트 내에서 여러 페이지를 생성하고 관리할 수 있습니다.
   • 각 페이지는 독립적으로 작업할 수 있어, 여러 버전의 디자인을 한 프로젝트 내에서 관리할 수 있습니다.

실습: Figma 인터페이스 탐색

1. 프로젝트 생성

1. Figma 웹사이트 또는 앱에서 로그인 후, "New File"을 클릭하여 새 프로젝트를 생성합니다.

2. 기본 도구 사용

1. Rectangle 도구 (R): 캔버스에 사각형을 그려봅니다.
2. Text 도구 (T): 텍스트를 추가해봅니다. "Hello, Figma!"와 같이 간단한 텍스트를 입력합니다.
3. Select 도구 (V): 사각형과 텍스트를 선택하여 이동하고 크기를 조정해봅니다.

3. 레이어 패널 사용

1. 레이어 패널에서 방금 만든 사각형과 텍스트 레이어를 확인합니다.
2. 텍스트 레이어를 선택하고, 레이어 이름을 "Greeting"으로 변경합니다.

4. 속성 패널 사용

1. 사각형을 선택하고, 속성 패널에서 색상을 변경합니다.
2. 텍스트를 선택하고, 글꼴, 크기, 색상을 변경해봅니다.

문서화

Figma 인터페이스 학습 문서 양식:

# Figma 인터페이스 학습 문서

## 프로젝트 개요
- 프로젝트명: [프로젝트명]
- 작성자: [작성자 이름]
- 작성일: [작성일]

## Figma 설치 및 로그인
- Figma 웹사이트 방문: [Figma 공식 웹사이트](https://www.figma.com/)
- 회원가입 및 로그인
- 데스크톱 앱 설치 (선택사항)

## Figma 인터페이스 요소
1. **Toolbar (툴바)**:
   - Select (V): 선택 도구.
   - Rectangle (R): 사각형 도구.
   - Ellipse (O): 원형 도구.
   - Line (L): 선 도구.
   - Pen (P): 펜 도구.
   - Text (T): 텍스트 도구.
   - Hand (H): 캔버스 이동 도구.
   - Comments (C): 댓글 도구.

2. **Layers Panel (레이어 패널)**:
   - 프로젝트의 모든 오브젝트와 레이어를 계층적으로 보기.
   - 레이어 그룹화 및 잠금 기능.

3. **Properties Panel (속성 패널)**:
   - 선택한 오브젝트의 속성 조정.
   - 위치, 크기, 색상, 테두리, 그림자 등 조정 가능.

4. **Canvas (캔버스)**:
   - 디자인 작업을 진행하는 무한 캔버스.

5. **Pages (페이지)**:
   - 여러 페이지 생성 및 관리 가능.

## 실습 기록
1. **프로젝트 생성**
   - "New File" 클릭하여 새 프로젝트 생성.

2. **기본 도구 사용**
   - Rectangle 도구 (R): 캔버스에 사각형 그리기.
   - Text 도구 (T): "Hello, Figma!" 텍스트 추가.
   - Select 도구 (V): 사각형과 텍스트 선택 및 이동, 크기 조정.

3. **레이어 패널 사용**
   - 레이어 패널에서 사각형과 텍스트 레이어 확인.
   - 텍스트 레이어 이름을 "Greeting"으로 변경.

4. **속성 패널 사용**
   - 사각형 선택 후 색상 변경.
   - 텍스트 선택 후 글꼴, 크기, 색상 변경.

## 결론 및 다음 단계
- 결론: Figma 인터페이스 이해 및 기본 도구 사용법 익힘.
- 다음 단계: 와이어프레임 제작 방법 학습.

정리:

이 단계에서는 Figma의 기본 인터페이스와 주요 도구 사용법을 학습했습니다. 프로젝트를 생성하고, 기본 도구를 사용하여 간단한 디자인을 만들어 보며, Figma의 주요 기능을 탐색해 보았습니다. 다음 단계로 넘어갈 준비가 되면 말씀해 주세요!