gohud — Godot 4 HUD·UI 키트

새로 추가: 아케이드, 코믹, Material 3, 어린이용 생김새

기본·sci-fi·중세에 새 계열 넷이 더해졌다 — 이제 기본 제공 생김새가 열넷이고, 각각 다크와 라이트가 있다. 모든 위젯·팝업·HUD 부품이 코드를 한 줄도 고치지 않고 그대로 받는다: 프리셋을 바꾸면 화면 전체가 따라온다.

material_light 의 gohud 갤러리 — 알약 버튼, 채운 카드, Material 3 색상 — `material_light`

material_dark 의 gohud 갤러리 — 같은 Material 3 모양을 어두운 기준 스킴으로 — `material_dark`

kids_light 의 gohud 갤러리 — 햇살 같은 페이지 위에 크레파스 색의 통통한 젤리 버튼 — `kids_light`

kids_dark 의 gohud 갤러리 — 밤하늘색 페이지 위의 같은 장난감 상자 — `kids_dark`

comic_light 의 gohud 갤러리 — 종이 크림색 페이지 위에 굵은 잉크 테두리와 딱딱한 그림자 — `comic_light`

comic_dark 의 gohud 갤러리 — 밤 페이지 위의 크림색 테두리와 노란 주 색 — `comic_dark`

arcade_light 의 gohud 갤러리 — 하늘색 페이지 위에 그라데이션과 광택을 칠한 키, 파란 테를 두른 두꺼운 HUD 판 — `arcade_light`

arcade_dark 의 gohud 갤러리 — 밤 페이지 위의 같은 선명한 키 — `arcade_dark`

Material 3 — 앱 화면용

Material 3 Expressive 를 공식 M3 토큰과 대조해 맞췄다: 48dp 터치 타깃 안에 40dp 판을 둔 알약 버튼, 28dp 대화상자와 시트, 채운 카드, 외곽선 입력란, Expressive 슬라이더. 앱 컴포넌트 — 내비게이션 바, 앱 바, FAB, 검색 바, 칩, 진행 표시, 날짜 선택기 — 는 M3 컴포넌트 토큰을 따르고, 제목은 함께 들어 있는 Roboto 로 쓴다. 상점, 설정, 받은 편지함 등 앱다운 느낌이 필요한 모든 화면에 쓴다.

어린이 — 장난감 상자

어린이를 위해 만들었다: 모든 키·줄·패널이 굵은 테두리에 단단한 턱이 달린 젤리 사탕이고, 누르면 그 턱이 쏙 들어간다. 컨트롤마다 자기 크레파스 색을 입는다. 퀵슬롯은 사탕 블록, 배지는 스티커, 조이스틱은 무지개다. 창에는 햇살처럼 노란 제목 리본과 둥근 사탕 닫기 버튼이 붙고, 누르면 말랑하게 찌그러진다. 치수와 프로젝트 글꼴은 조금도 바뀌지 않는다.

코믹 — 굵은 잉크

모든 면이 만화책의 칸이다: 굵은 잉크 테두리 안에 표면 색을 채우고, 뒤에 딱딱한 그림자를 깔며, 면을 누르면 그 그림자가 사라진다. 설정 하나로 모든 그림자를 켜고 끄고, 두 개로 테두리 굵기와 그림자 크기를 정하며, 호출 하나로 위젯 하나에만 같은 일을 한다. 창에는 노란 제목 캡션이 붙는다.

아케이드 — 칠한 키

모든 키를 칠한다 — 그라데이션, 흰 광택, 누르면 쏙 들어가는 턱을 남색 잉크 테두리 안에 담고 — 라벨은 잉크 테두리를 두른 흰 글자다: 시작은 초록, 나머지는 파랑, 삭제는 빨강. 판은 두껍다. 옅은 안쪽 면을 색 테가 둘러싸고, 창에는 금색 제목 배너와 둥근 빨간 닫기 키가 붙는다.

GoUi.use_preset(GoThemePresets.MATERIAL_LIGHT)   # 또는 MATERIAL_DARK
GoUi.use_preset(&"kids_light")                   # 또는 &"kids_dark"
GoUi.use_preset(&"comic_light")                  # 또는 &"comic_dark"
GoUi.use_preset(&"arcade_light")                 # 또는 &"arcade_dark"

Material 3 자세히 → · 어린이 자세히 → · 아케이드, 위젯 하나하나 ↓ · 코믹, 위젯 하나하나 ↓ · 같은 팝업을 열네 가지 생김새로 →

아케이드: 칠한 키와 두꺼운 판

가장 새로운 생김새는 모든 화면을 오락실 게임기처럼 꾸민다. 모든 키를 칠한다 — 위는 밝고 아래로 갈수록 짙어지는 그라데이션, 캔디 광택(위쪽 절반의 윤기와 양쪽 위 모서리의 반짝임), 누르면 쏙 들어가는 턱을 모두 남색 잉크 테두리 안에 담은 알약 모양이고 — 라벨은 잉크 테두리를 두른 흰 글자다. 탭은 서로 떨어져 서고, 게이지는 잉크 눈금으로 여러 칸으로 나뉘며, 키 힌트는 키캡이고, 창 제목은 제비꼬리 금색 리본 위에 앉는다. 모든 판은 두껍다: 옅은 안쪽 면을 자기 광택을 지닌 색 테가 둘러싼다. arcade_light 는 하늘색 페이지에 흰 판을, arcade_dark 는 밤 페이지에 남색 판을 놓는다. 아래 그림은 모두 실제 gohud 화면이다 — 같은 코드에 프리셋 한 줄만 다르다.

GoUi.use_preset(&"arcade_light")   # 또는 &"arcade_dark"

arcade_light 의 gohud 갤러리 — 하늘색 페이지 위의 초록·파랑·빨강·라벤더색으로 칠한 키와 파란 테를 두른 HUD 판 — `arcade_light` · 갤러리

