로그인부터 파트너 초대까지, 농장을 함께 시작하는 계정 화면 만들기 🌱

앞선 글에서는 BroBean의 알림과 마이페이지를 구현하면서 사용자가 자신의 농장과 알림, 프로필, 커플 연결 상태를 관리할 수 있는 영역을 구성했다.

이번에는 서비스에 처음 들어오는 사용자가 가장 먼저 만나게 되는 계정 인증 영역을 구현했다.

가계부 서비스에서 로그인과 회원가입은 단순히 이메일과 비밀번호를 입력하는 화면처럼 보일 수 있지만, BroBean에서는 조금 다르게 접근했다.

BroBean은 혼자 사용하는 가계부가 아니라 커플이 함께 자산을 관리하고 하나의 농장을 키워가는 서비스이기 때문에, 회원가입 단계부터 농장과 농부 정보를 설정하고 이후 파트너를 연결할 수 있도록 구성했다.

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

• 🔐 이메일 및 소셜 로그인
• 🌱 농장 프로필을 포함한 회원가입
• 📩 이메일 인증 기반 비밀번호 찾기
• ❤️ 파트너 초대 및 커플 연결 팝업

단순히 인증 기능을 만드는 것이 아니라, 서비스에 가입하는 순간부터 '우리들의 농장'을 시작한다는 경험을 만들 수 있도록 화면을 구성했다.

🔐 로그인은 농장으로 입장하는 첫 화면

BroBean의 로그인 화면은 서비스의 가장 기본적인 진입점이다.

사용자는 이메일과 비밀번호를 입력해 자신의 농장으로 입장할 수 있다.

로그인 화면에서는 비밀번호 입력 영역과 함께 바로 옆에 비밀번호 찾기 링크를 배치했다.

<div class="flex items-center justify-between">
  <label>비밀번호</label>

  <NuxtLink to="/auth/forgot-password">
    비밀번호 찾기
  </NuxtLink>
</div>

비밀번호를 잊어버린 경우 별도의 메뉴를 다시 찾을 필요 없이 로그인 화면에서 바로 복구 과정으로 이동할 수 있도록 한 것이다.

🌱 '로그인' 대신 '농장으로 입장하기'

로그인 버튼의 문구도 일반적인 로그인이라는 표현 대신

<UButton
  type="submit"
  color="primary"
  size="md"
  block
>
  농장으로 입장하기
</UButton>

처럼 **'농장으로 입장하기'**라는 문구를 사용했다.

BroBean에서는 농장을 서비스의 주요 세계관으로 사용하고 있기 때문에, 이런 작은 문구에서도 서비스의 콘셉트가 이어지도록 했다.

사용자가 로그인한다는 것은 단순히 계정에 접속하는 것이 아니라, 자신이 만들어온 농장으로 다시 돌아가는 것이라는 느낌을 주는 것이다.

⚠️ 로그인 실패 상황도 명확하게

로그인 과정에서 문제가 발생하면 에러 메시지를 별도의 영역으로 보여준다.

<div
  v-if="errorMessage"
  class="p-2.5 rounded-xl bg-rose-50 ..."
>
  <UIcon name="lucide:alert-circle" />
  <span>{{ errorMessage }}</span>
</div>

단순히 입력창 아래에 작은 텍스트로 에러를 표시하는 것이 아니라, 배경색과 아이콘을 함께 사용해 현재 로그인 과정에서 문제가 발생했다는 사실을 바로 인지할 수 있도록 했다.

이런 에러 UI는 회원가입이나 비밀번호 찾기 화면에서도 동일한 방식으로 사용한다.

계정 인증 과정에서 사용자에게 필요한 것은 복잡한 설명보다는 현재 어떤 상태인지 명확하게 알려주는 것이라고 생각했다.

🌐 네이버와 Apple 소셜 로그인

이메일 로그인만 제공하면 사용자가 매번 이메일과 비밀번호를 입력해야 한다.

그래서 로그인 화면 하단에는 소셜 로그인도 함께 배치했다.

<div class="grid grid-cols-2 gap-1.5">
  <button @click="handleSocialLogin('naver')">
    네이버 로그인
  </button>

  <button @click="handleSocialLogin('apple')">
    Apple로 계속
  </button>
</div>

현재는 네이버 로그인과 Apple 로그인을 지원하도록 구성했다.

특히 두 버튼을 동일한 형태로 배치해 사용자가 원하는 로그인 방식을 바로 선택할 수 있도록 했다.

소셜 로그인 이후에는 필요한 사용자 설정을 이어갈 수 있도록 SocialSetupModal도 연결했다.

<SocialSetupModal
  v-model="showSocialModal"
  @complete="handleSocialSetupComplete"
