오늘 한 일
퀘스트를 만들기 위해 Canvas UI를 만들었습니다
QuestCanvas
└── Root
├── Dim (Image)
└── PanelFrame
├── LeftPanel (Image)
│ ├── LeftHeader
│ └── CategoryScroll (Scroll View)
│ └── Viewport
│ └── Content (VLG + CSF)
│ ├── CategoryBlock_Main
│ ├── CategoryBlock_Tutorial
│ └── CategoryBlock_Growth
└── RightPanel (Image)
├── DetailHeader (QuestTitle)
├── DetailScroll (Scroll View)
└── RewardBar (RewardGrid)
만든 순서입니다.
- QuestCanvas 만들기
Create > UI > Canvas 생성 → 이름: QuestCanvas
Canvas 아래 Create Empty → Root
Root RectTransform
Anchor Min: (0,0)
Anchor Max: (1,1)
Left/Right/Top/Bottom: 0
Root는 “전체 화면 100%”로 잡는 컨테이너
2) 배경(블러/암막) 레이어
핵심이 “뒤는 흐리고, UI는 선명”이니까 레이어를 나눔
Root 아래에:
Dim (어두운 반투명)
PanelFrame (실제 UI 패널들)
(1) Dim
UI > Image 생성 → 이름: Dim
RectTransform: 화면 전체(Stretch)
Color: 검정 + Alpha 120~170 정도(0.5~0.7 느낌)
Raycast Target: On (뒤 클릭 막기)
블러는 나중에 URP/카메라블러로 처리하더라도, 일단 Dim만 있어도 느낌이 삼.
3) 실제 UI 패널 프레임 만들기
Root 아래 Create Empty → PanelFrame
PanelFrame RectTransform
Anchor Min: (0,0)
Anchor Max: (1,1)
offsets 0
PanelFrame 안에 2개:
LeftPanel
RightPanel
4) LeftPanel 만들기 (퀘스트 리스트)
PanelFrame 아래:
UI > Image → LeftPanel
RectTransform(추천 값 / 명조처럼 왼쪽 좁고 길게)
Anchor Min: (0,0)
Anchor Max: (0,1)
Pivot: (0,0.5)
Width: 520 (원하면 480~600)
Left: 60
Top/Bottom: 80
LeftPanel Image
Color: 어두운 회색 + 알파(예: #0B0D12, A 180)
(옵션) Outline/Shadow: 살짝
LeftPanel 아래에:
LeftHeader (상단 제목/아이콘 영역)
CategoryScroll (카테고리+퀘스트 목록 스크롤)
(1) LeftHeader
LeftPanel 아래 UI > Image → LeftHeader
Anchor: Top Stretch
Height: 90
Top: 0
LeftHeader 안:
TMP Text → “임무”
(옵션) 아이콘 Image
(2) CategoryScroll (스크롤 영역)
LeftPanel 아래 UI > Scroll View 생성 → 이름: CategoryScroll
CategoryScroll RectTransform:
Anchor Min: (0,0)
Anchor Max: (1,1)
Top: 90
Bottom: 0
Left/Right: 0
Scroll View 내부 기본 구조가 생김:
Viewport
Content
여기서 Content가 핵심.
Content 설정
Content 오브젝트에:
Vertical Layout Group
Child Alignment: Upper Left
Spacing: 12~16
Child Control Height: 0
Child Control Width: 0
Child Force Expand Height : x
Child Force Expand Width: 0
Content Size Fitter
Vertical Fit: Preferred Size
이렇게 해두면 카테고리 블록이 늘어나면서 스크롤이 자연스럽게 됨.
5) RightPanel 만들기 (퀘스트 상세)
PanelFrame 아래:
UI > Image → 이름: RightPanel
RectTransform (오른쪽 큰 패널)
Anchor Min: (0,0)
Anchor Max: (1,1)
Left: 620 (LeftPanel+간격 고려)
Right: 60
Top: 80
Bottom: 80
RightPanel 아래에:
DetailHeader
DetailBody
RewardBar
(1) DetailHeader (제목 영역)
RightPanel 아래 Create Empty → DetailHeader
Anchor: Top Stretch
Height: 100
DetailHeader 안:
TMP Text → QuestTitle
폰트 크게(36~42)
(옵션) 작은 라인 Image (Divider)
(2) DetailBody (설명 스크롤)
RightPanel 아래 UI > Scroll View → DetailScroll
RectTransform:
Anchor Min: (0,0)
Anchor Max: (1,1)
Top: 110
Bottom: 160 (아래 RewardBar 공간 확보)
DetailScroll 내부 Content에:
TMP Text → QuestDescription
Content Size Fitter(Vertical Preferred)
Layout Element(옵션)
퀘스트 설명이 길어도 자연스럽게 스크롤 됨.
(3) RewardBar (보상 영역)
RightPanel 아래 UI > Image → RewardBar
Anchor: Bottom Stretch
Height: 140
Bottom: 0
RewardBar 안:
TMP Text → “임무 완료 시 획득 가능”
Create Empty → RewardGrid
RewardGrid에:
Grid Layout Group
Cell Size: (90,90) 또는 (100,100)
Spacing: (12,12)
Constraint: Fixed Row Count (1) or Fixed Column Count (6~8)
