베라노트 개발일지 #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디자인    #노코드개발    #와이어프레임    #컬러시스템

[ 베라노트 개발일지 #3 ]

UI/UX 설계의 시작 _ 2D 화면에서 3D 비밀 밀실로(1/3)

프로젝트의 시작점으로서, 타인의 시선이 완벽히 차단된 3차원적 정주(Settlement) 공간을 설계하는 단계입니다. 사용자가 심리적 안정감을 느낄 수 있는 미니멀 3D 공간 레이아웃의 시각적 인터페이스 프로토타입을 구축합니다.

인터페이스 디자인이나 기획을 전문적으로 전공하지 않았더라도, 피그마(Figma)와 같은 현대적인 툴을 활용해 개념을 구체화하는 법을 익힌다면 머릿속에 가득한 아이디어를 매우 정교한 논리 구조로 시각화할 수 있습니다. 이번 개발일지에서는 복잡한 기능적 군더더기를 덜어내고, 본질적인 레이아웃 구조와 동선을 채택한 배경, 그리고 평면의 2D 인터페이스가 어떻게 3D의 정서적 가상 공간감으로 연결되는지 그 진입부 설계를 상세히 기록합니다.

1. 스플래시와 온보딩: 정서적 안도감을 주는 첫 터치

인터페이스 설계 과정에서 가장 치열하게 고민했던 부분은 첫 화면의 무드였습니다. 다수의 모바일 서비스들은 사용자를 즉각적으로 사로잡기 위해 화려한 애니메이션과 강렬한 원색, 끊임없는 인터랙션을 배치하곤 합니다. 그러나 베라노트가 지향하는 본질적 가치는 완벽한 단절과 평온함입니다. 세상의 소음과 타인의 시선에서 지친 사용자가 도망쳐 들어올 수 있는 고요한 방주를 만드는 것이 목표이기 때문입니다.

따라서 앱을 실행했을 때 나타나는 스플래시 화면과 초기 온보딩 동선은 시각적 자극을 극도로 제어했습니다. 그래픽 요소를 정제하고 오직 타이포그래피의 자간, 행간, 그리고 시각적 부담을 덜어주는 은은한 무채색의 레이아웃 배치에 집중했습니다. 이러한 고민 끝에 배치된 첫 온보딩 메시지는 프로젝트의 철학을 직관적으로 관통합니다.

"여기는 당신의, 당신에 의한, 당신을 위한, 공간입니다."

사용자가 이 문장을 읽는 수 초의 찰나 동안, 시각적 피로에서 벗어나 심리적 안도감을 느낄 수 있도록 폰트의 크기와 정렬을 반복하여 깎아 나갔습니다. 복잡한 마케팅 유도나 불필요한 장식적 요소를 전면 배제한 것 자체가, 유저에게 정서적 안전지대를 선사하기 위한 의도적인 레이아웃 설계의 출발점이었습니다.

2. 가입과 로그인: 익명성이 보장하는 안전한 울타리

회원가입과 로그인 화면의 기획 문법 역시 일반적인 상용 서비스들과는 궤를 달리합니다. 플랫폼의 비즈니스 이익을 위해 과도한 개인정보(이메일, 전화번호, 성별 등) 입력을 요구하는 기존 흐름에서 탈피했습니다. 베라노트의 로그인 인터페이스는 최소한의 텍스트 필드로만 구성된 극도의 미니멀리즘을 보여줍니다.

와이어프레임 기획 단계에서 입력창의 갯수를 최소화하는 레이아웃을 채택함으로써, 사용자는 '이 공간 내에서의 기록은 철저히 보호받으며 사생활을 추적당하지 않는다'는 직관적인 인지를 갖게 됩니다. 피그마에서 설계된 가이드 박스들은 이러한 조형적 심플함을 유지함과 동시에, 한 손 조작 범위(Thumb Zone)를 고려한 수직 배열 구조로 정돈되어 사용 편의성을 함께 확보했습니다.

3. 진입부 프로세스 분석: 컴포넌트의 가치 체계화

관문을 통과한 사용자는 공간의 특성과 환경을 조율하는 순차적 프로세스(Space & Condition Setup)를 경험하게 됩니다. 이 과정은 앞으로 마주할 3차원 가상 밀실의 물리적 테마와 감성적 환경 요소를 평면 인터페이스 상에서 차근차근 빌드업하는 가교 역할을 수행합니다.

인터페이스의 인지 부하를 줄이고 시각적 정돈을 유지하기 위해, 각 화면 컴포넌트의 구성과 설계 의도를 다음과 같이 명밀하게 체계화하여 관리하고 있습니다.

진입 단계	주요 UI 컴포넌트	설계 의도 및 UX 핵심 가치
1. Login / Sign-in	수직형 텍스트 필드, 최소화된 버튼	개인정보 요구를 전면 배제하여 완벽한 익명성과 정서적 안도감 제공
2. Space Selection	그리드 형태의 이미지 뼈대, 타이틀	정주하고 싶은 가상 공간의 대형 테마(바다, 우주 등)를 명확히 인지
3. Location Setup	가이드 타이포그래피, 텍스트 레이아웃	밀실의 고립 깊이를 한 단계 구체화하여 정서적 몰입을 심화
4. Space Condition	제어 체크박스, 선형 슬라이더 UI	방 진입 직전 사용자의 현재 무드에 맞춰 조도와 환경적 요소를 최종 조율

정돈된 구조적 도표에서 확인되듯, 사용자는 각 단계를 선형적으로 통과하면서 물리적 현실 세계와 단절되는 고유한 몰입형 경험(Immersive Experience)을 직관적으로 밟아가게 됩니다.

4. 평면(2D)에서 입체(3D) 공간으로의 패러다임 전환

마지막 단계인 환경 조율 화면에서 모든 세팅을 마치고 완료 버튼을 누르는 순간, 베라노트의 UI 아키텍처는 거대한 전환을 맞이합니다. 지금까지 평면 컴포넌트를 조작하던 경험이 종료되고, 와이어프레임 상의 최종 정착지인 3차원 가상 정주 공간(360° View Environment)의 문이 매끄럽게 열립니다.

디스플레이 화면의 한계를 넘어 실제 존재하는 입체 공간에 들어선 듯한 고유의 안정감을 부여하기 위해, 이 진입점의 트랜지션을 설계하는 것이 이번 UI/UX 기획의 가장 중요한 본질이었습니다. 평면의 와이어프레임 설계도가 논리적이고 정갈할수록 향후 3D 그래픽 엔진으로 화면을 전환할 때 발생하는 시각적 이질감을 최소화할 수 있습니다. 우리는 피그마 내부에서 이 평면과 입체의 완벽한 조화를 목표로 컴포넌트의 간격과 픽셀 단위 조정을 지속하고 있습니다.

5. 결론 및 향후 계획

머릿속에 존재하는 추상적인 감성과 기획의 방향성을 피그마라는 정밀한 도구를 통해 구조적으로 설계해 나가는 과정은 매우 가치 있는 작업입니다. 가장 본질적이고 명밀한 컴포넌트 배치만으로도 사용자에게 깊은 안도감과 브랜드 가치를 명확히 전달할 수 있음을 확인했습니다.

초기 진입로를 형성하는 기초 UI/UX 설계가 깔끔하게 정돈됨에 따라, 다음 개발일지에서는 이 정교한 레이아웃 뒷단에 배치되어 데이터의 보안성을 극대화하는 완전 폐쇄형 아키텍처(Zero-Knowledge) 보안 인프라 설계 기획을 다루도록 하겠습니다. 나만의 완벽한 밀실을 구축해 나가는 여정에 앞으로도 지속적인 관심 부탁드립니다.

참고 문서 및 링크

• Figma Help Center (Official): 피그마 공식 디자인 가이드라인 및 학습 허브

 << 이전글 ㅣ 다음글 >>

#베라노트  #피그마 #UIUX디자인 #와이어프레임 #가상공간 #개발일지

베라노트 개발일지: #2

[ 베라로트 개발일지 #2 ]
디지털 광장에서 '나만의 방'으로 _ 유저 행동 패턴과 온보딩의 정의

1. 베라노트(Veranote) 온보딩 아키텍처의 목적

개발 프로세스에서 백엔드 코드를 작성하기 전, 최우선으로 선행되어야 하는 과제는 유저의 행동 패턴(User Flow)을 설계하는 것입니다. 베라노트는 단순한 텍스트 입력 도구가 아닌 '정서적 안식처'를 지향하므로, 가입부터 첫 기록의 순간까지 유저가 겪게 될 모든 인터랙션을 공학적으로 세분화하여 설계했습니다. 신규 유저가 앱을 실행하여 자신만의 밀실에 도달하기까지의 전 과정을 A to Z로 기록합니다.

---

2. 유저 여정 지도(User Journey Map): 진입부터 안착까지

1) Step 1: 어플리케이션 실행 및 인증 (초기 진입 소음 제어)

광장의 소음에서 벗어나는 첫 관문입니다. 유저가 앱 아이콘을 터치하는 순간부터 시각적 정적이 시작됩니다.

• [유저 행동] 모바일 기기에서 베라노트 앱 아이콘을 터치합니다.
• [시스템 반응] 로파이(Lo-Fi) 감성의 미니멀한 3D 인트로 스플래시 화면이 구동됩니다.
• [분기 처리] 기존 유저인 경우 생체 인증(Face ID/지문) 또는 로컬 비밀번호 입력창으로 즉시 이동하며, 신규 유저인 경우 '영지식(Zero-Knowledge)' 기반의 프라이빗 회원가입 절차로 진입합니다.

2) Step 2: 정서적 온보딩 및 첫 인사 (가치관 동기화)

