1. 무엇을 개선하는 조사인가
대상은 이력서·포트폴리오 사이트의 첫인상, 정보 구조, 프로젝트 사례 가독성, 버튼·아이콘 일관성, 키보드 접근성, 스크롤 모션, 모바일 성능입니다. 각 저장소의 별 수보다 실제 품질 문제를 해결하는 범위와 도입 부담을 우선했습니다.
세계전람 경력에 특히 중요한 품질: 첫 화면에서 역할과 성과가 바로 보이고, 전시 프로젝트를 연도·산업·성과별로 탐색하며, 사진·도면·수치가 모바일에서도 빠르게 읽혀야 합니다.
2. GitHub 저장소 비교
| 저장소 | 품질에 기여하는 부분 | 도입 부담 | 추천 용도 |
|---|---|---|---|
| shadcn/ui | 접근성(키보드·스크린리더 대응) 중심의 컴포넌트 소스코드를 직접 소유·수정. 버튼·탭·다이얼로그·카드·테이블 체계를 통일. | 중간. React/Next.js·Tailwind 필요 | 전체 디자인 시스템의 기반 |
| Radix Primitives | Headless UI(스타일 없이 동작·접근성만 제공) 컴포넌트. WAI-ARIA(웹 접근성 표준) 패턴, 포커스·키보드·모달 동작을 안정화. | 중간 | 접근성 품질과 인터랙션 기반 |
| Motion | React·JavaScript·Vue용 애니메이션. 스크롤 연동, 레이아웃 전환, 제스처, GPU 가속을 제공. | 중간 | 페이지 진입·프로젝트 전환·스크롤 모션 |
| Magic UI | 복사해 쓰는 애니메이션 컴포넌트. 텍스트 리빌, 그리드, 빔, 마키, 아바타·배지 등 시각적 포인트가 많음. | 중간~높음. shadcn·Motion 전제 | Hero(첫 화면)나 프로젝트 강조 한두 곳 |
| Lucide | 일관된 1,600+ SVG 아이콘, 여러 프레임워크 패키지, 필요한 아이콘만 가져오는 tree-shaking(사용하지 않는 코드 제거). | 낮음 | 연락처·외부링크·성과 지표 아이콘 통일 |
| Radix Colors | 상태·명암·다크모드를 고려한 색상 스케일. 브랜드 색을 체계적으로 확장하기 좋음. | 낮음~중간 | 색상 토큰·대비·다크모드 |
3. 실제 적용 순서
- 먼저 정보 구조: Hero에 직무 포지셔닝, 핵심 성과 3개, PDF 이력서 버튼, 연락수단을 배치.
- shadcn/ui·Radix: 프로젝트 필터, 상세 모달, 타임라인, 모바일 메뉴를 접근성 기준으로 통일.
- Lucide: 이메일·LinkedIn·전시 규모·예산·관람객 등 아이콘을 같은 선 두께로 통일.
- Motion: 페이지 진입과 카드 reveal(스크롤 등장) 정도만 사용하고
prefers-reduced-motion사용자에게는 끔. - Magic UI: 배경 그리드나 텍스트 효과 하나만 추가. 핵심 경력 정보보다 애니메이션이 앞서면 제거.
4. 판단
가장 좋은 품질 조합: shadcn/ui + Radix + Lucide + Motion 소량.
시각 임팩트 추가: Magic UI에서 animated-grid-pattern 또는 text-reveal 중 하나만 선택.
현재 정적 HTML을 유지한다면: Lucide SVG, CSS 토큰, native details/summary, CSS transition부터 적용하고 React 전환 이후 shadcn/Radix를 도입.
주의: 컴포넌트와 애니메이션을 많이 넣으면 포트폴리오가 ‘경력 증명’보다 ‘템플릿 쇼케이스’처럼 보일 수 있습니다.
5. 미확인 사항
현재 포트폴리오의 실제 프레임워크, 기존 CSS 충돌, 사진·전시자료의 공개 권한, 한국어 폰트, 모바일 성능, 최종 채용 담당자 반응은 저장소 README만으로 확정할 수 없습니다. 대표 페이지를 fork해 Lighthouse(웹 성능·접근성 측정 도구)와 실제 모바일 시각 검수를 해야 합니다.
범위: 공식 GitHub 저장소 6개. GitHub 전체 저장소 전수조사는 아닙니다.
출처
shadcn/ui · Radix Primitives · Motion · Magic UI · Lucide · Radix Colors