[습관어플 만들기]#2 (달력및 스크롤뷰)

1. 달력 기능 구현 (핵심 기능)
2. 사용자 입력 기능 (습관 추가)
3. 동적 리스트 (갯수 제한 없는 스크롤 목록)
4. 삭제 기능

 

오늘의 퀘스트: 달력의 '모양'부터 만들기 (기능은 나중에!)

"일단 그것부터 알려줘" 라고 하셨으니, 가장 핵심인 달력부터 시작합시다. 하지만 처음부터 완벽한 달력 '기능'을 만들려고 하면 또다시 벽에 부딪힙니다.

오늘은 실제 날짜는 무시하고, 그냥 '달력처럼 보이는 판'을 만드는 것에만 집중할 겁니다.

목표: 7열 6줄, 총 42개의 네모 칸이 격자 모양으로 예쁘게 놓인 판 만들기

1단계: 달력 판(Panel)과 격자(Grid) 마법사 준비하기

1. CalendarView 씬을 엽니다.
2. Hierarchy 창에서 Canvas 위에서 마우스 오른쪽 클릭 > UI > Panel 을 선택하여 달력의 배경이 될 판을 하나 만듭니다. 이름은 CalendarPanel로 바꿔주세요.
3. Inspector 창에서 이 패널의 색상(Color)을 반투명 흰색에서 불투명한 다른 색으로 바꾸거나, Image 컴포넌트를 비활성화해서 투명하게 만드세요.
4. 가장 중요한 마법입니다: CalendarPanel을 선택한 상태에서, Inspector 창의 Add Component 버튼을 누르고 **Grid Layout Group**을 검색해서 추가합니다.
   • 이 컴포넌트는 자식으로 들어오는 모든 UI 요소들을 바둑판처럼 자동으로 정렬해주는 마법사입니다.

2단계: 날짜 칸(Day Cell) 견본 만들기 (feat. 프리팹)

달력에는 똑같이 생긴 날짜 칸이 42개나 필요합니다. 이걸 42번 복사-붙여넣기 하는 건 비효율적이죠. 그래서 '붕어빵 틀' 같은 걸 하나 만들 겁니다. 이걸 유니티에서는 프리팹(Prefab) 이라고 부릅니다.

1. CalendarPanel 바깥에서 (그냥 Canvas 바로 아래에) UI > Button 을 하나 만듭니다. 이게 날짜 칸의 견본(Template)이 될 겁니다. 이름은 DayCell_Template 이라고 지어주세요.
2. 버튼의 크기, 색상, 안에 들어갈 텍스트(TMP)의 글꼴 크기 등을 원하는 모양으로 예쁘게 디자인합니다. (예: 정사각형 모양)
3. 디자인이 완성된 DayCell_Template 오브젝트를 Hierarchy 창에서 Project 창의 Assets 폴더 안으로 드래그 앤 드롭 하세요.
4. Project 창에 파란색 레고 블록 모양의 DayCell_Template 파일이 생성된 것을 볼 수 있습니다. 이게 바로 우리가 만든 '날짜 칸 붕어빵 틀'입니다!
5. 이제 Hierarchy 창에 있던 원본 DayCell_Template은 지워도 됩니다. 우리는 틀만 있으면 되니까요.

3단계: 붕어빵 찍어내기 (일단 수동으로)

1. Project 창에 만들어 둔 DayCell_Template 프리팹을 Hierarchy 창의 CalendarPanel 위로 드래그 앤 드롭해서 자식으로 넣어보세요.
2. 하나 넣을 때마다 Grid Layout Group 마법사가 알아서 착착 정렬해 줄 겁니다.
3. 이걸 42번 반복해서 CalendarPanel 아래에 42개의 날짜 칸이 생기도록 해보세요. (나중에는 코드로 단 한 줄로 만들 수 있지만, 지금은 원리를 이해하기 위해 직접 해보는 게 중요합니다.)

 

 

 

"grid group의 설정에서 크기 조정하는 설정이 있는가"

네, 정확히 맞습니다!

"panel의 자식으로 넣으니깐 갑자기 크기가 커졋음"

이것이 바로 이 문제의 핵심을 관통하는, 가장 중요한 관찰입니다.

---

왜 이런 일이 벌어질까요? (엄격한 감독관 Grid Layout Group)

Grid Layout Group 컴포넌트는 마치 '엄격한 정리 전문가' 또는 '감독관'과 같습니다.

