RoomCraft #11. 에디터 툴바 — 키보드에서 버튼으로

소스코드 → github.com/Jywan/RoomCraft

들어가며

지난 편에서 씬 분리를 완료하고 시작 화면을 만들었다. StartScene에서 프로젝트를 만들거나 불러오면 EditorScene으로 넘어가는 흐름까지 확인했다.

이번에는 에디터 화면에 툴바를 추가해서, 키보드 단축키 없이도 모든 기능을 버튼으로 쓸 수 있게 만든다. 동시에 저장 기능도 연결하고, 불필요한 코드들을 정리했다.

---

왜 툴바가 필요한가

기존에는 T키(시점 전환), G키(그리드), R키(회전), Delete키(삭제) 같은 단축키로만 기능을 실행했다. 문제는:

• 모바일/WebGL에서는 키보드가 없을 수 있다
• 사용자가 단축키를 외워야 한다
• 기능이 눈에 보이지 않으면 존재 자체를 모른다

그래서 화면 하단에 툴바를 두고, 키보드와 버튼 둘 다 동작하는 구조로 만들었다.

---

EditorToolbar 구현

핵심 구조는 단순하다. 버튼 클릭과 키보드 입력이 같은 메서드를 호출한다.

private void Start()
{
    mainMenuButton.onClick.AddListener(OnMainMenu);
    viewToggleButton.onClick.AddListener(OnViewToggle);
    gridToggleButton.onClick.AddListener(OnGridToggle);
    rotateLeftButton.onClick.AddListener(OnRotateLeft);
    rotateRightButton.onClick.AddListener(OnRotateRight);
    deleteButton.onClick.AddListener(OnDelete);
    saveButton.onClick.AddListener(OnSave);
}

private void Update()
{
    // UI 입력 중이면 단축키 무시
    if (EventSystem.current != null &&
        EventSystem.current.currentSelectedGameObject != null)
        return;

    if (Input.GetKeyDown(KeyCode.T)) OnViewToggle();
    if (Input.GetKeyDown(KeyCode.G)) OnGridToggle();
}

회전/삭제 키(Q, E, R, Delete)는 FurnitureInteraction에서 처리하고, 툴바 버튼은 같은 public 메서드를 호출하는 방식이다.

EditorScene 하단 툴바 — 메인/시점/그리드/회전/삭제/저장 버튼

---

회전 개선 — 90도에서 45도로

기존에는 R키 한 번에 90도씩만 회전했다. 가구 배치에서 45도 각도가 필요한 경우가 꽤 있다. 대각선으로 놓는 소파 같은 게 대표적이다.

/// 지정한 각도만큼 Y축 회전
public void RotateBy(float angle)
{
    transform.Rotate(Vector3.up, angle);
}

Rotate90()을 RotateBy(float angle)로 바꾸고, 외부에서 각도를 넘기는 방식으로 변경했다. 툴바의 «회전 버튼은 -45도, 회전» 버튼은 +45도를 넘긴다.

가구를 45도 단위로 회전한 모습

---

저장 UI 연결

툴바의 “저장” 버튼을 누르면 EditorSaveUI의 SavePanel이 열린다. 프로젝트 이름을 입력하고 “저장하기”를 누르면 JSON으로 저장된다.

저장 버튼 클릭 시 — 프로젝트 이름 입력 팝업

EditorSaveUI는 Canvas에 부착. 툴바의 저장 버튼이 OpenSavePanel()을 호출하고, 내부에서 ProjectManager.SaveProject()를 실행한다.

---

불필요한 코드 정리

씬 분리 후 역할이 사라진 파일들을 삭제했다:

• SaveLoadUI.cs — StartScene + EditorSaveUI로 대체됨
• RoomSetupUI.cs — StartSceneUI로 대체됨
• RoomTestSetup.cs — EditorToolbar로 대체됨

그 외에도 FurnitureObject.cs의 디버그 로그, ProjectManager.cs의 불필요한 using문도 정리했다.

---

삽질 기록

UI 버튼 클릭 시 카메라가 돌아간다

3D 뷰에서 툴바 버튼을 클릭하면, 클릭 이벤트가 카메라 드래그로도 인식되는 문제. CameraController가 좌클릭을 무조건 드래그 시작으로 처리했기 때문이다.

해결: EventSystem.current.IsPointerOverGameObject() 체크를 추가해서 UI 위 클릭은 무시.

특수문자가 렌더링 안 된다

버튼에 « » 같은 특수문자를 넣었더니 네모(□)로 나왔다. 폰트 아틀라스에 해당 유니코드 범위가 없었기 때문.

해결: Font Asset Creator에서 3131-318E(한글 자모) + 25A0-25C9(기하학 도형) 범위를 추가해서 아틀라스 재생성.

---

정리

기능	핵심 구현
에디터 툴바	EditorToolbar.cs — 버튼 7개 + 키보드 단축키 병행
회전 개선	RotateBy(float angle) — 45도 단위, Q/E키
저장 연결	EditorSaveUI.OpenSavePanel() — 툴바 버튼에서 호출
메인 복귀	SceneManager.LoadScene("StartScene")
코드 정리	SaveLoadUI, RoomSetupUI, RoomTestSetup 삭제
카메라 버그 수정	IsPointerOverGameObject() 체크 추가

다음 편에서는 줌 인/아웃 버튼을 추가하고, UI 디자인을 좀 더 다듬어볼 예정이다.