/>

즉, 소셜 계정으로 인증하는 과정과 BroBean에서 필요한 사용자 정보를 설정하는 과정을 분리해 관리할 수 있는 구조다.

🌙 계정 화면에서도 다크모드 지원

로그인 화면 우측 상단에는 다크모드 전환 버튼을 배치했다.

<button
  type="button"
  @click="toggleColorMode"
>
  <UIcon
    :name="colorMode.value === 'dark'
      ? 'lucide:sun'
      : 'lucide:moon'"
  />
</button>

현재 모드에 따라 해 아이콘과 달 아이콘을 바꿔 보여주며, 클릭하면 라이트 모드와 다크 모드를 전환할 수 있다.

회원가입과 비밀번호 찾기 화면에서도 같은 방식을 사용했다.

로그인 이후의 화면뿐만 아니라 서비스에 처음 진입하는 인증 화면부터 테마 경험이 끊기지 않도록 한 것이다.

🌱 회원가입은 '계정 생성'보다 '농장 개업'에 가깝게

BroBean에서 회원가입은 단순히 이메일과 비밀번호를 만드는 과정이 아니다.

사용자가 처음으로 자신의 농장을 만들고, 농부 정보를 설정하는 과정이기도 하다.

그래서 회원가입 화면 상단부터

Couple Asset Farm

우리들의 첫 농장 분양 🏡

자산을 함께 심고 가꾸어갈 커플 공간을 만들어보세요.

라는 문구를 배치했다.

이 화면에서부터 BroBean이 일반적인 가계부가 아니라 커플이 함께 자산을 관리하는 공간이라는 것을 전달하고 싶었다.

회원가입 폼 역시 크게 세 가지 영역으로 나누었다.

• 🌱 농장 프로필 설정
• 🛡️ 계정 및 본인 인증
• 📜 약관 및 개인정보 동의

각 영역을 카드 형태로 분리해 긴 회원가입 폼에서도 현재 어떤 정보를 입력하고 있는지 쉽게 파악할 수 있도록 했다.

🏡 농장 프로필 설정

첫 번째 영역에서는 실제 서비스에서 사용할 농장 정보를 입력한다.

<label>농장 이름</label>
<AppInput
  v-model="form.farmName"
  placeholder="예: 알콩달콩 부자농장"
/>

그리고 농장 안에서 사용할 자신의 이름인 농부명도 설정한다.

<label>나의 닉네임 (농부명)</label>
<AppInput
  v-model="form.farmerName"
  placeholder="예: 콩이언니"
/>

여기에 선택적으로 커플(파트너) 이메일을 입력할 수 있다.

<AppInput
  v-model="form.partnerEmail"
  type="email"
  placeholder="상대방의 브로빈 이메일을 입력하면 농장을 함께 공유해요"
/>

파트너 이메일은 필수가 아니다.

회원가입 단계에서 파트너를 바로 연결하고 싶다면 입력하면 되고, 아직 상대방이 가입하지 않았거나 나중에 연결하고 싶은 경우에는 비워둘 수 있다.

그리고 하단에는

나중에 마이페이지에서도 언제든 연결할 수 있어요.

라는 안내를 추가했다.

이렇게 하면 회원가입 단계에서 커플 연결을 강제하지 않으면서도, BroBean의 핵심 기능인 커플 연결을 자연스럽게 안내할 수 있다.

🛡️ 이메일 인증으로 계정 보호

두 번째 영역에서는 계정과 본인 인증을 진행한다.

먼저 이메일 주소를 입력한 뒤 인증요청 버튼을 누른다.

<div class="flex gap-2">
  <AppInput
    v-model="form.email"
    type="email"
  />

  <UButton
    @click="sendVerificationCode"
  >
    {{ isCodeSent ? '재전송' : '인증요청' }}
  </UButton>
</div>

인증번호를 요청하면 추가 입력 영역이 나타난다.

<div v-if="isCodeSent && !form.isEmailVerified">
  <span>인증번호 입력</span>

  <AppInput
    v-model="form.verificationCode"
    placeholder="6자리 숫자를 입력하세요"
  />

  <UButton @click="verifyCode">
    확인
  </UButton>
</div>

이처럼 인증번호 입력 영역은 처음부터 화면에 노출하지 않고 인증번호를 요청했을 때만 표시하도록 했다.

사용자가 현재 어떤 단계에 있는지도 자연스럽게 구분할 수 있다.

인증이 완료되면 이메일 입력창을 계속 수정할 필요가 없도록 처리하고,

이메일 본인 인증이 완료되었습니다.

라는 성공 메시지를 보여준다.

이를 통해 사용자는 자신의 이메일 인증이 정상적으로 완료되었는지 바로 확인할 수 있다.

