베라노트 개발일지 #5

[ 베라노트 개발일지 #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모델    #와이어프레임    #앱디자인    #인프라설계

◀ 이전글      l      다음글 ▶

베라노트 개발일지 #4

[베라노트 개발일지 #4]
UI/UX 개발 과정 _ 와이어프레임과 브라운 컬러 시스템 (2/3)

안녕하세요. 베라노트 개발팀입니다. 지난 개발일지 3부에서는 베라노트가 지향하는 공간 중심의 UI/UX 기본 개념과 철학적 배경에 대해 깊이 있게 다루었습니다. 이번 개발일지 4번째 이야기에서는 이를 실제 화면으로 구현하기 위해 노코드(No-Code) 프로그램을 활용하며 치열하게 다듬어간 구체적인 와이어프레임(Wireframe) 설계 구조와 사용자의 시각적 피로도를 극단적으로 낮추기 위해 정밀하게 조율한 브라운 컬러 시스템(Primary Color System)의 세부 기술 데이터를 가감 없이 공유합니다. 본 포스팅은 총 3부작으로 기획된 UI/UX 디자인 집중 탐구 중 2번째 파트입니다.

---

1. 구조적 직관성을 위한 와이어프레임 설계 (Veranote Location & Space Style)

노코드 프로그램을 활용하여 프론트엔드 컴포넌트의 배치 연습을 진행하면서 가장 집중한 핵심 명제는 '사용자가 어떠한 학습 과정 없이도 공간과 노트를 직관적으로 제어할 수 있는가'였습니다. 그리드(Grid) 시스템의 붕괴를 막고 모바일 환경에서의 가독성을 보장하기 위해, 베라노트의 핵심 화면 레이아웃은 크게 두 가지 독자적인 컴포넌트 구조로 분리 설계되었습니다.

① Veranote Location (베라노트 위치 및 배치 컴포넌트)

사용자가 현재 위치한 디지털 공간과 그 내부에 종속된 노트들의 메타데이터를 시각화하는 화면입니다. 상단의 명확한 대형 텍스트 헤더 영역(Text)을 중심으로 균형을 잡은 뒤, 하단에 3열 배치 구조의 유연한 그리드(Flexible Grid)를 적용했습니다.

각 컴포넌트 카드는 완벽한 균등 스퀘어 박스 형태로 정렬되어, 데스크톱에서 모바일로 해상도가 전환되더라도 시선의 흐름이 상단에서 하단으로 자연스럽게 유도되도록 디자인을 통일했습니다. 최하단에는 중앙 정렬된 앵커(Anchor) 컴포넌트를 배치하여 레이아웃이 한쪽으로 치우치는 현상을 구조적으로 방지했습니다.

② Space Style (공간 스타일 및 매칭 컴포넌트)

공간의 아키텍처적 속성과 아날로그 스타일을 지정하는 편집 화면입니다. 이 영역에서는 사용자가 다량의 옵션을 마주해야 하므로, 인지적 과부하를 막기 위해 섹션별 그룹화(Grouping)와 상하 위계 구조 확립에 가장 큰 공을 들였습니다.

서브 타이틀(Text) 아래로 각각 3열 그리드가 멀티 레이어(Multi-layered Grid) 형태로 중첩되는 구조를 취하고 있습니다. 노코드 프로그램 내에서 프론트엔드 컴포넌트를 빌드할 때 반복적인 데이터 리스트 컨테이너가 깨지지 않거나 마진 압착 현상이 발생하지 않도록, 모든 간격(Margin)과 여백(Padding) 값을 8의 배수 단위로 고정하여 시스템 규격화를 완료했습니다.

기존의 전통적인 코딩 환경에서는 이러한 그리드 구조를 반응형 웹으로 구현할 때 CSS 미디어 쿼리가 복잡하게 꼬여 렌더링 지연이 발생하곤 했습니다. 그러나 최근의 노코드 툴 환경에서는 박스 모델의 독립성을 엄격하게 유지해 주는 컨테이너 레이아웃 방식을 채택할 수 있어, 컴포넌트 간의 간섭 현상을 배제한 채 와이어프레임 설계안을 모바일 화면에 그대로 투사할 수 있었습니다.

---

2. 정밀한 명도 대비를 적용한 브라운 컬러 시스템 (Primary Color Technical Specification)

베라노트만의 독창적인 감성과 내러티브, 그리고 아날로그적인 편안함을 시각적 레이어로 변환하기 위해 메인 브랜드 컬러는 Brown(브라운) 계열로 확정되었습니다. 그러나 감성적인 접근에만 의존하여 컬러를 배정할 경우, 저시력자나 야간 모드 환경에서 텍스트 인지도가 급격히 떨어지는 문제가 발생합니다. 이를 기술적으로 해결하기 위해, 웹 콘텐츠 접근성 가이드라인(WCAG)의 명도 대비 표준을 완벽히 충족하는 10단계의 세부 스케일(brown-1 ~ brown-10)을 정립하고 데이터 검증을 수행했습니다.

아래 도표는 베라노트 프론트엔드 소스코드에 직접 매칭된 고유 컬러 시스템입니다. 각 등급별 명도 스케일을 브라우저 환경에서 즉시 확인할 수 있도록 실제 컬러 샘플을 셀 내부에 직접 구현했습니다.

Color ID	Color Sample (실제 색상)	HEX Code	명도 대비 점수	WCAG 등급
brown-1	#f5f3ee	#f5f3ee	18.94 : 1	AAA
brown-2	#e7e1d6	#e7e1d6	16.14 : 1	AAA
brown-3	#d3cab6	#d3cab6	12.89 : 1	AAA
brown-4	#bfb295	#bfb295	10.02 : 1	AAA
brown-5	#ab9a74	#ab9a74	7.61 : 1	AAA
brown-6	#998456	#998456	5.79 : 1 / 3.63 : 1	AA
brown-7	#827049	#827049	4.36 : 1 / 4.81 : 1	AA / AAA
brown-8	#6d5e3d	#6d5e3d	3.32 : 1 / 6.33 : 1	AA / AAA
brown-9	#574b31	#574b31	2.46 : 1 / 8.55 : 1	고대비 텍스트
brown-10	#453b27	#453b27	1.91 : 1 / 11.01 : 1	고대비 텍스트

이 컬러 시스템의 설계 원리는 명확합니다. 시스템 전반의 베이스 백그라운드 및 영역 구분을 위한 카드형 컴포넌트에는 소프트한 라이트 스케일인 brown-1에서 brown-4 영역이 유기적으로 매칭됩니다. 반면 독자가 집중해서 읽어야 하는 텍스트, 중요 경계선, 아이콘 오브젝트 및 강조 서식에는 고대비 계열인 brown-8에서 brown-10 스케일을 엄격하게 교차 적용합니다. 이러한 명도 분리 법칙을 통해 아날로그 특유의 따뜻함을 유지하면서도, 대낮의 야외 시인성까지 확보하는 UI 뼈대를 구축할 수 있었습니다.

---

3. 노코드 프로그램 연습과 프론트엔드 설계의 상호작용

컴포넌트 중심의 설계를 진행하며 노코드 툴이 제공하는 생산성의 한계를 시험해 볼 수 있었습니다. 코드를 한 줄 한 줄 타이핑하며 브라우저 새로고침을 반복하던 과거 방식과 달리, 명도 대비의 유효성을 캔버스 위에서 실시간 데이터 플로우로 확인하며 튜닝하는 과정은 개발 속도를 비약적으로 상승시켰습니다.

• UI 컴포넌트의 자율성 보장: 특정 레이아웃 블록의 브라운 스케일 단계를 미세하게 수정하더라도, 연쇄적인 마진 오류나 하위 DOM 구조의 붕괴가 일어나지 않도록 컨테이너 스코프를 완전히 래핑했습니다.
• 반응형 모바일 데이터 최적화: 모바일 기기의 극단적인 종횡비 변화 환경에서도 3열 그리드가 가독성을 해치지 않고 1열 스택(Stack) 구조로 유연하게 드롭다운되도록 가시성 필터 로직을 가동 중입니다.

이번 2부 과정을 통해 베라노트 화면의 전체적인 레이아웃 프레임과 메인 컬러 테마의 정밀 명도 스펙트럼 세팅을 무사히 완료했습니다. 이어지는 마지막 3부(3/3) 게시물에서는 MVP기반의 최소 구현 모델 준비를 위한 실제적인 이미지 몇 컷을 준비해 보려 합니다. 여기에는 공간, 베라노트 디자인, 베라노트 위치, 내부 소품 등에 대한 러프한 개념정도만을 반영해 볼 생각합니다. 
보다 구체적인 내용들은 개발해 가면서 꾸준히 업로드 해보도록 하겠습니다. 점진적으로 실체를 드러내는 베라노트 프로젝트의 여정을 흥미롭게 지켜봐 주시기 바랍니다. 감사합니다.

 << 이전글 ㅣ 다음글 >>

#베라노트    #개발일지    #UIUX디자인    #노코드개발    #와이어프레임    #컬러시스템