arcade_light 의 바텀 시트 — 아래 가장자리에서 올라오는, 키캡 줄을 담은 테 두른 두꺼운 판 — `GoSheet`

arcade_light 의 코치마크 — 키를 가리키는 테 두른 말풍선 — `GoCoachMark`

arcade_dark 의 사이드 서랍 — 어둡게 가린 화면 위에 내비게이션 줄을 담은 남색 판 — `GoDrawer`

arcade_dark 의 팝오버 — 자신을 연 키에 붙어 있는 테 두른 말풍선 — `GoPopover`

arcade_dark 의 알림창 — 파란 테를 두른 남색 판 위에 금색 Level up! 배너, 빨간 닫기 키, 초록 Great 키 — `GoDialogs.alert()`

arcade_light 의 스낵바 — 아래 가장자리를 따라 놓인, 갈색 테를 두른 흰 판과 Undo 동작 — `GoSnackbar`

모든 키를 칠한다

arcade_light 의 버튼 — 초록 시작 키, 파랑 상세 키, 흰 외곽선 키, 산호색 삭제 키, 빨강 영구 삭제 키, 라벤더색 작은 키, 회색 비활성 키가 저마다 남색 테두리 안에 그라데이션·광택·턱으로 칠해진 모습 — `GoStyle.button()`

arcade_light 의 탭 — 선택된 탭은 파랗게 칠한 키, 나머지는 라벤더색 키 — `GoStyle.tabs()`

arcade_light 의 분절 선택 — 따로 칠한 키들, 선택된 키는 파랗고 눌려 들어가 있음 — 분절 키

arcade_light 의 토글과 체크 박스 — 켜면 광택 나는 초록 트랙, 끄면 라벤더색, 초록 체크 상자 — 토글과 체크 박스

arcade_light 의 카드 — 광택과 턱이 있는 두꺼운 파란 테 안의 옅은 안쪽 면 — `GoStyle.card()`

arcade_light 의 폼 — 움푹 들어간 흰 입력란, 토글, 초록 저장 키 — `GoForm`

arcade_light 의 선택 격자 — 키캡들, 선택된 것은 초록 바탕에 금색 테 — `GoStyle.choice_grid()`

arcade_light 의 슬롯 격자 — 수량이 표시된 광택 키캡으로 된 인벤토리 — `GoSlotGrid`

arcade_light 의 목록 줄 — 줄마다 아이콘이 달린 옅은 키캡 — 목록 줄

arcade_light 의 날짜 선택기 — 키캡 날짜 칸, 선택된 날은 칠한 키 — `GoDatePicker`

arcade_light 의 슬라이더 — 잉크 홈 안의 광택 나는 파란 튜브와 둥근 키캡 손잡이 — `GoStyle.slider()`

arcade_light 의 라디오 그룹 — 둥근 키캡, 선택된 것에는 파란 점 — `GoStyle.radio_group()`

arcade_light 의 필터 칩 — 키캡 칩, 선택된 것은 파랗게 물들고 체크 표시, 지울 수 있는 칩에는 X 표시 — `GoStyle.filter_chip()`

arcade_light 의 검색창 — 잉크 외곽선 안의 움푹 들어간 흰 입력란, 검색 아이콘과 필터 아이콘 — `GoSearchBar`

arcade_light 의 스테퍼 — 단계마다 옅은 키캡, 열린 단계에는 초록 Next 키 — `GoStepper`

arcade_light 의 순위표 — 한 줄 걸러 솟아오른 키캡 — `GoTable`

arcade_light 의 하단 내비게이션 바 — 선택된 탭의 아이콘은 파란 키캡 알약 위에, 빨간 숫자 배지 — `GoNavBar`

arcade_light 의 시간 선택기 — 큰 키캡 위의 시와 분, 시계 문자판 위의 AM·PM 키 — `GoTimePicker`

arcade_light 의 코드 입력 — 키캡 칸 여덟 개, 지금 입력 중인 칸은 금색 테 — `GoCodeInput`

arcade_light 의 휠 선택기 — 키캡 띠 위의 선택된 수량, 위아래로 흐려지는 나머지 — `GoWheelPicker`

밤에는: `arcade_dark`

어두운 페이지에서는 잉크가 훨씬 짙어져 페이지 자체가 되고, 칠한 색은 그대로 선명하다.

arcade_dark 의 버튼 — 밤 페이지 위의 같은 선명한 색 — 밤의 `GoStyle.button()`

arcade_dark 의 HUD 막대 — 움푹 팬 홈 안의 빨간 HP, 파란 MP, 초록 XP 튜브 — `GoBar`

arcade_dark 의 HUD 카드 — 게임 위에 두꺼운 파란 테를 두른 남색 안쪽 면 — `GoStyle.hud_panel()`

arcade_dark 의 퀵슬롯 — 수량이 표시된 키캡, 쿨다운 중인 슬롯은 금색 테 — `GoSlot`

arcade_dark 의 가상 조이스틱 — 잉크 고리 안의 광택 패드, 화살표 넷, 키캡 손잡이 — `GoJoystick`

arcade_dark 의 알림 상자 — 노랑·초록·빨강·파랑 테를 두른 작은 판 — 알림 상자

arcade_dark 의 플로팅 액션 버튼 — 광택을 입혀 금색으로 칠한 키 — `GoFab`

arcade_dark 의 보상 달력 — 키캡 날짜 칸, 오늘은 금색 테 — `GoRewardCalendar`

arcade_dark 의 분절 선택 — 선택된 Day 키는 파랗게, Week 와 Month 는 라벤더색으로 칠했고 글자는 모두 흰색 — 분절 키

