[ 베라노트 개발일지 #6 ]
UI/UX 디자인 _ 공간 완성 (4/4)
안녕하세요. 베라노트 개발팀입니다. 지난 5부 과정을 통해 베라노트 MVP 모델의 온보딩 진입 시퀀스부터 내부 공간을 채우는 핵심 에셋 컴포넌트들에 대해 간단히 살펴보았습니다. 온보딩 화면, 공간 선택, 노트 디자인, 대형 로케이션 가구, 그리고 디테일을 채우는 소품 오브젝트까지 - 개별 구성 요소들을 하나씩 짚어왔다면, 이번 6부에서는 이 요소들이 실제로 하나의 완성된 공간으로 조립되는 과정을 다룹니다. MVP 모델에 맞게 가장 기본적인 형태로 구현되는 배치 로직과, 향후 확장될 커스터마이징의 방향성을 함께 정리해 보겠습니다.
1. 레이어 배치 시스템
베라노트의 공간은 하나의 평면 이미지가 아니라, 여러 겹의 레이어가 순서대로 쌓여 만들어지는 구조입니다. 가장 아래층에는 앞서 3부에서 다룬 배경 공간 이미지가 자리하고, 그 위로 그랜드 피아노나 소파, 롱 테이블 같은 대형 로케이션 오브젝트가 배치되며, 최상단에는 스탠드 조명이나 화분, 책장 같은 디테일 소품이 얹히는 방식입니다.
이러한 레이어 구조를 채택한 이유는 명확합니다. 3D 렌더링 대비 압도적으로 가벼운 리소스로도 입체감 있는 공간감을 표현할 수 있고, 모바일 환경에서의 로딩 속도와 배터리 효율성을 동시에 확보할 수 있기 때문입니다. MVP 단계에서는 이 2D 레이어 기반 방식이 최적의 선택이며, 3D 전환은 서비스 안정화 이후의 확장 과제로 남겨두었습니다.
2. 배치 인터랙션 : 고정 슬롯 방식
공간을 구성하는 각 오브젝트는 임의의 좌표에 자유롭게 놓이는 것이 아니라, 사전에 정의된 고정 슬롯(Fixed Slot) 안에 정렬되는 방식으로 배치됩니다. 예를 들어 로케이션 가구는 3열 그리드 중 지정된 칸에, 소품 오브젝트는 가구 주변의 보조 슬롯에 매칭되는 구조입니다.
이 방식을 택한 이유는 두 가지입니다. 첫째, 8의 배수 마진 시스템과 결합되어 어떤 디바이스 해상도에서도 레이아웃이 깨지지 않는 안정성을 확보할 수 있습니다. 둘째, MVP 단계에서 사용자가 자유 배치로 인해 발생할 수 있는 시각적 혼란(겹침, 어색한 여백 등)을 사전에 방지하고, 누구나 실패 없이 예쁜 공간을 완성할 수 있도록 돕습니다.
3. 커스터마이징 버튼 : 있지만 아직은 잠긴 기능
공간 완성 화면에는 커스터마이징 버튼이 노출됩니다. 다만 MVP 모델에서는 이 버튼을 눌렀을 때 실제 편집 기능이 작동하지는 않습니다. 이는 미완성이 아니라, 의도된 설계 선택입니다. 핵심 기록 경험을 먼저 안정적으로 제공하는 것이 우선이며, 배치 편집이라는 부가 기능은 로드맵상 다음 단계로 배정되어 있기 때문입니다.
아래 표는 MVP 모델과 향후 정식 서비스에서의 커스터마이징 범위 차이를 정리한 내용입니다.
| 구분 | MVP 모델 | 정식 서비스(예정) |
|---|---|---|
| 배치 방식 | 고정 슬롯 내 선택 | 자유 드래그 배치 |
| 커스터마이징 버튼 | 노출만, 기능 비활성 | 전면 활성화 |
| 레이아웃 안정성 | 높음 (충돌 없음) | 사용자 책임 하 자유도 확대 |
| 개발 우선순위 | 핵심 기록 기능 우선 | 확장 기능으로 후순위 개발 |
이처럼 단계적으로 기능을 확장하는 방식은, 서비스 초기에 발생할 수 있는 기술적 리스크를 최소화하면서도 사용자에게는 "앞으로 더 자유로워질 공간"이라는 기대감을 자연스럽게 심어줄 수 있는 전략이기도 합니다.
4. 공간 완성이 의미하는 것
지금까지의 여정을 다시 정리해보면, 사용자는 공간(3부) → 노트 디자인(3부) → 로케이션 가구(3부) → 소품(5부)을 거쳐 마침내 하나의 완성된 공간을 마주하게 됩니다. 이 완성된 공간은 단순한 배경화면이 아니라, 앞으로 사용자가 매일 기록을 쌓아갈 디지털 아날로그 서재의 역할을 하게 됩니다.
고정 슬롯 기반의 배치라는 제약이 오히려 완성도 높은 첫 경험을 보장하고, 이후 정식 서비스에서 자유 드래그 방식으로 확장되면서 사용자의 개인화 욕구를 더 깊이 충족시키는 구조입니다. 제약에서 시작해 자유로 확장되는 이 흐름 자체가, 베라노트가 지향하는 "천천히, 그러나 온전하게 완성되는 나만의 공간"이라는 철학과도 맞닿아 있습니다.
이번 6부 과정을 통해 베라노트 공간이 레이어 구조와 고정 슬롯 시스템을 기반으로 어떻게 완성되는지, 그리고 MVP 단계에서 커스터마이징 기능을 의도적으로 잠가둔 이유까지 살펴보았습니다. 이어지는 개발일지 7부에서는 완성된 이 공간 위에서 실제 기록 데이터가 어떻게 저장되고 노트 형태로 시각화되는지, 데이터와 UI가 연동되는 지점을 다뤄보도록 하겠습니다. 점진적으로 실체를 드러내는 베라노트의 여정을 흥미롭게 지켜봐 주시기 바랍니다. 감사합니다.
#베라노트 #개발일지 #UIUX디자인 #MVP모델 #공간디자인 #커스터마이징 #레이어시스템
댓글 없음:
댓글 쓰기