[UX/UI Design] 3단계: Figma에서 와이어프레임 제작

이제 3단계로 넘어가서 Figma를 사용하여 와이어프레임을 제작하는 방법을 배우겠습니다.

3단계: Figma에서 와이어프레임 제작

학습 목표:

• 와이어프레임의 개념 이해
• Figma를 사용하여 와이어프레임 제작
• 와이어프레임의 문서화

세부 학습 내용:

1. 와이어프레임의 개념 이해

• 와이어프레임: 웹사이트나 애플리케이션의 기본 구조를 시각적으로 나타낸 것입니다. 주로 레이아웃, 페이지 요소의 위치, 사용자 흐름 등을 나타내며, 세부적인 디자인 요소(색상, 이미지 등)는 포함되지 않습니다.

와이어프레임은 UX/UI 디자인의 초기 단계에서 중요한 역할을 합니다. 이를 통해 디자이너는 사용자 흐름과 페이지 레이아웃을 구체화할 수 있습니다.

2. Figma에서 와이어프레임 제작

Figma 프로젝트 설정

1. 새 파일 생성: Figma에서 "New File"을 클릭하여 새 프로젝트를 시작합니다.
2. 페이지 생성: 필요한 경우 여러 페이지를 생성하여 프로젝트를 조직화합니다.

기본 도구 사용

1. 프레임 도구 (F): 다양한 디바이스 크기에 맞는 프레임을 선택하거나 사용자 정의 프레임을 만듭니다.
2. 도형 도구 (Rectangle, Line 등): 페이지 요소를 배치합니다.
3. 텍스트 도구 (T): 텍스트 요소를 추가합니다.
4. 컴포넌트 생성: 반복적으로 사용되는 UI 요소는 컴포넌트로 생성하여 재사용할 수 있습니다.

와이어프레임 제작 단계

1. 프레임 설정

   • Figma에서 프레임 도구 (F)를 선택하고, 웹페이지나 모바일 앱의 크기에 맞는 프레임을 생성합니다.
   • 예: 웹페이지 프레임 (1440x1024), 모바일 프레임 (iPhone 14 Pro 390x844).

2. 헤더와 내비게이션 바 추가

   • Rectangle 도구 (R)를 사용하여 상단에 헤더 영역을 만듭니다.
   • Text 도구 (T)로 로고, 메뉴 항목 등을 추가합니다.

3. 메인 콘텐츠 영역 추가

   • Rectangle 도구 (R)를 사용하여 메인 콘텐츠 영역을 만듭니다.
   • Placeholder 텍스트를 추가하여 제목, 본문 텍스트 등을 표시합니다.

4. 이미지 및 버튼 추가

   • 이미지가 들어갈 위치에 Rectangle 도구 (R)를 사용하여 영역을 만듭니다.
   • Button 도구 (R, Text)를 사용하여 버튼을 추가합니다.

5. 푸터 추가

   • Rectangle 도구 (R)를 사용하여 하단에 푸터 영역을 만듭니다.
   • Text 도구 (T)로 푸터 텍스트를 추가합니다.

실습: 간단한 웹페이지 와이어프레임 제작

1. 새 프로젝트 생성

1. Figma에서 "New File"을 클릭하여 새 프로젝트를 시작합니다.

2. 프레임 생성

1. 프레임 도구 (F)를 선택하고, 웹페이지 크기 (1440x1024)의 프레임을 생성합니다.

3. 헤더 추가

1. Rectangle 도구 (R)로 프레임 상단에 사각형을 그려 헤더 영역을 만듭니다.
2. Text 도구 (T)로 로고와 메뉴 항목 텍스트를 추가합니다.

4. 메인 콘텐츠 영역 추가

1. Rectangle 도구 (R)로 중간에 큰 사각형을 그려 메인 콘텐츠 영역을 만듭니다.
2. Text 도구 (T)로 제목과 본문 텍스트를 추가합니다.

5. 이미지 및 버튼 추가

1. Rectangle 도구 (R)로 이미지가 들어갈 사각형을 그립니다.
2. Rectangle 도구 (R)와 Text 도구 (T)를 사용하여 버튼을 추가합니다.

6. 푸터 추가

1. Rectangle 도구 (R)로 프레임 하단에 사각형을 그려 푸터 영역을 만듭니다.
2. Text 도구 (T)로 푸터 텍스트를 추가합니다.

문서화

와이어프레임 문서 양식:

# 와이어프레임 문서

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

## 와이어프레임 개요
- 목적: [와이어프레임의 목적 설명]
- 대상 사용자: [대상 사용자 설명]

## 페이지 구성
1. **헤더**
   - 설명: 웹페이지 상단의 헤더 영역.
   - 와이어프레임 이미지: [헤더 와이어프레임 이미지]

2. **메인 콘텐츠 영역**
   - 설명: 주요 콘텐츠가 표시되는 영역.
   - 와이어프레임 이미지: [메인 콘텐츠 영역 와이어프레임 이미지]

3. **이미지 및 버튼**
   - 설명: 이미지와 버튼이 포함된 영역.
   - 와이어프레임 이미지: [이미지 및 버튼 와이어프레임 이미지]

4. **푸터**
   - 설명: 웹페이지 하단의 푸터 영역.
   - 와이어프레임 이미지: [푸터 와이어프레임 이미지]

## 주요 UI 요소 설명
- **헤더**: 로고, 내비게이션 메뉴
- **메인 콘텐츠**: 제목, 본문 텍스트
- **이미지**: 이미지 자리 표시자
- **버튼**: Call-to-action 버튼
- **푸터**: 연락처 정보, 소셜 미디어 링크

## 결론 및 다음 단계
- 결론: 간단한 웹페이지 와이어프레임을 제작하여 페이지 구조와 주요 요소를 정의함.
- 다음 단계: 프로토타입 제작 및 사용자 피드백 수집.

정리:

이 단계에서는 Figma를 사용하여 간단한 웹페이지의 와이어프레임을 제작하는 방법을 배웠습니다. 기본 도구를 사용하여 페이지 레이아웃을 구성하고 주요 UI 요소를 배치해 보았습니다.