이번주는 놀기도 많이 놀고
정신없어서 강의를 제대로 못봤습니다.
강의를 보다가 리소스를 비슷하게 만들어서
강의 후기및 진행과정을 적어보려고 합니다.
미드저니로 만들었습니다.
여러가지 모드로 블렌딩이랑 프롬프트를 입력해서 생성했어요.
미드저니는 디스코드에 연결해서 사용하면 됩니다
다음에 미드저니 사용법도 슬쩍 포스팅 해보도록 하겠습니다.
미드저니로 캐릭터를 또 생성합니다.
게임 리소스로 활용할 게임이미지입니다.
패스로 적당히 누끼를 따줍니다
으.. 따다가 살짝 귄찮아 져서 라소툴로 만들라구요 ㅠㅠ
적당히 패스를 따서 캐릭터 이미지를 넣어줍니다.
더 만들어야 하는데 피곤해서 여기까지만 하기로 하겠습니다 ㅠㅠ..
강의는 꼼꼼히 잘 알려줍니다.
| [서브컬쳐 강의 후기] 콜로소 (4) | 2025.05.17 |
|---|---|
| 강의 후기들 (1) | 2025.05.02 |
전일 아파서 연차를 썼습니다
골골 거리다가 오늘은 공부를 해야할 거 같아서
강의를 보는데
UI 시안 강의는 크게 안봐도 될것같아서
점프하고 UMG 강의를 보려고 했는데
시안을 따로 만든뒤에 예시이미지로 사용하는게 좋을거같아서
강의를 1강부터 다시 보기 시작했어요
미드저니로 AI 뽑는 법
저는 이미지를 챗 GPT를 사용해서 분석후
프롬프트를 짜보았습니다.
예시 이미지를 넣고 프롬프트를 넣어서
니케 스타일의 배경을 만들기로 했어요
중간에 미드저니보다 BING을 활용한 애니메이션 스타일이 더 괜찮다고 해서
BING을 활용해서 서브컬쳐 이미지를 만들어 보기로 했습니다.
Info
Pictured here is a spectacular view of a delta in
www.bing.com
이 사이트에 가서
이미지 누르고 크리에이트를 누른후 AI이미지를 생성하면
서브컬쳐 스타일의 이미지 생성에 도움이 되는것 같습니다.
UMG 예제를 따라하려 했는데
하는김에 시안도 같이 만들어보고 포트폴리오도 같이 만들어 볼까 싶네요
강의는 처음에 좀 별로인가 했는데
생각보다 꼼꼼하고 사후관리도 잘해주시더군요..
중간에 약간 불미스러운 이슈가 있었다곤 하는데
강의 들어본 후기로는 생각보다 꼼꼼하고 잘 알려주는 강사님 같습니다.
오늘.... 공부한척 하고 후기 남겨봅니다
미드저니, 챗 gpt, bing 사용하는걸 방법을 조금더 고민해보기로 했습니다
감사합니다
| [콜로소 강의 후기] 리제님 강의 보기 (3) | 2025.05.26 |
|---|---|
| 강의 후기들 (1) | 2025.05.02 |
이번주에는 컨디션이 조금 별로라
스터디를 많이는 진행을 못했습니다
UMG 강의 복습겸 다시보기 2강과
빌드박스 강의 1강 이렇게 밖에 못봤네요
실습은 거의 못하고
강의에서 빌드 박스 플랜을 보려고 하면
우클릭 한글 번역을 해서 가격을 볼 수 있습니다.
저는 우선 강의를 보면서 무료 플랜을 사용할것이기 때문에
이런 플랜이 있다는 것만 알면 되는것 같습니다.
빌드 박스를 설치파일을 누르면
저런 파일이 다운받아집니다
이걸 다운로드 받기로합니다.
설치되는 중입니다.
여기에서 Create an Account를 눌러줍니다
여기에 닉네임 메일주소 이런것들을 입력해주시면 됩니다.
설치가 끝나다음에는 메일이 오는데 그걸 ok 해주시면 된다고 합니다
저는 몰랐는데 이미 가입을 해둬서 이 부분을 생략하기로 하였습니다.
new game Creator를 누리면 게임 제작 화면이 나옵니다
저는 플래피 버드 게임을 만들 예정이라서 그 게임을 눌러보기로 합니다
아래에 선택된 이미지가 플래피 버드였어요
게임 세팅 되어있는 화면입니다
이미 어느정도 셋팅이 되어있어서 신기했어요
재생 버튼을 누르면
게임 화면이 나옵니다
신기했습니다
제가 코딩을 하지도 않았는데 플레이가 가능한 게임이 나와서..
게임 제작하는 방법은 다음번 포스팅에 자세히 적어보도록 하겠습니다
이것저것 해보면서 스터디 하기로 했는데
3강인지 4강인지 빌드박스를 설치하고 가볍게 프로그램을 만져보는 법을 알려줍니다
생각보다 그냥 드래그앤 드롭이면 가능해서 신기했습니다
이번주에는 너무 쓰레기같이 살아서 가볍게 본 부분만 기록으로 남겨둡니다
다음주에는 열심히 공부하기로 하겠습니다
감사합니다 좋은 주말 마무리 하시길 바랍니다!
| [클래스 101 빌드박스 공부 ]조금 늦어도 괜찮아, 욜로비의 게임개발 공부기 (0) | 2025.05.05 |
|---|
안녕하세요
오늘은 강의를 듣고 팝업을 만든 것을 복습해 보려고 합니다.
강의 내용에 있는 이미지를 다 가져오긴 어려워서
그냥 제가 예전에 스터디로 했던 팝업을 수정해서
리소스로 활용하려고 합니다.
포스팅에 내용은 제가 공부했던 내용이 가볍게 반영 되어있습니다.
저도 공부하는 과정이라 내용이 다소 정확하진 않을 수 있어서
보시고 이상한 부분이 있으면 댓글 달아주시면 반영하도록 하겠습니다.
내용은 이런 내용으로 만들었습니다.
뒤에 있는 배경은
원신 이미지를 참고해서 미드저니로 생성해서 아래에 딤처리를 해서 팝업을 띄웠어요
아직 연출쪽은 스터디가 덜 되어서 이미지 배치하는 정도까지만 만들어보겠습니다.
포토샵에서 잘라둔 이미지를 언리얼로 불러옵니다
텍스쳐 파일에 새로울 폴더를 생성해서
드래그앤 드롭을 하면 별표 모양이 뜹니다
이전 포스팅에 적어둔것 처럼 별표 모양이 뜬 것은 아직 텍스쳐 수정을 하지 않았다는 뜻입니다.
우클릭 - 텍스쳐
Asset Actions - Edit Selection in Property Matrix 이럴 눌러주면
한꺼번에 텍스처 수정이 가능합니다.
설정은 - userinterface2d , nominmaps, ui로 맞춰줍니다
그리고 나서 저장을 눌러주면
별 모양이 없어져 있습니다.
우클릭후 인터페이스 블루 프린트를 해줍니다.
이제 위젯 폴더에 WBP_Ok 블루 프린트를 만들어줍니다
생성후 변경이 되지 않았기 때문에 여기에도 별 모양이 있습니다.
더블 클릭하면 아무 화면도 나타나지 않습니다.
캔버스 패널을 Wbp_ok에 넣어줍니다
화살표를 땡겨서 해상도를 맞춰줍니다
팝업 이미지를 넣어줌
이미지를 box 로 만들어줍니다 (나인슬라이스 기능)
마진을 .5 에서 본인이 원하는 만큼 만들어줍니다
0~ 1까지 가능한걸로 알고 있어요
캔버스 패널 - 이미지 (예시)
ㄴ 캔버스 패널
이미지 (배경)
이런 계층구조로 팝업을 만들어 보았습니다.
사실은 다른 구조로 처음에 시안을 만들었다가
클라분이 하지말라던 구조로 계층구조가 쌓여서
기본형 팝업만 만들고 우선 급하게 마무리 지엇어요.... ㅋㅋㅋㅋ ㅠㅠㅠㅠ...
아앗.. 수양이 부족합니다.
우선은... 오늘은 팝업 위젯을 이럽게 급하게 만들고 끝내봅니다......
UMG 의 길은 멀군요.. 다시한번 공부해서 제가 원래 만들려던 구조로 다시 짜서 오겠습니다.
그럼 ... 이 글은 크게 참고하진 마시고 그냥
제가 복습삼아서 만들었다는것만 알아주시길... 또르르
연휴가 지나가면서 하루는 즐겁게 궁평항에 놀러 다녀왔습니다.
게임회사에서 1n년을 보내고, 이제는 정년이라는 단어가 슬슬 피부에 와닿는 시기가 되었습니다.
평소에 관심 있었던 클래스 101에서 인강을 결제해두고 미뤄뒀던 공부를 해보기로 했습니다
제가 보기로 한 강의는
입니다.
데브런이라는 분의 게임 개발 과정? 공부인데요
게임 제작 방식을 쉽게 접근하는것이었습니다.
기존의 게임 개발은 고딩 학습 -게임 제작 및 출시 -수익화 .. (수익화는 회사에서)
였다면
해당 강의는 코딩 없이 (ai 기반) 게임 개발을 할수있다는 자신감을 실어주는 편인거 같습니다.
기존 공부는
초반 진입장벽이 높고,
제작 속도가 느림, 지속성이 조금 떨어지는 느낌이었다면
제안하는 방식은
간단한 게임 제작 및 출시 - 수익화 경험 - 필요한 기술 습득 이 목적입니다.
장점은 빠르게 시장 반응을 보고, 필요한 부분만 골라서 집중적으로 공부 할수 있다 라는것입니다.
클래스를 마지막으로 끝낼때 게임을 하나 출시 할수 있을지..
또 평소처럼 게임 개발을 끝내지 못하고 흐지부지 하게 될지 모르겠지만
그래두 강의를 본 기록을 남겨보는게 저한테도 좋고.. 앞으로 클래스 101 수업에 관심이 있거나
빌드박스 관심이 있는분에게 후기로 찾아보기에 좋을거같아서 한번 끄적여 봅니다.
해당 강의는 '게임 하나 만들어보기' 보다
내가 만든 게임을 전세계에 출시하고, 수익화까지 세팅하는것을 목표로 삼습니다
.. 음 얼마나 실천될지는 모르겠어요...
챗 gpt한테 30만원 벌려면 얼마나 걸릴까 그랬는데 사실 그렇게 낙관적이진 않았어요
그래두 평소에 조금 관심있던 부분이라서... 강의보면서 어느순간 빌드박스를 결제할 수도 있을거같습니다.
코딩없이 개발 가능한다.
음.. 이부분은 조금더 강의를 보면서 실습해보고 후기를 적어보도록 하겠습니다.
우선 코딩 지식이 적어도 게임 개발이 가능한 프로그램을 추천 받았습니다.
프로그램명특징비고
| Buildbox | 드래그 앤 드롭 방식, 초보자 친화적 | 2D/3D 모두 지원 |
| GameMaker Studio | 쉬운 스크립트 기반, 복잡한 게임도 가능 | 일부 고급 기능은 스크립트 필요 |
| RPG Maker | RPG 게임 특화, 코딩 거의 필요 없음 | 스토리 기반 게임 제작에 강점 |
| GDevelop | 오픈소스, 완전 코드리스 개발 가능 | 다양한 플랫폼 지원 |
| Unity + Playmaker | Unity 엔진에 Playmaker 플러그인 활용 | 시각적 스크립팅 가능, 범용성 높음 |
| Construct 3 | HTML5 기반, 완전 드래그 앤 드롭 | 웹게임 제작에 특히 강함 |
코딩을 몰라도 이젠느
'작은 게임 하나는 직접 만들어낼 수 있는시대'가 되었다고 합니다
오래도록 개발을 해왔지만.. UI 직군 하나로 게임 개발을 할 수 있진 않았던거같아요
그리고 게임개발 일부분만 해봐서 게임의 전체적인 파이프 라인을 알기도 어려웠구요
이번 클래스가 끝날때쯤, 내 게임이 세상에 출시되었다는 것과
실습과 동시에 수익화가 가능하면 좋을거같습니다
사실 수익화는... 'ㅂ' ,,, 회사내 불법일거같아서 못할거 같지만요...
여튼 공부해서 남주나 라는 생각으로 3강의를 본 후기를 적습니다.
3강까지는 별 내용은 없네요
ㅋㅋ 여튼 하루를 의미있게 보낸거 같아서 좋습니다.
다음 쉬는날에 나머지 강의를 보고 또 후기를 적어보도록 하겠습니다
| [빌드박스] 강의 후기 (1) | 2025.05.12 |
|---|
개인적으로 배움에 대한 열정도 있지만
뭔가 배움을 시작하는 것에서 위안을 얻는 타입입니다.
언리얼 강의를 결제해서 공부를 하고 있고
초기 강의만 보고 있지만
시장에 나와있는 두가지 강의를 비교해보니.. 어떤 차이점이 있는지 한번 적어보려고 합니다.
언xx에그의 UMG 강의
총 9강의로 구성
말을 또박또박 해줘서 기본적인 개념을 얻기에 나쁘지 않았음.
콜X소 umg 강의
시안강의와 umg 따라할 수 있는 예제가 같이 포함되어있음.
단점.. 나긋나긋하셔서 졸릴 수 있다 ㅋㅋ
두 강의를 다 본 후기로는..
umg 위젯의 개념 같은건 스스로 공부하고 예제를 따라하는 위주로되어있는거 같습니다
결과적으로는 개인이 조금더 공부를 해야하고
저처럼 떠먹여줘야 공부를 하는 타입은 강의를 보면 될거같습니다.
개인적을 혜자는... 콜x소 강의인것도 같은데
저는 이해하기 편했던건.. 언xx에그 강의 였던거 같습니다.
사후관리는 ㅋ로x 강의가 더 잘해주는듯해서
장단점 고민해보고 구매하시면 될것 같습니다.
여유 있으시면 둘다 구매해서 보셔도 좋을거같아요~
스팀 게임 사기처럼 강의 구매하는거 좋아한 욜로비의 후기였습니다
| [콜로소 강의 후기] 리제님 강의 보기 (3) | 2025.05.26 |
|---|---|
| [서브컬쳐 강의 후기] 콜로소 (4) | 2025.05.17 |
언리얼 UMG는 많이 사용되는데 이유는 모르겠으나
튜토리얼을 찾아보려면 많은 정보가 없습니다 ㅠㅠ
그래서 여기저기 포스팅을 찾아보고 구글링해서 제가 필요한 정보를 한번 정리해 보았습니다.
그 흔한 UMG 책도 찾기 어려워서
공식 튜토리얼을 찾아 이것저것 적어보았습니다.
아직 공부하는 단계이기 때문에 정확하지 않은 정보가 있을 수 있으니
혹시나 부정확한 정보는 댓글 남겨놓으면 수정 반영하도록 하겠습니다.
-----------
오늘은 언리얼 엔진에서 UI 만들때 꼭 알아야 하는 기본
위젯 블루프린터 에디터와 팔레트에 대해서 간단히 이야기 해보려고 합니다.
팔레트란?
판레트는 다양한 UI부품(위젯)을 모아 놓은 창입니다.
버튼,텍스트박스, 이미지 같은 위젯을 끌어다(드래그 앤 드롭) 디자인 화면에 놓으면 됩니다.
레고 블록 조립처럼 생각하면 쉽습니다.
각각에는 다양한 위젯 유형이 들어있어서 사용하면 됩니다. 이런 위젯 유형을 섞어 쓰는 방식으로 디자이너 탭에서 UI 모양을 배치하고, 그래프 탭을 통해 각 위젯의 대테일 패널 내 세팅을 통해 위젯의 함수 기능을 추가 할 수 있습니다.
UI를 만드는 기본 흐름
디자이너탭 : 위젯을 끌어다가 화면에 배치
그래프탭 : 위젯에 동작을 추가
드테일 패널 : 색 폰트 크기 등 세부 설정 변경
팔레트 = 부품을 모아놓은 창
디자이너 탭 = 부품을 배치하는 곳
그래프 탭 =부품에 기능을 추가하는 곳
디테일 패널 =부품의 옵션을 조정하는곳
| Border | 테두리 - 하나의 자손 위젯을 가질 수 있는 컨테이너 위젯으로, 테두리 이미지와 조절가능 여백을 두고 가장자리를 둘러싸는 기능을 제공합니다. |
| Button | 버튼 -단일 자손클릭가능 프리미티브 위젯으로, 기본적인 상호작용에 쓰입니다. 버튼 안에 다른 위젯을 배치하여 UI에 좀 더 복잡하고 재미난 클릭가능 요소를 만들 수 있습니다. |
| Check Box | 체크박스 - 'unchecked' 체크해제 /'checked' 체크됨 / ' indeterminable' 확인불가 세가지 토글 상태를 표시할 수 있습니다. 체크박스는 고전 체크박스, 토글 버튼, 동글 버튼으로 사용할 수 있습니다. |
| Image | 이미지 - 이미지 위젯으로 UI에 슬레이트 브러시, 텍스처, 스프라이트, 머티리얼을 포시할 수 있습니다. *같은 텍스처 아틀라스에 있는 스프라이트는, 렌더링할 때 같은 레이어를 공유하는 경우 슬레이트에 일괄 배치시킬 수 있습니다. 즉 드로우콜 수 예산이 빠듯한 트랜스폼에서는 Paper 2D 스프라이트를 브러시 입력으로 사용하는 경우 UMG와 슬레이트 위젯의 렌더링 효율이 크게 향상된다는 의미입니다. |
| Named Slot | 다른 위젯을 채울 수 있는 사용자 위젯에 대한 외부 슬롯을 노출시켜 주는 위젯으로, 커스텀 위젯 함수 기능을 만드는 데 좋습니다. |
| Progress Bar | 진행상황 바 - 진행상황 바 위젯은 경험치, 생명력, 점수와 같은 여러가지 용도에 맞도록 스타일 조정이 가능한, 단순한 바입니다. |
| slider | 슬라이더 - 0 -1 사이 값 조절이 가능한 핸들이 있는 미닫이 바가 표시되는 단순 위젯입니다. |
| Text | 텍스트 - 화면상에 텍스트를 표시하는 기본적인 방법으로, 옵션이나, 기타 UI 요소에 대한 텍스트 설명에 사용할 수도 있습니다. |
| Text Box | 텍스트 박스 - 사용자가 커스텀 입력을 할 수 있도록 합니다. 한줄 텍스트만 입력 가능합니다. |
| Expandable Area | 확장가능 영역 - 컨테이너 안의 자손 위젯을 펼치거나 접을 수 있도록 해줍니다. |
 |
