projects

배경

각 문서가 연결되어 있다는 사실을 시각화하여, 한 문서에서 이웃한 문서로 탐색할 수 있는 기능을 만들고 싶었습니다.

해당 기능을 먼저 별도 도구로 공개한 다음 개밥먹기 주도 개발을 해보고 싶어 만들게 되었습니다.

그래프 자료구조를 다루기에 적합한 Cytoscape.js를 사용하고 싶었습니다.

또한 컴포넌트 기반 개발이 익숙한 저는, UI 요소를 다룰 때의 성능이 뛰어난 Solid.js를 경험해보고 싶어 wrapper를 만드는 방향으로 진행하게 되었습니다.

무엇을 하는가

Munchkeen은 정점과 간선으로 이루어진 그래프 데이터를 웹페이지에 렌더링하고 탐색할 수 있게 하는 도구입니다. 선택한 정점을 중심으로 바로 이웃한 정점과 간선이 보이도록 그래프를 다시 구성하여 연결 관계를 따라갈 수 있습니다.

사용자는 정점을 드래그해 위치를 옮기거나 정점과 간선을 선택할 수 있습니다. 또한 스크롤을 통해 그래프가 그려지는 영역을 확대하거나 축소할 수 있습니다.

설계와 구현

중심 로직을 framework-agnostic하게 분리하는 것에 신경 썼습니다. 그래프를 검증하고, 현재 보여줄 부분을 추려내고, 배치하고, 렌더러가 적용할 변경 사항을 계산하는 과정은 특정 UI 라이브러리나 렌더러에 의존하지 않는 순수한 로직으로 분리했습니다.

Solid는 이 중심 로직을 컴포넌트 API와 연결하고, Cytoscape.js 어댑터는 계산된 결과를 실제 화면에 반영합니다. 덕분에 나중에 다른 UI 라이브러리를 위한 wrapper나 렌더러가 필요해지더라도 그래프를 다루는 로직은 그대로 유지할 수 있습니다.

이러한 분리가 사용자에게 복잡한 내부 추상화로 드러나지 않도록 컴포넌트 props를 최소화했습니다.

현재 상태

현재 Munchkeen은 실험 단계입니다. 아직 실제 제품에 적용해 사용해 보지 않았기 때문입니다.

처음 의도했던 제품에 Munchkeen을 적용하고, 개밥먹기를 통해 실제 사용 맥락에서 검증하는 것이 다음 단계입니다. 이 과정에서 원래 의도한 방식으로 사용할 수 있음을 확인하면 실험 단계를 벗어났다고 판단할 수 있을 것 같습니다.

배경

회사에서 진행한 PoC에서 Unity로 만든 AR 프로젝트를 모바일 애플리케이션에 통합해야 했습니다. Unity를 Unity as a Library 형태로 사용하기 위해서는 작업자가 직접 처리해야 하는 밑작업이 많았습니다.

특히 iOS 연동 과정에서는 TypeScript와 C#뿐만 아니라 Objective-C 코드까지 작성해야 했습니다. Unity와 Expo 앱 사이의 통신 방식도 표준화되어 있지 않았습니다. 이런 연동 과정을 간소화하고 일관된 통신 창구를 제공하기 위해 Gluegun을 만들었습니다.

무엇을 하는가

Gluegun은 Unity 프로젝트와 Expo 앱 사이에서 정보를 주고받을 수 있도록 통신 창구를 제공합니다. 정해진 메시지 계약을 따르면 양쪽에서 JSON 형식으로 정보를 주고받을 수 있습니다.

플랫폼마다 통신 방식을 처음부터 직접 구성하는 대신, Unity와 Expo 각각에 제공되는 패키지를 통해 일관된 방식으로 연동할 수 있습니다.

설계와 구현

각 영역에서 가장 적합하다고 생각하는 구현 방식을 따르는 데 신경 썼습니다. Expo 쪽에서는 config plugin을 이용해 Android와 iOS에 필요한 Unity 빌드 산출물을 다룹니다.

통신은 JSON을 기반으로 하지만 특정 JSON 파서에 의존하지 않도록 Unity 쪽에 직렬화 인터페이스를 열어 두었습니다. 사용자는 필요한 구현체를 직접 선택해 메시지를 처리할 수 있습니다.

또한 실제 사용 흐름을 따라갈 수 있도록 설치 방법, 플랫폼별 연동 과정, 메시지 계약을 문서화했습니다.

현재 상태

회사에서 진행한 PoC를 통해 Gluegun이 정상적으로 동작한다는 점을 확인했습니다. 다만 아직 이 라이브러리를 사용하는 공개된 프로그램은 없습니다.

실제 제품에서 충분히 검증된 상태는 아니므로 현재는 실험 단계로 두고 있습니다.