■ 1. 문제점

⁕ 정보 접근성 문제
복잡한 금융상품 정보를 한눈에 파악하기 어려운 기존 웹사이트들이 많아 투자자들이 상품 비교에 어려움을 겪고 있습니다. 카드 형식의 UI는 많은 상품을 동시에 비교하기 어려워 효율적인 의사결정을 방해합니다.

⁕ 검색 경험 부족
원하는 상품을 빠르게 찾기 어려운 검색 시스템으로 인해 사용자들이 정보 탐색에 많은 시간을 소비하고 있습니다. 다양한 필터링 옵션과 직관적인 검색 기능이 부족합니다.

⁕ 관리 비효율성
관리자가 상품 정보와 공시 자료를 업데이트할 때 복잡한 프로세스를 거쳐야 하며, 특히 주기적으로 변동되는 가격 정보를 신속하게 반영하기 어려운 문제가 있습니다.

⁕ 정보 신뢰성 문제
최신 정보가 적시에 반영되지 않는 플랫폼은 투자자의 신뢰를 잃게 되며, 이는 잘못된 투자 결정으로 이어질 수 있습니다.

■ 2. 프로젝트 목표

⁕ 비즈니스 목표
- 금융상품 정보를 명확하고 직관적으로 제공하여 사용자 신뢰도 향상
- 관리자의 콘텐츠 관리 효율성을 높여 운영 비용 절감
- PC와 Mobile 사용자 모두에게 최적화된 경험 제공
- 2025년 12월 31일까지 프로젝트 완료

⁕ 기술적 목표
- React + Tailwind CSS v3를 활용한 현대적인 웹 애플리케이션 구축
- Mock Data 기반의 완전한 인터랙션 구현으로 실제 서비스 수준의 목업 제작
- 반응형 디자인으로 모든 디바이스 완벽 지원
- 3초 이내 초기 로딩 시간 달성
- 재사용 가능한 컴포넌트 아키텍처로 유지보수성 확보

⁕ 사용자 경험 목표
- 30개 이상의 현실적인 금융상품 데이터로 실제 서비스 수준의 목업 구현
- 직관적인 검색 및 필터링으로 3번 클릭 이내에 원하는 상품 찾기
- 전문적이고 신뢰감 있는 일관된 디자인 제공

■ 3. 해결 방안

⁕ 목록형 UI 설계
테이블 형식의 목록형 UI로 여러 상품의 핵심 정보를 한눈에 비교할 수 있도록 구현했습니다. Desktop에서는 전체 정보를, Mobile에서는 카드 형태로 최적화하여 표시합니다.

⁕ 강력한 검색/필터링 시스템
실시간 검색, 다중 필터링(자산 유형, 레버리지 유형), 컬럼별 정렬 기능을 제공하여 사용자가 원하는 정보에 빠르게 접근할 수 있도록 했습니다.

⁕ 직관적인 관리자 CMS
React Hook Form + Yup 기반의 실시간 유효성 검사, 직관적인 폼 디자인, 확인 모달을 통한 안전한 삭제로 누구나 쉽게 콘텐츠를 관리할 수 있습니다.

⁕ 데이터 시각화
Recharts를 활용한 가격 차트, 통계 대시보드로 복잡한 데이터를 시각적으로 이해하기 쉽게 제공합니다.

■ 1. 포트폴리오 소개

금융 투자상품(ETN) 정보 제공 플랫폼

투자자들을 위한 금융 상품 정보 제공 웹 애플리케이션입니다. 30개 이상의 ETN(Exchange Traded Note) 금융상품의 실시간 가격 정보, 상세 분석, 공시 자료를 제공하며, 관리자가 상품 정보와 콘텐츠를 효율적으로 관리할 수 있는 CMS(Content Management System)를 포함합니다. 복잡한 금융 정보를 직관적이고 전문적으로 전달하여 투자자의 합리적인 의사결정을 지원합니다.

■ 2. 작업 범위

⁕ 개발 범위
- 요구사항 분석 및 기획 문서(PRD) 작성
- 화면 설계 및 와이어프레임 구성
- UI/UX 디자인 시스템 구축
- Front-end 개발 (사용자 페이지 + 관리자 페이지)
- Mock Data 기반 완전한 CRUD 구현
- 반응형 웹 디자인 및 성능 최적화

⁕ 지원 환경
- 디바이스: Desktop (≥1024px), Tablet (640-1023px), Mobile (<640px)
- 브라우저: Chrome, Firefox, Safari, Edge (최신 2개 버전)
- 플랫폼: 반응형 웹 애플리케이션 (PC/Mobile Web)

■ 3. 주요 업무

⁕ 사용자 기능
- 금융상품 목록 페이지: 30개 이상의 ETN 상품 조회, 검색, 필터링, 정렬 기능
- 금융상품 상세 페이지: 가격 정보, 52주 가격 차트, 기초자산 정보, 관련 상품 추천
- 공시정보 게시판: 정기/수시 공시 자료 열람, 첨부파일 다운로드, 검색 및 카테고리 필터링
- 반응형 UI/UX: 모든 디바이스에 최적화된 사용자 경험 제공

⁕ 관리자 기능
- 대시보드: 주요 지표 모니터링 (상품 수, 게시물 수, 방문자 통계)
- 상품 관리: 금융상품 CRUD (등록/수정/삭제), React Hook Form + Yup 기반 유효성 검사
- 게시물 관리: 공시정보 CRUD, 첨부파일 업로드 시뮬레이션
- 통계 대시보드: Recharts 기반 데이터 시각화 (방문자 추이, 인기 상품, 카테고리별 분포)

⁕ 핵심 기술 구현
- React 19 + React Router v6 기반 SPA(Single Page Application) 구조
- Context API를 활용한 전역 상태 관리 (인증, 데이터)
- Custom Hooks를 통한 로직 재사용 (usePagination, useSearch, useAuth)
- 코드 스플리팅으로 20개 청크 분리 및 초기 로딩 최적화 (Main: 90.29KB)

■ 4. 주안점

⁕ 정보 전달의 명확성
복잡한 금융 정보를 테이블 형식의 목록형 UI로 구성하여 여러 상품을 한눈에 비교할 수 있도록 설계했습니다. 상승/하락을 색상으로 시각화하여 직관적인 정보 파악이 가능합니다.

⁕ 전문성과 신뢰감
대신증권 ETN 웹사이트를 벤치마킹하여 금융 서비스에 적합한 네이비/다크 블루 컬러 팔레트와 깔끔한 레이아웃을 적용했습니다. 불필요한 장식을 배제하고 정보 전달에 집중했습니다.

⁕ 사용자 경험 최적화
검색/필터링 기능으로 원하는 상품을 3번 클릭 이내 찾을 수 있도록 설계했으며, Mobile-first 접근 방식으로 모든 디바이스에서 일관된 경험을 제공합니다.

⁕ 관리 효율성
직관적인 관리자 페이지(CMS)를 통해 비개발자도 쉽게 콘텐츠를 관리할 수 있도록 구현했습니다. React Hook Form과 Yup을 활용한 실시간 유효성 검사로 데이터 무결성을 보장합니다.

⁕ 성능과 확장성
React.lazy()를 활용한 코드 스플리팅, React.memo/useMemo/useCallback을 통한 렌더링 최적화, 재사용 가능한 컴포넌트 아키텍처로 유지보수성과 성능을 동시에 확보했습니다.