※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 언리얼에서 이미지 합성의 기초가 되는 선형 보간(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. 컴포넌트 프로퍼티 등록하기 프로퍼티를 생성하는 방법은 두 가지가 있습니다. 첫번째는 프로퍼티를 마스터 컴포넌트에서 생성하는 것이고, 두번째는 하위 레이어에서 연결될 컴포넌트 프로퍼티를 생성하여 등록하는 방법입니다. 한 개의 컴포넌트 프로퍼티에 여러 레이어를 연결 지을 수도 있고,..
자 드디어 디자인 시스템의 핵심, 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능으로, 마스터(원본)와 인스턴스(복제본) 로 나뉩니다. 이 둘의 상호작용을 얼마나 잘 이해하는지에 따라 디자인 시스템을 원활하게 관리하는 데 영향을 많이 끼치게 됩니다. 지금부터 차근차근 컴포넌트에 대해서 알아보도록 하겠습니다. 1. 마스터 컴포넌트 등록하기 먼저 마스터 컴포넌트는 상단 UI바에서 마스터 컴포넌트 등록 아이콘을 누르거나 Ctrl + Alt + k 로 등록할 수 있습니다. 등록된 마스터 컴포넌트는 레이어 패널 옆의 에셋 패널에서 확인이 가능합니다. 2. 마스터 컴포넌트를 복사해서 인스턴스 만들기 등록된 마스터 컴포넌트를 복제해 보겠습니다. 복제하고 나니 레이..
매번 같은 색상을 일일히 지정하고 수정하는게 상당히 번거로운 작업이 될 수 있는데요. 특히 주요 컬러를 변경하는 경우에는 일일히 수정하는게 힘든 작업이 될 것입니다. 그래서 지난 시간에 진행했던 컬러, 서체와 엘리베이션 규칙, 그리드 스타일을 스타일에 등록하고 수정하고 보완하는 방법에 대해서 다루어보겠습니다. 1. 스타일 지정 먼저 스타일 지정에 대해서 알아보겠습니다. 피그마에서는 4가지의 스타일을 등록할 수 있습니다. 1. 컬러 → 컬러 팔레트 2. 텍스트 → 하이어라키 3. 이펙트 → 엘리베이션 및 인터렉션 규칙 4. 레이아웃 그리드 → 반응형 디자인 이 4가지는 각각 컬러 팔레트, 하이어라키(계층 구조), 엘리베이션 규칙, 반응형 디자인에서 활용됩니다. 그리고 이 스타일들은 전부 그룹을 지정할 수 ..
