알림부터 마이페이지까지, 농장을 관리하는 사용자 영역 만들기 🌱

앞선 글에서는 BroBean의 수입·지출·저축 데이터를 바탕으로 한 수확 정산 화면을 구현했다.

가계부를 기록하고 소비 리포트를 확인하는 기능이 어느 정도 갖춰지면서, 이제는 사용자가 앱을 이용하면서 계속 마주하게 되는 개인 영역과 알림 기능을 구성할 차례다.

이번 편에서는 크게 세 가지 영역을 구현했다.

• 🔔 헤더에서 바로 확인할 수 있는 알림 드롭다운
• 📋 알림을 모아서 확인하는 전체 알림 내역 페이지
• 👨‍🌾 프로필과 커플 연결, 알림 설정을 관리하는 마이페이지

단순히 설정 화면을 하나 추가하는 것이 아니라, BroBean의 **'농장을 함께 가꾸는 경험'**을 유지하면서 사용자 정보를 관리할 수 있도록 화면을 구성했다.

🔔 헤더에서 바로 확인하는 알림

가계부 앱은 단순히 돈을 기록하는 것에서 끝나지 않는다.

BroBean에서는 특히 커플이 함께 사용하는 것을 고려하고 있기 때문에,

• 상대방이 지출을 기록했을 때
• 저축 목표에 변화가 생겼을 때
• 예산이나 퀘스트와 관련된 이벤트가 발생했을 때

사용자에게 알려주는 기능이 필요하다.

그래서 가장 먼저 앱 헤더의 알림 버튼을 구성했다.

헤더에서는 UDropdownMenu를 사용해 벨 아이콘을 클릭하면 최근 알림을 바로 확인할 수 있도록 만들었다.

<UDropdownMenu
  :items="notificationItems"
  :content="{ side: 'bottom', align: 'end', sideOffset: 8 }"
>

알림이 존재할 때는 벨 아이콘 위에 작은 빨간색 뱃지를 표시한다.

<span
  v-if="unreadCount > 0"
  class="absolute top-1.5 right-1.5 w-2.5 h-2.5 rounded-full bg-rose-500 ..."
/>

여기서 단순히 숫자를 표시하기보다는 안 읽은 알림이 있다는 사실 자체를 시각적으로 전달하는 방식을 선택했다.

실제 BroBean 화면에서는 알림 종류에 따라 아이콘과 배경색도 다르게 구성했다.

🌱 저축 관련 알림

저축과 관련된 알림은 초록색 계열을 사용한다.

'bg-emerald-100/70 dark:bg-emerald-950/60
 text-emerald-600 dark:text-emerald-400'

BroBean에서 저축은 '나무 키우기'와 연결되는 영역이기 때문에 자연스럽게 성장과 관련된 색상을 사용했다.

🌾 예산 관련 알림

예산 관련 알림은 황색 계열로 표현했다.

예산을 관리하고 농장을 가꾸는 느낌을 유지하면서, 사용자가 쉽게 구분할 수 있도록 했다.

🏆 퀘스트 관련 알림

퀘스트는 파란색 계열을 사용해 저축이나 예산과 구분했다.

이처럼 알림 타입마다 아이콘과 색상을 분리해두면 나중에 실제 API와 연결할 때도 notificationType에 따라 UI를 쉽게 확장할 수 있다.

📋 알림 전체 내역 페이지

드롭다운에서 모든 알림을 확인할 수 있는 페이지로 이동할 수 있도록 했다.

헤더의 알림 드롭다운은 최근 알림을 빠르게 확인하는 용도라면, 전체 알림 페이지는 과거 알림까지 확인할 수 있는 공간이다.

알림 목록은 각각 NuxtLink로 구성했다.

<NuxtLink
  v-for="item in notifications"
  :key="item.id"
  :to="item.link"
  class="block p-4 rounded-2xl border transition-all"
>

따라서 알림을 클릭하면 해당 알림과 연결된 화면으로 이동할 수 있다.

예를 들어 저축 관련 알림이라면 저축 화면으로, 예산 관련 알림이라면 관련 관리 화면으로 이동하는 식이다.

👀 읽음 / 읽지 않음 상태

알림 페이지에서 특히 신경 쓴 부분은 읽음 상태를 시각적으로 구분하는 것이다.

읽지 않은 알림은 강조된 배경과 테두리를 사용하고, 읽은 알림은 opacity를 낮춰 상대적으로 덜 강조했다.

item.isRead
  ? 'bg-white ... opacity-75'
  : 'bg-amber-50/20 ... shadow-xs'

그리고 상단에는 모두 읽음 버튼을 배치했다.

<UButton
  color="neutral"
  variant="subtle"
  size="xs"
  @click="markAllAsRead"
