반응형 전체 글17 Cinema 4D로 Lottie 애니메이션 제작하기 이전 글에서 애프터 이펙트를 활용해 로띠를 만드는 법을 소개했습니다. 용량상의 문제가 거의 없고 개발에도 용이하지만, 로띠가 지원하지 않는 애프터 이펙트 기능들이 많습니다. 그래서 의도한 디자인과 애니메이션을 담을 수 없는 경우가 많습니다. 그렇다면 유려하고 멋진 모션을 로띠에 담을 수는 없을까요? 이번 글에서는 Cinema 4D에서 형태와 모션을 완성한 후에 애프터 이펙트로 불러와 로띠를 제작하는 방법을 소개하고자 합니다. 방법은 이렇습니다. C4D로 디자인과 애니메이션을 완성합니다. 이것의 각 키 프레임마다 아웃라인을 뽑아내 일러스트레이터로 옮기고, 다시 이 패스들을 애프터 이펙트로 보내 애니메이션을 만들면 됩니다. 보통 애프터 이펙트에서는 한 애니메이션 덩어리를 위해 한 가지 소스를 이용합니다. 소.. 2023. 11. 20. After Effects로 Lottie 애니메이션 제작하기 Lottie는 에어비앤비에서 모바일 프로덕트를 위해 개발한 오픈소스 라이브러리입니다. Lottie는 벡터 데이터를 json 형식의 데이터로 만드는 파일이기 때문에 픽셀의 정보를 가지는 이미지나 동영상 파일에 비해 용량이 굉장히 적습니다. 벡터 기반이기 때문에 해상도에 구애받지 않으며, 또 개발 친화적이기에 IOS, AOS, web 어떤 환경에서도 수정하지 않고 사용할 수 있습니다. 또한 애니메이션 요소들을 상호작용 하도록 수정하기도 용이합니다. 그래서 모바일 프로덕트에 동적 디자인 요소를 추가하기 위해 Lottie를 많이 사용합니다. Lottie는 주로 After Effects에서 디자인을 제작해 json 파일로 추출합니다. After Effects에서 만든 디자인을 Lottie로 제작하는 방법을 설명해.. 2023. 11. 20. Unity Shader Graph : Position 노드 Object : 오브젝트 좌표계의 위치로, 오브젝트의 XYZ축 기준으로 중심이 0, 가장 바깥쪽이 0.5 입니다. View : 스크린 좌표계의 위치입니다. World : 해당 렌더 파이프라인의 월드 좌표계의 위치입니다. Tangent : 각 면의 탄젠트 방향의 위치입니다. Absolute World : 렌더 파이프라인에 관계 없는 절대좌표 위치입니다. Position 노드를 활용해 움직이는 Object 만들기 기본적으로 Shader graph의 vertex Position은 Object Space로 세팅되어 있습니다. 이 Object Space의 값을 변화시켜 Object를 이동시킬 수 있습니다. 먼저 Position 노드를 생성한 후 Split으로 각 채널을 분리해 줍니다. 그리고 Y축에 해당하는 'G.. 2023. 3. 8. Unity Shader Graph : Time 노드 Unity shader graph의 Input > Basic > Time 노드는 시간과 연관된 값을 추출합니다. 맨 위의 'Time' 은 일정하게 증가하는 값입니다. 두 번째 'Sine Time' 은 sine 그래프 값입니다.일정한 속도로 -1 에서 1 사이 값을 반복적으로 출력합니다. 마찬가지로 'Cosine Time'은 cosine 그래프 값입니다. 'Delta Time'은 프레임 시간 값입니다. Trigonometrical > Sine, Cosine 노드는 Input(x)를 임의로 정할 수 있는 노드입니다. 따라서 Sine이나 Cosine 노드의 Input에 Time을 넣으면 Time 노드의 'Sine Time', 'Cosine Time'과 같은 결과를 얻을 수 있습니다. Time 노드로 Ring .. 2023. 3. 8. Unity Shader Graph : 행렬 이 부분은 짧게 설명하기도, 이해하기도 어려운 내용이기에 건너뛸까도 고민했지만, 주니어 디자이너로 부딪혔던 '기술적 한계'들을 어떻게 해결했는지 설명하고 도움을 주는 것이 이 블로그의 목적이기에 이 글로 한 번 짚고 넘어가게 되었습니다. Unity의 Shader Graph를 자유자재로 다루려면 데이터의 행렬에 대해 이해할 필요가 있습니다. Shader graph의 모든 데이터 값은 행렬로 되어있습니다. Shader graph에서 생성할 수 있는 '노드'들은 이 데이터에 속성을 부여합니다. 그리고 각 노드 아래 프리뷰 창에서 데이터를 시각화해줍니다. 데이터와 노드 nx3 행렬 데이터 즉, Vector 3을 예로 들어보겠습니다. Position 노드에서 1열, 2열, 3열 데이터는 각각 x, y, z 축을 .. 2023. 2. 22. Unreal Engine 유리 재질 굴절 표현 : Glass with Refraction 언리얼 엔진에서 Fresnel 노드를 사용하면 굉장히 쉽게 유리의 굴절을 표현할 수 있습니다. 노드 설정에 따라 여러 가지 표현 방법이 있겠지만 가장 쉽게 굴절을 표현하는 방법을 설명해 보겠습니다. 머티리얼을 생성하고 디테일 창에서 Blend Mode를 'Translucent'로, 라이팅 모드를 'Surface Translucency Volume'로 세팅합니다. 먼저 그래프 창에서 굴절 외에 컬러, 반사, 투명한 정도를 조절할 수 있는 Base color, Metallic, Specular, Roughness, Opacity에 해당하는 파라미터를 만들어 연결해 줍니다. 가장 중요한 부분입니다. Lerp 노드의 A에 1을 입력하고, B에 상수 파라미터와 '1-x'를 연결해 입력합니다. 그리고 알파에는 Fr.. 2023. 2. 19. Unreal Engine 반투명 플라스틱 재질 표현 : Subsurface Material 언리얼 엔진의 머티리얼은 기본적으로 다양하고 완성도 있는 셰이딩 모델을 제공하고, 유니티보다 훨씬 직관적이기에 셰이더에 대한 지식이 적은 디자이너도 쉽게 퀄리티 높은 머티리얼을 만들 수 있습니다. 피부, 젤리 등을 표현할 때 사용하는 Subsurface 셰이딩 모델도 기본적으로 제공하기에 손쉽게 제작할 수 있습니다. 우선 콘텐츠 브라우저를 우클릭해 머티리얼을 하나 생성합니다. 머티리얼을 열고 디테일 창에서 'Shading Model'을 'Subsurface'로 설정합니다. 저는 오브젝트를 스태틱으로 설정해 라이팅 빌드를 해 사용하고 싶으므로 아래로 내려가 'Used with Static Lighting'을 체크해 줍니다. 이제 그래프로 가서 'Base Color', 'Subsurface Color' 슬롯.. 2023. 2. 19. Unreal Engine 프로파일링 2 : 로딩 시간 Load times are generally proportional to how much memory is being loaded. 레벨 로딩 타임에 대한 에픽 게임즈의 공식 답변입니다. 로딩 시간은 '얼마나 많은 메모리를 불러오냐'에 비례합니다. 말 그대로 해당 레벨을 열 때 불러와야 하는 데이터 크기가 크다면 로딩 시간이 오래 걸립니다. 엔진 프로젝트에서 많은 데이터 포션을 차지하는 대표적인 애셋들은 아래와 같습니다. 빌드된 라이트맵 데이터 텍스처 파일 하이 폴리곤 메시 리플렉션 캡처 데이터 한 프로덕트의 로딩 시간 최적화 작업을 진행할 때, 이미 최적화되지 않은 수 십 개의 프로젝트가 배포된 상태였습니다. 모든 프로젝트의 애셋을 프로파일링하고 문제 되는 애셋을 수정하기에는 너무 많은 시간과 비용이 .. 2023. 2. 19. Unreal Engine 프로파일링 1 : 프레임 레이트(Frame Rate) 프로파일링(Profiling) 이란? 프로파일링은 간단하게 정의하면 프로그램 최적화를 위해 성능 분석을 하는 것을 말합니다. 프레임레이트, 로딩속도, 버그 등 문제가 되는 요소들을 최적화하고 프로젝트의 목표 성능을 달성하기 위해 프로파일링은 프로젝트에서 꼭 필요한 과정입니다. 언리얼 엔진은 기본적으로 여러 프로파일링 툴을 제공하기 때문에, 디자이너도 쉽게 프로파일링을 할 수 있습니다. 수많은 프로파일링 방법이 있지만, 그동안 프로젝트를 진행하며 주요 문제들을 해결할 수 있었던 방법을 추려서 소개하겠습니다. 언리얼 엔진 4.26 버전을 기반으로 작성했습니다. 1. 프레임 레이트(Frame Rate) 프레임 레이트(Frame Rate)란 디스플레이 장치가 화면의 데이터를 표시하는 속도를 말하며 단위로 FPS.. 2023. 2. 19. 이전 1 2 다음