arcade_dark 의 탭 뷰 — 남색 키캡으로 된 항목 줄 위의 칠한 탭 키 — `GoTabView`

arcade_dark 의 스크롤 목록 — 남색 키캡 위의 항목 줄과 필터 칩 한 줄, 선택된 칩은 파랑 — `GoScroll`

arcade_dark 의 토글과 체크 박스 — 켜면 광택 나는 초록 트랙, 끄면 라벤더색 — 토글과 체크 박스

arcade_dark 의 희귀도 칩 — Common 부터 Cursed 까지 칠한 작은 판 — `GoStyle.chip()`

arcade_dark 의 슬롯 격자 — 흰 아이콘과 수량이 표시된 남색 키캡 인벤토리 — `GoSlotGrid`

arcade_dark 의 범위 슬라이더 — 어두운 홈 안에서 광택 손잡이 둘 사이를 잇는 파란 구간 — `GoRangeSlider`

arcade_dark 의 페이지 넘김 — 현재 페이지는 초록으로 칠한 키 — `GoPagination`

arcade_dark 의 배지 — 아이콘 위에 잉크 외곽선을 두른 산호색 판 — `GoBadge`

아케이드 생김새가 동작하는 방식

면

모든 키와 판은 GoStyleBoxArcade 다: 잉크 테두리, 그라데이션 몸통, 턱, 광택을 컨트롤 자신의 사각형 안에 그린다 — 키는 상태가 바뀌어도 크기가 그대로이고, 누르면 쏙 들어갈 뿐이다.

잘 읽히는 라벨

잉크 테두리를 두른 흰 라벨은 그 테두리가 떼어 놓는 어떤 색 위에서도 읽힌다 — WCAG 는 테두리를 글자의 일부로 친다. 모든 칠한 색은 그라데이션의 어느 높이에서든 라벨이 4.6:1 을 넘을 때까지 옮겨진다.

창

창 제목은 잉크 테두리를 두른 흰 글자로 금색 배너 위에 놓이고, 옆에 둥근 빨간 닫기 키가 붙는다. 대화상자, 시트, 서랍, 팝오버는 테를 두른 두꺼운 판이다.

키 하나는 자기 색을 따로 입을 수 있다 — 일시 정지 메뉴의 주황색 상점 키처럼:

menu.add_child(GoStyle.arcade_paint(GoStyle.button("Shop", _shop), Color("#FF8A1E")))

아케이드 자세히 → · 같은 팝업을 열네 가지 생김새로 →

코믹: 굵은 잉크와 딱딱한 그림자

코믹 생김새는 모든 면을 만화책의 칸처럼 그린다 — 굵은 잉크 테두리 안에 표면 색을 채우고, 오른쪽 아래로 딱딱하고 꽉 찬 그림자를 드리운다. comic_light 는 종이 크림색 페이지 위에 검은 잉크로 그리고 주 색은 코발트색이다. comic_dark 는 밤 페이지 위에 크림색 잉크로 그리고 주 색은 노란색이다. 아래 그림은 모두 실제 gohud 화면이다 — 같은 코드에 프리셋 한 줄만 다르다.

GoUi.use_preset(&"comic_light")   # 또는 &"comic_dark"

comic_light 의 gohud 갤러리 — 종이 크림색 페이지 위의, 딱딱한 그림자를 단 잉크 키·줄·막대 — `comic_light` · 갤러리

comic_dark 의 gohud 갤러리 — 밤 페이지 위의 크림색 잉크와 노란 주 색 — `comic_dark` · 갤러리

comic_light 의 바텀 시트 — 아래 가장자리에서 올라오는 잉크 패널과 잉크를 입은 줄들 — `GoSheet`

comic_light 의 코치마크 — 버튼을 가리키는 잉크 말풍선 — `GoCoachMark`

comic_dark 의 사이드 서랍 — 어둡게 가린 화면 위에 내비게이션 줄을 담은 잉크 패널 — `GoDrawer`

comic_dark 의 팝오버 — 자신을 연 버튼에 붙어 있는 잉크 말풍선 — `GoPopover`

버튼, 토글, 탭, 슬라이더, 카드, 폼, 표, 선택기, 칩이 모두 잉크를 입는다 — 하나하나 스타일을 줄 필요가 없다. 키를 누르면 그림자가 사라지고 면이 도장처럼 제자리로 쏙 들어간다. 비활성 면은 그림자를 잃고 흐려지므로, 누를 수 있는 것과 없는 것이 한눈에 구별된다.

comic_light 의 버튼 — primary, secondary, 외곽선, 위험, 작은, 테두리 없는, 비활성 키가 저마다 굵은 검은 테두리와 딱딱한 그림자를 단 모습 — `GoStyle.button()` — 모든 종류

comic_light 의 토글과 체크 박스 — 잉크를 입은 트랙과 손잡이, 체크 표시가 든 잉크 상자 — 토글과 체크 박스

comic_light 의 라디오 버튼 — 잉크 고리, 선택된 것에는 채운 점 — 라디오 버튼

comic_light 의 탭 — 선택된 탭은 잉크 패널, 나머지는 잉크 밑줄 위에 놓인다 — `GoStyle.tabs()`

comic_light 의 분절 선택 — 잉크 칸, 선택된 칸은 채워짐 — 분절 알약

comic_light 의 슬라이더 — 잉크 홈, 가는 강조색 채움, 잉크 손잡이 — `GoStyle.slider()`

comic_light 의 드롭다운 선택 — 꺾쇠가 달린 잉크 키 — 선택 상자

comic_light 의 카드 — 굵은 테두리와 딱딱한 그림자를 단 흰 패널 — `GoStyle.card()`

comic_light 의 폼 — 도움말이 달린 잉크 입력란, 토글, 잉크 저장 키 — `GoForm`

