Trading CV - 기술을 공유하는 새로운 인터랙티브 방식
발행: (2026년 1월 31일 오전 02:04 GMT+9)
4 min read
원문: Dev.to
Source: Dev.to
개요
이 제출물은 Google AI가 주관한 새해, 새로운 나 포트폴리오 챌린지를 위해 제작되었습니다. 주식‑시장 대시보드(블룸버그 터미널, TradingView)의 시각 언어를 활용해 전문 경력을 보여주는 포트폴리오를 선보입니다. 정적인 PDF 대신 사용자는 “자산”(스킬)을 상호작용하고, “시장 성과”(경력 성장)를 확인하며, “분석가 보고서”(사례 연구)를 읽을 수 있습니다.
핵심 디자인 원칙
- Google Stack: Antigravity와 AI Studio
- 테마: 사이버펑크/금융 미학을 적용한 다크 모드
- 상호작용: 실시간 피드백, 맥동형 인디케이터, 글래스모피즘
- 데이터 기반: 모든 UI 요소가 9년 이상의 경험에서 추출된 데이터 포인트를 나타냄
기술 스택
| 카테고리 | 기술 |
|---|---|
| 핵심 프레임워크 | React with TypeScript (Vite) |
| 스타일링 | Tailwind CSS (utility‑first) |
| 애니메이션 | Framer Motion (fluid transitions, modal effects) |
| 데이터 시각화 | Recharts (career performance chart) |
| 아이콘 | Lucide React (lightweight iconography) |
애플리케이션 구조
시각 모듈
- 전환 가능한 영역 차트 & 캔들스틱 차트 – 경력 타임라인과 “시장 가치”(역할 seniority/impact)를 시각화.
- 주문서‑스타일 리스트 – 주요 진입 산업을 나타내는 “배당금” 마커를 표시.
- 스크롤 뉴스 티커 / 소셜 피드 – 최근 성과와 업데이트를 강조.
- 호버 효과가 있는 카드 그리드 – 임베디드 모달 뷰에서 상세 “보고서”(사례 연구)를 열 수 있음.
데이터 모듈
- 호버 툴팁 – 역할별 스택 사용량과 회사 로고를 Clearbit API를 통해 표시.
- 스킬 순위 – “거래량”(경력 연수)과 “깊이”(숙련도) 기준으로 스킬을 순위 매김.
- 자산 – SQL, Python, Power BI, RPA 등
콘텐츠 모듈
- 연대기식 이력 – 역할, 회사, 고효과 항목(예: “+20 % 효율성”) 포함.
- 학력, 자격증, 연락처 링크 – 간결한 전문 배경.
- 푸터 – GitHub, LinkedIn, 이메일에 빠르게 접근할 수 있는 링크 제공.
인터랙티브 기능
- 거래‑인터페이스 느낌: 경험을 거래 대시보드 형태로 제공하여 전문 이정표를 시장‑스타일 정보로 변환.
- 임베디드 Power BI 보고서: 클릭 가능한 갤러리 이미지가 앱 내에서 직접 인터랙티브 Power BI/Fabric 대시보드를 열어줌.
- 섬세한 애니메이션: Framer Motion이 인터페이스 전반에 부드럽고 눈길을 끄는 애니메이션을 제공.