회원가입이 완료된 직후, 유저에게 베라노트의 정체성을 전달하는 명상적 튜토리얼 단계입니다.

• [인터랙션] 어두운 화면 위로 따뜻한 조명 효과와 함께 느린 텍스트 애니메이션이 흐릅니다.
• [시스템 메시지] "안녕하세요. 이곳은 당신의, 당신에 의한, 당신을 위한 공간입니다."
• [기획 의도] 다른 소셜 미디어 앱들처럼 '팔로우할 친구 찾기'나 '프로필 꾸미기'를 강요하지 않고, 오롯이 유저 개인에게만 초점을 맞추어 심리적 무장해제를 유도합니다.

3) Step 3: 원초적 공간의 선택 (The Sanctuary Base)

유저가 자신의 내면 상태에 가장 어울리는 첫 번째 '3차원 밀실'의 프로토타입을 선택하는 시각적 인터랙션입니다.

• [시스템 메시지] "어떤 공간을 원하시나요? 당신의 기본 공간을 선택하세요."
• [기본 제공 공간 프리셋 테이블]

공간 테마	시각적 요소 및 디테일	제공 상태
미니멀 화이트	아무런 자극이 없는 순백의 사각형 공간, 극도의 정적	기본 제공 (무료)
가정집의 내 방	익숙하고 아늑한 조명이 켜진 정겨운 목조 인테리어	기본 제공 (무료)
호수가 보이는 별장	폴딩 도어 너머로 잔잔한 윤슬이 비치는 물가 테라스 환경	기본 제공 (무료)
조용한 숲속 / 까페	창밖으로 나뭇잎이 부딪히는 소리, 혹은 백색소음이 깔린 공간	기본 제공 (무료)
특수 테마 환경	비 오는 날의 캠핑장, 바닷가의 파라솔 등 동적인 자연 환경	아이템 샵 연동 (유료)

