화면 흐름 설계부터 UI 리디자인·Unity 적용까지 맡았습니다.
유닛 배치·합성으로 용사 웨이브를 막는 그리드 디펜스 로그라이크입니다. 로비·성장·전투 화면에 팀의 게임 데이터를 연결하고, UI 입력 오류와 표시 문제를 수정했습니다.
UI 구현에 앞서 로비·성장 메뉴·전투 준비·결과 화면의 구성과 비율, 필요한 기능을 Figma 프레임으로 정리했습니다. 버튼을 눌렀을 때 화면이 이동하거나 팝업이 열리고, 이전 화면으로 돌아오는 경로는 프로토타입으로 연결했습니다.
이를 팀에 공유해 전체 흐름을 설명하고 피드백을 받았으며, 이후 UI를 제작하고 게임에 적용하는 기준으로 삼았습니다.
특성·스킬 세팅·도감·설정은 로비 위에서 열고 닫는 팝업으로, 전투 준비는 별도 화면으로 이동하도록 구분했습니다.
준비 화면의 전투 진입과 증강·승패 결과의 전환을 정리했습니다. 결과에는 시간·처치 수·배치 수·경험치와 로비 복귀 버튼을 배치했습니다.
로비 흐름 프로토타입을 준비하고 있습니다.
화면 전환을 확인하는 초기 프로토타입으로, 예시 수치와 미정 화면이 포함되어 있습니다. 최종 디자인과 실제 게임 동작은 다음 Unity 구현 사례에서 확인할 수 있습니다. 작은 화면에서는 ‘크게 재생’을 이용해 주세요.
초기에는 마왕군을 조종해 용사군을 막는 다크 판타지 디펜스 기획에 맞춰, 어두운 색감과 금속 장식 중심으로 UI를 구성했습니다. 기성 UI 에셋을 조합할 때의 어색함을 줄이기 위해 AI 이미지 생성으로 시안을 만들고 필요한 부분을 다듬었습니다.
팀은 가용한 유닛 에셋으로 개발을 진행했고, 실제 캐릭터와 UI를 함께 보니 표현 방식의 차이가 드러났습니다. 팀원과 멘토에게서 정보 가독성과 시선 흐름에 대한 피드백도 받았습니다.
여러 방향의 시안을 팀에 공유하며 중세·마왕군의 분위기를 유지하면서 실제 에셋과 어우러지는 것을 기준으로 잡았습니다. 장식과 텍스처의 밀도를 조정하고, 제목·설명·주요 행동을 구분했습니다.
로비 기사 삽화 대신 실제 픽셀 캐릭터를 보여주고, 난이도 이름·캐릭터·설명의 위치를 구분했습니다.
전투 전장과 정보 영역을 나누고, 상단 진행 정보와 하단 스킬 HUD의 표현을 정리했습니다.
도감 진영 표시와 유닛 카드의 프레임·제목 규칙을 맞추고, 실제 캐릭터를 같은 구획 안에서 비교하도록 구성했습니다.
스킬 세팅 보유 목록·장착 슬롯·상세 설명을 구분하고, 공통 프레임과 제목 표현을 적용했습니다.
업적 달성 현황과 업적 카드의 정보 위계를 구분하고, 공통 프레임·아이콘·진행 바의 표현을 정리했습니다.
시안에서는 괜찮던 리소스도 개별 Sprite로 배치하고 늘리는 과정에서 경계가 어긋났습니다. 화면을 확대해 증상을 확인하고, 이미지 자체와 표시 구조 중 어디에서 생긴 문제인지 구분해 수정했습니다.
말풍선의 테두리를 쉽게 교체하려고 배경·프레임·꼬리를 나눴지만, 방향과 크기가 바뀔 때 조각의 경계가 어긋나 배경이 밖으로 드러났습니다. 리소스 교체 편의보다 경계를 맞추는 부담이 커져 표시 구조를 바꿨습니다.
튜토리얼 말풍선의 사용 범위를 고려해 배경·테두리·꼬리를 일체형으로 정리하고, 크기가 늘어나도 모서리와 꼬리 비율은 유지되도록 표시 방식을 수정했습니다. 좌우 방향은 같은 그림을 반전해 대응하고 본문 여백도 맞췄습니다. 업적 알림에도 배경을 포함한 일체형 패널을 적용해 모서리 밖으로 배경이 보이지 않도록 정리했습니다. 기존 튜토리얼 진행과 업적 알림 동작은 유지했습니다.
2026.10.13 Game View의 말풍선 영역 확대입니다. 같은 문구를 비교하며, 전장 상태·웨이브·레벨은 다릅니다. 표시 검증용 UI 상태를 구성한 캡처입니다.
숫자 옆의 금색 조각은 TextMeshPro의 추가 여백(extraPadding)이 글꼴 이미지의 인접 글자까지 표시하면서 생겼습니다. 추가 여백을 끄고 메시 여백을 갱신한 뒤, 같은 결과 Prefab과 데이터로 전후 화면을 비교해 해결을 확인했습니다. 숫자 값과 집계 연출은 유지했습니다.
2026.10.13 동일 결과 Prefab·동일 검증 데이터의 글꼴 여백 설정 전후 비교입니다. 본문은 시간값 주변 확대이며, 클릭하면 전체 렌더를 볼 수 있습니다.
직접 플레이하며 후반 조합을 고려해 보상을 고르려는데, 카드가 전장을 가려 현재 시너지 효과를 확인하기 어려웠습니다. ‘전장 보기 → 시너지 확인 → 보상 보기’로 돌아오는 흐름을 추가했습니다.
두 이미지는 개선 후 기능의 전환 상태입니다. 2026.10.13 저장된 준비 상태에서 웨이브 클리어 기능으로 정상 보상 단계에 진입한 Game View 검증 캡처입니다.
본인은 UI 구성, 리소스 선별·보정과 Unity 적용을 맡았습니다. 이미지 시안·리소스 생성에는 imagegen을 활용했고, 전투·성장·보상 규칙은 팀의 기존 시스템을 유지했습니다.
세부 마감과 전장 보기 사례는 2026.10.13 작업 후 10.14 팀 브랜치에 통합된 PR #101을 기준으로 정리했습니다. 당시 1920×1080·1366×768 표시·입력 검증 기록을 근거로 하며, 최종 플레이어 빌드 전체 검증과는 구분합니다.
쿨다운 효과가 배치 계산에 포함돼 슬롯이 흔들리고, 조준 중 이름표 위에서 입력을 놓으면 취소 대신 시전되는 문제가 있었습니다.
슬롯·프레임·이름표의 고정 영역만 측정하고 불꽃·모래시계 효과는 계산에서 제외했습니다.
활성 이름표의 RectTransform을 기존 조준 취소 영역에 포함해 팀원의 시전·쿨다운 흐름을 유지했습니다.
Bridge/Adapter를 통해 전투·보상·결과 데이터를 화면에 전달하고, 선택 명령은 기존 게임 시스템으로 되돌렸습니다. UI가 게임 규칙과 데이터를 중복으로 소유하지 않도록 구성했습니다.
통계 → 보상 카운트 → 경험치 흡수·레벨업 → 복귀 버튼의 순서로 결과를 보여주도록 구성했습니다. 런 시작·종료 데이터를 스냅샷으로 전달하고, DOTween으로 표시 시점을 조정했습니다.
정상 재생 / 클릭 스킵 비교 · 약 6초 · 무음
실제 결과 Prefab · 동일 검증 데이터 · InputSystem 자동 입력 · 실제 Scene 이동 제외
Unity Play Mode 전시용 편집본 · 약 50초 · 2026.10.14 작업 자료
촬영용 유닛·스킬 구성 사용 · 공유용 720p 사본
리소스 정리부터 표시 검사까지 Codex와 Editor 도구를 활용했습니다.
네이밍·수정 범위·검수 순서를 개인 Markdown 지침으로 정리해 Codex가 참고할 작업 기준을 세웠습니다.
개인 로컬 작업 지침을 발췌·요약했습니다. 확인 기준 2026.10.22.
HUD 입력 오류를 고칠 때는 팀원의 스킬·저장 로직을 유지하고 입력 코드만 수정하도록 범위를 정했습니다.
정해 둔 브랜치 규칙에 맞춘 작업 준비와 커밋 초안 작성에 Codex를 활용했습니다. 변경 파일과 검사 결과를 검토한 뒤 커밋 대상을 승인했습니다.
적용 예: feat/UI_redesign/7 · 커밋 d372aaa · PR #101
실제 작업 브랜치feat/UI_redesign/7
[ 26.10.13 - ui ] 보조 UI 테마 통일 및 연출 표시 오류 수정
- 보관함·스킬·증강·스토리·튜토리얼·업적·해금 UI 테마 통일
- 공통 UI 스타일, 아트 10종, Sprite 및 Editor 생성·검증 도구 추가
- 웨이브 글자 색상과 결과창 글자 깨짐·잔여 픽셀 수정
- Play Mode 표시 검증 결과와 에셋 생성 문서 추가작업 브랜치와 실제 커밋 예시입니다. 관련 변경은 PR #101로 팀 브랜치에 통합됐습니다.
리소스의 크기·여백 정렬과 19개 스킬의 카드·목록 구성은 도구로 처리했습니다. 디자인은 출력 이미지와 실제 화면을 비교해 선택했습니다.
임시 Scene에서 문구 길이와 표시 상태를 재현하고, 캡처와 검사 결과를 함께 남겼습니다.
Edit Mode의 UI 표시 검사이며, 전체 플레이·빌드 검증은 포함하지 않습니다.
2026.10.13 · 1920×1080 배치의 Edit Mode 표시 메서드 검사 기록에서 발췌했습니다. PNG 30장은 여러 표시 상태와 두 출력 크기(1920×1080·1280×720)를 포함한 캡처 수입니다. 실제 플레이·플레이어 빌드 전체 검증과 구분합니다.
검증 JSON 발췌 받기L형 삽화의 외형·질감은 유지하고 칸 경계만 수정하도록 조건을 정했습니다. imagegen 수정안의 칸 수·투명 배경·축소 표시를 확인해 게임에 적용했습니다.
최희수 · Portfolio