comic_light 의 목록 줄 — 줄마다 아이콘, 부제목 또는 위험 라벨이 달린 잉크 띠 — 목록 줄

comic_light 의 표 — 잉크 선 위의 머리글, 점수 줄마다 잉크 띠 — `GoTable`

comic_light 의 날짜 선택기 — 잉크 날짜 칸, 선택된 날은 채워짐 — `GoDatePicker`

comic_light 의 시간 선택기 — 잉크 시·분 상자, AM·PM 키, 시계 다이얼 — `GoTimePicker`

comic_light 의 스테퍼 — 잉크 단계 줄, 끝난 단계는 체크 표시, 다가올 단계는 흐리게 — `GoStepper`

comic_light 의 필터 칩과 입력 칩 — 잉크 알약, 선택된 필터는 색이 들고 체크 표시가 붙음 — 필터 칩

comic_light 의 내비게이션 바 — 위쪽 잉크 선, 현재 탭은 잉크 알약, 알림 탭에 배지 — `GoNavBar`

comic_light 의 입력 그룹 — 입력란과 보내기 키가 하나의 잉크 모양으로 붙은 모습 — `GoInputGroup`

comic_light 의 분할 버튼 — 동작과 메뉴 화살표가 잉크를 입은 두 쪽으로 — `GoSplitButton`

comic_light 의 페이지 넘김 — 현재 페이지는 딱딱한 그림자를 단 잉크 키 — `GoPagination`

밤에는: `comic_dark`

어두운 페이지에서는 검은 테두리가 보이지 않으므로, comic_dark 는 테두리를 크림색으로 그리고 같은 잉크 색을 띤 옅은 그림자를 드리운다. HUD 부품 — 퀵슬롯, 막대, 조이스틱, 보상 달력 — 도 같은 규칙을 따른다.

comic_dark 의 버튼 — 밤 페이지 위의 크림색 테두리, 노란 primary, 옅은 딱딱한 그림자 — 밤의 `GoStyle.button()`

comic_dark 의 퀵슬롯 — 수량과 쿨다운이 표시된 잉크 블록, 빛나는 슬롯은 노란 테두리 — `GoSlot`

comic_dark 의 HUD 막대 — 크림색 잉크 홈 안의 HP, MP, XP — `GoBar`

comic_dark 의 가상 조이스틱 — 크림색 고리와 그림자를 드리우는 손잡이 — `GoJoystick`

comic_dark 의 알림 상자 — 크림색 잉크로 그린 정보, 성공, 경고, 위험 패널 — 알림 상자

comic_dark 의 슬롯 격자 — 잉크 블록으로 된 인벤토리 — `GoSlotGrid`

comic_dark 의 보상 달력 — 잉크 날짜 칸, 받은 날은 체크 표시, 오늘은 노란 테두리 — `GoRewardCalendar`

comic_dark 의 등급 칩 — 저마다 자기 색을 띤 잉크 알약 — 칩

comic_dark 의 범위 슬라이더 — 잉크 홈 위의 잉크 손잡이 두 개 — `GoRangeSlider`

comic_dark 의 검색 바 — 검색과 필터 아이콘이 달린 잉크 바 — `GoSearchBar`

comic_dark 의 플로팅 액션 버튼 — 크림색 잉크와 딱딱한 그림자를 단 노란 키 — `GoFab`

코믹 생김새가 동작하는 방식

모든 면에 StyleBox 하나

모든 면은 GoStyleBoxComic 이다: 채움, 테두리, 그림자를 컨트롤 자신의 사각형 안에 그린다. 그릴 때마다 GoConfig 에서 테두리와 그림자 크기를 읽으므로, 설정 하나로 화면 전체가 한꺼번에 바뀐다.

누르면 납작해진다

누른 키는 그림자를 내려놓고 그 자리로 옮겨 간다. 호버 때는 그림자가 남고, 포커스는 테두리를 절대 덮지 않는 안쪽 잉크 고리를 더하며, 비활성 면은 그림자를 잃고 흐려진다.

나머지는 스킨이 칠한다

GoSkinComic 은 코드가 그리는 것에 잉크를 입힌다: 퀵슬롯, 칩, 배지, 아바타, 알림, 내비게이션 바, FAB, 날짜 칸, 그리고 손잡이가 그림자를 드리우는 조이스틱.

창에는 캡션이 붙는다

창 제목은 만화의 내레이션 상자 같은 노란 캡션 위에 놓이고, 옆에 잉크를 입힌 둥근 닫기 버튼이 붙는다. 대화상자, 시트, 서랍, 팝오버는 불투명한 잉크 패널이다.

낮에도 밤에도 잘 읽힌다

두 팔레트 모두 다른 모든 프리셋과 똑같은 WCAG 대비 검사를 통과한다. 눌린 키와 비활성 키도 포함이다. 캡션 색이 페이지와 너무 가까워지면 그 테두리는 페이지 색으로 물러난다.

배치는 바뀌지 않는다

테두리와 그림자는 각 컨트롤 안에 들어가고 안쪽 여백은 테마가 준 그대로이므로, 다른 생김새로 배치한 화면은 그 배치를 그대로 지킨다 — 프로젝트 글꼴도 마찬가지다.

설정 셋과 호출 하나

GoConfig 설정 셋이 모든 코믹 면을 한꺼번에 바꾼다. 다시 만드는 것은 없다 — 값을 넣는 대로 화면이 다시 그려진다.

GoUi.config.comic_border_width = 2.0   # 테두리(dp) — 기본값 3
GoUi.config.comic_shadow_size = 6.0    # 그림자(dp) — 기본값 4
GoUi.config.comic_shadow = false       # 어디에도 그림자 없음

위젯 하나는 설정과 상관없이 따로 갈 수 있다. 마지막 인수로 true 를 넘기면 그 안의 모든 것까지 포함한다.

