안녕하세요, 오구리입니다. 간만의 블로그 포스팅 소식으로 찾아뵈었습니다. 한동안은 블로그에 이전에 제가 제작했던 자료들을 묶어 Figma Basic이라는 이름으로 포스팅을 진행할 예정입니다. 사실 그간 UX와 UI를 진행하며 기존에 쌓아 왔던 자료들과 작업들을 모아서 한데 묶는 작업이 필요하다 느꼈습니다. 저 스스로도 혼란스럽고 작업 프로세스에 대한 정립 없이는 다음 단계로 넘어가기 힘들겠다는 생각이 들었구요. 그래서 이번 기회에 제가 생각했던 프로세스나 방법, 구성, 자료들을 풀어보고 싶어졌습니다. 어떠한 피드백이어도 좋으니 많은 분들께서 보시고 이야기해주셨으면 좋겠습니다. ( 다만 당부드릴 것이 제 @frogOlis 아이디와 카피라이트, 캐릭터는 절대 삭제하지 말도록 당부 드립니다. 저작권을 지켜주세..
언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(Slot)에 대해서 살펴볼 건데요. 이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다. 그래야 원하는 배치를 만들 수 있기 때문입니다. 그럼 지금부터 시작해 보겠습니다. 1. 위젯에 올 수 있는 자식의 수는? 일단 먼저 위젯을 좀 살펴보겠습니다. 위젯에 마우스를 올려 놓으면 해당 위젯의 설명과 함께 Single Child , Many Children , No Children 를 보실 수 있는데요, 여기서 자식(Child)이란 하이어라키에서 하위 요소로 올 수 있는 위젯의 수를 의미합니다. 아무것도 올 수 없거나(No Children), 1개만 올 수 있거나(Single), 다수(many)를 집어넣을 수도 있습..
곰곰히 생각해봤는데 이대로 끝내기엔 버튼 같지가 않으므로, 버튼에 텍스트 출력 기능을 하나 넣어 볼게요. 1. 버튼에 이벤트 연결하기 지난 시간에 만들어 둔 버튼이 생성된 위젯 블루프린트를 열어줍니다. 그리고 버튼을 선택 해 주세요. 버튼 이벤트를 생성해 보겠습니다. 디자이너 패널과 그래프 탭 모두에서 버튼 이벤트를 생성할 수 있습니다. 다만 반드시 '변수로 등록(Is Variable)'이 되어 있어야 하는데 그 작업 부터 해 주겠습니다. 2. Is Variable : 변수화하기 변수화는 별건 아니고 그래프에서 '활용 가능한 대상'으로 만드는 작업이라고 보시면 됩니다. 디테일 패널의 최상단에 위치한 Is Variable 을 체크하여 활성화합시다. 체크가 되어야 변수로 등록되고, 이벤트를 생성할 수 있게 ..
이전에 도서 리뷰 이벤트에 당첨되었습니다. 이번에 소개해 드릴 책은 "한입 크기로 잘라먹는 리액트" 입니다. 이전 유데미와 인프런에서 많은 분들께 사랑 받았던 강의를 조금 더 업그레이드 해서 도서로 출간한 거라고 합니다. 조금 더 자세히 살펴보겠습니다. 1. 구성 소개 총 11장과 3개의 프로젝트로 구성되어 있습니다. 프로그래밍 곻부에서 좀 힘들었던게 '프로젝트는 어떻게 만드는가?' 에 대한 답을 내리는 거였는데요. 이 책에서는 JS기초부터 프로젝트 배포까지 전 과정을 다뤄 주고 있습니다. 웹에는 수많은 자료가 있지만, 이렇게 전체적인 개괄을 다뤄 주는 경우가 별로 없고 수많은 지식에 깔려 초보자들이 중도 포기하게 되는 경우가 잦아 문제가 많았는데 현재 구성이 좋아서 해당 기능 등을 하나하나 소화시키기에..
지난 시간에 사용한 이미지 위젯에 이어서 이번 시간에는 여러 상태를 갖는 버튼 위젯을 사용해 보도록 하겠습니다. 1. 버튼 위젯 사용하기 버튼 위젯은 이미지 위젯과 비교하면 다 똑같은데 외관(Appearance) 옵션에 Brush 속성이 아니라 Style 속성으로 표시가 되어 있는데요, 한 가지가 아니라 여러 스타일을 다룹니다. 버튼의 텍스쳐는 지난 시간에 만든 이미지 위젯에서 가져오겠습니다. 이미지 위젯을 선택하고 텍스쳐 위에 Shift + 마우스 오른쪽버튼을 누르면, 해당 텍스쳐가 복사됩니다. 이제 버튼 위젯을 다시 선택해서 Shift 마우스 왼쪽 버튼으로 아래 각 스타일별 텍스처란에 붙여넣어 주세요. 그럼 해당 이미지가 각각 등록된 버튼이 완성됩니다. 1 - 1) 스타일 - 일반(Normal) : ..
지난 포스팅에서 말씀드렸던 대로, 이번 포스팅에서는 이미지 위젯을 만들어 보도록 할게요. 시작해 보겠습니다. 1. 파일 준비 및 실습 세팅. 리소스 파일을 먼저 준비합니다. 일단 이번 포스팅에서는 위젯 옵션이 어떤 요소만 있는지 정리해볼 예정이라 아무 이미지나 괜찮습니다. 픽사베이(Pixabay), 언스플래쉬(Unsplash),등 어떤 것도 상관없으니 아무 이미지 한 장만 준비해 주세요. 준비된 이미지의 이름을 T_UI_Image로 변경합시다. 이름을 바꾼 이미지를 콘텐츠 브라우저에 드래그 앤 드롭해 주고, 위젯 블루프린트를 생성하고 WBP_UI_Images라고 이름을 지어 주신 후 더블클릭으로 열어 주세요. 마지막으로 해당 위젯 블루프린트에 캔버스 패널을 검색하고, 캔버스 패널을 에디터 영역 안 쪽으로..
이번 포스팅에서는 언리얼에서 여러 종류의 위젯이 있지만, 가장 기본적인 표현을 담당하는 위젯인 '텍스트'와 '이미지', 그리고 '버튼'을 만들어 볼 건데, 오늘은 그 중에서도 '텍스트'에 대해서만 다뤄 볼게요! 1. 환경 설정 먼저 위젯 하나를 생성하고, 배경에 캔버스 패널을 설치해 둡시다. 캔버스 패널이 있으면 화면 크기에 맞게 꽉 채워지고 하위 요소들을 자유롭게 배치할 수 있게 됩니다. 이제 팔레트에서 텍스트라고 검색해서 텍스트 위젯을 가져와 봅시다. 2. 텍스트 위젯 상세 설정하기 텍스트 위젯을 드래그 앤 드롭 해 놓고 나면 상세설정(Detail) 패널에서 여러 옵션을 볼 수 있습니다. 크게 보면 아래와 같이 동작합니다. 1. 슬롯(Slot) : 배치 규칙을 좌우하는 슬롯 규칙에 대해 설정합니다. ..
이번 포스팅에서는 언리얼에서 UI를 만드는 방법인 UMG란 무엇이고 어떻게 사용하는지, 그리고 어떻게 화면에 출력하는지에 대해서 다루어 보도록 하겠습니다. 그럼 지금부터 시작하겠습니다. 1. 위젯 블루프린트 생성하기 먼저 UI를 출력하기 위해서는 위젯 블루프린트(Widget Blueprint)를 생성해야 합니다. UI폴더를 생성하고, 폴더에 마우스 오른쪽 버튼 → 위젯 블루프린트를 누르면 생성할 수 있습니다. 여기에서 '부모 클래스'를 설정할 수 있는데요, 일단은 시작 단계이므로 User Widget으로 설정해 줍시다. 사용자 위젯(User Widget)을 선택하면 아래와 같이 위젯 블루프린트가 생성됩니다. 이름을 WBP_MainMenu로 설정하고 더블 클릭하여 UMG 창을 실행합시다. 위젯 네이밍 규칙..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 1. 파라미터(Parameter)란? 먼저 파라미터가 무엇인지 알아봅시다. 보통 매개변수라고 하면, 시스템이나 '함수의 특정한 성질'을 나타내는 변수라고 말합니다. 좀 어렵죠?😅😅 쉽게 말하면 함수에 있는 파라미터 값 A를 늘리면 원이 되고, 줄이면 사각형이 되는, 특정한 성질을 제어하는 변수를 일컫습니다. 이전에 회전 기능을 만들 때, 파라미터를 사용해 보았어요. 파라미터 θ의 값을 조정해서 '회전'을 제어했습니다. https://wdnote.tistory.com/211 8. 텍스쳐 다루기 (2) 텍스쳐 회전(Rotate) 구현하기 ※ 현재 학습 중인 내용이므로 아직..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 11. 출력과 테스트 (2) : DebugValue 함수로 값 조회하기 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 wdnote.tistory.com 안녕하세요, 이번 포스팅에서는 11. 출력과 테스트(2) 편에 이어서 UV에서 값을 출력하는 방법에 대해서 알아보겠습니다. Scala 값을 갖는 요소들에서 2차원, 3차원 값 없이 Gradient 형태인 모든 노드들은 DebugValue로는 값을 조회할 수 없었습니다. 그래서 방법이..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 값 연산을 조회할 수 있는 방법에 대해서 작성하였습니다. 0. 언리얼 연산의 문제점에 대해서 알아보자! 언리얼에서는 주로 값 연산을 통해서 표현을 하게 됩니다. 그런데 여러분.. 문제가 있습니다. 현재 이 노드들의 최종 출력값은 과연 몇일까요? 바로바로 암산하고 생각하기 어렵습니다 ㅠㅠ 이렇듯 언리얼에서 연산을 복잡하게 꼬고 꼬아서 하다 보면 이게 지금 값이 몇인지 이해할 수가 없는 경우가 점점 많아집니다 😢😢😢😢 그래서 노드의 출력 값을 조회하는 방법, DebugValue 함수를 가져와봤습니다. 1. DebugScalaValue, Debug..
※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이전 포스팅 에서 이어집니다. 10-1. 머티리얼 함수 (1) : UVMasking 함수 제작과 순서 ※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다. 내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다. 이번 포스팅에서는 머티리얼 함수에 대해서 정리 wdnote.tistory.com 함수로 효과를 마저 연동해 보겠습니다. 1. 머티리얼 함수로 정리하기 2-2) 이동(Translate) 기능 분화하기 위 방법과 같은 순서로 진행하겠습니다. · 1단계 _구조 생각하기 이동 기능은 UV(Vector2)좌표에서 빼기(Subtract) 연산으..
