우당탕 UMG 초보 UI 디자이너의 고군분투기.. UMG 그게 뭔데?

 

"UMG? 앵커 그게 뭔가요.. 먹는건가요.. ㅠㅠ?"

 

안녕하세요.. 저는 인터넷상에서 뭔가 활동하는걸 부끄러워하는 엔진초보 UI 디자이너입니다.

우연한 기회로 언리얼 초기 개발진으로 참여하게 되었는데요..

 

클라이언트가 만들어둔 페이지를 제가 수정하면서 그렇게 어렵지 않네 라고 생각하다가.. 

처음부터 제작해보면 좋겠다는 의견에 만들어보다가.. 어? 이게 아니네 라는걸 알게 되었습니다.

 

강의도 몇개 사고, 단톡방에 무작정 질문도 던지고 이것저것하다가.

그냥 하나씩 정리해서 배워야 겠다는 생각이 들어서 블로그를 시작하게 되었습니다.

 

 

이글은 저처럼 UMG를 처음 접하는 디자이너들을 위한,

같이 우당탕거리며 배워가는 사람들을 위한 기록입니다.

보시다가 내용상에 잘못된 부분이 있으면 의견 주시면 저도 더 공부해보면서

보완해보도록 하겠습니다.

 

서론이 길었네요.

(챗GPT가 만들어줬는데... 음... (.. ) 오탈자도 같이 만들어줬네요 ㅋㅋ)

 

 

 

 

 

UMG는 Unreal Motion Graphics의 약자로

언리얼 엔진엣 UI를 만들 때 사용하는 도구입니다.

 

게임에서 흔히 보이는

메인 메뉴

체력/마나 바 (hud)

인벤토리

캐릭터 창 

같은 것들을 배치해 구현하는 것이 umg의 역할이라고 합니다.

 

 

언리얼에서 위젯 블루프린트(Widget Blueprint)를 활용해서 UI요소를 배치하고,

그걸 게임 화면 위에 레이어처럼 입히는 방식으로 구성합니다.

 

  (* 레이어는 '층' '단계' 라는 뜻으로, 겹겹이 쌓여 있는 구조를 말합니다. IT에서 이 개념은 매우 광범위하게 사용됩니다.

 일반적 의미 Layer = 층, 겹 단위 현실 세계의 포토샵 의 레이어처럼 여러개가 쌓인 구조를 의미합니다.)

 

 

 

 

앵커(anchor)의 개념

앵커는 UI요소의 위치를 화면 크기에 맞춰 유연하게 조정해주는 역할을 합니다.

 

앵커  설정을 하지 않으면

해상도에 따라 버튼이 중간에 있기도하고 화면밖으로 나가버리기도 하고 

완전 엉뚱한 위치에 떠버리는 경우도 발생합니다.

 

UI가 모든 기기에서 안정적으로 보이기 하기 위해서,

앵커는 진짜 알아둬야 하는 중요한 부분입니다.

 

 

UMG 초보에게 추천하는 발표자료

 이건 UMG 방에서도 많이 추천하는 자료입니다.

📝 NDC 2019 - 넥슨에서 공개한 실전 UMG 제작기 (https://ndcreplay.nexon.com/NDC2019/sessions/NDC2019_0029.html?utm_source=chatgpt.com)

 

디자이너가 꼭 알아야 하는 개념과 실제 적용사례가 아주 잘 적용되어있다고 합니다.

읽다보면 나만 이렇게 헤매는게 아니구나 하면서 위로가 됩니다.

 

추가로 더 필요한 자료들은 점차.. 모아서 포스팅하거나 하도록 하겠습니다.

 + 언리얼 공식 네이버 카페도 있습니다. 한번 가셔서 훑어보셔도 좋을거같아요

 

https://cafe.naver.com/unrealenginekr

언리얼 엔진 공식 카페 (Unreal... : 네이버 카페

언리얼 엔진에서 UMG와 슬레이트를 사용하여 유저 인터페이스 만들기 | 언리얼 엔진 5.5 문서 | Epic Developer Community

https://dev.epicgames.com/community/unreal-engine/learning?query=umg (카페랑 튜토리얼 부분은 아직 심도있게 보진 못했습니다.)

 

 

🧵 마무리하며

완성형 UMG 블로그가 아닙니다.

우당탕거리며 배우고, 실수도 하고 그걸 다시 정리해서 공유하는 방식으로 공부하려고 합니다.

 

같이 헤딩하면서 배우고 싶으신 분들

댓글이나 공유 언제든 환영입니다.

 

 

#언리얼엔진#언리얼UMG#UMG튜토리얼#UI디자인#게임UI#언리얼UI#UI디자이너
#언리얼공부#언리얼엔진5#언리얼초보#게임개발#언리얼개발일지#UMG초보
#UMG공부#게임디자인#UIUX디자인#디자이너일상#개발자블로그#언리얼UI디자인#UI디자인공부