Jetpack Compose 를 사용하여 처음으로 Desktop 을 타겟으로 개발한 마인크래프트 NBT 에디터 개발 후기.

서론

저번 프로젝트에 이어 Jetbrains 사에서 개발한 Jetpack Compose 라는 멀티 플렛폼을 타겟으로 한 선언적인 반응형 UI 프레임워크가 있다고 하길래 한 번 도전해봤다.
kotlin으로 짤 수 있고, 반응형인데 리액트처럼 문법(타이핑)이 거지같지 않고 친절하다고? 이걸 왜 안해??

본론

이 프로젝트는 뭔가 마무리는 했지만, 아직 부족한 기능이 많았다.
정말 기본적인 NBT 에디팅, 처음에 꼭 해보고싶었던 지도 출력 기능은 있으나 정말 딱 그 뿐이었다.

Jetpack Compose

나름 마음에 드는 프레임워크다. React 랑 큰 흐름은 비슷하지만, 내부 동작은 다른 것 같았다.
React 의 render는 Compose 의 Composition 이며, 가장 큰 차이점은 아마 Compose 는 Composition이 중간에 취소될 수 있다는 점인 것 같았다.
그런 이유로 Compose 는 부수효과 사용을 최대한 배제하고 있으며, 오히려 그 점이 나에게는 큰 도움이 된 것 같다.

그리고 javascript 와는 달리 equals를 재정의할 수 있어 객체의 동일성 비교를 해줄 수 있다는 점 정도?

거기에 선언적 문법이고, kotlin의 간결한 문법에 더해 JSX같이 이상한 문법이 아니라 함수의 형태를 그대로 쓸 수 있다는 점이 마음에 들었다.

특히, 아주 친절하고 자세하게 설명되어있는 문서 덕분에 React 에 대한 이해도 어느정도 생겼다.
React 문서는 '이걸 하면 이렇게 됩니다!' 였다면 Compose 의 문서는 '이걸 하면 이런 이유로 이렇게 되는데, 이건 하면 안돼요' 같은 느낌이었다.

그래서 이 프로젝트 전에는 React 를 짤 때도 부수효과 훅을 과도하게 사용하는 편이었는데, 불필요한 경우와 반드시 필요한 경우를 구별할 수 있게 되었다.

기타, Java의 swing에 비해 UI 디자인 자유도가 높고, .NET 처럼 생소하지도 않은 프레임워크를 찾아서 좋다.
결론적으로는 이 프레임워크를 통해서 실무에 쓰이는 React에 대해 조금 더 명확하게 알게된 기회가 되기도 했고.

개발 후기

에디터

이전 프로젝트에서 NBT데이터를 읽는 로직을 개발한 적이 있었기 때문에, 그것을 기반으로 데이터를 출력하고 수정/저장하는 기능들을 만들었다.
여기에 더하여 몇몇 편의 기능들을 추가했는데, 다음과 같다:

• 항목 왼쪽의 계층 깊이 선을 누를 경우 해당 계층이 collapse 됨
• 항목 왼쪽의 계층 깊이 선에 hover하면 해당 계층의 최상위 부모 엘리먼트가 에디터 상단에 출력됨
• 여러 항목을 선택하면 우측 스크롤바 영역에 선택된 항목들의 상대 위치를 표시하고, 위치 표시 UI에 hover하면 선택된 항목을 보여줌
• 기타등등!!

사실 이거 다 Jetbrains 계열 IDE의 특징들이다.
Jetbrains 의 프레임워크를 사용하여 만든 만큼 뭔가 최대한 Jetbrains 계열 IDE의 느낌을 내보고싶었다.
그래서 결론적으로는 뭔가 만족할만한 에디터가 나오기는 했다.

지도

청크의 지도를 출력하는 기능이다.
우선 청크 NBT 데이터를 로드하고, 표면 - 지정된 범위에서 y가 가장 높은 고체 블럭을 가져온 후 그것을 1px로 잡아 출력한다.
블럭의 색은 처음에는 각각 입력해줄까 했는데, 블럭이 한두개가 아니었기 때문에 마인크래프트 클라이언트로부터 블럭의 텍스쳐를 뽑아내 그것의 평균 색을 사용하도록 했다.

좌표 계산에 조금 애를 먹긴 했고, 반복이 느린 작업이라 최적화(반복으로 찾던 일부 작업을 비트 연산으로 변경하는 등의)도 조금 애를 먹긴 했다.

그리고 실제 마인크래프트 게임 내에서는 지도 상에서 위에서 아래로 빛이 내리며 그 고저에 따라 아래쪽에 그림자가 생기거나 위쪽에 밝은 음영이 생기는데, 그 사항까지도 구현했다.
연산 속도는 한 리젼의 지도를 그리는 데약 1~2초 걸리는 수준이며, 캐싱을 수행하여 한 번 로드한 지도는 다시 그리지 않는다.

추가적으로, y 좌표를 제한하여 지하의 단면도 출력할 수 있게 했다. 일정 y좌표 위의 모든 블럭을 날린 것으로 상정하고 작성하는 지도로, 지하 구조믈을 찾거나 네더의 지도를 그리는데 유용하다.

그래서?

나름 재미있는 경험이었다. 처음 손 댄 프레임워크 치고 괘 완성도있게 나오기도 했고.
그 프레임워크 자체도 꽤 재미있어서, 또 만들어볼만한 주제가 생각나면 다시 사용해볼 것 같다.
다만 React 와 비슷하지만 다른 프레임워크라 주화입마가 걱정이 되긴 한다. (...)

비록 이전 프로젝트처럼 빈틈없고 곰꼼하게 개발하지는 않았지만, 나름 재미있게 쉬어가는 느낌으로 딱 토이프로젝트 느낌이었달지.
충전할 수 있는 시간이 된 것 같았다.