4) Step 4: 오브젝트 배치 전략 (The Anchoring)

공간이 선택되면, 그 방의 중심이 될 '진실의 책'을 어디에 바인딩할지 유저가 직접 결정합니다.

• [시스템 메시지] "진실된 기록, 베라노트. 당신의 베라노트는 어디에 놓을까요?"
• [유저 제어 컴포넌트] 유저는 3D 공간 내 활성화된 앵커 포인트를 터치하여 배치 각도를 조정합니다.
  - 선택지 목록: 거실 테이블 위, 식탁 위, 피아노 위, 벽난로 위, 책장 내부 슬롯 등
• [UX 가이드 팝업] "노트의 위치는 언제든 자유롭게 바꿀 수 있습니다." 문구를 하단에 툴팁으로 띄워 조작의 심리적 부담을 완화합니다.

5) Step 5: 마스터 오브젝트 스킨 정의 및 BM 연동 (The Object Identity)

기록의 매개체인 '베라노트' 본체의 하드웨어 디자인을 확정하고, 자연스럽게 유료 자산 가치(BM)를 인지시키는 최종 안착 단계입니다.

• [시스템 메시지] "당신의 베라노트는 어떤 것인가요? 기본 베라노트를 고르세요."
• [기본 라인업 (무료 모델)]
  - 1. 줄이 쳐진 친숙한 연습장 느낌의 노트
  - 2. 두껍고 아담한 크기의 아날로그 크로키 북
  - 3. 가볍고 미니멀한 일상 다이어리
  - 4. 가죽 텍스처가 적용된 묵직한 서적 형태