>
  모두 읽음
</UButton>

알림이 많아졌을 때 하나씩 읽음 처리하는 것보다 한 번에 상태를 변경할 수 있도록 한 것이다.

👨‍🌾 마이페이지는 '내 농장'으로

BroBean의 마이페이지는 일반적인 서비스의 '내 정보' 화면과 조금 다르게 구성했다.

메뉴 이름부터 **'마이 농장'**으로 정했다.

화면 상단에는 사용자의 레벨과 캐릭터를 보여주고, 프로필 카드에는 다음 정보를 표시한다.

• 👤 이름
• 🏷️ 닉네임
• 🏡 농장 이름
• ❤️ 파트너
• 🌱 농장 성숙도

<h1>
  마이 농장 (마이페이지)
</h1>

단순히 사용자 정보를 나열하는 것이 아니라, 지금까지 BroBean에서 사용해온 농장이라는 세계관을 사용자 정보에도 이어지도록 했다.

🌱 농장 성숙도

프로필 카드 하단에는 농장 성숙도를 progress bar 형태로 표시한다.

<div class="flex justify-between items-center text-xs">
  <span>농장 성숙도</span>
  <span>{{ profile.farmExp }}%</span>
</div>

<UProgress
  :model-value="profile.farmExp"
  color="primary"
/>

현재는 Mock 데이터를 사용하고 있지만, 추후에는 실제 사용자의 활동량이나 레벨 시스템과 연결해볼 수 있는 구조다.

즉, 마이페이지에서도 **'나는 지금 농장을 얼마나 성장시켰는가?'**를 확인할 수 있도록 했다.

✏️ 프로필 수정

마이페이지에서 가장 먼저 필요한 기능 중 하나는 프로필 수정이다.

프로필 수정에서는 크게 네 가지 정보를 관리한다.

• 🧑 농부 이름
• 🏷️ 농부 칭호
• 🏡 농장 이름
• 🌱 프로필 캐릭터

특히 캐릭터는 여러 기본 캐릭터 중 하나를 선택할 수 있도록 만들었다.

<div class="flex sm:justify-center justify-start items-start gap-3">
  <button
    v-for="opt in avatarOptions"
    :key="opt.url"
    @click="form.avatarImage = opt.url"
  >

선택한 캐릭터에는 border와 ring을 추가해 현재 선택된 캐릭터가 무엇인지 쉽게 확인할 수 있도록 했다.

form.avatarImage === opt.url
  ? 'border-[var(--color-brobean-primary)]
     ring-4 ring-[var(--color-brobean-primary)]/20'
  : 'border-gray-200 ...'

모바일에서는 캐릭터 목록이 화면보다 길어질 수 있기 때문에 가로 스크롤이 가능하도록 처리했다.

이 부분은 모바일 중심 UI를 만들면서 꽤 중요한 부분이다.

캐릭터를 억지로 작게 배치하기보다는 적당한 크기를 유지하고, 필요한 경우 좌우로 넘겨볼 수 있도록 했다.

❤️ 커플 연결 관리

BroBean의 핵심 기능 중 하나가 바로 커플 가계부다.

따라서 마이페이지에서도 커플 연결 상태를 확인하고 관리할 수 있어야 한다.

커플 연결 관리 화면에서는 현재 연결된 파트너와 함께 처음 농장을 가꾸기 시작한 날짜를 보여준다.

<div class="flex items-center justify-center gap-3">
  <span>{{ profile.name }}</span>
  <UIcon name="lucide:heart" />
  <span>{{ profile.partnerName }}</span>
</div>

<p>
  처음 함께 씨앗을 심은 날: {{ profile.coupleStartDate }}
</p>

그리고 필요한 경우 커플 연결을 해제할 수도 있다.

다만 연결을 끊는다고 해서 기존 기록까지 삭제되는 것은 아니다.

현재 구현에서는 다음과 같이 안내한다.

연결을 해제하면 상대방과의 농장 공유가 즉시 중단되며 개인 농장 모드로 변경됩니다.

이처럼 데이터의 유지와 공유 상태의 변경을 분리하는 방향으로 구성했다.

🔔 알림 설정

마이페이지에는 알림 설정도 함께 배치했다.

현재 설정할 수 있는 항목은 세 가지다.

📢 전체 푸시 알림

모든 푸시 알림을 켜거나 끌 수 있는 가장 상위 설정이다.

<USwitch
  v-model="notifications.push"
  color="primary"
/>

🌱 오늘의 씨앗 심기 리마인드

매일 저녁 9시에 소비 기록을 남길 수 있도록 알려주는 기능이다.

<p>오늘의 씨앗 심기 리마인드</p>
<p>매일 저녁 9시에 소비 기록 알림</p>

