← Portfolio

PROJECT CASE STUDY

InteReal

AI 기반 인테리어 통합 솔루션. 웹 플랫폼과 Unreal Engine을 연결해 도면과 3D 인테리어 에셋을 편집하고, 배치 결과를 동기화하는 UGC 콘텐츠 플랫폼을 구현했습니다.

Unreal Engine 5C++REST APIJSONSubsystem

PROJECT OVERVIEW

AI 기반 통합 건축·인테리어 솔루션

AI가 생성·분석한 건축 데이터를 웹과 실시간 3D 편집 환경으로 연결하여, 도면 확인부터 공간 편집·인테리어 배치·결과 저장까지 하나의 흐름으로 제공합니다.

건축가 · 디자이너 · 사용자설계 요청 · 도면 · 조건 입력
AI 설계·분석공간 구성 · 인테리어 추천 · 도면 데이터 생성
통합 건축 데이터 플랫폼프로젝트 · 도면 · 에셋 · 편집 상태 · 버전 관리
Web Platform프로젝트 관리
데이터 조회
Unreal Engine Editor2D 도면 편집
3D 공간 시각화
에셋 배치 및 편집
최종 인테리어 결과도면 · 3D 공간 · 배치 데이터 · 저장 버전

MY CONTRIBUTION

전체 솔루션 중 Unreal Engine 공간 편집 클라이언트에서 다음과 같은 핵심 시스템들의 개발을 맡았습니다.

  • 2D 평면도 편집
  • 데이터 에셋 기반 카탈로그 배치 파이프라인
  • UI 구조 설계

01 / 2D FLOOR PLAN

도면 단계의 검토 한계

기존에는 설계 데이터를 3D 공간에 배치한 뒤에야 가구 구성과 공간의 형태를 확인할 수 있었습니다. 평면 단계에서 수정이 필요하면 데이터를 다시 변경하고 3D 결과를 재확인하는 과정을 반복해야 했으며, 작은 배치 변경에도 검토 비용이 발생했습니다.

2D 도면 위에서 가구를 직접 배치하고 수정하면서, 공간 구성을 3D 결과와 함께 확인할 수 있는 편집 화면을 구현했습니다.

InteReal의 2D 평면도와 3D 배치 결과
2D 평면도 편집과 3D 배치 결과

2D 도면을 설계안을 수정하는 작업 공간으로 확장했습니다

이제 사용자는 평면도에서 가구의 위치와 방향을 먼저 조정하고 공간 구성을 빠르게 검토할 수 있습니다. 변경된 결과는 3D 인테리어 공간에도 이어지기 때문에, 2D에서 수정한 설계안을 별도의 작업으로 다시 구현할 필요가 줄어듭니다.

2D 도면은 단순한 결과 확인용 이미지가 아니라, InteReal의 건축·인테리어 설계 데이터를 검토하고 수정하는 첫 번째 작업 공간으로 확장되었습니다.

02 / ASSET PIPELINE

외부 자산을 공통 데이터로 연결하는 파이프라인

InteReal의 Asset Pipeline은 가구 모델을 Unreal에 추가하는 기능을 넘어, 외부 모델을 검색·미리보기·배치·저장 가능한 공통 자산 데이터로 변환하는 연결 계층입니다.

자산 등록 과정을 반복하기 어려웠습니다

새 가구를 추가할 때마다 모델 Import, 썸네일 제작, 크기와 카테고리 입력, DataTable 등록, UI 표시 확인, 배치 규칙 설정을 반복해야 했습니다. 자산 수가 늘어날수록 등록 누락과 메타데이터 불일치가 발생하기 쉬운 구조였습니다.

InteReal의 에셋 카탈로그와 배치 UI
에셋 카탈로그에서 자산을 선택하고 배치하는 화면

자산 등록 이후의 연결 비용을 줄였습니다

