알파피플 앱

[홈커버] 동일인물 사진 위아래 스와이프 인터랙션

Assigned to
김기범, Flutter at Alphapeople 김기범
Notes

📍 경로

  • 앱 / 웹 커버홈

📍 As-Is

 - 시차인터랙션 적용되어 있음

📍 To-Be

- 인물이 변경되는 것이다 보니 전체 블럭이 밀리는 인터랙션 필요
- 완전히 새 인물이라는 느낌, 등장 자체의 콘텐츠화 필요

기존 인물 카드 전체 위로 밀려나가고 (슬라이드 아웃)
새 인물은 opacity 0 → 1, scale 0.92 → 1.0으로 등장
타이틀/키워드도 translateY(10px) → 0, opacity 0 → 1 (아래에서 위로 부드럽게 올라오며 등장)
이미지 자체에 살짝 zoom-in 부여 (시선 집중 유도)

위의 내용 반영이 어렵다면 슬라이드 아웃 정도로 우선적 적용 부탁드립니다! (상하 스와이프시)

Comments & Events

정다희 moved this card to To Do.
김기범, Flutter at Alphapeople
정다희, Designer at Alphapeople 정다희 님!

아래처럼 기존 카드는 큼직하게 슬라이드 아웃되고, 새 카드는 부드럽게 올라오면 되는걸까요?

참고로 페이징 인터랙션의 아래 4가지 요소가 있습니다:
- fade in 거리
- fade in 속도
- fade out 거리
- fade out 속도

각 요소별 값마다 예시 첨부드릴게요!
김기범, Flutter at Alphapeople
정다희, Designer at Alphapeople 정다희 조재현, CEO at Alphapeople 조재현

새 인터랙션 시안 참고 부탁드리며, 변경이 필요하실 때는 아래 값을 전달주시면 반영해보겠습니다!

  1. fade in 거리
  2. fade in 속도
  3. fade out 거리
  4. fade out 속도
정다희, Designer at Alphapeople 👍
김기범 moved this card to In progress.
정다희, Designer at Alphapeople
기범님! 이 인터랙션 상하만 현재 alphapeople.kr 과 동일하게 변경이 가능할까요?
아래에서 위로 스와이프시 슬라이드되는 형태이고, 로고 등 컴포넌트들은 시차를 두고 트랜지션 되는 형태입니다.

  • 전면 콘텐츠가 슬라이드되며 덮는 구조
  • 사진을 아래로 넘겨볼때 새로운 콘텐츠가 아래에서 위로 기존 콘텐츠를 덮음
  • 로고 / 텍스트 / UI 요소는 시차를 두고 순차적으로 트랜지션됨
  • 현재 alphapeople.kr 과 같은 구조 (레퍼런스)
김기범, Flutter at Alphapeople
정다희, Designer at Alphapeople 정다희 님!
alphapeople.kr 로그인이 필요한데 혹시 계정 정보 아실까요?
김기범, Flutter at Alphapeople
로고 / 텍스트 / UI 요소는 시차를 두고 순차적으로 트랜지션됨
--> 현재 parallax 효과는 가로 스크롤에 적용되어 있어서, 세로 스크롤에 동시에 적용하기는 구조상 어려움이 있을 듯 합니다!ㅜ
정다희, Designer at Alphapeople
alphapeople 로 아이디/비번 동일합니다!
조재현, CEO at Alphapeople
오 기범님이 해낸거 같은데요 ㅎㅎ👍
정다희 moved this card to Done.
정다희, Designer at Alphapeople
정다희 completed this card.