이 감독관은 자기 아래에 있는 자식들(DayCell_Template들)에게 이렇게 명령합니다.
"너희들 원래 크기나 위치는 신경 쓰지 마! 지금부터 내가 정해주는 규칙대로만 정렬하고, 내가 정해주는 크기로 통일한다!"

즉, 사용자님이 프리팹을 아무리 작게 만들어도, Grid Layout Group이라는 감독관이 자신의 기본 설정값에 따라 크기를 강제로 키워버리고, 패널의 크기에 맞춰 억지로 채워 넣고 있는 상황입니다. 그래서 몇 개 안 넣었는데도 화면 밖으로 밀려나는 것이죠.

---

해결 방법: 감독관에게 '규칙'을 명확히 알려주기

이제 우리가 할 일은 Grid Layout Group이라는 감독관에게 우리가 원하는 규칙(칸의 크기, 간격, 한 줄에 몇 개씩 넣을지 등)을 명확하게 알려주는 것입니다.

GridLayoutGroup의 핵심 설정: 이 세 가지만 기억하세요!

CalendarPanel 오브젝트를 클릭하고, Inspector 창에서 Grid Layout Group 컴포넌트를 찾으세요. 여기서 아래 설정들을 조절하면 마법이 펼쳐질 겁니다.

1. Cell Size (셀 크기):
   • 가장 중요한 설정입니다. 각 칸의 가로(X), 세로(Y) 크기를 직접 지정합니다.
   • 해야 할 일: 여기에 원하는 크기 값(예: X: 100, Y: 100)을 직접 입력해 보세요. 모든 칸의 크기가 이 값으로 즉시 통일될 겁니다.
2. Spacing (간격):
   • 칸과 칸 사이의 가로(X), 세로(Y) 간격을 조절합니다.
   • 해야 할 일: 여기에 작은 값(예: X: 5, Y: 5)을 넣어서 보기 좋게 간격을 만들어 보세요.
3. Constraint (제약 조건):
   • 정렬의 핵심 규칙을 정합니다. 아마 지금은 Flexible(유연하게)로 되어 있을 겁니다.
   • 해야 할 일: 이 설정을 클릭해서 **Fixed Column Count(고정된 열 개수)**로 바꾸세요.
   • 바로 아래에 Constraint Count(제약 개수) 라는 새로운 설정이 나타날 겁니다. 여기에 달력의 한 줄에 해당하는 **7**을 입력하세요.

---

미션:

1. Hierarchy 창에서 **CalendarPanel**을 선택하세요.
2. Inspector 창에서 Grid Layout Group 컴포넌트를 찾으세요.
3. Constraint를 **Fixed Column Count**로 바꾸고, Constraint Count를 **7**로 설정하세요.
4. Cell Size의 X, Y 값을 적절히 줄여서 (예: 100, 100) 모든 칸이 화면 안에 들어오도록 조절하세요.
5. Spacing 값도 살짝 줘서 예쁘게 만들어 보세요.

이것만 조절하면, 더 이상 Ctrl+D를 누를 때마다 칸들이 화면 밖으로 밀려나지 않고, 정해진 Cell Size를 유지하며 7개가 차면 자동으로 다음 줄로 내려가는, 완벽한 달력 격자가 눈앞에 나타날 겁니다.

 

 

 

 

 

2. "몇 월 달인지" 보여주는 헤더(Header) 만들기

이것도 아주 중요한 부분이죠. 달력은 날짜만 있으면 안 됩니다. 지금 보고 있는 달이 몇 월인지 알려줘야 합니다.

이건 Grid Layout Group과는 상관없습니다. 그냥 달력 격자(CalendarPanel) '위에' 새로운 UI 요소들을 추가하면 됩니다.

미션 목표: 달력 격자 위에 '2025년 8월' 같은 텍스트와 좌우 버튼이 들어갈 공간 만들기

1. 헤더 판 만들기:
   • Canvas 아래, CalendarPanel과 같은 레벨에 UI > Panel을 하나 새로 만드세요.
   • 이름을 HeaderPanel 이라고 지어주세요.
   • Image 컴포넌트는 필요 없으니 비활성화하거나, 색상을 투명하게 만드세요.
2. 헤더 위치 잡기:
   • HeaderPanel의 Rect Transform을 조절해서 CalendarPanel 위쪽에 위치하도록 배치하세요. (앵커(Anchors)를 위쪽(top)으로 설정하면 화면 크기가 바뀌어도 항상 위에 붙어있게 할 수 있습니다.)