GoStyle.comic_shadow(skip_button, false)     # 이 버튼은 납작하게
GoStyle.comic_shadow(card, true, true)       # 이 카드와 그 안의 모든 것은 그림자 유지
GoStyle.comic_border(title, 5.0)             # 이것만 테두리를 더 굵게

나만의 코믹 만들기. tools/new_theme.py inked --from comic_light 가 팔레트를 복사한다. 종이·잉크·주 색을 바꾸고 tools/make_theme.py inked 를 실행하면 된다. 잉크, 그림자, 스킨이 함께 따라온다.

코믹 자세히 → · 같은 팝업을 열네 가지 생김새로 →

게임 화면에서는 이렇게 보인다

중세·sci-fi 프리셋 — 캐릭터 정보·인벤토리·퀘스트, 폼·격자·안내 카드, 각진 패널과 터치 조작. 프리셋을 바꾸는 것은 코드 한 줄이다.

gohud 중세 테마 — 체력·마나·스태미나 막대가 있는 캐릭터 정보, 퀵슬롯 인벤토리, 금빛 단조 프레임의 퀘스트 일지 — 중세 — 캐릭터·인벤토리·퀘스트

gohud 중세 테마 — 이름 입력 칸·토글·체크박스·음량 슬라이더가 있는 입력 패널, 타일 격자, 수락·거절 버튼이 있는 파티 초대 안내 카드 — 중세 — 폼·격자·안내 카드

gohud sci-fi 테마 — 육각 조이스틱, 고정·따라오기·상대 전환, 원형 동작 버튼이 있는 각진 터치 조작 패널 — **Sci-fi** — 각진 패널과 터치 조작

프리셋 열넷과 바꾸는 법 →

무엇을 대신해 주는가

게임 UI 에서 시간을 가장 많이 잡아먹는 것은 버튼 모양이 아니라, 기기마다 다르게 어긋나는 것들이다. gohud 는 그 어긋남을 한곳에서 처리한다.

모든 치수가 토큰이다

여백·모서리·글자 크기를 숫자로 쓰지 않고 이름으로 부른다. 테마를 갈아 끼우면 화면 전체가 함께 움직인다.

보이는 크기와 누르는 크기가 다르다

닫기 버튼은 36dp 로 보이지만 터치 타깃은 48dp 다. 슬롯이 촘촘히 깔려도 겹친 자리는 중심이 가까운 쪽이 가져간다.

노치와 키보드를 피한다

안전영역 안에 HUD 를 붙이고, 가상 키보드가 올라오면 입력 칸이 그 위로 올라온다.

뒤로 가기가 하나씩 닫힌다

Escape 와 Android 뒤로 가기가 가장 위 창 하나만 닫는다. 겹쳐 띄운 창이 한꺼번에 사라지지 않는다.

알림은 입력을 훔치지 않는다

스낵바 위를 눌러도 그 아래 버튼이 눌린다. 포커스도 가져가지 않는다.

아이콘은 이름으로 부른다

위젯은 GoIconSet.CLOSE 처럼 이름만 안다. 세트를 갈아 끼우면 코드를 한 줄도 안 고치고 그림이 바뀐다. 아이콘 →

생김새 열넷, 코드 한 줄

GoUi.use_preset() 이 테마·스킨·아이콘을 함께 바꾼다 — 둥근 패널, 모서리를 자른 sci-fi, 단조 프레임의 중세, Material 3 앱 컴포넌트, 어린이의 젤리 사탕, 코믹 잉크, 아케이드 칠.

읽히는지는 잰다

모든 테마를 WCAG 로 잰다. 버튼 상태별 패널, 순백·순흑 위에 얹힌 반투명 HUD 패널까지.

플러그인을 켜지 않아도 전부 동작한다. 켜면 GoRuntime 오토로드가 붙어 창 크기·dp 배율·가상 키보드 높이를 추적하고, 설정 리소스와 프리셋을 고르는 프로젝트 설정이 생긴다 — 편의일 뿐 필수가 아니다.

gohud 설치

길은 둘이다. AI 에게 시키거나, 폴더를 프로젝트에 넣거나 — 그 밖에 설정할 것은 없다.

설치

빠른 시작

다섯 줄이면 테마가 입혀진 화면이 뜬다. 처음부터 끝까지는 설치 페이지에 있다.

빠른 시작

생김새 바꾸기 — 색뿐 아니라 모양까지

Theme 는 엔진이 그려 주는 것의 모양만 바꾼다. StyleBoxFlat 의 모서리는 둥근 것뿐이고, 조이스틱·퀵슬롯·코치마크는 코드가 직접 그리므로 테마를 아무리 갈아 끼워도 모양이 안 바뀐다. 그래서 gohud 는 테마·스킨·아이콘을 한 단위로 고르는 프리셋을 쓴다.

GoUi.use_preset(GoThemePresets.MEDIEVAL_DARK)   # 테마·스킨·아이콘이 한꺼번에