가계부 기록을 꾸준히 남기는 습관을 만들기 위한 기능이다.

❤️ 파트너 활동 알림

파트너가 활동했을 때 알려주는 알림이다.

<p>파트너 활동 알림</p>
<p>상대방이 물줄 때/지출 심을 때 즉시 알림</p>

BroBean의 커플 기능에서는 이런 실시간 활동 알림이 꽤 중요하다.

상대방의 기록이나 활동을 바로 확인할 수 있기 때문에 단순한 가계부가 아니라 함께 농장을 관리하는 서비스라는 느낌을 만들어줄 수 있기 때문이다.

그리고 전체 푸시 알림이 꺼져 있으면 하위 알림 설정도 비활성화되도록 처리했다.

:disabled="!notifications.push"

상위 설정과 하위 설정의 관계를 명확하게 만들어 사용자가 현재 알림 상태를 쉽게 이해할 수 있도록 했다.

🧩 모달은 컴포넌트로 분리

마이페이지에 들어가는 설정 기능이 많아지면서 모든 UI를 pages/my.vue 하나에 넣는 방식은 관리하기 어려워질 수 있다.

그래서 프로필 수정과 커플 연결 관리는 별도의 컴포넌트로 분리했다.

<EditProfileModal
  v-model="isEditProfileModalOpen"
  :form="editForm"
  :avatar-options="avatarOptions"
  @upload-image="handleImageUpload"
  @save="handleSaveProfile"
/>

<CoupleConnectModal
  v-model="isCoupleModalOpen"
  :profile="profile"
  @disconnect="handleDisconnectCouple"
/>

이렇게 하면 페이지에서는 모달을 언제 열고 닫을지와 데이터 상태를 관리하고, 실제 모달 UI는 각각의 컴포넌트가 담당하게 된다.

특히 EditProfileModal에서는 프로필 이미지 선택, 이름·닉네임·농장 이름 입력, 저장 버튼까지 하나의 독립적인 UI 단위로 관리할 수 있다.

🌙 다크모드까지 함께 고려하기

BroBean은 전체 화면에서 다크모드를 지원하고 있기 때문에 이번에 추가한 알림과 마이페이지 역시 다크모드를 함께 고려했다.

예를 들어 카드 배경은

bg-white dark:bg-[var(--bg-card)]

처럼 구성하고, border 역시

border-gray-100 dark:border-[#2C2C2E]

처럼 대응한다.

알림 드롭다운 역시

bg-white/95 dark:bg-[var(--bg-card)]/95
backdrop-blur-md

를 사용해 기존 화면과 자연스럽게 연결되도록 했다.

이렇게 각각의 페이지를 만들 때부터 라이트/다크모드를 함께 처리하면 나중에 별도의 테마 대응 작업을 크게 줄일 수 있다.

📱 모바일에서의 사용성

이번 편에서 구현한 화면들은 대부분 모바일에서 자주 사용되는 기능이다.

그래서 넓은 화면을 기준으로 정보를 많이 보여주기보다는 작은 화면에서 정보를 빠르게 확인할 수 있는 구조를 우선했다.

특히 신경 쓴 부분은 다음과 같다.

• 🔔 헤더에서 한 번에 확인할 수 있는 알림
• 📋 읽음/읽지 않음 상태의 명확한 구분
• 👨‍🌾 프로필 정보를 한 카드에 모아서 표현
• 🌱 캐릭터 선택 영역의 가로 스크롤
• ❤️ 커플 상태를 직관적으로 표현
• 🔧 설정 항목을 그룹별로 분리
• 🌙 다크모드 대응
• 📱 모바일 화면에서도 충분한 터치 영역 확보

BroBean의 전체 UI가 모바일 앱을 목표로 하고 있기 때문에 이런 세부적인 사용성도 계속해서 신경 쓰고 있다.

🚀 다음 단계

이번 편까지 구현하면서 BroBean은 이제 단순히 가계부 데이터를 입력하고 조회하는 수준을 넘어섰다.

사용자는

가계부 기록 → 나무 키우기 → 성장 일지 → 수확 정산 → 알림 → 개인 농장 관리

라는 하나의 흐름 안에서 서비스를 이용할 수 있게 됐다.

특히 알림과 마이페이지가 추가되면서 앞으로 실제 서비스로 확장하기 위한 기반도 조금씩 갖춰지고 있다.

현재는 Mock 데이터를 중심으로 동작하지만, 이후에는 실제 백엔드와 연결하면서

• 🔔 실제 알림 생성 및 읽음 처리
• 💑 커플 활동 실시간 동기화
• 📱 푸시 알림
• 👤 실제 사용자 프로필 관리
• 🌱 활동에 따른 농장 경험치 및 레벨 변화

등으로 확장할 예정이다.