[베라노트 개발일지 #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기반의 최소 구현 모델 준비를 위한 실제적인 이미지 몇 컷을 준비해 보려 합니다. 여기에는 공간, 베라노트 디자인, 베라노트 위치, 내부 소품 등에 대한 러프한 개념정도만을 반영해 볼 생각합니다.
보다 구체적인 내용들은 개발해 가면서 꾸준히 업로드 해보도록 하겠습니다. 점진적으로 실체를 드러내는 베라노트 프로젝트의 여정을 흥미롭게 지켜봐 주시기 바랍니다. 감사합니다.
댓글 없음:
댓글 쓰기