[ 베라노트 개발일지 #3 ]
UI/UX 설계의 시작 _ 2D 화면에서 3D 비밀 밀실로(1/3)
인터페이스 디자인이나 기획을 전문적으로 전공하지 않았더라도, 피그마(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) 보안 인프라 설계 기획을 다루도록 하겠습니다. 나만의 완벽한 밀실을 구축해 나가는 여정에 앞으로도 지속적인 관심 부탁드립니다.
