결론
현재 사이트는 이미 디자인 방향이 좋습니다. 템플릿을 교체하지 말고 기존 HTML/CSS를 유지한 채 품질 레이어만 추가하는 것이 맞습니다.
아이보리 종이 질감, 검정·오렌지 대비, 큰 제목, 성과 숫자, 업무 방식, 실제 프로젝트 카드가 일관되게 연결되어 있습니다.
GitHub 도구 적용 우선순위
- Lucide — 연락처·외부 링크·성과 지표 아이콘을 같은 선 두께로 통일합니다. 저장소
- Radix Primitives — 모바일 메뉴, 프로젝트 상세 다이얼로그, 탭, 포커스 등 접근성 동작을 보강합니다. 저장소
- Motion — hero·프로젝트 카드의 등장 애니메이션을 최소한으로 추가하고 reduced-motion(움직임 감소 설정)을 지원합니다. 저장소
- shadcn/ui — 사이트를 React/Next.js로 재구축할 때만 컴포넌트 기반으로 도입합니다. 저장소
- Magic UI — animated grid나 text reveal 중 하나만 선택해 첫 화면의 시각적 포인트로 사용합니다. 저장소
실제 사이트에서 먼저 고칠 부분
1. 접근성: 네비게이션·버튼의 keyboard focus(키보드 포커스), 이미지 alt, 링크 목적을 명확히 합니다.
2. 모바일: sticky nav가 제목을 가리지 않는지, 성과 숫자 4개와 프로젝트 카드가 충분한 간격을 갖는지 확인합니다.
3. 성과 증거: “참여율 130% 향상” 같은 문장에 기준 기간·측정 방식·내 역할을 프로젝트 상세에서 보강합니다.
4. 인쇄: 이력서 보기 페이지에 print CSS를 넣어 PDF 저장 시 메뉴·버튼·배경 장식을 숨깁니다.
5. 모션: 지금의 강한 타이포그래피를 살리려면 애니메이션은 메시지를 강조할 때만 사용하고, 모든 카드에 넣지 않습니다.
판단
현재 사이트에 가장 효과적인 조합은 Lucide + 수제 CSS 품질 보강 + Motion 소량입니다. shadcn/ui·Radix·Magic UI를 지금 즉시 전면 도입하면 오히려 현재의 독특한 브랜드와 단순한 정적 배포 장점을 잃을 수 있습니다.
실제 사이트 HTML과 site.css를 직접 확인했습니다. 회사 기밀·전시 사진 공개권한과 실제 모바일 시각 품질은 별도 확인이 필요합니다.