[ 베라노트 개발일지 #5 ]
UI/UX 디자인 _ MVP 모델을 위한 기초 이미지
안녕하세요. 베라노트 입니다. 지난 개발일지들을 통해 베라노트가 지향하는 아날로그적 기록 철학과, 사용자의 시각적 피로도를 낮추기 위해 웹 콘텐츠 접근성 가이드라인(WCAG) 표준을 통과시킨 10단계 브라운 컬러 시스템 기술 명세를 공유해 드렸습니다. 이번 개발일지 4부에서는 베라노트의 핵심 기능과 최소 기능 제품(MVP, Minimum Viable Product)의 시각적 실체를 결정짓는 초기 와이어프레임 및 기초 그래픽 에셋의 설계 과정을 다룹니다. 사용자가 앱을 처음 마주하는 온보딩 순간부터 자신만의 독립적인 디지털 아날로그 공간을 구축하기까지의 전체적인 흐름을 유기적으로 연결하는 UI/UX 레이아웃의 기본 개념을 작성해 보았습니다.
1. 온보딩 이미지에 대한 내용
사용자가 베라노트라는 브랜드를 처음 경험하는 가입 및 로그인 단계는 서비스의 첫인상을 결정짓는 가장 중요한 부분입니다. 우리는 텍스트 중심의 복잡한 설명 대신, 브랜드 고유의 브라운 아이덴티티를 전면에 내세운 카드형 화면 구성을 채택했습니다. 메인 흐름은 크게 환영 세션, 철학 세션, 인증 및 가입 제어 화면으로 분기되어 사용자의 몰입감을 점진적으로 유도합니다.
"안녕하세요. 베라노트 입니다."라는 직관적인 웰컴 메시지와 함께 브라운-10 계열의 차분한 배경을 전면에 배치하여 안정감을 줍니다. 이어지는 화면에서는 "여기는 당신의, 당신에 의한, 당신을 위한 공간입니다."라는 슬로건을 배치하여 단순한 메모 앱이 아닌 독립적인 개인화 공간임을 인지시킵니다. 핵심 가입 영역에서는 카카오톡, 구글(Google), 네이버 등 대표적인 서드파티 소셜 인프라 버튼을 직관적으로 레이아웃하여 진입 장벽을 낮추었으며, 이미 계정이 존재하는 유저를 위해 최하단에 '로그인' 화면 인터랙션을 분리 설계했습니다.
2. 공간 선택 화면
인증을 마친 유저가 가장 먼저 마주하게 되는 인터페이스는 기록이 쌓이고 보관될 가상의 백그라운드 아키텍처를 결정하는 공간 선택 화면입니다. 여기에는 기본공간의 샘플로 두 개의 이미지만 표현하였습니다. (임의 이미지)
시각적 자극이 적은 편안한 감성의 기본 공간으로 사용자는 별도의 추가 비용이나 유료 구독 없이도 이 기본 선택 옵션만으로 온전한 '나만의 기초 공간'을 즉시 마련할 수 있습니다. 공간의 건축학적 구조를 다변화하거나 특수한 테마 스페이스를 확장하는 고도화 세션은 추후 확장 레이어로 연동될 예정이지만, 기본 골격만으로도 완벽한 독립 메모 룸의 역할을 수행합니다.
3. 베라노트 디자인 선택 화면
공간의 뼈대가 마련되었다면, 그 공간의 중심에서 실제 데이터(텍스트, 메타데이터)를 담아낼 핵심 컴포넌트인 '노트'의 비주얼 정체성을 선택해야 합니다. 베라노트의 핵심적인 부분 중 하나로, 사용자는 '나만의 베라노트' 디자인을 선택할 수 있습니다. 가장 중요한 내용을 담아놓는 '디지털 유산과 금고'의 개념을 포함하기에 보다 신중한 선택이 필요합니다.
이미지의 보이는 베라노트 디자인은 비교를 위한 것으로 기본/프리미엄(예시 1종)을 나타내고 있습니다. 기본 노트 제공에 독특한 재질과 감성을 가진 여러가지의 프리미엄 베라노트를 제공할 예정이고, 유저는 원하는 노트를 선택해 사용할 수 있습니다.
4. 베라노트 Location 선택 화면
노트 디자인이 결정되면, 사용자는 자신의 베라노트를 어디에 놓을지 선택할 수 있습니다. 테이블 위, 피아노 위, 소파 쿠션 위 등, 자신의 베라노트가 있게 될 공간을 자유롭게 선택할 수 있습니다.
아래 예시에는 3가지만 표현되었지만, 실제 개발에는 여러가지 다양한 곳을 추가할 예정입니다.
5. 내부 공간 꾸미기 소품 화면
마지막 단계는 대형 가구 주변의 여백을 채우고 공간의 디테일한 톤앤매너를 완성하는 소품 배치 인터페이스입니다. 내부 공간 꾸미기 소품 화면은 다양하고 많은 아이템들이 준비될 예정이며,
MVP 모델에서는 그 개념정도만 보여줄 수 있도록 간단히 설계했습니다.
미니멀 스탠드 조명, 자연의 생동감을 부여하는 토분 다육 선인장 오브젝트, 그리고 다량의 도서 메타데이터를 시각화할 수 있는 4단 우드 북케이스 등, 일상적이고 기본적인 아이템부터 상상을 넘는 기발한 아이템까지 많이 준비할 예정입니다. 앞서 언급한 바와 같이, 기본적인 가구 배치와 나만의 공간 마련은 기본 사양만으로도 충분히 완성이 가능합니다. 다만, 이처럼 소품을 더 정밀하게 다듬고 개성 있는 무드로 인테리어를 고도화하는 편집 세션은 헤비 유저들의 니즈에 맞춰 추후 구독 시스템 기반의 프리미엄 레이어로 자연스럽게 확장 및 연결될 예정입니다.
사용자가 기본 공간을 고른 후, 기본 노트를 고르고, 기본 테이블을 고르고, 기본 전등을 골랐다면,
내 공간에 해당 오브제들이 임의로 배치된 상태로 들어와 있게 됩니다.
즉, 어떤 공간에 테이블이 있고, 그 위에 베라노트가 놓여있으며, 옆으로는 스탠드 등이 하나 서있는 공간입니다. 이후 부터는 내가 원하는대로 얼마든지 그 공간을 계속 업그레이드하며 변경할 수 있습니다.
이번 4부 과정을 통해 베라노트 MVP 모델의 온보딩 진입 시퀀스부터 내부 공간을 채우는 핵심 에셋 컴포넌트들에 대해 간단히 살펴 보았습니다. 이어지는 개발일지 5부에서는 선택한 아이템들이 공간에서 어떻게 배치되고 연동되는지, MVP 모델에 맞게 가장 기본적인 느낌을 구현해 보도록 하겠습니다.
#베라노트 #개발일지 #UIUX디자인 #MVP모델 #와이어프레임 #앱디자인 #인프라설계
댓글 없음:
댓글 쓰기