Unity ui toolkit with cursor - 목업

전달한 ui

사이트

유니티

 

 

1)  @UI 폴더 기준 Web(CSS/HTML/JS) 페이지 구성 + 로컬 서버 실행

명령문(정리본)

• @UI 폴더 아래의 리소스를 기준으로,
  • HTML / CSS / JS로 페이지를 구성한다.
  • 페이지는 1920×1080 해상도를 기준으로 레이아웃을 설계한다.
  • 단, 사용자의 화면 크기에 따라 반응형(Responsive) 으로 대응해서 스크롤 없이 한 화면에 들어오도록 만든다.
• 로컬 서버를 띄워 실행한다.
  • 실행이 안 되면, “실행 안 됨”이라고 명확히 말한다(성공한 척 금지).

체크포인트(요구사항을 분해해서 기록)

• 입력: @UI/ 폴더(HTML/CSS/JS 및 이미지/리소스 포함)
• 출력:
  • index.html, style.css, main.js (혹은 동일 역할 파일들)
  • 로컬 서버 실행 방법(예: python -m http.server, node 등)
• 레이아웃:
  • 기준 해상도 1920×1080
  • 화면 크기 변동 대응(가로/세로, 16:9 유지 여부 등)
  • “한 번에 보이도록”(스크롤 최소/금지)

---

2) @Assets/UI Toolkit 폴더에 Unity UI Toolkit(USS/UXML/C#)로 변환

명령문(정리본)

• @Assets/UI Toolkit 폴더 아래에,
• 위에서 만든 @UI(Web) 결과를 Unity UI Toolkit으로 변환해서 구현한다.
  • CSS → USS
  • HTML → UXML
  • JS → C# (UI Toolkit 이벤트/로직)
• 구조는 “@UI 기반”을 유지하되, Unity 방식으로 합리적으로 매핑한다.
  • (예: 버튼 클릭, 탭 전환, 패널 show/hide, 리스트 렌더링 등)

체크포인트(변환 규칙을 기록)

• UXML : VisualElement 트리 구조(컨테이너/패널/버튼/라벨/이미지)
• USS : 레이아웃/폰트/마진/패딩/정렬/크기/반응형(퍼센트, flex)
• C# :
  • UIDocument 루트 접근
  • root.Q<>() 로 요소 바인딩
  • RegisterCallback<ClickEvent>() 등 이벤트 연결
  • show/hide는 style.display 또는 class 토글 방식

---

메모

@UI 이 폴더 아래 이미지처럼 CSS,HTML, JS로 페이지 구성하고 로컬서버 띄워줘

전체적인 해상도는 1920x1080으로 구상해줘

사용자의 화면에 따라 해상도 대응해줘 한번에 보이도록

@Assets/UI Toolkit 이폴더 아래 @UI 을 기반으로 유니티 toolkit 을 이용해서 css> uss, html > uxml , js>c#으로 만들어줘

 

피그마와 연동해보면 좋을듯

 

참고영상)

https://www.youtube.com/watch?v=sVaeJb68sEo

 

https://github.com/TrackMan/Unity.Package.FigmaToUnity

GitHub - TrackMan/Unity.Package.FigmaToUnity: Unity plugin for importing entire Figma pages into Unity UI Toolkit files.