AssetMind — 금융자산관리 웹 서비스
한 줄 요약 — Figma 디자인부터 Tailwind CSS 구현까지 UI 개발을 전담한 금융자산관리 웹 서비스
개요
| 항목 |
내용 |
| 기간 |
2026.01 ~ 2026.06 (진행 중) |
| 팀 구성 |
4인 팀 프로젝트 |
| 역할 |
UI 개발 전담 |
| 플랫폼 |
Web (PC / Tablet / Mobile) |
| 기술 스택 |
React, Tailwind CSS, Storybook, Figma, Vercel |
기획 배경
토스증권 등 기존 금융 서비스를 레퍼런스 삼아, 복잡한 주식 및 자산 데이터를 직관적으로 시각화하고자 했습니다. PC, 태블릿, 모바일 등 다양한 해상도에서 일관된 사용자 경험(UX)을 제공하는 반응형 크로스 플랫폼 구축을 목표로 기획되었습니다.
내가 기여한 것
UI 개발 전담 및 디자인 시스템 구축
- Figma 디자인 시스템을 기반으로 Tailwind CSS 컴포넌트를 구현했습니다.
- Storybook을 도입하여 컴포넌트를 독립적으로 문서화함으로써 팀 내 재사용성과 커뮤니케이션 효율을 높였습니다.
- Tailwind Config와 Storybook 간 자동 매핑 시스템을 개발하여 색상 및 타이포그래피 시스템을 시각적으로 동기화했습니다.
반응형 데이터 시각화 구현
- Desktop, Tablet, Mobile 3개 뷰포트별 레이아웃을 적용하고, TradingView 외부 차트 위젯을 리액트 환경에 맞게 캡슐화했습니다.
- 실시간(Realtime), 시장 휴장(Market-closed), 로딩(Skeleton) 등 서비스 상태(pageState)를 정의하여 렌더링 케이스를 구축했습니다.
협업 프로세스 및 CI/CD
- Vercel을 활용한 Storybook 자동 배포 파이프라인을 구축하여 PR마다 프리뷰 배포 환경을 구성했습니다.
- Agile/Scrum 방식으로 스프린트를 운영하며 GitHub Issue와 PR에 P0/P1 우선순위 태깅을 도입했습니다.