프리셋	생김새
`default_dark`	gohud 원래 모습 — 둥근 모서리, 부드러운 파란 강조
`default_light`	같은 모양에 밝은 팔레트
`scifi_dark`	챔퍼 모서리, 시안 네온 테두리와 발광, 육각 조이스틱, 조준 표식
`scifi_light`	같은 각진 모양에 밝은 설계도 팔레트
`medieval_dark`	어두운 철·가죽, 고금색 프레임, 리벳, 각인풍 아이콘, Cinzel 제목
`medieval_light`	양피지·잉크·청동 색상의 같은 단조 프레임
`material_light` 신규	앱 화면용 Material 3 — 알약 버튼, 28dp 대화상자, 채운 카드, 앱의 내비게이션 바·FAB·검색 바, Roboto
`material_dark` 신규	같은 Material 3 모양을 어두운 기준 스킴으로
`kids_light` 신규	어린이를 위한 장난감 상자 — 굵은 테두리에 누르면 쏙 들어가는 턱이 달린 젤리 사탕 키, 크레파스 색, 햇살 같은 페이지
`kids_dark` 신규	같은 장난감 상자를 밤하늘색 페이지에
`comic_light` 신규	만화책의 칸 — 모든 면에 굵은 잉크 테두리와 딱딱한 그림자, 종이 크림색 페이지 위의 흰 패널. 그림자와 그 크기, 테두리 굵기는 설정으로 바꾼다
`comic_dark` 신규	같은 잉크를 밤 페이지에 — 크림색 테두리와 노란 주 색
`arcade_light` 신규	오락실 게임기 — 모든 키를 그라데이션·광택·턱으로 칠하고 잉크 테두리를 두른 흰 글자로 라벨을 단다. 하늘색 페이지 위의 테 두른 두꺼운 판, 창에는 금색 제목 배너
`arcade_dark` 신규	같은 선명한 키를 남색 판과 밤 페이지에

default_dark 프리셋을 적용한 gohud 갤러리 — 둥근 모서리와 파란 강조색 — `default_dark` — 둥근 모서리, 부드러운 파란 강조

default_light 프리셋 — 같은 모양의 밝은 팔레트 — `default_light` — 같은 모양, 밝은 팔레트

scifi_dark 프리셋 — 모서리를 사선으로 자른 패널과 시안 네온 — `scifi_dark` — 챔퍼 모서리, 시안 네온

scifi_light 프리셋 — 각진 모양의 밝은 설계도 팔레트 — `scifi_light` — 같은 각진 모양, 설계도 팔레트

네 장 모두 같은 갤러리 화면이다. 코드는 한 줄도 다르지 않고 프리셋 이름만 바뀌었다. 버튼 모서리, 토글 모양, 목록 줄, 입력 칸 테두리가 함께 움직이는 것이 보인다.

중세 테마

medieval_dark 는 철·가죽에 고금색, medieval_light 는 양피지와 잉크 색상이다. 메뉴 프레임에는 리벳과 작은 모서리 장식을 두고 상시 HUD 는 절제했다. 각인풍 아이콘 16종이 아이템 이름을 다시 그리고, 포함된 Cinzel 글꼴은 제목·부제에만 쓴다.

medieval_dark — 캐릭터 정보, 퀵슬롯 인벤토리, 퀘스트 일지 — `medieval_dark` — 철과 가죽

medieval_light — 같은 캐릭터·인벤토리·퀘스트 화면을 양피지로 — `medieval_light` — 양피지와 잉크

두 장 모두 기본 위젯으로 만든 examples/medieval/medieval.tscn 이다. 중세 안내와 나만의 왕국 만들기 →

같은 화면, 폰에서도 데스크톱에서도

갤러리 네 장은 폰 세로다. 아래는 같은 코드를 1280×800 으로 띄운 것이다 — 본문은 읽기 좋은 폭(480dp)에서 멈춰 가운데에 서고, HUD 는 화면 구석에 남는다. 폼은 떠 있는 HUD 와 겹치지 않게 비키되, 닿지 않으면 밀지 않는다 — 넓은 화면에서 괜히 밀면 본문이 한쪽으로 치우친다.

데스크톱 1280×800 의 default_dark — 본문은 가운데, HUD 는 구석 — `default_dark` · 1280×800

데스크톱 1280×800 의 scifi_dark — 같은 배치에 각진 패널과 네온 — `scifi_dark` · 1280×800

같은 시트, 다른 생김새

default_dark 의 바텀 시트 — 기본 — 둥근 카드, 고정 검색 줄과 바닥 버튼

scifi_dark 의 바텀 시트 — 위쪽 네온 강조선 — sci-fi — 위쪽 강조선, 잘린 모서리, 발광

에디터에서 고르려면 프로젝트 설정 → gohud → Theme → Preset, 설정 리소스에서는 GoConfig.preset 칸이다. theme·skin·icons 를 직접 채우면 그쪽이 프리셋보다 우선한다 — 프리셋을 고른 뒤 한 칸만 자기 것으로 바꿔 끼울 수 있다.

새 테마는 JSON 파일 하나다. new_theme.py kingdom --from medieval_dark 가 물려받은 값을 전부 풀어 적은 팔레트를 만들고, make_theme.py kingdom 이 테마·컨트롤 그림·스킨 다이얼까지 생성한다. 프리셋은 선택기에 저절로 뜬다. → 설정과 다이얼 전부

스킨 — 테마가 닿지 못하는 자리

GoSkin 은 조이스틱, 퀵슬롯 패널, 코치마크 링, 칩, 스켈레톤, 알림 상자, 분절 선택, 구분선의 모양을 맡는다. 상속해서 바꾸고 싶은 것만 덮어쓰면 나머지는 기본 모양 그대로다.

class_name MySkin extends GoSkin

func slot_box(accent: Color, lit: bool) -> StyleBox:
    var box := GoStyleBoxCut.new()
    box.bg_color = accent
    box.cut = 6.0
    box.edge_color = accent          # 위쪽 강조선
    return box

func draw_joystick(canvas: CanvasItem, center: Vector2, knob: Vector2,
        radius: float, knob_radius: float, ink: Color, base: Color, active: bool) -> void:
    canvas.draw_circle(center, radius, Color(base, 0.4))
    canvas.draw_circle(knob, knob_radius, ink)