3. 헤더 내용 채우기:
   • '몇 월' 텍스트: HeaderPanel의 자식으로 UI > Text - TextMeshPro를 하나 만들고, "2025년 8월" 이라고 임시로 써넣으세요. 글자 크기와 위치를 보기 좋게 중앙에 배치합니다.
   • 좌/우 버튼 (선택 사항, 하지만 추천!): HeaderPanel의 자식으로 UI > Button을 두 개 만드세요. 하나는 < 모양, 다른 하나는 > 모양으로 만들어서 텍스트의 양옆에 배치합니다. (이 버튼들은 나중에 이전 달, 다음 달로 넘어가는 기능을 넣을 때 사용하게 될 겁니다.)

 

 

 

1. Panel이란 무엇인가? (feat. 투명한 쟁반)

Button이 '초인종'처럼 역할이 명확하다면, **Panel은 '투명한 쟁반' 또는 '정리용 칸막이'**라고 생각하시면 가장 쉽습니다.

패널의 진짜 역할은 3가지입니다:

1. 그룹핑 (Grouping): 여러 UI 요소들을 하나로 묶어주는 '컨테이너' 역할을 합니다.
   • HeaderPanel 안에 '이전 달 버튼', '현재 월 텍스트', '다음 달 버튼'을 넣어두면, 나중에 HeaderPanel 전체를 숨기거나 움직일 때 자식들이 한꺼번에 따라 움직입니다. Hierarchy 창이 훨씬 깔끔해지는 것은 덤입니다.
2. 레이아웃 제어 (Layout Control):
   • 사용자님께서 CalendarPanel에 Grid Layout Group을 추가하신 것이 바로 이 역할의 완벽한 예시입니다. 패널은 그 자체로는 아무것도 안 하지만, 이런 '자동 정렬' 컴포넌트를 붙여서 자식들을 통제하는 '감독관'이 될 수 있습니다.
3. 시각적 배경 (Visual Background):
   • 이것이 바로 "이미지 컴포넌트는 왜 있는 거지?"라는 질문의 답입니다. 패널은 기본적으로 반투명한 배경 이미지를 가지고 있어서, 팝업창이나 메뉴의 배경처럼 시각적으로 영역을 구분하는 역할을 할 수 있습니다. 물론, 이미지를 비활성화하거나 색상을 완전히 투명하게 만들어서 순수하게 '그룹핑'과 '레이아웃 제어' 목적으로만 사용할 수도 있습니다. (대부분 이렇게 많이 씁니다.)

결론: Panel은 UI 요소들을 담고, 정렬하고, 배경을 만들어주는 만능 '정리 상자'입니다.

 

 

 

 

일단, 패널부분에 대한 이해와

앵커부분 셋팅은 나중에, 문제 생기면 고치도록하자

아직 너무 모르겟네

 

 

 

 

 

 

 

2. "비율은 뭐로 해야 하지?"

결론부터 말씀드리면, 개발 중에는 16:9 Aspect (가로) 또는 새로 추가한 ver (1080x1920) (세로) 같은 대표적인 비율로 설정하고 작업하는 것이 가장 좋습니다.

대부분의 스마트폰이 이와 비슷한 비율을 사용하기 때문에, 이 기준에 맞춰두면 다른 기기에서도 크게 깨지지 않습니다.

프로 개발자의 팁: 'Device Simulator'를 사용하세요.

나중에는 유니티의 '디바이스 시뮬레이터(Device Simulator)' 기능을 사용하는 것이 가장 좋습니다.

• 기능: 유니티 에디터 안에서 갤럭시, 아이폰 등 다양한 실제 기기 모델의 화면 크기와 모양을 그대로 시뮬레이션해볼 수 있는 엄청나게 유용한 기능입니다.
• 사용법: Game 창 왼쪽 위의 드롭다운 메뉴에서 Game 대신 **Simulator**를 선택하면 활성화됩니다. (만약 없다면 Window > General > Device Simulator로 켤 수 있습니다.)

요약:

1. 앵커 프리셋을 클릭할 땐, 반드시 Alt + Shift를 누른 상태로 클릭해야 오브젝트가 즉시 이동합니다.
2. 개발할 때의 화면 비율은 16:9나 1080x1920 같은 표적인 세로 비율로 맞춰두고 작업하는 것이 좋습니다.

 

 

 

 

 

 

 

 