• [수익화(BM) 가교 연결] 무료 모델 하단에 카러셀(Carousel) 형태로 고급 수제 바인딩 커버, 황동 잠금장치 스킨 등을 노출합니다.
  - "보다 고급스러운 베라노트는 아이템 상점에서 획득할 수 있습니다." 시스템 가이드를 매끄럽게 연결합니다.

---

3. 유저 사용 패턴 정의가 개발 공정에 미치는 영향

이와 같은 사용자 행동 패턴(A to Z) 수립은 단순히 UI 기획서에 그치는 것이 아니라, 향후 개발 파트에서 데이터베이스(DB) 및 상태 관리 아키텍처를 설계할 때 결정적인 기준점이 됩니다.

• 상태 머신(State Machine) 구현의 명확화: 유저가 온보딩 단계를 이탈하지 않고 완료했는지를 판별하는 isOnboardingComplete 플래그 세팅 기준 수립.
• 관계형 데이터 모델링 엔티티 산정: 유저 테이블(User) 하위에 공간 정보(Room_Env_Id), 가구 배치 좌표(Furniture_Slot_Id), 마스터 노트 스킨 정보(Note_Skin_Id)가 1:1 및 1:N으로 바인딩되어야 함을 증명.

---

4. 참조 가이드 및 다음 과제

• 인간 중심 디자인(HCD) 프로세스 표준: ISO 9241-210 프레임워크 가이드라인 참조
• 사용자 경험 모델링 기술: Nielsen Norman Group UX 디자인 가이드

 << 이전글 ㅣ 다음글 >>

#베라노트 #VeraNote #개발일지02 #유저행동패턴 #UserFlow #온보딩디자인 #3D공간선택 #아이템배치 #BM모델 #앱기획 #UX시나리오 #스타트업기획

베라노트 개발일지: #1

베라노트 개발일지 #1
베라노트(Veranote) 프로젝트 마스터플랜 개요

디지털 광장의 소음과 타인의 시선에서 벗어나 오롯이 나 자신에게 침잠할 수 있는 공간, '베라노트'는 기술을 통해 인간의 정서를 보호하고자 합니다. 본 마스터플랜은 사용자가 자신만의 디지털 밀실을 구축하고, 그 중심에 놓인 단 하나의 노트를 통해 가식 없는 내면을 축적해 나가는 여정을 정의합니다.

1) 단계별 추진 일정 및 핵심 목표

단계	명칭	핵심 과업	목표 상태
Phase 1	The Sanctuary	브랜드 철학 정립 및 3D 공간 기획	나만의 밀실 공간에 대한 개념 및 UI/UX 확정
Phase 2	The Object	베라노트 에디터 및 인덱스 엔진 설계	멀티미디어 기록을 담는 단 하나의 책(Book) 기획
Phase 3	Core Build	MVP(최소 기능 제품) 개발	공간 커스터마이징 및 로컬 보안 저장소 구현
Phase 4	Ecosystem & BM	아이템 상점 및 멀티 플랫폼 확장	유료화 모델(BM) 연동 및 PC/App 동기화 구축
Phase 5	The Last Index	유산 관리 프로토콜 및 정식 런칭	최후의 인덱스 활성화 및 veranote.space 오픈

---

2. 상세 로드맵 세부 내용

1) Phase 1: The Sanctuary (나만의 밀실 공간 기획)