🔑 비밀번호와 비밀번호 확인

이메일 인증 이후에는 로그인에 사용할 비밀번호를 설정한다.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <AppInput
    v-model="form.password"
    type="password"
    placeholder="6자 이상 입력"
  />

  <AppInput
    v-model="form.passwordConfirm"
    type="password"
    placeholder="비밀번호 재입력"
  />
</div>

비밀번호와 확인 입력창을 나란히 배치해 한 화면에서 비교할 수 있도록 했다.

회원가입 과정에서 이메일 인증과 비밀번호 설정을 하나의 계정 및 본인 인증 영역으로 묶으면서, 사용자가 현재 계정 정보를 설정하고 있다는 흐름도 명확하게 만들었다.

📜 약관과 개인정보 처리방침

회원가입 마지막 단계에서는 서비스 이용약관과 개인정보 처리방침에 대한 동의를 받는다.

먼저 전체 약관에 한 번에 동의할 수 있도록 했다.

<input
  id="all-agree"
  v-model="isAllAgreed"
  type="checkbox"
/>

<label for="all-agree">
  전체 약관 및 개인정보 처리방침에 모두 동의합니다.
</label>

그리고 각각의 필수 동의 항목을 별도로 제공한다.

[필수] 브로빈 서비스 이용약관 동의
[필수] 개인정보 처리방침 동의

각 항목에는 보기 버튼을 배치했다.

보기 버튼을 누르면 현재 화면 위에 모달이 나타나고, 이용약관 또는 개인정보 처리방침의 상세 내용을 확인할 수 있다.

{{ modalType === 'privacy'
  ? '개인정보 처리방침'
  : '서비스 이용약관'
}}

개인정보 처리방침에서는 이메일, 비밀번호, 닉네임, 농장 이름과 같은 필수 정보와 파트너 연동 이메일 등의 선택 항목을 안내한다.

또한 회원가입 및 관리, 본인 식별 및 인증, 커플 자산 농장 데이터 공유 등의 이용 목적도 함께 확인할 수 있도록 했다.

이처럼 약관 내용을 별도의 페이지로 이동시키기보다는 회원가입 과정에서 바로 확인할 수 있는 모달로 제공해 가입 흐름이 끊기지 않도록 했다.

🌱 회원가입의 마지막은 '농장 개업'

모든 정보 입력과 동의를 완료하면 마지막으로 회원가입을 제출한다.

<UButton
  type="submit"
  color="primary"
  size="xl"
  block
>
  농장 개업 및 회원가입 완료 🌱
</UButton>

여기서도 단순한 회원가입이라는 문구 대신 **'농장 개업 및 회원가입 완료'**라고 표현했다.

로그인 버튼이 '농장으로 입장하기'였다면, 회원가입은 그 농장에 처음 입주하는 과정이라고 볼 수 있다.

이렇게 로그인과 회원가입의 문구를 연결하면서 인증 화면에서도 BroBean의 세계관을 유지했다.

📩 비밀번호 찾기는 이메일 인증으로

로그인 화면에서 비밀번호 찾기를 선택하면 비밀번호 복구 화면으로 이동한다.

비밀번호 찾기 역시 한 번에 모든 정보를 입력받기보다는 인증 → 비밀번호 재설정의 단계로 나누어 구성했다.

먼저 계정 확인을 위해 인증번호를 요청한다.

<UButton
  type="submit"
  color="primary"
  size="xl"
  block
>
  인증번호 받기 📩
</UButton>

인증번호가 정상적으로 발송되면 사용자는 인증번호를 입력하고 본인 확인을 진행한다.

<UButton
  type="submit"
  color="primary"
  size="xl"
  block
>
  인증 확인 ✨
</UButton>

인증 과정에서 문제가 발생하면 로그인이나 회원가입 화면과 동일한 에러 메시지 UI를 사용해 상태를 알려준다.

이렇게 계정 관련 화면 전체에서 성공, 오류, 인증 상태를 일관된 방식으로 표현하도록 했다.

🔒 새로운 비밀번호로 재설정

인증이 완료되면 새로운 비밀번호를 설정할 수 있다.

특히 새 비밀번호를 한 번 입력하는 것으로 끝내지 않고, 새 비밀번호 확인 필드를 별도로 제공한다.

<div class="space-y-1.5">
  <label>
    새 비밀번호 확인
  </label>

  <AppInput
    v-model="form.passwordConfirm"
    type="password"
    placeholder="비밀번호를 한번 더 입력해주세요"
  />
</div>

모든 입력이 정상적으로 완료되면

비밀번호 재설정 완료 🔒

버튼을 통해 새로운 비밀번호를 저장한다.