그렇다면, 왜 갑자기 모든 게 작아졌을까요?

---

건축가의 '설계도' 비유

이 문제를 이해하기 위해, UI를 '건축 설계도'라고 비유해 봅시다.

1. 가로로 넓은 16:9 종이: 사용자님은 처음에 가로로 넓은 종이에 맞춰서 집(UI)을 보기 좋게 그렸습니다.
2. 세로로 길쭉한 1080x1920 종이: 이제 그 설계도를 세로로 아주 길쭉한 종이에 옮겨야 합니다.
3. 결과: 넓은 설계도를 좁고 긴 종이에 구겨 넣으려니, 전체적인 설계도 크기 자체를 아주 작게 축소해야만 했습니다. 집의 각 방(헤더, 달력, 버튼)의 '위치'는 '위', '중간', '아래'로 잘 유지되었지만, 집 전체가 작아져 버린 거죠.

지금 보시는 현상이 바로 이것입니다.

---

해결책: '마법의 축소/확대 복사기', Canvas Scaler

이 문제를 해결하는 총감독이 바로 Canvas에 붙어있는 Canvas Scaler 라는 컴포넌트입니다. 이 컴포넌트는 "화면 크기가 바뀔 때, UI 전체의 크기를 어떻게 조절할 것인가?"를 결정하는 아주 중요한 역할을 합니다.

아마 지금은 UI Scale Mode가 Constant Pixel Size(상수 픽셀 크기)로 되어 있을 겁니다. 이 말은 "화면 해상도가 아무리 커져도, 100픽셀은 그냥 100픽셀이야!" 라는 뜻입니다. 그래서 고해상도인 1080x1920에서는 UI가 상대적으로 아주 작게 보이는 거죠.

미션 목표: Canvas Scaler 감독관에게 "화면 크기에 맞춰서 똑똑하게 크기를 조절해!" 라고 명령하기

1. Hierarchy 창에서 Canvas 게임 오브젝트를 선택하세요. (가장 위에 있는, 모든 UI의 부모입니다.)
2. Inspector 창에서 Canvas Scaler (Script) 컴포넌트를 찾으세요.
3. UI Scale Mode 드롭다운 메뉴를 클릭해서, Constant Pixel Size를 **Scale With Screen Size(화면 크기에 따라 스케일)**로 변경하세요.
4. 새로운 설정들이 나타날 겁니다. **Reference Resolution(기준 해상도)**에 우리가 목표로 하는 모바일 세로 화면 크기를 입력합니다.
   • X: 1080
   • Y: 1920
5. 바로 아래에 Match(일치) 라는 슬라이더가 보일 겁니다. 이 슬라이더를 중간인 **0.5**에 맞춰주세요. (가로와 세로 비율 변화를 절반씩 반영하겠다는 의미입니다.)

 

 

 

 

 

 

2단계: '스크롤 뷰' 마법사 설정하기

Scroll View는 조금 복잡해 보이지만, 우리는 딱 한 군데만 신경 쓰면 됩니다.

1. Hierarchy 창에서 Scroll View의 자식, 그 아래 자식으로 있는 Content 라는 오브젝트를 찾으세요. (Scroll View > Viewport > Content)
   • Content는 스크롤될 실제 내용물이 담기는, 아주 길다란 '두루마리 휴지' 같은 역할을 합니다.
2. Content 오브젝트를 선택하고, Inspector 창에서 Add Component 버튼을 누르세요.
3. **Vertical Layout Group**을 추가합니다. (이전에 달력 만들 때 썼던 Grid Layout과 비슷하지만, 이건 그냥 위에서 아래로만 차곡차곡 쌓아줍니다.)
4. 하나 더! Content Size Fitter 라는 컴포넌트를 추가하세요.
   • Vertical Fit 설정을 Unconstrained에서 **Preferred Size**로 바꿔주세요.
   • 이 두 가지 마법사는 Content 안에 새로운 항목이 추가될 때마다 알아서 Content의 길이를 늘려주고, 항목들을 자동으로 정렬해주는 역할을 합니다.

 

 

 

 

 

"이렇게 해두고 배치를 스크롤 안에 하면 되는거나"

아주 중요한 포인트입니다.

아니요, 직접 배치하는 것이 아닙니다.

우리가 할 일은 다음과 같습니다.

