오늘은 이미지 캐러셀에 대해서 배워 볼 건데요. 이미지 캐러셀 슬라이드가 무엇인지 먼저 알아보겠습니다. 이미지 캐러셀 슬라이드는 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법입니다. ppt로는 슬라이드 작동하는 것을 보기 쉽지 않아서 이커머스에서도 이와 같은 이미지 캐러셀을 사용하고 있습니다.
모든 것은 응용하고 예쁘게 디자인을 하는 것에 있습니다. 하는 방법만 익히면 그다음부터는 UI/UX 설계하면서 예쁘게 만들어보세요!
이미지 캐러셀 슬라이드 만드는 방법
1. 이미지 5개를 준비하고 frame은 아이폰 13 pro로 준비합니다.
- 이미지를 정중앙에 배치하고 여러분들이 원하는 크기를 배치합니다. 여기에서 중요한 점은 양옆에 이제 작은 그림들이 들어갈 것이기에 레이아웃의 크기를 결정하는 것도 중요합니다.
- 저는 아이폰 13 pro 기준으로 잡았기에 280x333으로 만들었고, 작은 사이즈는 조금 더 작게 배치하였습니다.
2. 프레임으로 변경
- 위 사각형을 F를 눌러 프레임으로 변경하고 사각형을 Backspace를 눌러 삭제하고, 프레임 이름을 사진으로 바꿉니다.
3. 사진 넣고, 컴포넌트로 변환하기
- 사진을 컨트롤+C를 해서 프레임 위에 컨트롤+V를 한 후에 컴포넌트로 변환합니다.
4. 컴포넌트 사진을 복사해서 인스턴트 사진을 복사하기
- 왼쪽 사진 컴포넌트를 복사 → 인스턴트를 만들고 → 컴포넌트로 변경 → 2 Variants로 만들고 → 프레임명 변경(사진 스위칭)
- 아래 Properies는 작은 사진, 위 Properies는 큰 사진으로 명칭 변경, 전체 Properies는 사진 크기로 변경
5. 작은 사진 크기 변경하기
- 이제 두 작은 사진의 크기를 확정할 건데, 원하는 작은 사진의 크기로 변경했습니다. 제가 선택한 크기는 233x277의 크기로 설정하였습니다.
- 여기서 주의할 점은 우측 크림을 클릭하고 단축기 <K> 클릭한 후에 크기를 변경해야 한다는 점입니다.(리사이즈)
6. Asset에서 사진 스윙칭을 레이아웃에 꺼내고, 5개 복사하기
- assets에서 사진 스위칭 컴포넌트(사진 컴포넌트 아님 주의)를 꺼내고 아래 5개의 사진을 오토레이아웃으로 변환한 후에 오토레이아웃 명칭을 스위칭될 사진들이라고 변경합니다.(명칭은 아무래도 상관없음)
7. 이제 첫 번째 사진이라는 컴포넌트를 5개 복사하고 variant1~5를 숫자 1~5로 변경
- 첫 번째로 만든 컴포넌트를 5개를 만듭니다.
- current variant의 property는 최초에 variant1로 설정되어 있을 건데, 이 명칭을 모두 숫자 1~5로 변경합니다.
8. 위 사진에서 이제 다른 점들을 찾아볼 건데요. 참 쉽죠?! 하단 그림들을 이제 원하는 사진으로 바꾸기
- 컨트롤+C를 통해 그림을 복사해서 이전에 있던 그림만 삭제하고 컨트롤+V를 통해 해당 프레임 안에 그림을 위치시킵니다.
9. (주의) 바뀔 사진들 그림 변경하기
- 해당 영역에서 이제 주의할 점이 있어서 잘 따라오셔야 합니다.
- <바뀔 사진들>에서 왼쪽에 오토레이아웃으로 설정한 것들 자세히 보면 인스턴트예요. 여기에서 그림을 우측에 Property1의 2번째 그림은 2로, 3번째 그림은 3으로, 4번째 그림은 4, 5번째 그림은 5로 해서 모두 변경합니다.
- 하단 그림처럼 해야합니다.
10. 2번째 그림부터 5번째 그림까지 Constraints 모두 Scale로 변경하기
- shift키를 눌러서 2번째 그림부터 5번째 그림까지를 클릭한 후에 Constraints를 모두 scale로 변경합니다.
11. [이미지 캐러셀 슬라이드] 프레임 만들기
- [바뀔 사진들]을 컨트롤 x로 잘라내기 하고 이미지 캐러셀 슬라이드 프레임 위에 붙여 넣기 합니다.
- 그리고 위아래 중앙정렬로 바꾸고 constraints을 모두 center로 바꿉니다.
12. 이미지 캐러셀 슬라이드의 첫 번째 사진은 큰 사진으로 설정 왼쪽에 있는 인스턴트에서 첫 번째 그림을 선택해서 우측 사진 스위칭이라는 곳에서 바꿉니다.
- 그리고 이제 뒷 프레임 배경화면이 흰색인데, 이 색을 8%로 조감도를 바꿔줍니다.
13. 이미지 캐러셀 5개 복사해서 2번째 그림, 3번째 그림, 4번째 그림, 5번째 그림 위치시키고 프로토타입 연결하기
- 이미지 캐러셀을 컴포넌트로 변환했기에 인스턴트 5개를 생성합니다.
- 5개의 인스턴트에 5개 모두 다른 그림으로 위치시킨 후에 on drag(change to)로 프로토 타입을 모두 연결합니다.
- 마무리하기 asset에서 이미지 캐러셀을 불러와서 프레임 위치 시켜 놓으면 끝!
넘어가는 그림 완성!
<다른 컴포넌트 구경하기>
[피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(
PPT에서 굉장히 쉽게 그렸던 툴팁이 피그마로 넘어가면서 조금 간단하지 않게 되었습니다. 그렇지만 유저가 무엇인지 궁금해할 때 꼭 필요한 기능인 툴팁 기능에 대해서 배워보겠습니다. 사실상
businessmodel.tistory.com
[피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능>
UI/UX에서 Componet는 반복적으로 사용되는 typography(표현) + color + 도형으로 구성된 UI 요소를 말합니다. 이제 컴포넌트를 활용하여 라디오 버튼을 만들어보겠습니다. 라디오버튼(Radio Button) 만들기(
businessmodel.tistory.com
