[마이크로 인터랙션] Protopie 프로토파이 : N26

따라한 모션은 클릭 한 번으로 전체 Visibility를 조절하는 것으로, 눈 모양의 아이콘을 선택하면 잔액과 입출금 내역을 숨길 수 있다.

이러한 설정 값은 다른 Flow(화면)으로 넘어갔을 때도, 적용되어 상세 페이지에서도 블러처리된 돈 내역을 확인할 수 있다.

 

이를 프로토파이에서 구현하기 위해 알아야하는 내용

1. 컴포넌트 설정

2. Variables 값 설정

3. Send & Receive 기능

 

우선 완성본이다

맨 위의 Current balance 옆에 있는 눈을 클릭하면 전체 내역에 블러 처리가 적용된다.

 

아쉬운 점은 피그마에서 프로토파이로 넘길 때 아이콘, 블러, 그라데이션 처리가 어긋나는 경우가 있어서 따로 조정해줘야 한다. 하지만 일단 모션 케이스 스터디가 중점이기에 너무 세부적인 부분은 무시하고 어떻게 적용하는지만 연구했다.

 

구현 방법

Trigger는 파란색으로 표시

 

시작 조건

- Visibility 값은 시작할 때 0이다

- 대표 컴포넌트에만 전달하는 게 아닌, 내역이 먹혀야 할 모든 컴포넌트에 값을 보내야(Send) 함

 

작동 과정

1. 사용자, 'Current Balance'를 Tab 한다

2. 시스템, Visibility 값이 1로 변한 걸 컴포넌트에 보낸다(Send)

3. 시스템, 'Current Balance'의 눈 아이콘이 감은 눈으로 변한다(Opacity, Background blur 조절로 변화)

4. 시스템, February 2022의 내역 컴포넌트에서 'Visibility=1' 값을 받는다(Receive)

5. 사용자, 전체 숫자 관련 내역이 블러 처리된 것을 확인함

 

이러한 구현 방식은 코딩의 if(조건문)를 생각하면 된다.

기능이 꺼져있을 때는(0, false...) 기본 화면이 보이는 것이고,

기능이 켜졌을 때는(1, True...) 기본 화면에 블러 처리가 되어 숨김 처리가 되는 것이다.

https://opentutorials.org/course/743/4724

조건문 - 생활코딩

 

설정 내역(Interface)

1. 사용자가 보는 메인화면

일단 visibility관련 variables를 생성한다. 추후 재사용을 위해 전체 화면에 적용가능한 용도로 만들어뒀다

사실 visibility가 1일 때 숫자를 볼 수 있게 하는 게 논리상으로 맞을 것 같은데, 일단 기능의 on, off라 생각하고 구성을 시작해 버렸다.

(협업을 할 때는 이런 변수 네이밍을 잘 지어야 함....)

 

일단 눈에 보이는 구현이 목적이므로 이를 고려해서 트리거와 관련 효과들을 정리했다.

이 이미지에 보이는 opacity 조정은 눈을 감고 뜨는 아이콘 관련과 '잔액' 콘텐츠의 블러를 설정하는 용이다.

(+ 대표 컴포넌트에만 값을 Send 하는 게 아닌 각 콘텐츠 컴포넌트에 값을 보내야 해서 Send 값이 여러 개다)

 

2. 컴포넌트

사실 채널 값은 어떻게 정확하게 들어오는지는 아직 연구가 필요한데

나의 파일에서는 parent값에서 전달받으니 적용이 잘 되었다.

 

컴포넌트의 변수 값은 또 따로 설정해줘야 하니, Visibility라는 변수를 여기에서도 만들어줬다.

(여기서도 헷갈리는 변수 이름 설정이 문제인듯하다. 협업할 때는 꼭 신경 쓰도록)

 

부모 화면에서 전달받은 값이 컴포넌트 내 변수 값에 잘 전달될 수 있도록 'Assign to Variable'을 꼭 클릭해 주자.

 

3. 값과 적용된 화면

이를 설정하면 이런 식으로 효과가 적용되는 것이 볼 수 있다.

visibility가 0이면 숫자 내역들이 다 보이고, visibility가 1이면 숫자 내역이 블러 처리된다.

애프터이펙트로 프로토타입을 구현하는 것보다 훨배 편하고, 피그마보다 자세하게 설정할 수 있지만

블러나 그라데이션 효과가 들어가게 되면 시각적 구현이 백퍼센트 맘에 들게 되지는 않으니 적절히 섞어 써야 한다.

 

주의해야 할 점

1. 프로토파이의 iOS Background Blur

프로토파이는 그라데이션과 효과(쉐도우, 블러) 값 설정을 세부적으로 조정할 수가 없다 그래서 레이어 순서에 따라 효과 적용 여부가 달라질 때가 있다.

위 컴포넌트에서 블러 처리되어야 할 부분은 저기 '유로+숫자'가 적혀있는 부분이다.

피그마에서는 단순히 같은 프레임 안에 들어가도 적용되지만....

Rectangle 1은 프로토파이 내부 값으로는 숫자가 다 가려지지 않아 임의로 넣은 흰색 사각형이다.

프로토파이는 왼쪽처럼 프레임 밖에 있어야 적용이 된다.

왼쪽이 완성본처럼 효과가 적용될 수 있는 방법이고, 오른쪽 같은 경우는 블러가 먹히질 않는다.

이러한 효과 적용 여부는 웹 프로토파이, 앱 프로토파이인지에서 구동하는지에 따라도 달라져서 스스로 확인해 보는 것을 추천한다.

 

 

궁금한 점이나 발전시켜야 할 점 있으면 자유롭게 댓글 주세요.