Matt Rae의 아트워크
모바일 앱 디자인 프로젝트를 시작할 때는 더 높은 충실도의 목업으로 시작하기 전에 경험 또는 경험의 일부를 와이어프레임으로 만드는 것부터 시작하는 것이 좋습니다. 와이어프레임 처리 과정을 통해 사용자 플로우의 공백을 파악하거나, 마찰 지점을 확인하여 인터페이스의 더 미세한 세부 사항에 시간을 투자할 수 있습니다.
이 튜토리얼에서는 모바일 앱 등록 플로우용 와이어프레임 만들기에 대해 설명합니다. 기본 형태 및 회색 음영 색상 팔레트를 사용하면 색상, 그래픽 및 최종 타이포그라피와 같은 세부 사항을 포함하기 전에 경험을 확인하고 테스트할 수 있도록 플로우에 여러 화면을 배치할 수 있습니다.
기본 요소 만들기
와이어프레임은 일반적으로 회색 음영 또는 차분한 색상이 있는 일련의 단순한 요소로 구성되며, 사각형 및 타원 같은 기본 형태로 단순화됩니다. 이러한 오브젝트 중 많은 오브젝트가 반복적으로 사용되므로 재사용 가능한 요소로 기본 라이브러리를 만들 수 있습니다.
이렇게 하려면 먼저 사각형을 그리고, 버튼 같은 특정 요소를 나타내도록 사각형의 스타일을 지정합니다. 디자인의 충실도에 따라 버튼에 텍스트 자리 표시자를 추가하는 것이 도움이 될 수 있습니다. 버튼은 프로세스의 다음 단계로 진행하기 위해 등록 플로우에서 사용되므로, 텍스트 상자를 추가하고 정렬 도구를 사용하여 버튼 형태를 가운데에 배치합니다.
그런 다음 마우스 오른쪽 버튼 클릭 메뉴 옵션을 사용하여 이러한 요소를 그룹으로 결합하고 구성 요소로 만듭니다. 이렇게 하면 요소를 드래그하여 여러 번 사용할 수 있으므로 버튼 요소가 필요할 때마다 처음부터 새로 시작할 필요가 없습니다.
내비게이션 바, 이미지 자리 표시자 및 일반 블록 같은 다른 일반적인 요소를 사용하여 이 프로세스를 반복합니다. 지금 공통 요소를 설정하는 데 시간을 들이면 프로세스 전반에 걸쳐 시간을 절약할 수 있으며, 이러한 구성 요소를 사용하여 적절한 때에 디자인을 더 높은 충실도로 변환할 수 있습니다.
또는 플러그인 및 UI 키트를 활용하여 이러한 요소를 만들 수 있습니다. Quick Mockup 등의 플러그인은 구성 요소로 신속하게 변환하거나 그대로 사용할 수 있는 와이어프레임 요소의 컬렉션을 제공합니다.
등록 플로우의 중요 단계
이 등록 플로우의 경우 첫 번째 단계는 다양한 화면 또는 프로세스의 각 단계에 대한 아트보드를 만드는 것입니다. 일반적인 등록 플로우에는 다음이 포함되지만 이에 국한되지 않습니다.
홈 페이지: 이 페이지에는 서비스에 로그인하거나 등록하는 옵션과 함께 시작 메시지 또는 앱 로고가 포함되는 경우가 많습니다.
등록 페이지: 이는 이메일 주소, 이름 및 계정 생성에 필요한 기타 정보와 같은 정보를 수집하는 데 사용되는 단일 페이지 또는 일련의 페이지일 수 있습니다.
성공 및 오류 페이지: 이 페이지는 계정 생성 상태, 성공 여부, 실패 여부 및 오류 해결 방법에 대한 피드백을 사용자에게 제공하는 데 매우 중요합니다.
이 튜토리얼은 신규 고객이 계정을 등록할 수 있도록 하는 등록 플로우에 중점을 둡니다. 여기에 나와 있는 동일한 프로세스를 기존 계정이 있는 사용자의 로그인 페이지 디자인을 만드는 데 적용할 수 있는데, 계정을 만들기 위해 정보를 입력하는 대신 사용자 이름과 암호를 입력하여 로그인 프로세스를 완료하면 됩니다.
홈 페이지 레이아웃
홈 페이지 또는 시작 화면에는 포함해야 하는 몇 가지 주요 요소가 있습니다. 특정 사용 사례에 따라 요구 사항이 다르거나 목표가 다를 수 있으므로 디자인에서 이를 반영해야 합니다. 일반적으로 다음이 포함됩니다.
• 앱 로고
• 시작 메시지
• 등록 옵션 또는 등록 페이지 링크
• 로그인 옵션 또는 로그인 페이지 링크
이 페이지에서는 로그인 또는 등록 옵션이 주로 강조됩니다. 이 경우 신규 사용자 등록을 보다 원활하게 유도하려면 이 워크플로우에서는 로그인 옵션을 강조하여 사용할 수 있는 상태로 두고, 페이지 하단에는 로그인 옵션을 표시하지 않습니다.
먼저 앞에서 생성한 일반 블록 구성 요소를 드래그하여 화면 상단으로 확장한 다음 시계, 신호 및 기타 OS 수준 세부 정보에 대한 자리 표시자를 만듭니다. 그런 다음 기본 사각형 또는 이미지 자리 표시자로 화면 가운데에 로고 자리 표시자를 그립니다.
다음으로 시작 메시지를 위한 자리 표시자를 추가합니다. 이 텍스트는 텍스트 도구로 작성할 수도 있고 간단하게 둥근 사각형을 사용하여 나타낼 수도 있습니다. 디자인의 초기 단계에서는 카피 작성에 대해 걱정하기보다는 도형으로 이 텍스트를 간단히 나타내는 것이 더 쉬울 수 있습니다.
페이지 하단에는 사용자가 이미 계정을 가지고 있는 경우 등록(계정 생성) 또는 로그인을 위한 옵션이 포함됩니다. 디자인에는 Google로 등록 또는 Facebook으로 로그인과 같은 서드파티 인증 서비스에 대한 옵션이 필요할 수 있습니다. 이 경우 디자인에 이러한 특정 옵션을 포함하는 여러 개의 등록 버튼이 포함됩니다.
이 튜토리얼에서는 [Create an Account] 버튼을 하나만 만듭니다. 이것은 사용자가 계정을 만들기 위해 세부 정보를 입력할 수 있는 다음 화면으로 이동하는 버튼입니다.
버튼 요소를 사용하여 시작 메시지 아래 가로 가운데 페이지 하단 3분의 1 지점에 배치합니다. 그 아래에 버튼 폭을 확장하여 페이지에 가로로 선을 그린 다음, 그 선 아래에 [Log in]이라는 버튼을 하나 더 추가합니다. 이 버튼은 보조 옵션이므로 버튼의 스타일을 변경하여 적용할 수 있습니다.
등록 양식 만들기
이제 메인 페이지가 완성되면 플로우의 다음 화면을 만들 수 있습니다. 사용자는 이전 화면에서 만든 [Create an account] 버튼을 클릭한 후 이 페이지로 이동합니다. 이 페이지에서 사용자는 계정을 만들기 위해 이름, 이메일 및 암호와 같은 다양한 정보를 입력합니다.
이 화면에서는 이전 화면에 있는 버튼에 레이블이 있는 것과 마찬가지로, 어떤 필드인지 나타낼 수 있도록 몇 개의 텍스트 요소가 추가됩니다. 페이지 제목의 텍스트를 추가하거나 간단히 텍스트 자리 표시자를 복제하여 페이지 맨 위에 배치할 수 있습니다.
제목 아래에는 다양한 양식 요소가 있습니다. 간단하게 하려면 여기에서 기본 블록 요소를 사용하거나, 테두리를 포함하여 입력 필드 전용 요소를 만들 수 있습니다. 페이지 가운데에 배치한 다음, 텍스트 도구를 사용하여 왼쪽 위에 [Name]이라는 레이블을 추가합니다. 이는 이 입력 필드의 레이블 역할을 합니다. 텍스트가 제목처럼 보이지 않게 충분히 작은지 확인합니다.
그런 다음 입력 필드 요소를 다시 복사하여 붙여 넣으면 이메일, 암호 및 등록 시 수집할 데이터를 나타내는 다른 필드에 대한 추가 필드가 생성됩니다. 요소를 그룹화하면 이 과정이 쉬워집니다. 양식을 제출하고 양식 입력을 완료하는 데 사용할 버튼 요소를 아래쪽에 추가합니다.
등록 플로우의 경우 긴 양식과 많은 질문이 사용자 등록을 저해하여 전환율을 낮출 수 있으므로 이 양식을 명확하고 간결하게 유지합니다. 또 다른 방법으로는 개별 양식을 별도의 보기로 나누어 각 화면에서 단일 단계로 사용자의 주의를 집중시킬 수 있습니다. 이 경우 보기는 [계속] 또는 [다음]라는 버튼이 있는 단일 입력 필드가 됩니다. 각 방법과 테스트를 사용하여 플로우를 만들어 사용자에게 가장 적합한 방식이 무엇인지 확인해 보세요.
프로토타입 링크를 사용하여 연결
Adobe XD의 와이어프레임 제작 시 얻을 수 있는 여러 가지 장점 중 하나는 디자인을 다른 애플리케이션으로 내보낼 필요 없이 실시간으로 프로토타입을 만들 수 있다는 것입니다.
프로토타입 링크를 설정하려면 화면 상단에 있는 탭을 사용하여 [프로토타입] 모드로 전환합니다. 프로토타입 모드에서 아트보드 또는 요소를 클릭하면 선택한 대상으로 드래그할 수 있는 파란색 화살표가 표시됩니다.
지금까지 만든 화면을 사용하여 이 작업을 시도해 보세요. [Tap] 트리거를 사용하여 다른 작업을 시험해 보세요. 와이어프레임 단계 디자인의 경우 디졸브 또는 간단한 슬라이드로 단순하게 유지합니다. 보다 복잡한 애니메이션을 사용하면 디자인의 이 단계에서 테스트하려는 작업에 방해가 될 수 있습니다.
플로우 완료
등록 플로우가 거의 완료되어, 등록 성공 여부에 대한 피드백을 사용자에게 제공하기 위해 하나 이상의 화면 세트를 추가해야 합니다. 성공 및 오류 메시지는 좋은 경험에서 매우 중요하며, 와이어프레임에서 놓쳐서는 안 됩니다.
성공 메시지는 [Submit] 버튼을 클릭하면 표시되는 단독 페이지에 적합합니다. 처리 화면이 표시된 다음 성공 메시지가 표시될 수 있습니다. 오류 메시지는 유사한 방식으로 작동하지만, 가능한 경우 상황에 따른 오류 내용을 표시하는 것이 가장 유용합니다. 즉, 이메일 또는 암호와 관련된 문제가 있는 경우 해당 입력 필드를 강조 표시하고 무엇을 수정할 수 있는지 피드백을 제공하는 것이 좋습니다.
성공 화면 만들기
성공 화면은 첫 번째 화면을 복사하고 등록 버튼과 수평선을 제거하여 간단히 만들 수 있습니다. 그런 다음 사각형 자리 표시자를 확인 표시 아이콘으로 대체하여 성공을 나타냅니다. 이것을 선택하면 텍스트 자리 표시자를 "성공, 등록이 완료되었습니다"와 같은 실제 메시지로 바꿀 수도 있습니다.
오류 화면 만들기
오류 화면을 만들려면 양식 페이지를 복제합니다. 상황에 맞는 오류가 표시되어야 하므로 이 페이지를 조작하여 오류를 표시할 수 있습니다. 이 예에서는 이메일 필드가 문제가 됩니다. 해당 블록을 선택하고 진한 회색 테두리(이는 최종 디자인에서 빨간색이 될 수 있음)를 포함하도록 입력 필드에 스타일을 지정합니다. 텍스트 도구를 사용하여 입력 필드 아래에 “오류: 잘못된 이메일 형식” 또는 테스트 중인 오류를 나타내는 적절한 메시지가 포함된 텍스트 상자를 추가합니다.
제출 버튼과 같은 페이지의 다른 요소는 오류를 반영하도록 수정하거나, 오류가 해결될 때까지 더 이상 진행되지 않도록 할 수 있습니다.
오류 또는 성공 화면을 프로토타입에 연결하려면 한 번에 하나씩 연결하도록 선택하거나, 플로우에서 다른 화면을 복제하여 하나는 오류 화면, 하나는 성공 화면으로 두 개의 플로우를 별도로 만들 수 있습니다. 이를 통해 사용자와 워크플로우를 모두 테스트하고 반복할 수 있습니다.
또는 제출 버튼 위에 있는 타겟 포인트로 투명 사각형을 사용하고, 각 사각형은 성공 또는 오류 화면을 가리키도록 하여 테스트 중에 몇 가지 미스터리를 추가할 수도 있습니다.
이는 매우 낮은 충실도의 와이어프레임이며, 이 작업의 핵심은 다양한 화면과 보기가 어떻게 서로 연결되어 사용자 여정을 만들 수 있는지 파악하는 것입니다. 재사용을 위해 기본 요소를 구성 요소로 그룹화하면 더 높은 충실도로 전환하기가 쉬워집니다. 프로젝트의 각 스테이지에 대해 구성 요소의 스타일을 다시 설정하고 디자인 전체에 적용하여 프로젝트를 보다 효율적으로 반복할 수 있습니다.
피드백을 위해 와이어프레임 공유
마지막으로 Adobe XD에서 공유 모드를 사용하여 이 플로우를 원격 사용자 테스트 또는 일반 디자인 피드백을 위해 공유할 수 있습니다. 플로우가 선택된 상태로 링크 유형 드롭다운에서 [Design Review] 또는 [User Testing]을 선택합니다. 그런 다음 이 링크를 배포할 수 있으며, 반복이 완료되면 클릭 한 번으로 쉽게 업데이트됩니다.
축하합니다. Adobe XD에서 등록 플로우 와이어프레임 제작을 마치셨습니다. 다음으로는 배운 내용을 이 앱 디자인의 로그인 플로우 부분에 적용해 보세요.
