rive6 RIVE: 컴포넌트에 대해 알아보자 처음 봤을 때 뭔가 이것저것 설정하니까 복잡해보이는 컴포넌트 컴포넌트?> 설계도 (재사용 가능한 하나의 묶음 단위)ex) 버튼 하나, 카드 UI 하나, 캐릭터 한 덩어리 ... 필요한 이유1. 배포용 정리 단위2. 라이브러리와 연결되는 구조3. 복제해서 여러 버전 만들 수 있는 설계 단위 (인스턴스화) 용어 정리Instance같은 설계도 기반 UI 복제본 (nest 해준 UI) View Model Definition컴포넌트가 참조하는 상태 데이터 (기계에 공급되는 전기 신호 데이터)- 독립적인 데이터 구조이다- 데이터 설계도- 아트보드를 기준으로 연동된다 Property뷰모델이 가지는 속성 값 View Model Instance (cf. 그냥 인스턴스)VMD의 프로퍼티 실제 값 묶음 컴포넌트 기능에.. 2026. 2. 22. RIVE: 파도타기 하는 글자 2026. 2. 21. RIVE: 마우스 움직임을 따라가는 고양이 만들기 Constraint 기능을 활용해서 마우스 움직임을 잘 따라가는 고양이를 만들기로 한다. 참고한 영상 링크: https://www.youtube.com/watch?v=hdhmp78jbqs 우선 고양이 형태를 만든다.하이어라키 구성은 아래와 같다. - face group (눈알, 눈동자, 코)- whisker (오른쪽, 왼쪽)- ear (오른쪽, 왼쪽)- head shadow (머리를 따라다니는 그림자) 곡선 효과를 주는 방법 마우스 커서를 따라다니는 타겟을 만들어줘야 하는데,타겟의 용도는 마우스 움직임에 따라 고양이가 따라 움직일 수 있도록 하는 중간 통로다.마우스 커서 -- (타겟) -- (전체적인 고양이 얼굴, 수염, 눈동자 등) Q. 왜 마우스 커서에 곧바로 고양이 눈동자와 같은 요소를 연동시키.. 2026. 2. 15. RIVE: Vector Feathering 기능으로 포토샵 일단 Vector Feathering: 외곽선을 부드럽게 다듬어주는 기능이다.라이브에서 지원하는 일종의 포토샵 기능인데, 어차피 상위호환 기능들 다 포토샵에서 할 수 있는건데, 이게 필요한가? 싶었지만, 예쁜 아트워크를 만들고, 인터렉티브한 요소를 바로바로 추가할 수 있다는 점에서라이브에서 지원하는 포토샵 기능도 알아두면 좋겠다 싶었다. 특히 빛을 자유자재로 다룰 수 있는게 좋아보였다. 그래서 이번에는 디자인 모드로만 진행을 해봤다.툴을 다루는 걸 떠나서 어떤 게 '좋은 디자인'인지, 어떤 요소가 필요한 것인지를 파악하는 게 더 공부가 많이 필요했다. 위 결과물을 참고해가면서 다시 내 버전으로 만들어보기 [밑바탕 원]우선 네모난 아트보드에 색을 추가해주고, 타원도 하나 추가해준다. 이런 입체감을 .. 2026. 2. 9. 이전 1 2 다음