프로젝트의 시작점으로서, 타인의 시선이 완벽히 차단된 3차원적 정주(Settlement) 공간을 설계하는 단계입니다.

• 공간 커스터마이징 UI/UX 디자인: 사용자가 심리적 안정감을 느낄 수 있는 미니멀 3D 공간 레이아웃 기획.
• 완전 폐쇄형 아키텍처 설계: 서버 관리자조차 사용자의 방 구조와 기록을 열람할 수 없도록 하는 영지식(Zero-Knowledge) 보안 구조 확정.
• 도메인 및 브랜드 자산 확보: veranote.space 도메인 연결 및 브랜드 아이덴티티(BI) 수립.

2) Phase 2: The Object (단 하나의 책, 베라노트 엔진 설계)

밀실의 중심 오브젝트인 '베라노트'와 그 내부를 채울 다채로운 기록 매커니즘을 기획하는 단계입니다.

• 기본 무료 모델 및 스킨 시스템 기획: 테이블, 책장 등 사용자가 원하는 위치에 노트를 배치하는 오브젝트 제어 설계.
• 2D 멀티 인덱스 구조 정의: 글, 그림(낙서), 사진, 동영상, 편지 등 고유한 정서적 파편들을 카테고리별로 분류하는 인덱스 시스템 구축.
• 수정 불가능한 과거 아카이빙: 날것의 나를 온전히 인정할 수 있도록 일정 시간이 지난 기록의 수정을 제한하는 정서적 로직 설계.

3) Phase 3: Core Build (핵심 엔진 개발)

3D 공간 렌더링과 2D 기록 에디터를 유기적으로 결합하여 실제 코드로 구현하는 단계입니다.

• 공간 및 오브젝트 배치 엔진 개발: 사용자가 획득한 아이템을 방에 배치하고 커스터마이징할 수 있는 그래픽 모듈 구축.
• 멀티미디어 인덱스 에디터 구현: 텍스트를 넘어 드로잉 낙서, 고해상도 이미지 및 영상을 한 장의 페이지에 암호화하여 저장하는 기술 개발.
• 알파 테스트 운영: 사용자가 공간을 꾸미고 기록을 축적하는 과정에서 느끼는 정서적 몰입도와 심리적 변화 측정.

4) Phase 4: Ecosystem & BM (비즈니스 모델 및 플랫폼 확장)

서비스의 지속 가능성을 위한 수익 구조를 연동하고 사용자의 접근성을 극대화하는 단계입니다.

• 오브젝트/스킨 상점(Item Shop) 개발: 유료 결제 자산을 통한 방 인테리어 소품 및 베라노트 프리미엄 커버 업그레이드 시스템 구축.
• 멀티 플랫폼 실시간 보안 동기화: 모바일 앱과 데스크톱 PC 환경 간 데이터를 종단간 암호화(E2EE) 상태로 안전하게 전송하는 동기화 프로토콜 연동.

5) Phase 5: The Last Index (최후의 가교 및 정식 런칭)

기록의 가치를 완성하고 세상에 베라노트를 정식으로 선보이는 단계입니다.

• 최후의 인덱스(유언장/유산 관리) 프로토콜: 사용자의 선택에 따라 노트의 맨 마지막 인덱스에 배치될 '사후 조건부 접근 권한 인계' 옵션 기능 개발 및 안정성 최종 점검.
• 베타 테스트 및 보안 취약점 점검: 외부 해킹 시뮬레이션을 통한 영지식 보관소 방어력 검증.
• 정식 런칭: 앱스토어/플레이스토어 등록 및 veranote.space 웹 서비스 개시.

---

3. 개발 공정별 기술적 검토 사항

베라노트의 성공적인 구현을 위해 반드시 해결해야 할 기술적 과제들을 정리했습니다.

• 3D 그래픽의 경량화: 모바일과 PC 환경 모두에서 끊김 없이 부드러운 공간 몰입감을 제공하기 위한 최적화 엔진 최적화.
• 하드웨어 하이브리드 보안: 자산 가치를 넘어 정서적 유산의 완벽한 프라이버시를 지키기 위한 YubiKey 등 물리 보안 키 연동 검토.
• 영속적 데이터 보존: 만에 하나 서비스가 중단되더라도 사용자가 구축한 방과 노트 데이터를 온전히 개인 자산으로 내보낼 수 있는 비상 백업(Data Export) 로직 마련.