로그인 → 비밀번호 찾기 → 이메일 인증 → 새 비밀번호 설정이라는 흐름을 하나의 과정으로 연결해, 사용자가 비밀번호를 잊어버렸더라도 서비스 이용을 다시 이어갈 수 있도록 했다.

❤️ 파트너 초대와 커플 연결

BroBean의 계정 기능에서 회원가입만큼 중요한 부분이 바로 파트너 연결이다.

회원가입 과정에서 파트너 이메일을 입력할 수도 있지만, 서비스 이용 중에도 파트너와 연결할 수 있어야 한다.

그래서 별도의 커플 연결 팝업을 구성했다.

파트너 초대 팝업은 기존 화면 위에 모달 형태로 표시된다.

따라서 사용자가 현재 보고 있던 농장이나 페이지를 완전히 벗어나지 않고도 파트너 연결 요청을 확인할 수 있다.

커플 연결은 단순한 계정 정보 변경이 아니라 함께 사용할 농장의 공유 상태를 결정하는 기능이기 때문에, 사용자가 요청 내용을 확인한 뒤 선택할 수 있도록 팝업 형태로 구성했다.

🚫 원하지 않는 경우 거절할 수 있도록

파트너 초대 팝업에는 연결을 수락하는 흐름뿐만 아니라 거절하기 기능도 제공한다.

<UButton
  color="neutral"
  variant="ghost"
  size="md"
  block
  @click="handleReject"
>
  거절하기
</UButton>

거절 버튼은 주요 액션보다 상대적으로 눈에 띄지 않도록 ghost 스타일을 사용했다.

파트너 연결처럼 중요한 요청은 사용자가 충분히 내용을 확인한 뒤 선택할 수 있어야 하기 때문이다.

즉, 초대 요청을 받았다고 해서 무조건 연결되는 것이 아니라 사용자가 직접 수락 여부를 결정할 수 있는 구조로 구성했다.

🔗 회원가입에서 마이페이지까지 이어지는 커플 연결

이번에 구현한 파트너 연결 기능은 앞선 마이페이지 구현과도 연결된다.

회원가입에서는 파트너 이메일을 선택적으로 입력할 수 있고,

서비스 이용 이후에는 마이페이지에서 커플 연결을 관리할 수 있으며,

상대방에게 초대가 전달되면 커플 연결 팝업을 통해 요청을 확인할 수 있다.

즉,

회원가입 → 파트너 초대 → 초대 확인 → 커플 연결 → 함께 농장 관리

라는 하나의 흐름이 만들어진다.

이 부분은 BroBean이 단순한 개인 가계부가 아니라 커플이 함께 사용하는 가계부 서비스라는 점을 보여주는 중요한 기능이다.

🌙 인증 화면 전체에서 유지되는 UI 경험

이번에 만든 로그인, 회원가입, 비밀번호 찾기, 파트너 초대 화면에서도 기존 BroBean UI의 방향을 그대로 유지했다.

공통적으로 다음과 같은 요소를 사용했다.

• 🌙 라이트 / 다크모드 지원
• 🌱 BroBean의 농장 콘셉트를 반영한 문구
• ⚠️ 일관된 에러 메시지 UI
• 🔘 둥근 모서리 중심의 버튼과 카드
• 📱 모바일에서도 사용할 수 있는 입력 구조
• 🎨 primary 컬러를 활용한 주요 액션 강조

특히 인증 화면이라고 해서 기존 서비스와 완전히 다른 디자인을 사용하기보다는, 로그인 전과 로그인 후의 화면이 하나의 서비스처럼 느껴지도록 하는 데 초점을 맞췄다.

🚀 다음 단계

이번 편에서는 BroBean을 사용하기 위한 가장 기본적인 계정 인증과 커플 연결 영역을 구현했다.

현재 로그인과 회원가입, 비밀번호 찾기, 파트너 연결 UI가 구성되면서 서비스에 처음 들어오는 사용자부터 기존 사용자까지 기본적인 계정 흐름을 갖추게 됐다.

앞으로는 이 화면들을 실제 인증 및 데이터 시스템과 연결하면서

• 🔐 실제 이메일 인증 처리
• 📩 인증번호 발송 및 만료 처리
• 🔑 실제 비밀번호 재설정
• 🌐 네이버 / Apple OAuth 연동
• ❤️ 파트너 초대 및 수락 상태 관리
• 🔄 커플 데이터 공유 및 동기화

등으로 확장해야 한다.

이번 편에서 만든 로그인과 회원가입을 통해

'나의 농장을 만들고 → 파트너를 초대하고 → 함께 자산을 관리하기 시작하는 첫 번째 단계' 가 사용자들에게 기억에 남는 첫인상이 되기를 바란다. 🌱