- 표준 사용자 인터페이스 사례에 대해 알아보기
- 앱의 종이 프로토타입 만들기
- 프로토타입을 사용하여 사용자 피드백 받기
이 단원의 활동은 다음과 같습니다:
프로토타이핑
이제 최소한의 실행 가능한 제품에대한 아이디어를 얻었으니 프로젝트가 어떤 모습일지 생각하고 몇 가지 아이디어를 스케치할 차례입니다.
A 프로토타입 은 어떤 것의 초기 모델입니다.
앱 개발자는 일반적으로 코딩을 시작하기 전에 앱의 종이 프로토타입을 만듭니다.
종이 프로토타입은 앱의 사용자 인터페이스가 어떤 모습일지 손으로 그린 것입니다. 일반적으로 앱의 각 화면에 다양한 상태를 묘사한 그림이 포함됩니다.

왜 프로토타입인가?
- 아이디어를 시각적으로 빠르게 전달할 수 있습니다.
- 협업입니다!
- 종이로 작업할 때는 더 캐주얼하고 실험을 통해 대화가 자연스럽게 나옵니다.
- 저렴합니다!
- 많은 시간과 비용을 들이지 않아도 됩니다.
- 컴퓨터나 인터넷에 접속할 필요가 없습니다.
- 기술 전문가가 아니어도 이 과정을 수행할 수 있습니다.
- 사용자가 프로토타입에 어떻게 반응하는지 확인하여 디자인에서 작동할 수도 있고 작동하지 않을 수도 있는 요소를 빠르게 파악할 수 있습니다.
- 앱 개발 및 코딩에 시간을 투자하기 전에 디자인 결정을 확인할 수 있습니다.
이 동영상에서 다른 테크노베이션 걸스 팀이 종이 및 디지털 프로토타입을 어떻게 제작했는지 알아보세요!
멘토 팁
모범 모범 사례 학생들에게 종이 및 판지 프로토타입을 소개할 때는 아이디어를 테스트하기 위해 간단하고 저렴한 모형으로 시작하는 것이 중요하다는 점을 강조하세요. 예를 들어, "종이와 판지 프로토타입은 디자인에 대한 대략적인 초안과 같습니다. 최종 버전을 만들기 전에 아이디어의 모양과 작동 방식을 확인할 수 있습니다. 이러한 간단한 모델을 사용하면 신속하게 변경하고 무엇이 가장 효과적인지 파악할 수 있습니다."
종이 프로토타입은 잠재적 사용자(예: 가족, 다른 멘토, 친구, 커뮤니티 회원 등)로부터 피드백을 받는 데 사용할 수 있습니다. 이 피드백은 최종 제출 자료에 포함될 피드백의 일부가 될 수 있습니다.
다음 동영상에서는 하드웨어가 포함된 프로토타이핑 프로젝트의 예(왼쪽)와 종이 프로토타입으로 테스트하는 과정(오른쪽)을 보여드립니다.
학생에게 물어볼 수 있는 안내 질문:
최종 제품을 만들기 전에 종이나 판지로 간단한 프로토타입을 만드는 것이 유용한 이유는 무엇인가요?
종이 또는 판지 모형을 만들면 디자인을 개선하는 데 어떻게 도움이 되나요?
종이 프로토타입을 테스트하면 다른 방법으로는 알 수 없는 어떤 점을 배울 수 있나요?
멘토 팁은 AmeriCorps의 지원을 받아 제공됩니다.

프로토타입 요소
Keep 다음 사항 을 염두에 두고 종이 프로토타입을 시작하세요. 자세히 알아보려면 각 카드 위로 마우스를 가져가세요.
사용자
사용자
디바이스 유형
디바이스 유형
휴대폰과 태블릿?
접근성
접근성
일관성
일관성
사용자 인터페이스
프로토타입을 만드는 것은 사용자가 앱과 상호 작용하는 방식에 관한 것입니다. 이를 위한 용어는 사용자 인터페이스 또는 UI. 여기에는 사용자가 앱을 사용할 수 있도록 하는 버튼, 텍스트 상자 및 슬라이더와 같은 모든 요소가 포함됩니다.
디지털 제품 설계의 또 다른 용어는 사용자 경험또는 UX. 각각에 대해 아래에서 설명합니다.
사용자 인터페이스
사용자가 앱과 상호 작용하는 방식. 여기에는 사용자가 앱을 사용할 수 있도록 하는 버튼, 텍스트 상자, 슬라이더와 같은 모든 요소가 포함됩니다.
UI 디자인은 앱을 시각적으로 매력적이고 직관적이며 사용하기 쉽게 만드는 데 중점을 둡니다.
사용자 경험
사용자가 앱을 경험하는 방식. 여기에는 UI도 포함되지만 사용자의 감정, 태도, 행동에 관한 것이 더 많습니다.
UX 디자인은 사용자의 요구와 목표를 파악하고 전반적인 경험을 향상시키는 것입니다.
사용자 인터페이스 기능
다음은 모바일 앱 사용자 인터페이스의 주요 부분 중 일부입니다.
내비게이션
탐색은 사용자가 앱에서 원하는 것을 찾는 방법입니다. 다음은 탐색 옵션의 몇 가지 예입니다.





