기본 와이어프레임 및 프로토타입 만들기

이 프로젝트에서는 모바일 앱의 기본 와이어프레임과 프로토타입을 만드는 방법을 알아봅니다.

백억원의 가치를 가진 "이거 아니면 저거"라는 이름의 새로운 앱 아이디어가 떠올랐다고 가정하겠습니다. 앱에서 사용자에게 두 가지 옵션을 표시하며, 사용자는 하나만 선택하면 됩니다. 천재적인 아이디어입니다. 로고를 완성하고 회사의 스타일을 고르기 전에 사용자들에게 앱 아이디어를 테스트하기 위해 기본적인 와이어프레임과 프로토타입을 디자인하는 것이 좋습니다.

와이어프레임은 웹페이지 또는 앱을 저충실도 모형으로 만든 것입니다. 와이어프레임을 사용하면 색상, 이미지 또는 기타 디자인 요소에 너무 많은 시간을 집중하지 않고도 최종 제품의 모양을 여러 번 빠르게 반복해서 만들 수 있습니다.

프로토타입을 사용하면 와이어프레임을 한 단계 더 발전시킬 수 있습니다. 프로토타입은 인터랙티브 요소가 포함된 디자인입니다. 사용자가 제품과 상호작용하고 탐색하는 방식을 설계, 테스트하고 보여줍니다.

와이어프레임과 프로토타입을 함께 사용하면 사용자가 앱을 어떻게 사용하고 탐색할지 계획할 수 있습니다.

이 프로젝트의 마지막 부분에서 Figma에서 프레임, 도형, 텍스트 및 프로토타이핑 작업을 체험해 볼 수 있습니다. 시작해 보겠습니다.

프레임, 도형, 텍스트가 있는 와이어프레임 디자인

와이어프레임을 구축하기 위해 다음 개체를 사용하겠습니다.

• 디자인을 담을 두 개의 프레임
• 앱의 이미지와 버튼을 나타내는 직사각형 7개
• 주요 버튼 라벨을 식별하기 위한 텍스트 레이어 4개

파일 만들기

시작하려면 새 Design 파일이 필요합니다.

1. figma.com에서 Figma 계정에 로그인합니다.
2. 파일 브라우저에서 초안을 클릭합니다.
3. 새 Design 파일을 클릭합니다.

첫 번째 프레임 추가

각 프레임은 앱에서 다른 페이지를 나타냅니다. 또한 모바일 기기용 앱을 디자인하려는 것이므로 미리 설정된 프레임 크기를 사용할 것입니다. 이 프로젝트에서는 다음 두 가지 프레임에 초점을 맞춰 보겠습니다.

• 두 가지 옵션을 표시하는 "이거 아니면 저거" 프레임
• 사용자가 '이거'를 선택했을 때 어떤 일이 발생하는지 보여주는 "이거" 프레임

"이거 아니면 저거" 프레임부터 시작하겠습니다.

1. 도구 모음에서 프레임 아이콘을 클릭하거나 F 키를 누릅니다.
2. 오른쪽 사이드바의 디자인 패널에서 iPhone 14 Pro 사전 설정 크기를 선택랍니다.

이제 프레임이 생겼으니 이름을 바꿔 보겠습니다. 명확한 명명 구조를 설정하면 파일에서 레이어를 더 쉽게 찾고 관리할 수 있습니다.

1. 레이어 패널에서 방금 캔버스에 배치한 프레임의 이름을 두 번 클릭합니다.
2. 프레임의 이름을 "이거 아니면 저거"로 바꾸고 Return 키를 누르거나(Mac) Enter 키를 누릅니다(Windows).

모양 추가

와이어프레임에서는 색상, 스타일, 디자인에 대해 자세하게 설명할 필요가 없으므로 기본적인 모양을 사용하여 앱의 레이아웃을 표현할 수 있습니다.

"이거 아니면 저거" 프레임에 직사각형을 추가하여 두 가지 옵션을 표현해 보겠습니다.

1. 직사각형 도구를 선택하거나 "이거 아니면 저거" 프레임 내부를 누르고 R을 클릭합니다.
2. 오른쪽 사이드바의 너비와 높이 필드를 사용하여 모양의 픽셀값을 입력합니다. 직사각형의 너비를 319로, 높이를 240으로 설정했습니다.
3. 사각형을 클릭하고 드래그하여 프레임의 상단에 배치합니다. Figma는 자동으로 개체를 주변의 다른 개체에 스냅하여 정렬하려고 시도하며, 여기에서는 프레임 가운데에서 사각형을 스냅합니다.
4. 채우기 색상을 사용자 지정하려면 사각형을 선택한 다음 오른쪽 사이드바의 채우기 섹션에서 색상 선택기를 엽니다. 채우기 색상으로 16진수 코드 #8ED3E2를 사용했습니다.

두 번째 사각형이 정확히 같은 크기가 되어야 하므로 첫 번째 사각형을 복제해 보겠습니다.

