2025.10 자산 앱 프로젝트 진행 현황

작성자:

10월 개발 기록 – 서비스 구조와 화면 설계 중심 리뷰

자산 관리 앱 프로젝트를 시작한 지 벌써 한 달이 지났습니다.
이번 글에서는 지난 1개월 동안 진행된 데이터베이스 모델링, 백엔드, 프론트엔드 개발 현황을 정리하고, 앞으로의 개발 방향과 계획을 함께 공유하려고 합니다.

🧭 프로젝트 개요

개발 중인 자산 관리 애플리케이션은 개인 투자자가 보유한 주식, 가상자산, 부동산 등 다양한 자산을 하나의 플랫폼에서 통합 관리할 수 있도록 설계되었습니다.
사용자는 자산을 카테고리별로 등록하고, 투자 성과를 직관적으로 확인하며, 거래 내역까지 효율적으로 관리할 수 있습니다.

⚙️ 기술 스택 및 개발 환경

프론트엔드

  • Next.js 15.5.4 + React 18.3.1 기반의 구조
  • Mantine 8.3.5 UI 라이브러리로 일관된 디자인 시스템 구축
  • TypeScript 5.9.3을 통한 정적 타입 검증과 안정적인 코드 유지
  • NextAuth 4.24.11로 구글 OAuth 인증 구현

백엔드

  • FastAPI 0.118.2 기반 RESTful API 서버
  • PostgreSQL 15.14 데이터베이스 (Docker 컨테이너 환경)
  • Alembic을 통한 데이터베이스 마이그레이션 관리

이 기술 조합을 통해 빠른 개발과 함께 확장성과 안정성을 동시에 확보했습니다.

🗂️ 데이터베이스 모델링

10월의 첫 번째 목표는 데이터베이스 구조 확립이었습니다.
앱의 핵심은 다양한 자산 유형을 통합 관리하는 것이므로, 유연한 데이터 구조가 필요했습니다.

주요 테이블 구성은 다음과 같습니다.

  • User : 사용자 정보
  • Portfolio : 사용자의 자산 그룹 (예: 주식, 예금 등)
  • Asset : 개별 자산 데이터 (종목명, 수량, 단가, 현재가 등)
  • Trade : 매수·매도 거래 이력
  • Deposit : 입금 및 현금 흐름 기록

이 구조를 기반으로 자산 단위의 거래 내역을 추적하고, 포트폴리오별 손익 계산이 가능하도록 설계했습니다.

🧱 백엔드 API 구축

백엔드에서는 FastAPI를 활용해 REST API를 구성했습니다.
초기 개발 단계에서는 CRUD 중심의 기본 기능에 집중했습니다.

  • 사용자 인증 및 등록
  • 포트폴리오 생성 / 수정 / 삭제
  • 자산 등록 및 평가금액 조회
  • 거래 내역 CRUD
  • 입금 이력 관리

또한, 모든 요청은 JWT 기반 인증 토큰으로 보호되며, 에러 상황에서도 일관된 응답 구조를 유지하도록 설계했습니다.

API 응답 구조는 다음과 같이 표준화했습니다:

{
  "success": true,
  "data": { ... },
  "message": "요청이 정상적으로 처리되었습니다."
}

이를 통해 프론트엔드에서 안정적으로 데이터를 처리할 수 있도록 했습니다.

💻 프론트엔드 개발 – 화면 구성 중심 리뷰

10월에는 주로 기초 UI 설계와 핵심 화면 구성에 집중했습니다.
앱의 전체적인 흐름은 다음과 같은 구조로 설계되었습니다.

로그인 → 메인 대시보드 → 포트폴리오 목록 → 포트폴리오 상세 → 거래/입금 관리

1️⃣ 로그인 및 인증 화면

  • 구글 계정을 통한 OAuth 로그인 구현
  • 로그인 후 사용자 정보와 연결된 포트폴리오 자동 로드
  • 비로그인 상태 접근 시 리다이렉트 처리

2️⃣ 메인 대시보드

앱 실행 후 가장 먼저 보이는 메인 화면으로, 사용자의 전체 자산 현황을 요약하여 제공합니다.

  • 전체 자산 요약 카드
    • 모든 포트폴리오의 총 자산 금액 표시
    • 포트폴리오별 비중과 수익률 개요 제공
  • 포트폴리오 리스트 섹션
    • 각 포트폴리오를 카드 형태로 시각화
    • 클릭 시 해당 포트폴리오의 상세 화면으로 이동

UI는 Mantine 컴포넌트를 활용해 그리드 기반의 반응형 구조로 구성했습니다.
모바일에서도 동일한 가독성을 유지할 수 있도록 폰트 크기와 카드 레이아웃을 자동 조정했습니다.

3️⃣ 포트폴리오 상세 화면

개별 포트폴리오를 선택하면 진입하는 상세 화면입니다.
여기서는 해당 포트폴리오의 핵심 지표와 세부 자산 정보를 확인할 수 있습니다.

  • 상단 요약 영역: 총 자산, 평가손익, 수익률, 입금금액 표시
  • 탭 구조 UI로 구성된 세부 화면
    • Assets 탭: 보유 자산 목록, 평균단가, 평가금액 표시
    • Transactions 탭: 매수/매도 내역 조회 및 수정
    • Deposits 탭: 입금 및 출금 이력 관리

데이터는 모두 FastAPI에서 제공하는 REST API를 통해 비동기적으로 로드되며,
상태 관리는 React의 Context API + useReducer 패턴으로 구성했습니다.

4️⃣ 거래 및 입금 관리 화면

투자 기록을 체계적으로 관리할 수 있도록 거래 내역과 현금 흐름 관리 화면을 개발했습니다.

  • 거래 내역 등록 및 수정 기능
    • 종목명, 수량, 단가, 거래일 등 필수 정보 입력
    • 실수 입력 방지를 위한 입력 검증 로직 포함
  • 입금 이력 관리
    • 실제 투자금 흐름을 기록하여 정확한 수익률 계산에 활용
    • 입금/출금 항목별 메모 기능으로 관리 용이성 향상

📈 개발 중 중점 사항

  • 일관된 디자인 시스템: Mantine의 테마를 커스터마이징하여 브랜드 컬러와 통일된 톤앤매너 유지
  • 안정적인 데이터 구조: 초기부터 DB 스키마를 유연하게 설계하여 확장에 대비
  • UX 최적화: 복잡한 금융 데이터를 단순한 카드·차트 중심으로 시각화

🔮 향후 계획 (11월 이후 로드맵)

  • 실시간 주식 시세 연동 (한국투자증권 Open API)
  • 실시간 가상자산 시세 연동(Upbit Open API)
  • 거래 내역에 따른 자산 업데이트
  • 자산별 수익률 그래프 및 시각화 기능

✍️ 회고

10월은 기초를 다지는 시기였습니다.
앱의 구조와 데이터 흐름이 안정화되면서, 이제는 “보이는 서비스”로의 첫걸음을 내디뎠습니다.
특히 백엔드와 프론트엔드 간의 데이터 연동이 원활하게 동작하면서,
11월에는 보다 실시간성 있는 자산 관리 기능 개발에 집중할 수 있는 기반이 마련되었습니다.

앞으로도 꾸준히 발전 과정을 기록하며, 배우고 느낀점들을 공유하겠습니다.

참고 자료

댓글 남기기