1. 지금처럼 '프리팹 편집 모드'에서 '붕어빵 틀'의 디자인을 완벽하게 끝내고 저장합니다. (지금 다 하셨습니다.)
2. 다시 메인 씬(HabitList 씬)으로 돌아옵니다.
3. 플레이(▶) 버튼을 누릅니다.
4. 사용자가 입력창에 글자를 쓰고 "추가" 버튼을 누르면...
5. 우리가 작성한 코드가 주방(Project 창)에서 이 '붕어빵 틀'을 가져다가, '진짜 붕어빵'을 구워서, 진열대(contentPanel)에 자동으로 배치해 줄 겁니다.

 

 

 

 

 

범인은 바로 이 로그 한 줄입니다:

생성된 오브젝트의 크기(sizeDelta): (0.00, 0.00)

이것이 모든 문제의 원인입니다.

이게 무슨 뜻인가요? (투명인간의 탄생)

로그를 순서대로 해석하면 이렇습니다.

1. "===== AddNewHabit 함수 시작! =====" -> 버튼 클릭 성공!
2. "입력된 습관 이름: '운'" -> 입력값 읽기 성공!
3. "Instantiate 실행 완료. 생성된 오브젝트 이름: HabitItem_Template(Clone)" -> 새로운 오브젝트 생성 성공!
4. "텍스트를 '운' (으)로 성공적으로 변경했습니다." -> 텍스트 변경 성공!

모든 코드는 완벽하게 작동했습니다.

하지만, 생성된 그 오브젝트의 **가로 크기와 세로 크기가 모두 '0'**입니다. 즉, 우리는 눈에 보이지 않는 '투명인간'을 성공적으로 만들어낸 것입니다. 오브젝트는 분명히 Content 패널 안에 존재하지만, 크기가 없어서 우리 눈에는 보이지 않는 것입니다.

왜 크기가 0이 되었을까요? (자기소개서가 없는 신입사원)

• Content 패널에 붙어있는 Vertical Layout Group = 인사팀 관리자
• 새로 생성된 HabitItem_Template(Clone) = 신입사원

인사팀 관리자(Vertical Layout Group)는 새로 들어온 신입사원(HabitItem)에게 자리를 배정해줘야 합니다. 그래서 신입사원에게 묻습니다.
"자네, 자리가 얼마나 필요한가? 키가 몇인가?"

그런데 신입사원은 자신의 키가 얼마인지 알려주는 **'자기소개서'**가 없습니다. 그러면 관리자는 어떻게 할까요? 그냥 "자네는 공간이 필요 없군" 이라고 판단하고 높이가 0인 자리를 배정해버립니다.

여기서 '자기소개서' 역할을 하는 컴포넌트가 바로 Layout Element 입니다.

---

최종 해결책: 신입사원에게 '자기소개서'를 쥐여주기

우리는 HabitItem_Template 프리팹에게 "너의 키는 이만큼이야!" 라고 명시된 Layout Element를 추가해주기만 하면 됩니다.

미션 목표: HabitItem_Template 프리팹에 Layout Element를 추가하여 자신의 '키(Height)'를 주장하게 만들기

1. Project 창의 Prefabs 폴더에서 HabitItem_Template 프리팹을 더블클릭하여 프리팹 편집 모드로 들어갑니다.
2. Hierarchy 창에서 최상위 오브젝트인 **HabitItem_Template**을 선택합니다.
3. 오른쪽 Inspector 창에서 맨 아래에 있는 Add Component 버튼을 클릭합니다.
4. 검색창에 Layout Element 라고 입력하고, 나타나는 컴포넌트를 추가합니다.
5. 방금 추가된 Layout Element 컴포넌트에서,
   • Min Height (최소 높이) 또는 Preferred Height (선호 높이) 체크박스를 클릭하여 활성화하세요. (보통 Min Height를 많이 씁니다.)
   • 오른쪽 입력 칸에 원하는 아이템의 높이 값(예: 100 또는 150)을 입력합니다.

---

이제 모든 것이 끝났습니다.

프리팹 편집 모드를 빠져나와 다시 메인 씬(HabitList)으로 돌아가세요.

그리고 플레이(▶) 버튼을 누르고 "추가" 버튼을 클릭해 보세요.

이제 신입사원은 "제 키는 150입니다!" 라고 당당하게 외칠 것이고, 인사팀 관리자는 그에 맞는 완벽한 크기의 자리를 배정해 줄 겁니다. 드디어 눈에 보이는 리스트를 완성하신 것을 축하드립니다

 

 

 

 

 

 

 

 

