새 UI 스킨 시안과 부품 제작 (B 파랑)

배경

• GIMP MCP로 게임 GUI를 새로 만들기로 했고, 첫 작업으로 UI 스킨부터 바꾼다.
• 기존 UI(인벤토리·상점 프리팹, 대화창, 전투 메뉴)는 전부 어두운 갈색 반투명 사각 판에 얇은 금색 선 하나뿐인 평면형이었다.
• 사용자는 기존 스킨을 다듬지 말고 새로 만들라고 했다. 참고는 창세기전: 서풍의 광시곡 리마스터 GUI의 느낌이다.

목적

• 참고 GUI의 분위기만 가져와 부품을 모두 GIMP에서 새로 그리고, Unity에서 늘려 쓸 수 있는 스킨 부품으로 만든다.

결과

• 소지품 메뉴 레이아웃을 마을 화면 위에 실제 아이템 아이콘으로 그렸다. A 구리 / B 파랑 / C 은빛 세 안은 강조색만 다르고, 사용자가 B 파랑(카린 색)을 골랐다.
• 강조색은 glow #3aa8ff, dark #132c4a, mid #2d66a4, light #8fd0ff다.
• 참고 GUI에서 뽑은 요소: 거의 불투명한 차콜 판, 45° 깎은 모서리와 은회색 금속 이중선, 오른쪽이 뾰족한 사이드 탭, 강조색 그라디언트·발광 선택 표시, 검은 띠 영문 소제목, 키 아이콘 안내

• 처음에는 기존 스킨을 다듬은 V1~V3를 그렸지만 "잘 만들었지만 기존 스킨 수정"이라 반려됐다.

• 부품 23개: 창·창 그림자, 사이드 탭 5상태와 발광, 버튼 5상태와 발광, 목록 선택·마우스 올림 줄, 파인 판, 섹션 띠, 아이콘 칸, 수량 조절 칸, 키 아이콘 바탕, 닫기 X
• 상태마다 판 그라디언트와 테두리 색이 다르다. 예를 들어 Normal은 회색, Hover는 회청색 테두리, Selected는 파랑 mid → dark에 윗면 하이라이트다.

결정과 이유

• 2배 텍스처 + PPU 200: 1920×1080 기준에서 원래 크기로, 4K에서는 선명하게 나오게 하려는 것이다. 9-slice 경계를 넣고 밉맵 끔·Clamp·무압축으로 가져왔다.
• 글자는 스프라이트에 넣지 않음: 기존 TMP NanumGothicBold SDF를 그대로 쓴다.
• 원본 에셋을 쓰거나 따라 그리지 않음: 분위기만 참고하고 부품은 모두 새로 그렸다.

고친 문제

• 목록 마우스 올림 줄이 너무 밝음
  • 증상: 검증 화면에서 Row_Hover가 너무 밝게 보였다.
  • 해결: 흰색 8% → 4%로 다시 만들었다.

검증

• 1920×1080 기준 Canvas에 부품을 여러 크기로 늘려 배치해도 모서리·탭 끝·발광이 깨지지 않았다.
• 검증은 미리보기 씬에서만 했고, 기존 UI 프리팹·씬·스크립트는 바꾸지 않았다.

남은 일

• 실제 게임 UI 적용. 인벤토리는 지금 4×4 칸 격자인데 시안은 목록형이라 레이아웃 결정이 필요하다.
• 버튼 상태 전환(SpriteSwap) 연결과 공통 스킨 데이터(UISkin ScriptableObject 등)
• 4K에서 실제 선명도 확인