본문 바로가기

분류 전체보기128

<Figma> Carousel 버튼으로 조작하기 편을 먼저 봐주세요. 버튼이 카드 바깥쪽에 있는 것과 안쪽에 있는 것을 제작하는 법은 각자 다르다. 이번 글에서는 버튼이 바깥쪽에 있는 컴포넌트를 만들어 보겠다. 나는 버튼에 Hovering을 할 시에 버튼이 커지는 애니메이션을 넣고 싶어서 먼저 버튼 컴포넌트부터 제작하였다. 그리고 카드 묶음을 만든다. 저번 글과 동일하게 원하는 카드들을 Frame으로 묶고 보여지고 싶은 부분까지 Frame을 줄인다. 이번에는 After delay처럼 연속적인 애니메이션이 아니기 때문에 Frame에 카드가 딱 떨어지게 배치해도된다. 그리고 만들어 둔 버튼과 카드 Auto layout으로 묶어준다. 이때 시작점과 마지막 지점은 버튼이 한 개만 있으면 된다. 첫번째 화면에.. 2023. 12. 14.
<Figma> Carousel Afterdelay 적용시키기 위 사진과 같이 아무런 조건 없이 알아서 애니메이션이 되는 Carousel(회전목마와 같은 화면)을 만들어 볼 것이다. 원하는 사진들을 Frame 안에 넣고 정렬시킨다. 정렬된 사진들을 우측에 복붙한다. 전체 선택 후에 Frame을 씌운다. 반복되는 구간 전까지의 영역보다 작게 프레임을 줄인다. 이때 프레임 양쪽 끝에 사진이 걸쳐야 한다. 사진이 프레임에 딱 맞을 경우 다시 애니메이션이 재생될 때 간격이 일정하지 않게 나오기 때문이다. 이렇게 만든 프레임을 하나 더 복사하고 뒤에 반복되는 사진을 프레임에 똑같이 걸쳐준다. 프레임에 보여지는 사진은 같아보이지만 알고 보면 다른 것이다. Tip: Frame 안의 내용물만 잡고 움직여야 하므로 왼쪽 레이어 패널에서 원하는 요소들을 선택후에 움직여야 한다. Cl.. 2023. 12. 14.
<Figma> 호버링 했을 때 떠오르는 카드 인터렉션 오늘은 호버링 했을 때 카드가 위로 올라가는 인터렉션을 만들어보겠다. 1. 준비한 카드에 Auto lay out을 걸어준다. Auto layout이 걸린 카드를 복사한다. 원하는 값만큼 아랫쪽으로 Padding을 넣어준다. (이 값만큼 카드가 올라간다) 패딩이 안 들어간 카드, 들어간 카드 두 개가 준비 되었다면 모두 선택하고 Create Component Set를 적용한다. Prototype을 걸어준다. 호버링 할 시에 스마트애니메이션으로 작동하도록 말이다. Component 박스 안에 패딩이 없는 카드를 복사하여 Instence를 만들어준다. 한 개일 때는 한 개만, 여러가지일 때는 모두 선택 후에 Auto layout을 씌워준다. 프레임의 높이를 패딩 넣은 값보다 큰 값으로 더해준다. 카드가 프레임.. 2023. 12. 14.
<Figma> 왼쪽으로 길어지는 검색창 인터렉션 위 사진을 보면 검색창이 왼쪽으로 길어지고 있다. 이런 이런 인터렉션은 어떻게 피그마로 구현할 수 있을지 알아보겠다. 첫 단계 준비물은 돋보기와 닫기 아이콘이다. 이 두 가지가 준비되었다면 잘 따라오기 바란다. Frame 안에 들어간 Rectangle이 Scale로 되어 있다면 다른 것으로 바꿔주길 바란다. (Scale만 아니면 된다) 돋보기 아이콘을 Rectangle 보다 위로 올라오게 배치시켜준다. 이제는 다른 프레임을 새로 하나 만들 것이다. 돋보기 아이콘에프레임을 걸어준다. (Ctrl + Alt + G) 프레임의 높이 값은 처음 만든 것과 동일하게 진행한다. 처음 만든 프레임과 동일한 길이를 설정한다. 프레임에 Rectangle을 넣어준다. 이때 처음에 썼던 Rectangle을 복사해서 사용하거나.. 2023. 12. 12.
스코클 사전캠프 3주차 WIL 도르마무 학습 이번 3주차에는 사실 저번 2주차 때와 크게 다르지 않은 결과물을 제작하였다. 클론 디자인을 진행하였고 점점 실력이 늘어가는 게 느껴진다. 클로닝만 계속하니까 클로닝 자체의 속도는 빨라지고 남은 시간에는 퀄리티를 높이는 것에 몰두하기 때문에 자연스럽게 기능적 고민을 하게 되는 것 같다. 전보다 많은 양을 더 빨리 카피할 수 있게 되어 기쁘고 컴퓨터 메모리에 나의 결과물들이 하나 둘 씩 저장되어 가는 것이 뿌듯하게 느껴진다. 팀원들과 소통을 하면서 가끔 꿀팁을 얻을 때가 있는데 이번 주에도 얻었다. 사전캠프 조의 일원인 채희님이 프로토타입 기능을 알려주었는데 기능은 이러했다. 원하는 기능은 클릭하였을 때 카드가 Move in으로 들어오면서 뒷 배경에 Dim이 깔리는 것이다. 이것을 어떻게 피.. 2023. 12. 8.
오늘의집 UI/UX 파헤쳐보기 들어가는 말 사용자에게 받는 마케팅 수신정보 동의는 기업에게 비즈니스적으로 큰 영향을 끼친다. 푸쉬 알람을 통해서 유입되는 고객이 그만큼 많기 때문이다. 그러기 위해서는 회원가입과 로그인 절차가 필요하고 그 과정에서 수신정보 동의를 받아야 한다. 하지만 이 과정에서 이탈하는 사용자도 있고 애초에 동의하지 않는 사용자도 많다. 그렇기에 사용자에게 거부감 없이 가입을 시키는 것이 UI/UX 디자이너의 큰 과제라고 할 수 있다. 현재 많은 고객들을 유치하고 있는 웹사이트 중에 하나를 선정하여 그 과정을 살펴볼 것이다. 내가 선정한 사이트는 오늘의집이다. 기본적으로 판매하는 제품이 많고 그만큼 혜택이 많아서 보여줘야 하는 광고물의 양도 비례하게 많다. 동시에 오늘의집에는 특이한 컨셉으로 사용자들을 유치하고 있는.. 2023. 12. 5.

티스토리툴바