|
입력
| Combo Box | 콤보 박스 (문자열) - 사용자에게 드롭다운 메뉴로 옵션 목록을 표시하고 그 중에서 선택 할 수 있도록 합니다. |
| Spin Box | 스핀박스 - 숫자를 직접 입력하거나 슬라이더로 입력할 수도 있는 숫자 입력 박스 입니다. |
| Text Box | 텍스트 박스 여러줄 - text box와 비슷하지만 한줄이 아닌 여러줄 입력이 가능합니다. |
최적화 (여기 내용은 사실 저도 잘 모르고 공식 글을 퍼왔습니다.)
여기에 있는 위젯은 주로 UI를 최적화 시켜 퍼포먼스를 향상시키는데 쓰입니다.
| Invalidation Box | 인밸리데이션(무효화) 박스에 둘러싸인 위젯은 그 자손 위젯 지오메트리를 캐시에 담아 슬레이트 렌더링 속도를 올릴 수 있습니다. 인밸리데이션 박스로 인해 캐시에 담긴 위젯은 프리패스, 틱 페인트 처리되지 않습니다. |
| Retainer Box | 리테이너 박스 - 렌터 카깃에 자손 위젯을 먼저 렌더링한 후 그 렌더 타깃을 화면에 렌더링합니다. 이를 통해 UI가 메인 게임 렌더 빈도보다 실제로 적게 렌더링 할 수 잇도록 빈도와 단계 (phase) 모두 제어할 수 있습니다. 위젯을 그린 후 머티리얼을 렌더 타깃에 적용시켜 단순 포스트 프로세스를 적용하는 부가 효과도 있습니다. |
패널 - 패널 카테고리에는 레이아웃 조절이나 다른 위젯 배치용 위젯이 들어있습니다.
| Canvas Panel | 캔버스 패널 - 위젯을 임의 위치에 배치하고, 앵커 설정하며, 캔버스의 다른 자손과 Z순서를 조정할 수 있도록 해 주는 디자이너 친화적 패널. 참고로 z순서를 도동 변경할 수는 있어도 위젯은 목록 순서대로 렌더링되므로, z순서에 의존하기 보다는 목록으 ㅣ순서를 변경하는 것이 낫습니다. 캔벗 ㅡ패널은 위치가 절대적인수동에 배치에 좋은 위젯이지만, 위젯을 절차적 생성 방식으로 컨테이너에 넣고자 할 때는 그리 좋지 않습니다. |
| Grid Panel | 그리드 패널 - 남은 공간을 모든자손 위젯과 균등하게 나누는 패널입니다. |
| Horizontal Box | 가로박스 - 자손 위젯이 가로로 배치되도록 합니다. |
| Overlay | 오버레이 - 위젯이 서로 쌓이도록 하며, 각 레이어의 콘텐츠에는 단순한 레이아웃을 사용합니다. |
| Safe Zone | 안전지대 - 플랫폼의 안전지대 정보를 뽑아 패딩을 추가합니다. |
| Scale Box | 스케일박스- 원하는 크기의 콘텐츠를 배치하고 이 박스의 할당 영역에 배치된 제한에 맞도록 스케일을 조절합니다. 배경 이미지가 일정 영역에 맞게끔 스케일 조절은 하지만 종횡비가 달라져 찌그러지지는 않도록 하거나, 특정 텍스트를 한 영역에 자동으로 맞도록 할 필요가 있는 경우에 좋습니다. |
| Size Box | 사이즈 박스 - 보고하는 박스에 원하는 크기를 지정할 수 있습니다. 모든 위젯이 실제 원하는 크기의 박스로 보고 하지 은 않습니다. 위젯을 size box로 감싸면 size box가 특정 크기로 강제시킬 수있습니다. |
| Unifom Grid Panel | 균등 그리드 패널 -자손 모두와 남은 공간을 균등하게 나누는 패널입니다. |
| Vertical Box | 세로박스 - 자손 위젯이 자동으로 세로로 배치되도록 하는 위젯입니다. 위젯끼리 세로 정렬을 유지하면서 서로 쌓이도록 하는 데 좋습니다. |
| Widget Switcher | 위젯 전환기 - 자체적으로 만들 수 있는 탭은 없으나 탭처럼 제어되는 것으로, 이와 함께 하여 탭 효과를 낼 수 있습니다. 한번에 최대 하나의 위젯만 보입니다. |
| Wrap Box | 자손 위젯이 왼쪽에서 오른쪽을 정렬됩니다. 위젯이 폭 제한을 넘은 경우 위젯을 다음 줄에 배치합니다. |
프리티브 - 사용자에게 정보를 주거나 무언가 선택할 수 있도록 해주는 방식을 추가로 제공해줍니다.
| Circular Throbber | 원형 트로버 - 회전하는 원형 이미지로 주로 로드중임을 나타내는 트로버 위젯입니다. |
| Editable Text | 편집가능 텍스트 - 박스 배경없이 사용자 입력이 가능한 글 상자 입니다. 편집가능 텍스트 한줄만 지원합니다. |
| Editable Text(Multi-Line) | 편집가능 텍스트 (여러줄) Editable text 와 비슷하나 한 줄이 아닌 여러줄 텍스트를 지원합니다. |
| Native Widget Host | 네이티브 위젯 호스트- 하나의 자손 슬레이트 위젯을 포함할 수 있는 컨테이너 위젯입니다. UMG위젯 안에 네이티브 위젯을 중첩시키기만 하면 되는 경우에 사용합니다. |
| Menu Anchor | 이 위젯은 팝업 메뉴의 기준이 되어 띄울 위치를 지정할 수 있습니다. |
| Spacer | 스페이서 - 다른 위젯 사이에 임의의 여백을 제공해주는 위젯입니다. 스페이서는 시각적 표시가 없어 게임에서 보이지 않습니다. |
| Throbber | 트로버 - 연속해서 여러개 확대되는 원으로보이는 애니메이션 트로버 위젯입니다. 주로 로딩중임을 나타낼때 사용됩니다. |
특수효과 - 이 위젯은 UI 기반 특수 효과를 만드는데 사용됩니다.
| Background Blur | Background Blur 위젯은 하나의 자손 위젯을 가질 수 잇는데, 거기에 조절 가능한 패딩을 부텽 포스트 프로세스 가우시안 블러를적용하여 위젯 아래 모든 콘텐츠 블러를 적용할(뿌옇게 만들) 수 있습니다. |
사용자 생성
미리 생성해둔 위젯 블루프린트를 다른 위젯 블루 프린트 안에 배치할 수있는 것입니다. UI 요소의 파트를 개별 위젯 블루프린트로 만든 다음, 조합해서 전체적인 ui 레이아웃을 만드는데 좋습니다.
여기까지가 언리얼 엔진 문서에 있는 위젯 유형 레퍼런스입니다.
언리얼 포럼에는 있지만 제가 설치한 엔진상에는 없는 기능도 있어서 링크를 하단에 첨부드립니다.
아래는 저 말고도 더 잘 정리해둔 블로거분들 링크를 첨부하겠습니다.
https://dev-igner.tistory.com/67
https://blog.naver.com/bbineekim/223006142012
https://wdnote.tistory.com/224
혹시 제가 포스팅한 글중에서 틀린 부분이 있으면 편하게 댓글 달아주시면 다시 찾아보고 리포스팅 하도록 하겠습니다.
감사합니다.
#언리얼엔진 #언리얼UMG #UMG초보 #UMG튜토리얼 #언리얼UI #게임UI디자인 #언리얼블루프린트 #언리얼강의 #언리얼UI구성 #UMG블루프린트 #언리얼디자이너 #게임개발기록 #언리얼스터디 #게임UI제작 #게임UI공부 #언리얼개발 #UI디자인공부 #언리얼초보 #UMG위젯 #언리얼UI디자인
| UMG 폰트를 추가해보자 (1) | 2025.04.27 |
|---|---|
| [UMG] 처음 만나는 언리얼 UMG — 버튼 넣고 해상도 조절까지 따라하기 (1) | 2025.04.27 |
| 왕초보 디지이너도 할수 있게 UMG 리소스를 가져와보자.. (1) | 2025.04.26 |
| 우당탕 UMG 초보 UI 디자이너의 고군분투기.. UMG 그게 뭔데? (2) | 2025.04.20 |
유니티상에서 폰트를 추가하는 방법은 살짝 어려웠는데
언리얼은 튜토리얼을 제가 잘못된 방식을 알고 있는건지 모르겠지만
유니티보다는 훨씬 쉽다고 생각을 했습니다.
첫번째 방법은
내가 사용하고 싶은 폰트를
폰트 폴더에 드래그앤 드롭을 하는 방법입니다.
폰트폴더에 폰트를 넣게되면
폰트 에셋을 만들거냐는 팝업이 뜹니다.
저희는 폰트를 만들것이기 때문에 예를 눌러주면 됩니다.
폰트를 임포트 하게 되면
설정을 하지 않았기 때문에 *표시가 나타납니다.
*표시가 되어있는 파일을 더블클릭을 해줍니다.
아래 화면처럼 기본적으로 수정하게되면
런타임으로 나오는거 같습니다.
저는 우선 그대로 나온거 같아요
그럼 저장을 누르면 이제 폰트가 반영됩니다.
직전에 만들어 두었던 버튼에 폰트를 수정해봅니다.
폰트를 눌러서
디테일에서 폰트 -폰트패밀리를 수정하면
반영되는 것을 볼 수가 있습니다.
다른 블로거님께서는 다양한 방법이랑 우려사항.. 같은 부분을 추가해둔게 있었는데
우선은 저는 런타임에서 사용될 수 있는 방법에 대해서만 공부를 하도록 하겠습니다.
폰트 상태를 변형하는 방법은 조금 난이도가 있어보여서 다음번에 추가해 보도록 하겠습니다.
제가 참고한분의 블로그는 아래에 첨부해 두겠습니다.
아직 공부할게 많아서 부족하지만.. 조금씩 채워나가보도록 하겠습니다!
혹시 제가 한 방법중에 잘못된 방법이 있으면 댓글로 남겨주시면 다시 R&D해서 반영하도록 하겠습니다.
감사합니다. 좋은 주말 보내세요~
https://coding-hell.tistory.com/101
#언리얼UMG #UMG기초 #언리얼UI초보 #UI디자인공부 #게임UI시작 #언리얼폰트추가 #게임UI기초 #UMG폰트적용 #언리얼엔진입문 #언리얼강의추천 #언리얼블루프린트 #UI디자인기초 #게임디자인공부 #언리얼UMG초보 #게임개발입문
| Unreal의 UI 시스템 _ UMG 위젯 설명 (2) | 2025.05.01 |
|---|---|
| [UMG] 처음 만나는 언리얼 UMG — 버튼 넣고 해상도 조절까지 따라하기 (1) | 2025.04.27 |
| 왕초보 디지이너도 할수 있게 UMG 리소스를 가져와보자.. (1) | 2025.04.26 |
| 우당탕 UMG 초보 UI 디자이너의 고군분투기.. UMG 그게 뭔데? (2) | 2025.04.20 |
에디터 블루 프린트 에디터 사용방법과
가볍게 버튼을 추가하는 방법에 대해서 공부한 것을 기록해보겠습니다.
1. 팔레트 - 이탭은 위젯에 추가 할 수 잇는 모든 개별 ui 요소를 보여줍니다.
버튼, 텍스트 박스, 이미지, 슬라이더 등 많은 요소가 포함되어있습니다.
2. 계층구조(하이어라키) 위제에 현재 배치된 모든 UI 요소를 보여줍니다.
현재는 캔버스 패널 밑에 이미지 가 추가되어있습니다.
3. 디자이너 이탭은 계층구조에 대치된 UI 요소와 배치 방식에 따라 위젯 모습을 시각적으로 보여줍니다.
4. 디테일 현재 선택한 UI 요소의 속성을 보여줍니다.
배치된 캔버스 패널을 선택하면 모든 옵션이 나타납니다.
5. 블루 프린트이기 때문에 두개의 버튼으로 디자이너뷰와 그래프뷰 사이를 전환할 수 있습니다.
이중 화살표를 드래그하면 원하는 해상도로 캔버스의 크기를 조절 할 수 있습니다.
다양한 장치에서 사용되는 해상도 위젯을 보여줍니다.
빨간색으로 표시된 화살표 부분이 해상도 조절하는 기능입니다.
Desired 콘텐츠에 맞춰 보여줌
이미지를 배치하려면 위젯블루프린트 - > 캔버스 패널을 드래그앤 드롭을 하면됩니다.
캔버스패널을 넣은뒤에 해상도 조절이 가능해집니다.
저는 1920*1080 사이즈를 기본으로 합니다.
이미지 색상은 여기에서 조절이 가능합니다.
앞서 말씀드렸듯이 이미지 non이라고 표시된 곳에 이미지를 넣을 수도 있고
색조를 통해서 색상 조절도 가능합니다.
이미지를 캔버스 전체 화면만큼 채우기 위해
앵커 컨트롤 우측젤 아래 부분을 눌러서
전체 화면으로 만들어 줬습니다.
UMG 위젯들은 각각 자식을 1개씩 갖을수 있는 애들과
자식을 갖을 수 없는 애들이 있습니다.
저도 해당 부분에 대해서 완벽하게 알고있지는 않습니다만.. 블로그를 하면서 공부하고 보시는 분들과 같이 공부하도록 하겠습니다.
해당 사항에 대해서 잘 나와 있고 제가 요새 참고하면서 공부하는 블로그를 적어두겠습니다.
UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용 — 오구리의 디자인시스템노트
UMG 6편 : 슬롯(slot) (1) - 패널(Panel)의 사용
언리얼에서 화면에 어떻게 배치할지를 정하는 기능 슬롯(Slot)에 대해서 살펴볼 건데요. 이를 제대로 사용하려면 패널 위젯(Panel Widget)의 특성을 이해하실 필요가 있습니다. 그래야 원하는 배치를
wdnote.tistory.com
위젯 패널들의 정보를 잘 정리해주셨습니다.
저도 다시한번 정리하긴 할껀데 혹시나 더 많이 공부하고 싶으신 분들은 오구리님의 블로그로 가서 보시면 될 것같습니다.
버튼을 넣는 것들에 다양한 방법이 있지만
우선은 예시로 보여드린다면 버튼을 이런 형태로 넣을 수 있습니다. (사실 이건 정확한 정보는 아니고... 버튼넣는걸 보여드리려고 이렇게 만들엇습니다.)
텍스트 내용은
디테일 콘텐츠 - 텍스트에서 변경이 가능합니다.
언리얼과 유니티의 차이점중 하나라고 생각하는게
유니티는 게임 오브젝트 아래에 다양한 형식의 계층구조?를 형성할 수 있었던거 같습니다.
하지만 언리얼은 어떤이유 에서인지 패널들 간에 다양한 갯수를 허용하지 않은것 같습니다.
예를 들어 이미지는 자손을 가질 수 없고
버튼은 1개의 자손을 갖을 수 있다
이런식으로 계층 구조를 제한합니다.
언리얼로 넘어온지 얼마 되지 않았지만 이 부분에 대해서 조금 당황했던거 같습니다만..
제가 엔진을 변형할 수 있는게 아닌 이상 이 부분에 대해서 받아드리기로 했습니다.
아직까지 각 패널에 대한 다양한 특징을 다 파악하진 못했지만
선행적으로 공부한 블로거님들의 대한 내용과 챗 GPT를 활용하여서
각각 기능을 공부중입니다.
제글을 보시는 분들께서도 umg를 처음 만났을 때 너무 당황하진 마시고
위에 첨부드린 블로거님이나 챗 gpt를 활용해서
각 패널의 기능을 숙지하시면 좋을거같습니다.
그럼 오늘의 공부는 여기서 마치겠습니다.
혹시나 잘못된 설명이 있으면 댓글을 남겨주시면 수정반영하도록 하겠습니다.
글을 좀더 깔끔하게 작성하는 방법에 대해서 고민을 많이 해보도록 하겠습니다.
긴글 읽어주셔서 감사합니다.
#언리얼엔진 #언리얼엔진UMG #UMG기초 #언리얼UI #언리얼블루프린트 #언리얼UI디자인 #언리얼초보 #UMG블루프린트 #위젯제작 #언리얼위젯 #언리얼강의 #게임UI디자인 #언리얼UI구성 #언리얼디자이너 #언리얼강좌 #언리얼UMG초보 #게임개발기록 #게임UI제작 #UI디자인공부 #게임디자인공부
| Unreal의 UI 시스템 _ UMG 위젯 설명 (2) | 2025.05.01 |
|---|---|
| UMG 폰트를 추가해보자 (1) | 2025.04.27 |
| 왕초보 디지이너도 할수 있게 UMG 리소스를 가져와보자.. (1) | 2025.04.26 |
| 우당탕 UMG 초보 UI 디자이너의 고군분투기.. UMG 그게 뭔데? (2) | 2025.04.20 |
초기 세팅에 대해서 궁금하지 않으신분들은
이번 포스팅을 그냥 넘겨 주시면 됩니다
(참고로 챗GPT는... 한글을 잘 못쓰는거 같군요 ㅎㅂㅎ..)
안녕하세요. 언리얼 UMG 아장아장 걸음마 하고 있는 생초보 UI 디자이너입니다.
이번에 제가 직접 해보면서 배운 UI 위젯만들기 + 이미지 넣는 방법을 간다히 정리해보려고 합니다.
아직 헷갈리는것도 많고.. 확실하지 않은 정보도 많지만.. 하나씩 정리해나가면서 보완하려고 합니다.
같이 배워나가면 좋겠습니다. 혹시라도 제가 제작한 포스팅에서 잘못된 정보가 있다면
댓글이나 방명록에 남겨주시면 수정해서 반영하도록 하겠습니다.
언리얼을 처음 키면 나오는 그화면
처음 언리얼을 실행하면 뭔가 복잡한 에디터가 나옵니다.
뭘 눌러야 할지 모르겠지만 그냥 에디터는 드대로 두셔도 좋습니다... (저도 이걸 만지는 경우는 아직 없었습니다.)
우선 UI 파트가 할일이 있다면
클라이언트와 논의를 하건 선 제시를 하건 리소스 폴더를 정리해 주는것이 좋을거같습니다.
콘텐츠 브라우저에서 우클릭 new folder를 눌러서 UI관련 리소스를 넣을 폴더들을 만들어줍니다.
기본적인 구조는 스타일대로 하셔도 좋은데
Widgets - UI위젯 블루 프린트 파일들
Textures - PNG 이미지 리소스
Fonts - 폰트 파일들
이런 형식으로 만들어 두면 좋을거같습니다.
(우선.. 유니티 플젝에서도 이렇게 했었고.. 다른 선구자들이 이렇게 해서 따라갑니다만..
나중에 정확한 이유를 알게 되면 보완하도록 하겠습니다.)
위젯 블루프린트 생성하기
UI/Widgets 폴더안에서
우클릭 -> User Interface->Widget Blueprint를 눌러 새 위젯을 만듭니다
저는 WB_(orWBP)MainUI이런식으로 만듭니다.
(유니티에서는 게임 오브젝트 -> 프리팹 -> 이런 순서로 만드는 편이었는데 언리얼은 그렇게 하면 안되는거 같았습니다...)
언리얼은 위젯 블루 프린트를 만든 뒤 UI 요소를 배치하는 흐름인것 같습니다.
Png 이미지 파일 임포트하기
이제 UI/Textures 폴더로가서
사용하고 싶은 png 이미지를 끌어다 놓거나,
우클릭 -> Import to/ UI/ Textures를 눌러 이미지 파일을 불러옵니다.
가져온 이미지 세팅하기
처음 가져온 이미지에는 *가 붙어있습니다.
이건 아직 세팅이 완료되지 않았다는 뜻입니다.
UI요소를 만들기 위해서는 설정을 바꿔주셔야 합니다.
아래 세팅을 바꿔주고
마지막 저장 버튼을 눌러줘야합니다.
이제 UI용 리소스가 됩니다.
위젯 블루 프린트에 이미지 배치하기.
아까 만든 UI 블루프린트를 더블클릭해서 열면
디자인 화면이 나옵니다.
왼쪽 팔레트에서 Image 위젯을 드래그해서
화면에 끌어다 놓아보세요
이미지 리소스 연결하기
이미지를 클릭하면 오른쪽 티테일 패널에서
Brush=image 항목이 있습니다
여기서 우리가 아까 임포트한 png를 선택하면 이미지가 제대로 들어갑니다.
* 참고 지금은 기본 이미지만 배치했지만
크기 조절이나 다양한 배치를 하기위해서는 캔버스패널이나 오버레이.. 뭐 이런걸 사용해줍니다.
이번에는 그냥 이미지 넣어보는 방법 걸음마 단계라고 생각하시고 가볍게 보시면 될거같습니다.
저장법
작업한 위젯을 저장하려면
좌측위에 컴파일버튼과 저장 버튼을 눌러주시면
저장이 완료가 됩니다.
오늘은 언리얼에서 UI를 만들기 위한 기초중에 기초인
첫걸음 위젯만들기 이미지넣기를 해봤습니다.
이건 뭐.. 아무래도 진짜 프로젝트를 들어가기전에 알고 있어야 할 것들이라서....
저도 다시 공부차원에서 적습니다.
긴글 읽어주셔서 감사합니다.
같이 성장하는 초보 디자이너, 응원해주시면 힘이 됩니다.
궁금하거나 잘못된 정보가 있다면 댓글이나 방명록에 적어주시면 반영하도록 하겠습니다.
#언리얼엔진 #언리얼UMG #UI디자인 #UI디자이너
#게임UI #게임개발입문 #언리얼UI #UMG기초
#게임디자인 #UI입문 #디자인공부 #게임그래픽
#언리얼강의 #UMG블루프린트 #언리얼블루프린트
#디자이너성장기 #개발자공부 #언리얼리소스
#위젯블루프린트 #언리얼튜토리얼
| Unreal의 UI 시스템 _ UMG 위젯 설명 (2) | 2025.05.01 |
|---|---|
| UMG 폰트를 추가해보자 (1) | 2025.04.27 |
| [UMG] 처음 만나는 언리얼 UMG — 버튼 넣고 해상도 조절까지 따라하기 (1) | 2025.04.27 |
| 우당탕 UMG 초보 UI 디자이너의 고군분투기.. UMG 그게 뭔데? (2) | 2025.04.20 |