컨테이너
이러한 구성 요소를 사용하면 콘텐츠를 함께 그룹화할 수 있습니다. 화면의 일부를 배치하고 일부를 숨기고 표시할 때 유용합니다.



입력
입력 구성 요소를 사용하면 사용자가 앱에 정보를 입력할 수 있습니다. 다음은 몇 가지 예시입니다.



정보
이러한 구성 요소를 통해 앱은 사용자와 정보를 공유할 수 있습니다.




표준 요소 사용
경쟁사와 차별화하기 위해 앱의 외관을 다르게 만들고 싶을 수도 있습니다. 하지만 표준 요소를 사용하면 사용자가 앱 사용 방법을 더 빨리 이해할 수 있습니다.
예를 들어 대부분의 사용자는 드롭다운 메뉴에 익숙합니다. 새로운 유형의 메뉴를 디자인할 수도 있지만 사용자에게 혼란을 줄 수 있습니다. 익숙한 구성 요소를 사용하여 사용자가 쉽게 사용할 수 있도록 하세요.
Google의 멜리사 파월과 마리암 샤이크가 스케치 및 종이 프로토타입 제작에 대해 설명하는 이 짧은 동영상을 확인하세요.
활동 1: 종이 프로토타입
앱의 화면 스케치
- 사용자는 화면에서 화면으로 어떻게 이동하나요?
- 앱에 필요한 정보를 어떻게 입력하나요?
- 정보는 어떻게 표시되나요?
- 미적으로 만족스러운 방식으로 어떻게 배치할 수 있을까요?
- 색 구성표, 글꼴, 로고에 대해 생각해 보세요.
피드백 받기
이제 솔루션을 대표할 수 있는 실물이 생겼으니 이제 사용자 피드백을 받을 차례입니다!
잠재적인 사용자들이 직접 사용해보고 솔직한 피드백을 주어야 합니다.
사용자와의 테스트를 통해 무엇을 배우고 싶으신가요?
한 가지 방법:
- 사용자에게 앱에서 수행해야 할 일련의 작업을 제공하고 사용자의 개입 없이 수행할 수 있는지 확인합니다.
- 팀원 한 명이 '컴퓨터' 역할을 할 수 있습니다.
- 사용자 상호 작용에 따라 화면 또는 화면의 일부를 변경합니다.
- 또 다른 팀원은 메모 작성자입니다 .
- 는 사용자가 하는 일과 댓글 및 반응을 기록합니다.
- 허가를 받으면 테스트 세션을 녹화할 수도 있습니다.

테스터는 여러분을 돕기 위해 존재한다는 사실을 기억하세요! 테스터의 상호작용을 판단하거나 개입하지 마세요('컴퓨터'가 동작에 따라 프로토타입에 응답/업데이트하는 것 외에는).
감사한 마음으로 피드백을 받으면 됩니다.
다음은 자전거 수리점 앱에 대한 사용자 테스트의 좋은 예입니다.
활동 2: 피드백 받기
2~3명의 사용자와 함께 종이 프로토타입을 테스트하세요.
- 사용자에게 프로토타입을 표시합니다.
- 사용자에게 프로토타입으로 작업을 수행하도록 요청합니다.
- 도움 없이 작업을 시도하게 하세요.
- 팀원은 '컴퓨터' 역할을 하며 팀원의 행동에 반응할 수 있습니다.
- 다른 팀원 한두 명이 사용자의 행동과 댓글, 반응을 메모합니다.
돌아보기
종이 프로토타입을 저장하는 것이 좋습니다. 프로젝트를 구축하는 과정에서 다시 참조할 필요가 있습니다. 또한 프로토타입의 사진을 찍어 두어야 합니다.

주요 용어 검토
- 프로토타입 - 제품의 초기 모델
- 종이 프로토타입 - 앱이 어떻게 보일지 손으로 그린 그림
- 사용자 인터페이스(UI) - 사용자가 모바일 앱과 물리적으로 상호 작용하는 방식
- 사용자 경험(UX) - 모바일 앱 사용 전, 사용 중, 사용 후 사용자가 모바일 앱에 대해 느끼는 감정
추가 리소스
특히 첫 번째 단계에서는 종이 프로토타이핑을 선호하지만, 디지털 도구를 사용하여 앱을 프로토타이핑할 수도 있습니다.
많은 도구가 유료로 제공되지만, 일반적으로 제한된 기능이나 프로젝트에 사용할 수 있는 무료 버전이 있습니다. 다음은 몇 가지 가능성입니다.
- Google 슬라이드 (쉽고 무료!)
- InvisionApp
- Figma
- POP by Marvel