PD Bootcamp | Prototype

💡 25-06-04 (수)

정신체리 ~~~ 🍒

프로토타입

: 제품 출시 전에 제작하는 초기 버전의 샘플
▶︎ 구조, 기능, 흐름, 애니메이션 등 전체 사용자 경험을 시뮬레이션해보기 위해 사용

모든 화면의 동작이나 흐름을 개발자에게 일일이 설명하기 어려우므로 기능과 인터랙션을 직관적으로 전달하기 위해 프로토타입을 활용한다
(단, 모든 상황에서 반드시 만드는 것은 아니며 필요한 경우에만 진행)

용어 정의에 집착하기 보다는 직접 눌러보면서 느낌을 파악하는 것이 중요 ‼️

프로토타입은 언제 쓰이지❓

▫️ 개발 전 기획 검토 시점
디자이너, 기획자, 개발자 간의 원활한 의사소통을 위해 애니메이션이나 인터랙션을 직접 보여줌으로써 설명보다 효과적으로 전달할 수 있다

▫️ 화면 전환·동작 흐름 테스트 시
사용자 여정을 실제처럼 시뮬레이션 해보고 UX 흐름의 문제점을 사전에 파악이 가능하다

▫️ 사용자 테스트(UT)용
실사용자의 피드백을 얻어 기능, 동선, 버튼 위치 등의 요소를 사전에 검증할 수 있다

📌 프로토타입 실습 1

✔️ 디자인과 프로토타입을 오갈 때 : Shift + E
✔️ 프로토타입 미리 확인 : Shift + 스페이스바

☑️ 프로토타입은 프레임에서 진행한다
☑️ 컴포넌트에 프로토타입 설정을 해두면 그 컴포넌트를 복제한 인스턴스에도 자동으로 동일한 프로토타입이 적용된다

☑️ 깃발 모양을 누르면 바로 프로토타입을 바로 진행 시킬 수 있다

☑️ Flow starting point에서 깃발을 삭제,추가가 가능하다
(Flow 1은 여기서부터 시작한다는 의미!)
☑️ 전환효과가 일어나는 동안 어떤식의 텐션, 가속도, 느낌을 줄건지 설정한다

☑️ Show prototype settings에 들어가면 원하는 기종을 선택하여 아이폰 목업을 적용시킬 수 있다

📌 프로토타입 실습 2,3

💡 https://youtube.com/shorts/IMaHhR7lvuo?feature=share
💡 https://youtube.com/shorts/kx-7SX14ItA?feature=share

네비게이션 바를 복사한 뒤 개의 프레임을 동시에 선택해 붙여넣으면 네비게이션 바가 한 번에 적용된다

하나의 컴포넌트를 만들어 두고 그 인스턴스를 각 프레임에 넣은 것이기 때문에 해당 컴포넌트에 설정된 프로토타입이 모든 인스턴스에 동일하게 적용된다

오버플로우

: 프레임안에 들어갈 수 있는 공간보다 콘텐츠가 더 많아 넘치는 상태
▶︎ 스크롤을 통해 볼 수 있도록 설정하는 기능

▫️ Vertical → 세로로 넘칠 때 스크롤
▫️ Horizontal → 가로로 넘칠 때 스크롤
▫️ Both → 둘 다 스크롤
▫️ No scrolling → 스크롤 없음 (넘친 부분 안 보여줌)

⭐ 안에 있는 요소들한테 오버플로우를 거는 게 아닌 프레임에 설정해주기 ⭐

스크롤 설정 방법

1️⃣ 전체 프레임에 스크롤 설정하기
▶︎ 화면 전체를 스크롤할 수 있게 만들고 싶을 때

프레임보다 콘텐츠가 커서 오버플로우가 생긴 상태일 때 전체 프레임에 오버플로우 설정을 해야 스크롤이 작동한다

2️⃣ 특정 영역(프레임)만 스크롤 가능하게 설정하기
▶︎ 갤러리, 카드 리스트 등 일부 영역만 따로 스크롤되게 하고 싶을 때

각개별로 걸고 싶을때는 command를 눌러서 타겟 영역을 설정해줘야한다