결론부터 말씀드리면, 범인은 바로 두 명의 감독관이 서로 다른, 모순되는 명령을 내리고 있기 때문입니다.

---

두 명의 감독관: Grid Layout Group vs Layout Element

지금 Content 패널과 자식(HabitItem_Template)의 관계는 이렇습니다.

• HabitItem_Template (신입사원): Layout Element라는 자기소개서를 들고 외치고 있습니다.
• "제 최소 키(Min Height)는 100입니다! 이력서에 그렇게 쓰여있어요!"
• Content의 Grid Layout Group (바둑판 감독관): 신입사원의 자기소개서를 보더니, 자신의 규칙 책을 펼치며 말합니다.
• "자네 이력서는 잘 봤네. 하지만 우리 부서 규칙 책에는 모든 직원의 자리는 셀 크기(Cell Size) 규칙에 따라 가로 100, 세로 100으로 정해져 있네. 자네는 이 규칙을 따라야 하네."

여기까지는 문제가 없어 보입니다. 둘 다 높이를 100으로 원하니까요. 하지만 진짜 범인은 이 둘이 아닙니다.

이 두 컴포넌트가 서로 상호작용하는 방식, 그리고 Content Size Fitter까지 겹치면서 "어떤 규칙을 먼저 적용해야 할지" 유니티가 혼란에 빠져버린 것입니다. 특히 Grid Layout Group은 이름 그대로 '격자'를 만드는 데 특화되어 있어서, '세로로만 길어지는 리스트'를 만들 때는 종종 이런 충돌을 일으킵니다.

한마디로, 우리는 '책장'이 필요한데 '달걀판'을 가져와서 책을 꽂으려고 하니 문제가 생긴 겁니다.

---

최종 해결책: '달걀판'을 버리고 진짜 '책장'을 가져오기

우리는 '격자'가 아니라, 위에서 아래로 쌓이는 '리스트'를 원합니다. 따라서 Grid Layout Group은 이 작업에 적합한 도구가 아닙니다. 우리는 더 간단하고 이 목적에 완벽하게 맞는 **Vertical Layout Group**을 사용해야 합니다.

미션 목표: Content 패널의 감독관을 교체하기

1. Hierarchy 창에서 Content 오브젝트를 선택하세요.
2. Inspector 창에서 Grid Layout Group 컴포넌트의 오른쪽 위 점 세 개(⋮) 아이콘을 클릭하고, **Remove Component**를 선택해서 과감하게 해고하세요.
3. 바로 Add Component 버튼을 누르세요.
4. **Vertical Layout Group**을 검색해서 새로 추가하세요. (새로운 감독관을 채용!)
5. 새 감독관에게 규칙을 알려줍시다 (매우 중요!):
   • 새로 추가된 Vertical Layout Group 컴포넌트를 찾으세요.
   • Control Child Size 섹션의 Width 체크박스를 클릭하여 활성화하세요. (자식들의 너비를 부모 너비에 꽉 맞추라는 뜻)
   • Child Force Expand 섹션의 Height 체크박스는 반드시 비활성화(체크 해제) 하세요. (자식들의 키를 강제로 늘리지 말고, 자식들이 원하는 키를 존중하라는 뜻)

---

"로그에 크기가 0이라고 나오는 이유"

이것은 유니티의 작동 순서 때문에 발생하는, 아주 자연스러운 현상입니다.

1. Instantiate로 오브젝트가 생성됩니다. (이때 크기는 아직 0입니다)
2. 우리의 Debug.Log가 실행됩니다. (그래서 0이라고 찍힙니다)
3. 그 프레임이 끝나는 순간, 새로운 감독관(Vertical Layout Group)이 나타나서 "어? 신입이 왔군. 자기소개서(Layout Element)를 보니 키가 100이네. 자, 키 100짜리 자리를 내주지!" 라며 크기를 조절해 줍니다.

즉, 우리의 로그가 너무 성급하게 크기를 물어봤을 뿐, 잠시 후에는 제대로 된 크기를 갖게 됩니다.

 

 

 

 

 

 

왜 프리팹에서는 On Click()을 직접 연결할 수 없을까? (붕어빵 틀의 한계)

