Post
로블록스 스튜디오 UI 강좌 1편: UI 기초 배우기로블록스 스튜디오에서 UI를 만드는 기초 강좌입니다. UI의 기본 개념, 스크린 GUI 추가, 프레임 설정, 텍스트 라벨 추가, 버튼 생성 및 상품 UI 복사 방법을 배웁니다.
1. 🎮 UI란 무엇일까요? 로블록스 스튜디오 시작하기
- ✅ UI는 유저 인터페이스의 줄임말로, 게임 내에서 사용자가 보고 조작하는 모든 요소를 의미합니다.
- ✅ 잘 만들어진 UI는 게임의 몰입도를 높이고, 엉망인 UI는 유저를 떠나게 할 수 있습니다.
- ✅ 로블록스 스튜디오를 켜고, 익스플로러 창과 프로퍼티스 창을 확인합니다.
00:00 - 00:43
1. 🎮 UI란 무엇일까요? 로블록스 스튜디오 시작하기
- ✅ UI는 유저 인터페이스의 줄임말로, 게임 내에서 사용자가 보고 조작하는 모든 요소를 의미합니다.
- ✅ 잘 만들어진 UI는 게임의 몰입도를 높이고, 엉망인 UI는 유저를 떠나게 할 수 있습니다.
- ✅ 로블록스 스튜디오를 켜고, 익스플로러 창과 프로퍼티스 창을 확인합니다.
00:44 - 01:11
2. ➕ 스크린 GUI와 프레임 추가하기
- ✅ 익스플로러 창에서 StarterGui에 스크린 GUI를 추가합니다.
- ✅ 스크린 GUI 안에 프레임을 추가하여 UI 요소의 기본 박스로 사용합니다.
01:12 - 01:30
3. 🎨 프레임 꾸미기: 색상 변경하기
- ✅ 프레임의 크기를 적절하게 조절합니다.
- ✅ 프로퍼티스 창에서 백그라운드 컬러를 변경하여 프레임의 색상을 설정합니다.
01:31 - 02:34
4. 📝 텍스트 라벨 추가 및 설정: 상점 UI 만들기
- ✅ 프레임 안에 텍스트 라벨을 추가하여 상점 이름을 표시합니다.
- ✅ 텍스트 라벨의 배경을 투명하게 설정하고, 글씨 색깔과 크기를 변경합니다.
- ✅ 텍스트 항목에서 라벨 내용을 '상점'으로 변경합니다.
02:35 - 03:00
5. ❌ 닫기 버튼 추가하기
- ✅ 프레임 안에 텍스트 버튼을 추가하여 닫기 버튼을 만듭니다.
- ✅ 버튼의 크기를 조절하고, 배경색을 빨간색으로 설정합니다.
- ✅ 글씨 색과 크기를 변경하고, 텍스트를 'X'로 입력합니다.
03:01 - 04:16
6. ⚔️ 상품 UI 만들기: 이미지, 이름, 구매 버튼 추가
- ✅ 프레임 안에 또 다른 프레임을 추가하여 상품 UI의 배경을 만듭니다.
- ✅ 이미지 레이블을 추가하여 상품 이미지를 표시합니다.
- ✅ 텍스트 레이블을 추가하여 상품 이름을 표시합니다.
- ✅ 텍스트 버튼을 추가하여 구매 버튼을 만듭니다. 배경색은 초록색으로 설정합니다.
04:17 - 04:46
7. ✨ 상품 UI 복사 및 배치: 상점 UI 완성
- ✅ 컨트롤+W를 눌러 상품 UI 프레임을 복사합니다.
- ✅ 복사된 프레임을 아래쪽으로 내려서 배치합니다.
- ✅ 각 상품 UI의 이미지와 텍스트를 원하는 대로 변경합니다.
04:47 - 05:01
8. 🚀 다음 강좌 예고
- ✅ 다음 강좌에서는 UI를 더 예쁘게 꾸미는 방법에 대해 알아볼 예정입니다.