클래스	낼 수 있는 모양
`GoStyleBoxCut`	모서리를 사선으로 자른 패널(챔퍼), 한 변만 굵은 강조선, 바깥으로 번지는 발광
`GoStyleBoxBracket`	테두리를 두르지 않고 네 모서리만 짧게 긋는 조준 표식
`GoStyleBoxMedieval`	리벳·모서리 각인·베벨 반사·재질 질감이 있는 단조 프레임
`GoStyleBoxJelly`	젤리 사탕 — 굵은 테두리, 누르면 쏙 들어가는 단단한 턱, 위쪽이 더 밝은 몸통과 흰 광택
`GoStyleBoxComic`	만화책의 칸 — 굵은 잉크 테두리와 딱딱한 드롭 섀도, 둘 다 게임이 도는 중에 `GoConfig` 로 크기를 정한다
`GoStyleBoxArcade`	오락실 게임기의 키나 판 — 그라데이션 몸통, 흰 광택, 누르면 쏙 들어가는 턱, 잉크 테두리. 판은 옅은 안쪽 면을 두꺼운 색 테로 두른다

여섯 모두 여느 StyleBox 처럼 Theme 리소스 안에 그대로 저장된다 — 즉 테마가 모양을 바꿀 수 있다. GoSkinSciFi·GoSkinMedieval·GoSkinMaterial·GoSkinKids·GoSkinComic·GoSkinArcade 가 함께 들어 있는 상속 예다.

기본 제공 스킨마다 그린 퀵슬롯·조이스틱·칩 — 기본, 어린이, Material, 중세, sci-fi — 스킨이 그리는 것 — 기본, 어린이, Material, 중세, sci-fi

코믹 스킨이 그린 퀵슬롯·조이스틱·칩 — 잉크 테두리와 딱딱한 그림자 — …그리고 코믹 스킨

아케이드 스킨이 그린 퀵슬롯·조이스틱·칩 — 광택 나는 키캡과 화살표 넷이 달린 패드 — …그리고 아케이드 스킨

GoStyle.box() 는 언제나 StyleBoxFlat 을 돌려준다. 돌려받아 bg_color 나 corner_radius 를 고치는 옛 호출부와의 약속이기 때문이다. 커스텀 모양을 지켜야 하면 GoStyle.surface() 를 쓴다.

위젯

부품을 표 하나로. 위젯 하나하나 자세히 → · 그림과 함께 보는 모든 위젯 → · 팝업과 대화상자 전체 안내 →

클래스	바탕	하는 일
`GoSurface`	Control	떠 있는 창의 틀 — 가운데·아래·붙임 배치, 고정 머리말·바닥, 스크롤 본문, 끌어서 높이 조절
`GoSheet`	CanvasLayer	아래에서 올라오는 페이지. 자체 층을 가져 HUD 위에 확실히 뜬다
`GoDialogs`	Node	`await` 로 받는 확인·알림. 되돌릴 수 없는 일에는 `destructive`
`GoForm`	MarginContainer	브레이크포인트마다 폭을 제한하고 가상 키보드를, `avoid_hud` 면 HUD 까지 피하는 폼
`GoScroll`	ScrollContainer	손가락 스크롤. 스크롤바가 카드 여백 자리로 들어간다
`GoNotice`	PanelContainer	입력도 포커스도 훔치지 않는 스낵바
`GoPromptCard`	PanelContainer	화면을 막지 않는 질문 카드
`GoCoachMark`	Control	실제 컨트롤을 가리키는 안내 투어. 가리킨 것을 누르면 다음으로 넘어간다
`GoHudAnchor`	Control	HUD 를 화면 아홉 자리 중 하나에 안전영역을 지켜 붙인다
`GoBar`	Control	체력·마나·경험치 막대. 값·분수·퍼센트 표시와 부드러운 보간
`GoSlot`	Button	퀵슬롯 한 칸 — 아이콘·수량·쿨다운·단축키를 한 칸에
`GoJoystick`	Control	고정·따라오기·상대 모드의 가상 조이스틱
`GoIconButton`	Button	작게 보이고 크게 눌리는 아이콘 버튼
`GoStyle`	정적	버튼·칩·목록 줄·표·아바타·탭을 한 줄로 만드는 공장

기다리기, 알리기, 세기

클래스	바탕	하는 일
`GoSnackbar`	Node	스스로 자리를 잡는 메시지
`GoSpinner`	Control	끝이 보이지 않는 기다림
`GoBadge`	PanelContainer	안 읽은 점, NEW 딱지, 99+

폼과 목록

클래스	바탕	하는 일
`GoField`	VBoxContainer	틀릴 수 있는 줄
`GoInputGroup`	HBoxContainer	버튼과 한 덩어리로 붙은 입력칸
`GoCombobox`	Button	검색되는 선택기
`GoCodeInput`	VBoxContainer	쿠폰·선물 코드
`GoTable`	VBoxContainer	정렬되는 머리줄, 눌리는 줄
`GoPagination`	HBoxContainer	페이지, 아니면 더 보기 줄

게임이 실제로 쓰는 모양

클래스	바탕	하는 일
`GoRewardCalendar`	VBoxContainer	출석 보상
`GoRadar` · `GoDonut`	Control	능력치를 한눈에
`GoCarousel`	VBoxContainer	배너와 캐릭터 선택
`GoKbd`	HBoxContainer	거짓말하지 않는 키 안내

화면 위에

클래스	바탕	하는 일
`GoDrawer`	CanvasLayer	옆에서 나오는 패널
`GoPopover`	RefCounted	붙어서 뜨는 카드
`GoContextMenu`	RefCounted	길게 누르기와 오른쪽 클릭
`GoConsole`	CanvasLayer	개발자 콘솔

Go HUD Skill

gohud 에는 AI 스킬이 들어 있다 — API 전부와 바로 돌아가는 템플릿, 미리보기 실행기. 아래 글을 통째로 코딩 에이전트에 붙여 넣으면 gohud 를 설치하고 쓰는 법까지 익힌다.

Go HUD Skill

읽히는지는 눈대중이 아니라 잰다

