※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 0. 사용 텍스쳐 이번 포스팅에서 사용될 텍스쳐 이미지입니다. 1. 회전공식 회전의 경우는, 수학 수식으로 계산해야 할 필요가 있습니다. 이 경우, 사용되는 것이 바로, "회전변환 행렬"입니다. 수학 수식으로 정리하면 아래와 같습니다. x' = x × cos × θ - y × sin × θ y' = x × sin × θ + y × cos × θ 이 수식의 유도와 설명은 유튜브에 많이 되어 있고, 제가 수포자이기 때문에 아쉽지만 길게 설명드리는 것은 아무래도 어려울 것 같습니다. 😅😅😅 대신 제가 참고한 유튜브 영상을 공유 드리겠습니다. 1. OZTV님 [수포자를 위한 ..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼에 텍스쳐를 배치하고, 텍스쳐를 이동시키고, 배율을 조정하는 적용하는 방법에 대해서 알아보겠습니다. 1. UV와 텍스쳐의 배치 지난 포스팅에서 UV란, 2개의 채널을 이용해서 만든 '좌표(Coordinate)'로, Red 채널은 왼쪽에서 오른쪽으로, Green 채널은 위에서 아래로 0에서부터 1까지 '순서대로' 표현합니다. 이 좌표는 '2차원 공간'을 정의하고, 대부분의 머티리얼은 이 UV를 만드는 것으로 시작합니다. 라고 말씀 드렸던 것 기억 하시나요? 그러니까 이 좌표 안에, 텍스쳐가 붙여 넣어지는 거라고 보시면 됩니다. 이미지가 붙기 위해..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 언리얼에서 이미지 합성의 기초가 되는 선형 보간(Linear Interpolation)에 대해서 다루어 보도록 하겠습니다. 1. 선형 보간 Linear Interpolation이란? 먼저 위키백과 검색 결과를 보면 끝 점의 값이 주어졌을 때, 사이에 위치한 값을 추정하기 위해 직선 거리로 선형적으로 계산하는 방법이다 라고 말하고 있습니다. 여기서 주목해야 할 것은 끝 점, 사이에 위치한 값, 추정이고, 끝 점이라는 것은 시작 점도 있다는 소리이기 때문에 같이 기억해주시길 바랍니다. 위 말을 표현하면 아래와 같습니다. 구체적으로 0과 1사이에서 0.5라는 추정 값을 입력..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 자 오늘은 지금까지 배웠던 것을 복습하면서 텍스쳐, UV에 대해서 알아보고, 언리얼 머티리얼을 만드는 워크플로우에 대해서 알아보도록 하겠습니다. 1. 머티리얼 생성하기 지난 시간에 했던 것 처럼, '컨텐츠 브라우저(Contents Browser)' 또는 '컨텐츠 서랍(Content Drawer)'에서 마우스 오른쪽 버튼 → 머티리얼 생성 → 이름 붙이기( M_Actor_Panel ) 후 더블 클릭으로 머티리얼 에디터를 실행시켜 줍니다. 참, 이 위의 Add 버튼을 눌러도 머티리얼을 추가할 수 있으니 참고 바랍니다. 2. 머티리얼 속성 설정. 이번에는 머티리얼 도메인(M..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 연산을 진행하다가 중간 과정 중에 검토가 필요할 때, 어떻게 해야 할지에 대해서 이야기해보겠습니다. 1. 라이브 업데이트(Live Update)기능 먼저, 툴 바의 라이브 업데이트 기능에 대해서 이야기하겠습니다. 머티리얼의 현재상태를 조회하기 위한 기능으로, 아래 3가지의 옵션이 있습니다. 머티리얼 미리보기(Preview Material) : 저장 또는 적용 버튼을 사용하지 않고 변경 사항이 재질 미리보기 뷰포트에서 실시간으로 자동 업데이트 됩니다. 이 기능을 끄면 노드 미리보기(Start previewing node) 기능을 사용할 수 없습니다. 리..
※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 지난 포스팅에서는 float, float2, float3, float4에 사칙 연산을 하는 방법과 주의사항 등에 대해서 다루었습니다. 오늘은 float에서 float2, float3, float4 등으로 합치거나 원하는 채널만 추출하는 방법에 대해서 다루어 보도록 하겠습니다. 0) 머티리얼 표현식 불러오기 먼저 간단하게 머티리얼 에디터에서 머티리얼 표현식을 사용하는 법에 대해서 이야기하겠습니다. 머티리얼 표현식을 사용하는 법은 팔레트 패널에서 드래그 앤 드롭 하기, 마우스오른쪽 버튼에서 검색해서 찾기, 단축키로 불러오기 총 세 가지로 볼 수 있습니다. 이 중에서 3은 지난 시간에 간단하게 시도해 보았었는데요. 단축키가 어떤 것인지 궁..
※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 1) 머티리얼의 데이터 타입 머티리얼 에디터를 사용하기 위해서 기본적인 데이터 타입에 대해서 알아둘 필요가 있습니다. 왜냐하면 가장 기본적으로 데이터 타입을 가지고, 계산하여 원하는 표현을 만드는 것이 머티리얼의 목적이기 때문입니다. 그럼 지금부터 데이터 타입에 대해서 알아보겠습니다. 2) 부동 소수점(float), 0과 1. A. 0과 1, 그리고 그 이상. 머티리얼은 오브젝트가 '빛'에 반응하는 재질의 특성을 다룹니다. 그래서 빛에 얼마나 반응할지를 결정해야 하죠. 이 빛을 다루기 위해 가장 먼저 알고 계셔야 할 것은 0과 1입니다. 키보드의 숫자 키 1을 누르고, 클릭을 하면 숫자 노드 한 개가 나타납니다. 여기에 디테일 패널에..
※ 본 문서는 언리얼 엔진 5.0.3버전을 기준으로 작성되고 있습니다. 1) 머티리얼이란? 머티리얼(Material)은 3D 모델의 표면 또는 물체의 느낌과 물리적 특성을 결정하는 데 사용되는 애셋(asset)입니다. 색상, 반사율, 빛의 반응, 반사 및 빛의 파동의 각도 등 물리적 특성을 제어하는 데 사용되며, 이것은 게임, 영화 및 가상 현실(VR)에서 고품질 그래픽을 만들 수 있고, 저희가 지금부터 제작해 볼 사용자 인터페이스를 만드는 데에도 사용됩니다. 그럼 머티리얼을 만들어 보겠습니다. 2) 제작 및 사용 콘텐츠 브라우저에서 마우스 오른쪽 버튼을 클릭하고 머티리얼을 생성하면 사용할 수 있습니다. 콘텐츠 브라우저는 언리얼 프로그램 인터페이스의 가장 맨 하단에 위치합니다. 생성을 완료하면 이름을 작..
지난 포스팅에서는 구글 스프레드시트 플러그인을 사용해서 디자인을 생성하는 법에 대해서 다루었습니다. 오늘은 조금 더 구체적으로 '뭐라고 입력해야 할지'에 대해서 다루어 보겠습니다. 구글 스프레드시트로 어디까지 피그마의 요소들을 조절할 수 있을까요? 하나하나 살펴보겠습니다. 1. 기본값 : 텍스트, 이미지, 베리언츠 먼저 지난 포스팅에서 사용해 봤던 이미지, 텍스트 값을 입력하는 법에 대해서 다루어 보겠습니다. 텍스트 레이어 : 텍스트 레이어의 내용을 입력합니다. 일반적인 텍스트 레이어 설정 시에 주로 사용됩니다. 이미지 : http:// 또는 https:// URL에서 데이터를 받아 해당 레이어의 배경 fill 속성으로 적용합니다. * 단, 벡터 레이어에만 적용됩니다. 텍스트, 프레임, 컴포넌트에는 적용..
피그마에서는 다양한 플러그인을 지원합니다. 플러그인을 통해서 더 편하게 디자인을 할 수 있어요. 이번 편에서는 구글 스프레드 시트를 사용해서 자동으로 디자인이 생성되도록(!) 만드는 방법에 대해서 이야기해보겠습니다. 1. 플러그인 설치 더보기 Google Sheets Sync | Figma Community Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued d..
드디어 디자인 시스템 대망의 과정, 베리언츠에 대해서 알아보겠습니다. 베리언츠는 변형체, 변이체라는 말로 '같은 종류으로부터 나와 다른 모습이 된 것'이란 뜻입니다. 즉, 여러 변형을 갖는 디자인을 만들 때 사용하는 기능이라고 할 수 있습니다. 지금부터 이 베리언츠(Variants)에 대해서 알아보겠습니다. 1. 베리언츠란? 피그마에서는 베리언츠는 마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미합니다. 이때, 베리언츠 속성으로 '상태'를 컨트롤합니다. 크고 녹색인 버튼을 만들어 주세요! 같은 경우라고 할 수 있어요. 속성의 개수도 여러 개를 설정할 수 있기 때문에 한 개의 컴포넌트가 여러 '상태(status)'를 가질 때 주로 표현합니다. 2-1. 베리언츠 생성하기 이런 베리언츠를 만드려면, 3가지 방..
지난 시간에 배운 컴포넌트에 이어서 이번에는 컴포넌트의 다양한 확장을 만드는 컴포넌트 프로퍼티 기능을 준비했습니다. 설명 필요 없이 바로 진행 들어가겠습니다...! 1. 컴포넌트 프로퍼티란? 마스터(원본)에 하위 레이어의 종류와 출력 여부,텍스트를 조정할 수 있도록 속성으로 등록하는 기능을 말합니다. 텍스트, 레이어 출력 여부, 인스턴스 전환 기능 세가지 속성을 조정해서 다양한 조합의 인스턴스를 손쉽게 조정할 수 있습니다. 2. 컴포넌트 프로퍼티 등록하기 프로퍼티를 생성하는 방법은 두 가지가 있습니다. 첫번째는 프로퍼티를 마스터 컴포넌트에서 생성하는 것이고, 두번째는 하위 레이어에서 연결될 컴포넌트 프로퍼티를 생성하여 등록하는 방법입니다. 한 개의 컴포넌트 프로퍼티에 여러 레이어를 연결 지을 수도 있고,..
