[유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기 - 사전직무교육 6~7일차 UX - 컴포넌트, 프로토타입 (애니메이션) / Affinity Diagram , 키 파인딩과 인사이트 도출

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.

 

컴포넌트

컴포넌트는 아이콘 버튼 레이아웃 등 많이 사용하는 오브젝트를 저장해두고 바녹해서 사용하는 요소이다 

 

컴포넌트 만들기

cmd+opt+k

 

인스턴스

main component - 원본이다 디자인에 사용하지않고 컴포넌트끼리 정리해서 모아둔다
인스턴스는 컴포넌트를 복사한 요소로, 메인 컴포넌트에 영향을 받지 않음

Detach instance - 인스턴스를 컴포넌트에서 분리

go to main component - 메인 컴포넌트로 가기

 

오버라이드 

메인컴포넌트를 복사해 색상 크기 등 수정할수 있다.
push changes to main component -인스턴스에서 수정한것을 메인 컴포넌트로 덮어씌우기 

이런식으로 컴포넌트를 만들 수 있다.

 

프로토타입 (애니메이션)

 

앱과 웹사이트를 개발할때 실제 원하는 방식으로 서비스가 작동하는지 테스트하는 과정
-프로젝트 관계자 사이의 커뮤니케이션 용도

- 기획의 실체화 

-개발전의  사용자에게 피드백 받는 용도

 

Device - 핸드폰이나 pc 모델을 선택 

미리보기 

flow- 프로토타입의 시작 프레임을 설정한다 

 

 

 

Starting point 만들기

프로토타입 패널 <Opt(Alt)+9> 에서 Flow starting point 의 + 아이콘을 클릭

시작할 프레임을 선택하고 마우스 오른쪽 클릭 – [Add starting point] 를 선택합니다.

Starting point 삭제

프로토타입 패널 <Opt(Alt)+9> 에서 Flow starting point 의 - 아이콘을 클릭
프레임을 선택하고 마우스 오른쪽 클릭 – [Delete starting point] 를 선택

 

 

지금부터 주로 사용한 기능에 대해 작성하겠다 

 

트리거

 

트리거 종류

 

트리거는 특정한 동작을 실행하는 것을 의미한다.

 onClick(Tap) - 데스크탑에서 클릭,모바일 탭 할 때
 onDrag – 드래그 할 때
 While hovering – 마우스를 올렸을 때
 While pressing – 누르고 있는 동안
 Key/gamepad – 키보드 단축키, Xbox,PS4 ,닌텐도 등 컨트롤러 입력 할 때
 Mouse Enter – 영역 안에 마우스를 올렸을 때
 Mouse Leave – 영역 안에서 마우스가 벗어 났을 때
 Mouse down (Touch Down) - 마우스나 터치 패드를 처음 누를 때 
 Mouse up (Touch Up) –마우스나 터치 패드에서 손을 떼는 순간
 After Delay – 시간차를 두로 액션을 걸어줄 때

 

 

 

 

 

 

액션 종류

• Navigate to - 다른 프레임으로 이동. 전체 화면이 전환될 때 가장 일반적으로 사용
• Change to - 인터랙티브 컴포넌트에서만 활성화 되는 이동 액션
• Back - 이전 화면으로 돌아가기
• Scroll to - 같은 프레임 내에 이동.
• Open Link- 외부 URL 열기
• Open Overlay - 현재 프레임 위에 다른 프레임을 열기(드로어, 팝업, 모달, 알림)
• Swap Overlay - 현재 프레임을 다른 프레임으로 교체
• Close Overlay - 오버레이를 닫거나 해제
• Set Variable - 트리거의 값으로 베리어블을 설정
• Set Variable mode -베리어블 모드 설정
• Check if/else - 조건문을 사용하여 실행하기 전에 조건이 충족 되는지 확인

 

 

 

 

 

 

 

 

 

 

Overflow behavior - Scroll Behavior

No scrolling -스크롤 없는 상태

Horizontal - 가로방향으로 스크롤 

Vertical - 세로방향으로 스크롤 

 

 

Scroll 주의사항!!!

!! 꼭 프레임만 가능하다 

그리고 프레임이 컨텐츠보다 작아야한다 

그렇게 해서 clip content 체크로 프레임 바깥으로 나간요소를 감추게한다 

 

 

Overflow behavior - Scroll position

• Scroll with parent - 오브젝트가 부모 프레임과 함께 스크롤 되면서 이동하여 페이지가 긴 스크롤에서 사용
• Fixed - 오브젝트를 특정 위치에 고정. 상태바, 네비게이션 바, 탭 바, FAB 등 사용
• Sticky- 스크롤 하다가 오브젝트가 프레임의 상단에 도달하면 고정되는 인터랙션에서 사용. 수직 스크롤만 가능

 

---

Affinity Diagram

리서치를 통해 얻은 방대한자료를 유사한조각끼리 모아서 의미와 아이디어를 얻고 상위개념을 도출한다.

어피니티 다이어그램의 효과
프로젝트에 유의미한 자료와 정보를 팀원과 함께 공%
문제 해결을 위한 아이디어 도!
아이디어가 유효한지 검증

 

어피니티 다이어그램

1단계 - 데이터를 공유하고 함께 해석하기(브랜드 리서치, 유저보이스, 설문에서 얻은 데이터)
2단계 - 관련 있는 포스트 잇끼리 그룹핑하기
3단계 - 어피니티 헤더 작성하기
4단계 - 헤더 선정하기
5단계 - 인사이트와 패턴을 발견하고 해결책 찾기

설문조사 결과로 키 파인딩과 인사이트 도출

키 파인딩(What's the problem?)
UX 리서치에서 얻은 데이터 중에서 의미있는 것을 키 파인딩이라고 한다

ux의 문제를 해결해가는 과정이다 
앞으로는 키 파인딩 이후로 ‘어떻게 해결할지’를 찾는 과정이다.

사용자 경험에 대해 이해가 높고, 충분한 공감을 바탕으로 키파인딩을 도출해야 한다.