---

4. 참조 링크 및 관련 기술

• Flutter 공식 문서: https://docs.flutter.dev/ - 멀티 플랫폼 및 컴포넌트 제어 참조
• 영지식 암호화 표준: NIST 보안 가이드라인
• 특허청 가출원 안내: 특허로 바로가기

 << 이전글 ㅣ 다음글 >>

#베라노트 #VeraNote #개발로드맵 #마스터플랜 #앱개발 #PC환경구현 #공간커스터마이징 #진실의기록 #디지털밀실 #비즈니스모델 #IT기획 #스타트업

베라노트 프롤로그

 베라노트(Veranote)
보여주기 위한 기록에서, 나를 위한 진실의 공간으로

시야가 바다 끝까지 닿던 어느 쾌청한 오후, 

저는 1년에 몇 번 없을 이 선물처럼 아름다운 날씨를 회사 옥상 테라스에서 즐기고 있었습니다.

그 곳엔 저 뿐만 아니라 꽤 많은 사람들이 나와 그 순간을 같이 누리고 있었지만, 뭐랄까....

사람들은 찬란한 날씨와 눈앞의 풍경을 온전히 즐기는 대신, 그 찰나를 스마트폰에 담기 바빴습니다. 

타인의 시선이 모이는 '디지털 광장'에 자신을 전시하고, 끊임없이 '좋아요'와 댓글로 자신의 가치를 증명해내야만 하는 현대인의 강박적 외침. 

그 풍경 속에서 저는 평화로움 대신 어딘가 묘한 이질감과 불편함을 느꼈습니다.

"밖을 향한 외침의 크기만큼, 우리 내면은 소진되고 있는 것이 아닐까?" 

질문은 꼬리를 물었습니다. 

우리에겐 타인의 평가가 닿지 않는 곳, 

가식을 벗어던지고 오직 나 자신과 정직하게 대면할 수 있는 '밀실'이 존재하지 않았습니다. 

모두가 광장에 서서 소리를 지르고 있을 뿐, 

누구도 영혼을 누일 자신만의 방으로 돌아가지 못하고 있었습니다.

베라노트(Veranote)는 이런 모순적 상실감에게 시작되었습니다.

저는 차가운 디지털 광장 너머에, 오직 나만을 위해 문이 열리는 '따뜻한 밀실'을 가져보고 싶다는 생각이 들었습니다.

그 어떤 타인의 시선도, 정제되지 않은 소음도 감히 침범할 수 없는 온전한 나만의 안식처입니다.

그리고 내가 만든 나만의 그 공간, 그 중심에, 나를 대면하게 해 줄 단 하나의 아날로그 책,

 '베라노트'가 놓여 있습니다.

이곳은 타인에게 투영된 가공의 페르소나를 내려놓고, 내가 나로서 오롯이 정주(定住)할 수 있는 공간입니다. 

노트를 펼쳐 인덱스를 하나씩 채워가는 행위는 단순히 글을 적는 것을 넘어, 

내 영혼의 파편과 진실들을 보물상자에 박제해 나가는 과정입니다. 

오늘의 낙서, 순간의 편지, 말로 다 하지 못한 음성과 영상들이 그 안에서 온전히 숨을 쉽니다.

물론 그 노트의 가장 깊숙한 마지막 장에는, 언젠가 내가 이 방을 비우게 될 날을 위한 '유산'이 담길지도 모릅니다. 

하지만 지금 우리에게 가장 중요한 것은, 살아있는 오늘 이 순간 가식 없는 나를 마주하고 위로하는 일입니다. 

내가 허락한 인덱스에 나만의 진심을 차곡차곡 축적해 나가는 것, 그것이 베라노트가 정의하는 새로운 기록의 패러다임입니다.

이제 화려하지만 공허했던 광장에서 내려와, 당신을 위해 정교하게 다듬어진 밀실로 들어오세요.

진실과 안식이 머무는 곳, 베라노트입니다.

 << 이전글 ㅣ 다음글 >>