"예쁘다" 는 취향이지만 "읽힌다" 는 잴 수 있다. 흐린 회색 글씨는 좋은 모니터에서 멀쩡해 보이고 한낮의 폰에서는 사라진다 — 눈으로 고르면 언젠가 반드시 그렇게 된다.

python3 addons/gohud/tools/check_contrast.py

색 짝 전부와 버튼 상태마다의 글자와 그 글자가 얹힌 패널을 열네 테마 모두에서 WCAG 로 잰다. 반투명 색은 실제 배경에 합성한 뒤에 잰다 — 그대로 재면 화면에 보이는 것보다 좋은 비율이 나온다.

그래서 글자 색은 고르는 것이 아니라 끌어낸다 — 빌더가 팔레트 값을 출발점으로 삼아, 그 글자가 놓일 수 있는 모든 표면에서 기준을 넘길 때까지 밝기를 민다. 팔레트를 바꾸면 대비가 따라온다. 규칙과 그 뒤의 함정 →

검사·배포·이 사이트

진입점 하나가 검사 전부를 돌린다. 검사마다 볼 수 있는 범위가 다르다.

bash addons/gohud/tools/check_all.sh

검사	잡는 것
`run_tests.sh` 네 화면 크기	위젯 동작·배치, RTL 위치, 키보드 포커스, 스킨이 실행 중에 만드는 색의 대비, 프리셋 전부
`new_project_check.sh`	호스트 프로젝트에 몰래 기대는 것. `--zip` 이면 배포본 그대로, `--export` 면 Web 빌드까지
`check_contrast.py`	테마 파일 전부의 WCAG 대비 — 버튼 상태와 반투명 패널 포함
`check_generated.py` · `check_scaffold.sh`	생성된 테마가 팔레트와 맞는가, 임시 테마가 만들어지고 대비를 통과하는가
`check_package.py`	package.json 버전 적용·CHANGELOG 이동·ZIP 내용을 임시 사본에서
`check_site.py`	이 사이트의 링크·절 앵커·문서 언어·용어 사전·다이얼 표

최근 기록 — 2026-09-13, Godot 4.7.2, macOS, Compatibility 렌더러. 빈 프로젝트에서 390×844·844×390· 768×1024·1280×800 네 크기 모두 438/438, GoRuntime 오토로드를 켠 상태도 438/438, Web 내보내기 성공, 여섯 테마 대비 미달 0. 이번 실행에 Android·iOS 실기기는 포함되지 않았다.

배포 버전

cat addons/gohud/package.json       # { "version": "1.1.0" }
bash addons/gohud/tools/release.sh  # 검사 전부 → ZIP → 빈 프로젝트에서 검증
bash addons/gohud/tools/package.sh  # 1.1.0 → builds/1.1.0/gohud-1.1.0.zip

버전은 package.json 에 적힌 값이다 — 패키징이 올리지 않는다. 새 버전을 내려면 먼저 그 숫자를 바꾼다. 성공하면 plugin.cfg·GoUi.VERSION 을 그 값으로 맞추고, 그 버전을 처음 패키징할 때만 CHANGELOG.md 의 Unreleased 항목을 날짜 붙은 버전으로 옮긴다. 같은 버전을 다시 패키징하면 ZIP 을 새로 만들어 이전 것과 바꾼다. 실패하면 아무것도 바뀌지 않는다. ZIP 에는 이 사이트·검사·도구와 package.json 이 들어가지 않는다.

이 사이트

python3 addons/gohud/tools/make_site.py            # 용어 사전과 다이얼 표를 소스에서 생성
python3 addons/gohud/tools/check_site.py           # 링크·앵커·언어·용어 사전·생성 표 검사
bash addons/gohud/tools/site_shots.sh /tmp/shots   # 페이지마다 데스크톱·폰 폭 촬영

페이지는 www/ 의 평범한 HTML 이다 — 루트가 영문, ko/ 가 한국어. GitHub Actions 워크플로가 이 폴더를 사이트 최상위로 배포한다.

게임 UI 를 리소스 한 장으로 굴린다

새로 추가: 아케이드, 코믹, Material 3, 어린이용 생김새

Material 3 — 앱 화면용

어린이 — 장난감 상자

코믹 — 굵은 잉크

아케이드 — 칠한 키

아케이드: 칠한 키와 두꺼운 판

모든 키를 칠한다

밤에는: arcade_dark

아케이드 생김새가 동작하는 방식

면

잘 읽히는 라벨

창

코믹: 굵은 잉크와 딱딱한 그림자

모든 위젯이 잉크를 입는다

밤에는: comic_dark

코믹 생김새가 동작하는 방식

모든 면에 StyleBox 하나

누르면 납작해진다

나머지는 스킨이 칠한다

창에는 캡션이 붙는다

낮에도 밤에도 잘 읽힌다

배치는 바뀌지 않는다

설정 셋과 호출 하나

게임 화면에서는 이렇게 보인다

무엇을 대신해 주는가

모든 치수가 토큰이다

보이는 크기와 누르는 크기가 다르다

노치와 키보드를 피한다

뒤로 가기가 하나씩 닫힌다

알림은 입력을 훔치지 않는다

아이콘은 이름으로 부른다

생김새 열넷, 코드 한 줄

읽히는지는 잰다

gohud 설치

빠른 시작

생김새 바꾸기 — 색뿐 아니라 모양까지

중세 테마

같은 화면, 폰에서도 데스크톱에서도

같은 시트, 다른 생김새

스킨 — 테마가 닿지 못하는 자리

위젯

기다리기, 알리기, 세기

폼과 목록

게임이 실제로 쓰는 모양

화면 위에

Go HUD Skill

읽히는지는 눈대중이 아니라 잰다

검사·배포·이 사이트

배포 버전

이 사이트

밤에는: `arcade_dark`

밤에는: `comic_dark`