자산을 한 번 등록하면 카탈로그·배치·저장 흐름에서 같은 정보를 재사용할 수 있습니다. 새 가구를 추가할 때 화면과 배치 로직을 각각 수정하는 작업이 줄어들어 등록 이후의 연결 비용과 누락 가능성을 낮췄습니다.

결과적으로 자산 종류가 늘어나도 시스템별 예외 처리를 반복하지 않고, 동일한 흐름으로 탐색·배치·복원할 수 있습니다. 자산 데이터와 화면 표현이 분리되어 콘텐츠 확장에 따른 유지보수 부담도 줄어듭니다.

03 / UI ARCHITECTURE

UI 확장에 따른 복잡도 개선 및 예방

프로젝트·도면·버전·에셋처럼 비슷한 목록 화면이 늘어나면서, 화면마다 검색과 선택 동작을 따로 구현하면 사용자 경험과 유지보수 방식이 쉽게 달라질 수 있었습니다. 네트워크 응답과 편집 동작이 화면에 직접 얽히면 작은 변경에도 여러 화면을 함께 수정해야 했습니다.

재사용 UI 구성 요소

  • 공통 입력BaseButton · BaseInput · BaseComboBox · BaseSlider · BaseToggleSwitch · SelectableButton
  • 공통 테마InteRealThemeData · 색상·배경·테두리·텍스트 기준을 Data Asset으로 관리
  • 검색 목록SearchListWidget · 프로젝트·도면·버전 목록에 공통 적용
  • Item WidgetFurnitureItemWidget · MaterialItemWidget · OpeningItemWidget · LightsItemWidget
  • 기능형 컴포넌트IconTextButton · SelectableButton · ToggleButton · ColorWheelWidget
InteReal의 공통 편집 UI와 패널 화면
공통 UI와 편집 패널이 결합된 화면

일관된 편집 경험을 유지할 수 있도록 구조를 정리했습니다

반복되는 목록과 입력 경험을 하나의 기준으로 통일하고, 화면별 데이터와 동작은 독립적으로 유지했습니다. 덕분에 새로운 목록이나 편집 패널을 추가할 때 기존 화면의 동작을 다시 구현하지 않아도 되고, 한 번의 UI 개선이 여러 화면에 일관되게 적용됩니다.

결과적으로 화면 수가 늘어나도 사용자는 같은 방식으로 탐색·선택·편집할 수 있으며, 기능 확장에 따른 UI 변경 범위와 테스트 부담을 줄일 수 있었습니다.

RESULT & GROWTH

기능보다 기준을 먼저 설계하는 개발자로

01 / 협업의 기준

공통 규칙을 먼저 합의

AI 프로그래머들과 기능을 나눌 때 구현에 앞서 데이터 형식, 책임 범위, 시스템 간 연동 기준을 먼저 맞췄습니다. 서로 다른 시스템을 연결하려면 각자의 구현보다 공통 규칙을 합의하는 과정이 중요하다는 것을 배웠습니다.

02 / 서비스의 기준

사용자의 작업 흐름을 기준으로 판단

실무자 앞에서 프로젝트를 발표하며 기술 구조를 나열하는 방식에서 벗어나 사용자의 문제, 작업 흐름, 서비스의 가치 중심으로 내용을 재구성했습니다. 사용자가 무엇을 더 쉽게 할 수 있는가를 기준으로 기능의 우선순위를 판단하게 되었습니다.

03 / 설계의 기준

변경과 확장 비용까지 고려

작업 과정에서 반복되는 UI와 등록 작업을 공통 컴포넌트와 재사용 가능한 구조로 바꾸었습니다. 기능이 동작하는지에 그치지 않고, 이후 수정 범위와 확장 비용까지 고려해 설계하는 습관을 갖게 되었습니다.

InteReal을 통해 협업의 기준을 맞추고, 사용자 가치로 판단하며, 확장 가능한 구조를 설계하는 개발자로 성장할 수 있었습니다.

↑ 맨 위로