1. 사각형을 선택하고 Command + D (Mac) 또는 Control + D (Windows)를 눌러 복제합니다.
2. 두 번째 사각형이 첫 번째 사각형 바로 위에 배치됩니다. 두 번째 사각형을 클릭하여 프레임 가운데로 드래그합니다.
3. 두 번째 사각형의 채우기 색상을 변경합니다. 채우기 색상으로 16진수 코드 #D48C8C를 사용했습니다.

멋지네요! 추가한 두 개의 사각형 레이어의 이름을 바꿔보겠습니다. 상단 사각형의 이름을 "이거 이미지"로 지정하고 하단 사각형의 이름을 "저거 이미지"로 지정합니다.

이제 도형을 추가하고 수정하는 방법을 알았으니 "이거 버튼"과 "저거 버튼"을 나타내는 직사각형 두 개를 더 추가합니다. 각 직사각형의 너비는 130, 높이는 95입니다. 레이어의 이름을 변경해야 합니다. 완료된 프레임의 모습은 다음과 같습니다.

텍스트 추가

첫 번째 프레임이 거의 완성되었습니다. "이것"과 "저것" 버튼에 텍스트를 추가해 보겠습니다.

1. 도구 모음에서 텍스트 도구를 선택하거나 T를 누릅니다.
2. 왼쪽 하단 사각형을 클릭하고 "이거"를 입력합니다.
3. 텍스트 레이어를 선택한 상태에서 텍스트 설정을 사용하여 크기를 24로 조정합니다.
4. 텍스트 레이어를 클릭하고 드래그하여 하단 사각형의 가운데로 이동합니다. Figma는 텍스트 레이어를 사각형의 가운데에 정렬할 수 있도록 빨간색 가이드를 시각적 표시로 제공합니다.

지금은 텍스트 레이어가 사각형 레이어 바로 위에 있습니다. 이 두 레이어를 그룹으로 묶어 하나의 개체로 취급할 수 있도록 하려고 합니다.

레이어를 그룹화하려면 캔버스에서 클릭한 후 표시되는 파란색 선택 상자를 두 개체 위로 드래그하여 두 개체를 모두 선택합니다. 그 후 다음 키보드 단축키를 사용하여 그룹을 만듭니다.

• macOS: Command + G
• 윈도우: Control + G

이제 왼쪽 사이드바의 레이어 패널에는 '그룹 1'이라는 이름의 레이어 하나만 표시됩니다. 레이어의 이름을 '이거 버튼'으로 변경합니다.

이제 텍스트 레이어를 추가하고 그룹을 만드는 방법을 알았으니 '저거 버튼'을 만들어 보겠습니다. 완료된 디자인의 모습은 다음과 같습니다.

두 번째 프레임 만들기

이제 '이거 아니면 저거' 프레임이 완성되었으니 다음 프레임을 어떤 모양으로 만들지 생각해 봐야 합니다.

사용자가 '이거 버튼' 을 클릭하면 '이거 이미지'가 커지고 '저거 이미지'가 사라져야 합니다.

처음부터 다시 만들지 않아도 됩니다. Command + D (Mac) 또는 Control + D (Windows)를 클릭하여 첫 번째 프레임을 복제하면 됩니다. 새로운 프레임의 이름을 '이거'로 변경합니다.

개체를 선택하고 삭제를 눌러 '저거 이미지'를 제거합니다.

그런 다음 '이거 이미지'의 크기를 늘려 프레임의 대부분을 차지하도록 합니다.

프로토타입 추가

매우 흥미로운 새 모바일 앱의 두 페이지에 대한 와이어프레임을 제작했습니다.

이제 이 두 페이지가 함께 작동하는 방식에 대해 좀 더 명확한 지침을 제공할 차례입니다. 사용자가 어떻게 '이거 아니면 저거' 프레임에서 '이거' 프레임으로 이동할 수 있나요? 두 페이지 사이에서 이동할 때 어떤 종류의 상호작용과 애니메이션을 기대할 수 있나요?

프로토타입 제작을 통해 위의 질문에 답할 수 있습니다.

사용자가 '이거 아니면 저거' 프레임에서 '이거 버튼'을 클릭하면 '이거' 프레임으로 이동할 수 있게 하려고 합니다.

상호작용을 구축하기 위해 프로토타입 연결을 만들어 보겠습니다.

1. 오른쪽 사이드바에서 프로토타입 탭을 클릭합니다.
2. '이거 아니면 저거' 프레임에서 '이거 버튼' 레이어 위에 마우스를 올려 놓습니다.
3. 버튼 가장자리에 있는 파란색 더하기 기호를 클릭한 다음 '이거' 프레임으로 연결을 드래그합니다. 이렇게 하면 상호작용 세부 정보 모달이 열립니다.
4. 드롭다운 메뉴에서 트리거를 탭으로 설정합니다.
5. 작업을 이동으로 설정합니다. 드롭다운 메뉴에서 대상을 '이거' 프레임으로 설정합니다.
6. 애니메이션 드롭다운 메뉴에서 스마트 애니메이션을 선택합니다.

상호작용을 만든 후 상호작용 세부 정보 모달을 종료합니다. 도구 모음에서 프레젠테이션 버튼을 눌러 테스트합니다.

이제 완성되었습니다!