➡️ 스크롤이 작동하려면 항상 오버플로우 상태가 되어야 하고 그 전제 조건이 바로 프레임보다 콘텐츠가 커야 한다는 것이다

✏️ 프로토타입 개념 익히기

☑️ 프레임 안에 있는 요소들은 각자 오버플로우를 걸어줘야 한다

☑️ Figma는 가로 스크롤 드래그를 기본 동작으로 인식하지만 세로 스크롤은 반드시 직접 설정해야만 작동한다

스크롤 기능을 프레임에 적용하더라도 콘텐츠의 크기가 프레임보다 작으면 Figma는 스크롤이 필요하다고 인식하지 않아서 작동하지 않는다

✔️ Command + P : 플러그인 화면
-> 검색창에 Place 라고 치면 내 폴더에서 사진,동영상을 넣을 수 있다
✔️ K : 스케일 모드
-> 선택한 객체의 크기를 비율에 맞춰 확대/축소 가능

☝️ 모바일 프레임이면 자동으로 탭(On Tap) 동작으로 인식하고 웹 프레임처럼 보이면 클릭(On Click) 동작으로 설정된다
▶︎ 피그마에서 프레임의 형태를 기반으로 적절한 인터랙션 방식을 자동으로 적용해준다

또한 하나의 요소에 On drag와 On click을 동시에 설정하면 충돌이 발생해 On click이 비활성화된다
-> 우측 Interactions 패널에서 삭제

➕ 스티키 : 스크롤해도 고정된 위치에 계속 머무는 UI 요소

☑️ 상단바는 Fixed로 고정 시켜놔야 화면과 같이 움직이지 않는다

☑️ 프로토타입에서 화면이 아래로 스크롤되지 않는 이유는 전체 프레임에 horizontal 스크롤이 설정되어 있지만 실제 콘텐츠 구조가 vertical이기 때문에 스크롤이 작동하지 않기 때문이다
▶️ 프레임 자체를 vertical 스크롤로 설정해주기

☑️ 가로 스크롤이 필요한 경우라면 먼저 내부 요소의 배치를 가로 방향으로 바꾸고 그다음 프레임에 horizontal 스크롤을 적용해야 정상적으로 작동한다

☑️ 아이콘 프로토타입 할때 인터렉션을 먼저 설정한 뒤 컴포넌트화 하기❗

📌 모달 화면 설정
💡 https://youtube.com/shorts/B2ztYBJAI1o?feature=share

▶︎ On Click + Open Overlay + Close when cilcking outside (바깥을 클릭하면 꺼짐) + Dissolve

✏️ 최종과제 (UX리서치) 제출하기

💡 https://www.figma.com/board/KInoUUOylEm3kFTCIVR2eY/250521-27-%EA%B3%BC%EC%A0%9C_UX-%EB%A6%AC%EC%84%9C%EC%B9%98-%EC%9E%91%EC%84%B1%ED%95%98%EA%B8%B0?node-id=0-1&t=LQcU1ZQTi49N9gHZ-1

1️⃣ 나의 페인포인트를 파악하여 5 Whys와 페르소나를 설정했다
▶︎ 5 Whys 기법으로 원인을 "우선순위 미정리 & 루틴 실행 시간 부족"으로 도출

2️⃣ 유저 저니맵 > 시장조사 & 경쟁사 분석
▶︎ 루틴 관련 서비스, 경쟁 앱 기능 등을 조사해 인사이트 확보

3️⃣ 사용자 조사 (Survey & 인터뷰)
▶︎ 설문조사 및 인뎁스 인터뷰로 사용자 루틴 습관, 실패 원인, 니즈 파악
(정성적 데이터 기반으로 진짜 문제를 찾아냄)

4️⃣ 어피니티 다이어그램
▶︎ 인터뷰와 설문 내용을 분류해서 공통된 패턴, 감정, 불편함을 정리함

5️⃣ UX Writing & 경쟁사 벤치마킹
▶︎ UX 문구 사례 수집 및 경쟁 앱 분석으로 기능 및 UI 아이디어 발굴하여 와이어프레임 제작