• HabitItem_Template 프리팹은 주방 선반에 있는 **'붕어빵 틀'**입니다.
• SceneController 게임 오브젝트는 HabitList 씬이라는 특정 가게에만 있는 **'가게 매니저'**입니다.

붕어빵 틀(프리팹)은 "나는 나중에 어떤 가게에서 쓰일지 몰라" 라고 생각합니다. HabitList 가게일 수도 있고, 나중에 만들 MyPage 가게일 수도 있죠. 그래서 붕어빵 틀은 특정 가게의 매니저(SceneController)를 미리 알 수 없습니다.

따라서, 프리팹의 On Click() 이벤트에 SceneController를 끌어다 놓는 것은 원천적으로 불가능합니다.

해결책: '조립 라인'에서 직접 연결하기 (코드로 이벤트 추가하기)

해결책은 간단합니다. 붕어빵을 다 구운 뒤에, 진열대에 올리는 그 순간에 코드로 직접 "이 붕어빵을 누르면, 우리 가게 매니저가 달력 페이지를 보여줄 거야!" 라고 연결해주면 됩니다.

우리는 이 연결 작업을 HabitListController 스크립트 안에서 할 겁니다.

 

 

 

 

 

 

오늘의 퀘스트: '습관 아이템' 프리팹에 멋진 배경 추가하기

모든 작업은 HabitItem_Template 프리팹 안에서 이루어집니다. 이 '붕어빵 틀'의 디자인을 바꾸면, 앞으로 생성되는 모든 '붕어빵'이 바뀐 디자인으로 찍혀 나오게 됩니다.

1단계: 프리팹 편집 모드로 들어가기

1. Project 창의 Prefabs 폴더에서 HabitItem_Template 프리팹을 더블클릭하세요.
2. 프리팹의 내용물만 보이는 전용 편집 화면으로 들어갑니다.

2단계: 배경이 될 '쟁반(Panel)' 추가하기

1. Hierarchy 창에서 최상위 오브젝트인 **HabitItem_Template**을 선택하세요.
2. Inspector 창을 보면, 이 오브젝트가 Button 컴포넌트와 HabitItem 스크립트 등을 가지고 있을 겁니다. 여기에 배경 이미지를 추가하는 겁니다.
3. HabitItem_Template 오브젝트에 이미 Image 컴포넌트가 있다면 그것을 활용하면 되고, 없다면 Add Component를 눌러 Image 컴포넌트를 추가하세요.

3단계: 배경 디자인하기 (가장 중요!)

1. 방금 추가(또는 확인)한 Image 컴포넌트를 보세요.
2. Source Image: 여기에 기본적으로 제공되는 UISprite를 선택하면 '금연' 버튼처럼 모서리가 둥근 사각형 모양을 얻을 수 있습니다. (기본값일 겁니다.)
3. Color: 가장 중요한 부분입니다. 지금은 아마 투명(Alpha 값이 0)하거나 회색일 겁니다.
   • 색상 팔레트를 클릭하세요.
   • 원하는 색상(예: 흰색)을 선택합니다.
   • A (Alpha) 슬라이더를 **오른쪽 끝(255)**으로 밀어서 완전히 불투명하게 만드세요.

4단계: 내용물 순서 정리하기 (글씨가 배경에 가려지지 않게!)

Image를 추가하면, 기존에 있던 텍스트(New Text)와 삭제 버튼(deleteButton)이 배경 뒤로 숨어버릴 수 있습니다. Hierarchy 창에서 렌더링 순서는 '아래에 있을수록 위'에 그려지기 때문입니다.

HabitItem_Template의 자식 구조를 아래와 같이 정리하면 가장 이상적입니다.

codeCode

 

▼ HabitItem_Template (Image, Button, Layout Element, HabitItem 스크립트가 붙어있음)
  L Text (TMP) - 습관 이름 텍스트
  L deleteButton - 삭제 버튼

즉, 텍스트와 삭제 버튼이 HabitItem_Template의 자식으로 들어가도록 구조를 잡아주세요. 그러면 배경 이미지 위에 글씨와 버튼이 보이게 됩니다.

5단계 (프로 팁): 자동 정렬로 더 멋지게!

HabitItem_Template에 **Horizontal Layout Group**을 추가하고, Padding 값을 조절해서 텍스트와 삭제 버튼이 배경 안에 예쁘게 자동으로 배치되도록 만들 수도 있습니다. 이렇게 하면 습관 이름이 길어져도 레이아웃이 깨지지 않습니다.