2교시의 도착점
교수자의 한 번의 완성 시연을 통해 3교시 학생 실습의 순서, 설정값과 실패 지점을 미리 봅니다.
- 01
Remove Background, Inpaint, Recolor, Pixelate, Upscale를 문제에 맞춰 선택합니다.
- 02
4×1 Sprite sheet를 같은 셀, 기준선, 피벗으로 정규화합니다.
- 03
Unity 6.6에서 Sprite Mode Multiple, 128 PPU, Grid slicing을 설정합니다.
- 04
Animator와 uGUI에 연결하고 기존 게임 루프를 보존한 채 화면에서 검증합니다.
60분의 설명과 시연 흐름
한 캐릭터 후보를 네 프레임 걷기와 UI 패널로 확장해, 기존 게임 장면의 placeholder를 교체하는 지점까지 보여 줍니다.
한 문제, 한 수정, 한 번의 게임 검증
Demonstration / professor-led
- 계약과 원본 고정
Week09_selected 원본을 복제하고 파일명, 목표 셀과 사용 위치를 먼저 적습니다.
- 후처리 판단
배경, 국소 결함, 팔레트, 픽셀 질감, 크기 문제를 구분하고 필요한 도구만 적용합니다.
- 4프레임 정규화
네 프레임을 128×128 셀에 놓고 발 기준선, 피벗과 실루엣 부피를 맞춥니다.
- Import와 slicing
Sprite Mode Multiple, 128 PPU, Filter와 Alpha를 정하고 128×128 Grid로 분할합니다.
- Animator와 UI 연결
4프레임 Clip을 8 Samples로 반복하고 Sprite와 Texture2D를 올바른 UI 컴포넌트에 배치합니다.
- 게임 안 검증
실제 Game View에서 떨림, 역할 가독성, 패널 왜곡과 기존 루프의 회귀를 확인합니다.
- 회수와 3교시 인계
저장할 세 이미지, 제작 로그와 여덟 테스트를 다시 읽습니다.
파이프라인은 다음 단계의 입력을 만드는 일입니다
각 단계는 목적과 통과 조건이 있습니다. 앞 단계가 끝나지 않은 채 뒤로 가면 Unity 설정으로 이미지 결함을 숨기려 하게 됩니다.
- 01 / BRIEF규격
역할, 시점, 셀, 팔레트, 파일명과 권리를 잠급니다.
- 02 / SELECT선택
필요한 후보만 남기고 원본을 별도로 보존합니다.
- 03 / REPAIR후처리
문제가 있는 배경, 영역, 색, 크기만 수정합니다.
- 04 / IMPORT정규화
셀, 피벗, PPU, 분할, Clip을 같은 규칙으로 묶습니다.
- 05 / VERIFY검증
게임 크기와 기존 루프에서 결과를 확인하고 기록합니다.
효과 이름이 아니라 관찰한 문제로 선택합니다
모든 도구를 순서대로 적용하지 않습니다. 아래 조건에 해당할 때만 한 번 적용하고 전후를 같은 크기로 비교합니다.
| 도구 | 사용할 문제 | 확인할 결과 | 주의할 점 |
|---|---|---|---|
| Remove Background | 독립 Sprite 뒤에 불필요한 배경이 남음 | 외곽이 잘리지 않고 투명 영역에 잔여물, halo가 없음 | UI 배경, 패널처럼 배경 자체가 자산이면 제거하지 않음 |
| Inpaint | 손, 얼굴, 소품, 모서리의 국소 결함 | 수정 부위가 주변 형태, 빛, 외곽선과 자연스럽게 이어짐 | 전체 구도를 바꾸지 말고 작은 mask로 시작 |
| Recolor | 9주차 팔레트와 강조색 역할이 어긋남 | 다섯 색의 관계와 명도 대비가 여러 에셋에서 유지됨 | 역할 구분에 필요한 위험, 목표 색을 같게 만들지 않음 |
| Pixelate | 프로젝트가 의도한 픽셀 질감과 화면 밀도가 다름 | 최종 사용 크기에서 픽셀 단위와 외곽선 두께가 일정함 | 여러 번 적용하지 않고 최종 크기 근처에서 한 번 수행 |
| Upscale | 실제 사용 크기나 국소 수정을 위한 픽셀이 부족함 | 새로운 halo, 노이즈 없이 필요한 크기를 확보함 | 확대는 품질 점수가 아니며 마지막에 다시 목표 크기로 확인 |
수업 표준은 128px 네 칸입니다
현재 Sprite Generator는 animation-ready Sprite sheet를 만들 수 있고 공식 안내의 현재 예시는 4×4, 16프레임입니다. 이번 수업은 그중 사용할 네 프레임을 선택하거나 직접 만든 네 장을 4×1 표준으로 정규화합니다.
Player_Walk_4x1.png, 전체 512×128px, 프레임당 128×128px, 투명 배경, 네 프레임, 발 기준선과 Bottom Center 피벗 공유
- 01
원본을 복제합니다
Week09_selected는 남겨 두고Player_Walk_source와Player_Walk_4x1을 구분합니다.CHECK원본을 다시 열 수 있고 최종 sheet와 파일명이 다릅니다. - 02
프레임을 같은 셀에 놓습니다
각 프레임의 캔버스를 128×128로 맞추고 캐릭터의 발을 같은 수평 가이드에 정렬합니다.
CHECK네 셀의 크기, 바닥 여백과 중심선이 같습니다. - 03
실루엣을 빠르게 넘겨 봅니다
머리, 몸, 대표 소품의 큰 부피가 유지되는지 onion skin 또는 빠른 frame preview로 확인합니다.
CHECK동작은 변하지만 몸집과 장비의 정체성은 갑자기 바뀌지 않습니다. - 04
RGBA PNG로 저장합니다
투명 영역을 유지하고 실제 이미지가 512×128인지 파일 정보에서 다시 확인합니다.
CHECK체커보드 배경에서 잘린 외곽과 흰 halo가 없습니다.
파일을 가져오는 순간 해석 규칙을 적습니다
이미지는 그대로지만 import 설정에 따라 Unity 안의 크기, 가장자리, 분할과 메모리 사용이 달라집니다.
- Texture Type
- Sprite (2D and UI)
- Sprite Mode
- Multiple
- Pixels Per Unit
- 128
- Mesh Type
- Full Rect
- Alpha Is Transparency
- On
- Filter Mode
- Point, 픽셀 아트 / Bilinear, 부드러운 아트
- Compression
- 수업 품질 검사에서는 None, 실제 배포는 target별 재검토
- Read/Write
- Script가 pixel data를 읽지 않으면 Off
- Slice
- Grid By Cell Size
- Pixel Size
- X 128, Y 128
- Pivot
- Bottom Center
- 결과
- child Sprite 정확히 4개
- 파일
- Interactables_3x1.png
- 전체 크기
- 384×128px
- Slice
- 128×128 Grid
- 결과
- Collectible, Hazard, Goal 3개
설정값을 입력했어도 Apply 전에는 import 결과가 바뀌지 않습니다. Project 창의 펼침 화살표 아래에 Player 4개, Interactables 3개가 보이는지 확인합니다.
분할된 네 장을 하나의 반복으로 묶습니다
새로운 움직임 시스템을 만들지 않습니다. 6주차의 Animator와 이동 조건은 보존하고, Sprite frame과 Clip만 교체해 회귀 범위를 줄입니다.
Animation 창에서 먼저 재생
발 기준선, 프레임 순서, 갑작스러운 scale 변화와 빈 프레임을 짧게 확인합니다.
움직이며 실제 크기로 확인
카메라와 배경 안에서 실루엣이 읽히는지, 방향 전환과 충돌 중 기존 기능이 유지되는지 확인합니다.
UI의 기능을 먼저 만들고 그림을 교체합니다
버튼과 패널의 hierarchy, anchor와 text 대비가 작동하는 상태에서 시각 자산을 바꿉니다. 예쁜 이미지를 먼저 놓고 기능을 끼워 맞추지 않습니다.
아이콘과 늘어나는 패널
Sprite로 import한 아이콘은 Image에 넣습니다. 모서리를 보존하며 늘려야 하는 패널은 Border를 정의하고 Image Type을 Sliced로 사용합니다.
분할하지 않는 배경과 임시 화면
한 장의 Texture2D를 그대로 표시할 때 RawImage를 사용할 수 있습니다. 비율이 바뀌면 왜곡되므로 aspect와 anchor를 함께 확인합니다.
- 파일
- UI_Panel_512x256.png
- 핵심
- 가운데는 텍스트를 위한 조용한 공간
- 모서리
- 장식이 stretch 영역에 들어가지 않음
- 대비
- 텍스트와 배경이 실제 Game View에서 읽힘
- 보존
- Canvas, Button On Click, Text, anchor
- 교체
- Image Source Image 또는 RawImage Texture
- 확인
- 16:9와 좁은 Game View 두 비율
- 회귀
- Start, Result, Restart 흐름
결과 옆에 재현 가능한 제작 경로를 둡니다
UnityAI metadata가 있더라도 수업 로그를 별도로 남깁니다. 서비스 밖에서 한 직접 수정과 게임 안 테스트까지 한 파일에서 이어져야 합니다.
# Week 10 AI Asset Log
## Asset
- date / week:
- purpose in game:
- target file and pixel specification:
## Production
- tool / model or manual method:
- prompt or operation:
- reference source / permission / role:
- output kept and output rejected:
## Human edits
- edited area:
- problem observed:
- change made and reason:
## Unity verification
- import / slicing / pivot settings:
- Game View test:
- remaining limitation:없는 항목은 비워 두지 말고 “없음” 또는 “수작업 경로”라고 적습니다.
3교시를 시작하기 전 네 가지 예측
먼저 문제의 층과 검사 위치를 말한 뒤 펼쳐 확인합니다.
Q1. 투명 Sprite 가장자리에 흰 선이 보이면 Unity scale부터 바꿔야 할까?
먼저 원본의 반투명 halo와 Remove Background 결과를 100% 확대에서 확인합니다. 그다음 Alpha Is Transparency와 Filter를 확인합니다. Transform scale은 경계 결함을 고치는 도구가 아닙니다.
Q2. 512×128 sheet를 네 장으로 나누려면 어떤 Slice를 선택하는가?
Sprite Mode를 Multiple로 하고 Sprite Editor에서 Grid By Cell Size, X 128, Y 128을 사용합니다. 결과 child Sprite가 정확히 네 개인지 확인합니다.
Q3. 캐릭터는 안정적이지만 UI 패널 모서리가 늘어나면 어디를 고치는가?
Image를 사용한다면 Sprite Editor의 Border와 Image Type Sliced를 확인합니다. RawImage라면 텍스처 전체가 늘어나므로 비율을 유지하거나 9-slice 가능한 Image 구조로 바꿉니다.
Q4. 새 아트 연결 뒤 수집과 재시작이 실패하면 이미지를 다시 생성해야 하는가?
아닙니다. SpriteRenderer, Animator와 UI source만 교체했는지 확인하고, Collider, Script, Button On Click, Prefab 참조가 함께 바뀌지 않았는지 회귀 테스트합니다.
국소 결함은 전체 재생성보다 작은 mask의 ______부터 검토합니다.
4×1 sheet는 Sprite Mode ______와 128×128 Grid로 나눕니다.
새 에셋 통합 뒤에는 화면 품질과 기존 게임 ______을 함께 검사합니다.
시연에 사용한 Unity 공식 자료
메뉴 이름이 다르면 현재 설치된 Unity 6.6과 package의 공식 문서를 우선합니다. Unity AI가 보이지 않아도 같은 규격의 수작업 경로로 실습할 수 있습니다.
- Unity AI Sprite Generator 안내 ↗Remove Background, Upscale, Pixelate, Recolor, Inpaint와 Sprite sheet 흐름
- Unity AI UI workflow 안내 ↗Sprite Generator와 Texture2D Generator의 역할, uGUI 우선 구성
- Unity 6.6 Sprite Import Settings ↗Multiple, PPU, Mesh, Alpha, Filter와 Read/Write
- Unity 6.6 Sprite Editor ↗Automatic, Grid By Cell Size와 Grid By Cell Count slicing
- Unity 6.6 Animation overview ↗Animation Clip과 Animator의 역할