📱 모바일 앱을 목표로 한 첫 번째 설계

프로젝트를 생성한 뒤 가장 먼저 고민한 것은 홈 화면이 아니었다.

오히려 어떤 화면을 만들더라도 계속 재사용하게 될 공통 레이아웃(Layout) 을 먼저 만드는 것이 우선이라고 생각했다.

BroBean은 처음에는 모바일 웹으로 개발하지만, 최종적으로는 하이브리드 앱 형태까지 고려하고 있다.

즉 처음부터

• 모바일 화면 비율
• 하단 Navigation
• Drawer 형태의 메뉴
• 상단 Header

구조를 기준으로 설계하기로 했다.

웹 사이트를 만드는 것이 아니라 앱을 만드는 것처럼 개발하는 것이 이번 프로젝트의 목표다.

🏗️ 먼저 만든 것은 Layout

Nuxt에서는 Layout을 활용하면 모든 페이지에서 동일한 UI를 재사용할 수 있다.

이번 프로젝트에서는 가장 기본이 되는 구조를 아래처럼 구성했다.

<AppHeader />

<main>
  <slot />
</main>

<AppFooter />

<AppSideBar />

구조 자체는 단순하지만 앞으로 추가될 모든 페이지가 이 레이아웃 안에서 동작하게 된다.

덕분에 새로운 페이지를 만들더라도 Header와 Footer를 매번 작성할 필요가 없다.

📌 Header는 최소한의 정보만

Header에는 너무 많은 기능을 넣고 싶지는 않았다.

가계부는 하루에도 여러 번 사용하는 서비스이기 때문에 화면을 복잡하게 만드는 것보다 필요한 기능만 빠르게 접근할 수 있도록 구성했다.

Header에는 다음 기능을 배치했다.

• BroBean 로고
• 다크모드 전환
• 알림 확인

특히 다크모드는 모바일 환경에서 사용하는 시간이 길어질 것을 고려해 처음부터 포함했다.

알림 역시 추후

• 목표 달성
• 소비 알림
• 챌린지 완료

등을 연결할 예정이라 기본 구조부터 만들어 두었다.

📂 Sidebar는 단순한 메뉴가 아니다

일반적인 Drawer 메뉴가 아니라 BroBean만의 세계관을 담고 싶었다.

그래서 메뉴 이름도 단순히

• Home
• Budget
• Report

처럼 작성하지 않았다.

대신 서비스 컨셉에 맞춰 모두 농장 테마로 구성했다.

사용자가 메뉴를 누르는 순간에도 "돈을 관리한다"가 아니라 농장을 가꾼다는 느낌을 받을 수 있도록 구성했다.

🧭 Footer는 앱처럼

모바일 앱에서 가장 많이 사용하는 요소 중 하나가 Bottom Navigation이다.

브라우저에서도 앱과 비슷한 사용 경험을 제공하기 위해 Footer Navigation을 고정으로 배치했다.

Footer에는 가장 자주 사용하는 메뉴만 배치했다.

• 🏠 홈
• 📒 가계부
• 🌱 지출 · 수입 입력
• 🌾 소비 현황
• 👤 내 정보

화면 이동 횟수를 최소화하는 것이 가장 큰 목표였다.

🎨 프로젝트 대표 이미지도 함께 제작

프로젝트를 기록하면서 대표 썸네일도 함께 제작했다.

추후 Github나 블로그, SNS 등에 공유될 때 프로젝트를 한눈에 보여줄 수 있도록 BroBean 전용 OG 이미지를 만들었다.

프로젝트가 진행될수록 대표 이미지는 조금씩 수정될 수도 있지만, 지금 시점에서는 BroBean의 첫 번째 얼굴이라고 생각하면 될 것 같다.

💭 화면보다 먼저 구조를 만든 이유

사실 처음에는 바로 홈 화면부터 만들려고 했다.

하지만 개발을 오래 하다 보면 화면은 계속 바뀌지만 레이아웃은 거의 바뀌지 않는다.

처음부터 공통 구조를 만들어 두면

• 새로운 페이지 추가
• UI 수정
• 컴포넌트 재사용

이 훨씬 편해진다.

이번 작업은 눈에 띄는 기능을 만든 것은 아니지만 앞으로 BroBean의 모든 화면이 올라갈 기반을 만든 작업이었다.

🚀 다음 일정

이제 기본 레이아웃이 완성되었으니 본격적으로 홈 화면(Dashboard) 을 설계할 차례다.

사용자가 처음 앱을 실행했을 때 어떤 정보를 가장 먼저 보여줄지 고민하면서 Mock 데이터와 타입을 설계하고 실제 UI를 만들어 보기 시작했다.

다음 글에서는 BroBean의 홈 화면을 어떤 기준으로 설계했는지 자세히 기록해보려고 한다.

👉 다음 글 : BroBean 프로젝트 #4 - 홈 화면(Dashboard) 설계와 Mock 데이터 구성