Mento of Week 2：지환, 성희, 재현, 희정
Mentee of Week 2： 효정, 가은, 소연, 리사
✏️로딩 애니메이션 만들기 - 효정✏️
1. 어디에 활용하나요?
서비스가 시작할 때 보이는 로딩화면 등을 구현할 때 활용합니다.
2. 적용 방법
위와 같이 원 네 개를 만듭니다.
프레임 안의 eclipse 를 45도 회전합니다. 이때, 반드시 프레임이 아닌 eclipse 를 회전해야 합니다.
모든 원을 45도씩 회전시킵니다.
각 원을 컴포넌트화 시킵니다.
각 개체를 베리언츠로 만들어 줍니다.
이제 액션을 구현해 줄 건데, 위의 그림과 같이 각 원을 연결해 줍니다. 마지막 원은 첫번째 원에 연결시켜 줍니다.
인터렉션 디테일에서 After delay, Smart animate를 각각 선택해 줍니다.
3. 구현된 결과
로딩 화면에서 빙글빙글 돌아가는 원을 확인할 수 있습니다.
✏️캐러셀 배너 만들기 - 가은✏️
1. 캐러셀이 뭔가요?
캐러셀은 회전목마처럼 반복해서 돌아가는 형태의 UI를 의미하는데, 하나의 콘텐츠 영역 내에 여러 개의 서로 다른 콘텐츠를 표시할 수 있는 컴포넌트라고 할 수 있습니다.
캐러셀 배너에 포함되는 콘텐츠들은 가로로 배치되어 있으며, 사용자가 좌/우로 회전시켜서 콘텐츠를 탐색하도록 하거나 자동으로 회전하도록 설정할 수 있습니다. 이미지 로테이터 혹은 슬라이더라고도 불립니다.
2. 사용하기에 적합하지 않은 경우
케러셀을 사용한다면 컨테이너 영역 바깥에도 정보가 숨겨져있으므로 사용자가 케러셀을 인지하지 못하거나 모든 콘텐츠를 탐색하지 않는 경우가 발생할 수 있기에 중요 콘텐츠를 표시하는 데에는 캐러셀은 적절하지 않습니다! ㅠㅠ
3. 캐러셀 배너 만드는 방법
1. 프레임으로 만든 스퀘어를 가로로 배열해준 뒤, 오토 레이아웃으로 연결해줍니다.
2. 1번에서 만든 오토 레이아웃을 넣을 배경 프레임을 4개 만들어주고 움직일 모양에 맞춰 배치해줍니다.
3. 좌우로 넘길 버튼을 만들어주고 난 뒤 인터랙션을 연결합니다.
on click을 트리거로 하고 change to, smart animation으로 해준 뒤 ease out, 300ms로 설정해주면 끝!
✏️토스트 얼럿 - 소연✏️
1. 이 기능은 주로 어디에 쓰이나요?
토스트(Toast)는 토스터기에서 식빵이 튀어오르는 것처럼 나오는 알림을 말한다.
토스트에는 버튼이 없어서 유저가 확인버튼을 눌러주지 않아도 뿅~하고 나왔다가 시간이 지나면 알아서 스르륵 사라진다.
주로 은행의 입출금이나 상품 구매 시 또는 장바구니 알림 등에서 사용되며, 아주 기초적인 UI!
2. 적용방법
정말 짱 쉽다!!
1. 프레임 2개를 생성하고, 아무 말이나 적어놓는다.
이때 주의할 점, 토스트할 대상의 빈 프레임을 적당한 위치에 둬야 한다!
빈 프레임을 놓느냐 안 놓느냐는 프로토타입으로 재생 시 큰 차이가 발생하니 주의~
2. 프레임에 인터렉션을 적용한다.
이때 두 가지를 설정해준다.
Flow starting point
- 여기서는 프로토타입을 돌릴 이름을 설정해주면 된다.
interactions
- After delay로 설정해준다. 토스트는 띠용~하고 나오는게 포인트이기 때문!
- Animation - Curve 부분은 Gentle로 해주기~
Curve 부분은 자유롭게 변경해서 원하는 토스트 얼럿을 만들 수 있다.
3. 프로토타입을 실행해본다
정말 간단하지만 기초적인 UI라 우리가 사용하는 앱들에서 다양한 사례로 적용된다. 이게 끝!
주의할 점은 빈 프레임을 놓는 것, 이것 하나만 조심하자!
✏️토스트 얼럿 - 리사✏️
토스트 얼럿은 팝업 광고와 같은 형태로 일정 시간이 지났을 때, 디자인 요소가 튀어나오는 것입니다~
정말 쉬워요~!!
총 4단계로 이뤄져있습니다.
1. 튀어나올 디자인 요소 제작
2. 기존 디자인요소 복사(프레임 잡고 복사하는 것을 추천합니다~)
3. 원본 디자인 프레임의 모든 요소 안 보이게 설정
4.스마트 애니메이션 적용
조금 어려운 단계입니다~! 하지만 천천히 따라하면 쉽습니다~
1) Trigger를 after delay로 설정 (밑의 시간이 짧을 수록 빨리 나타납니다~)
2) animation을 smart animation으로 설정
3) curve를 gentle로 설정
이 3가지만 설정하면 끝납니다~!!
수고하셨어요!