몇 년 전부터 나는 나의 프로젝트를 효과적으로 보여줄 수 있는 온라인 포트폴리오를 만드는 생각을 했습니다. 여러 번의 시도와 실패를 겪으며, 마침내 GitHub Pages를 이용해 첫 포트폴리오를 완성했죠.
하지만 이러한 정적 포트폴리오는 독자와의 상호작용이 부족하다는 점 때문에 아쉬움이 남았습니다. 그래서 이번에는 GitHub Pages에서 동적인 포트폴리오 시스템을 구축하는 방법을 찾아보았습니다.
문제 설정: 동적 GitHub 페이지 만들기
Github Pages는 프로젝트를 무료로 호스팅할 수 있는 훌륭한 솔루션이죠. 하지만 정적 콘텐츠만을 지원하는 문제점이 있습니다.
이를 해결하기 위해 Holoviz의 Panel 패키지를 활용하여 웹 콘텐츠에 동적 요소를 포함하고자 했습니다. Panel은 직관적이면서도 강력한 대시보드와 시각화 도구로, 동적이고 상호작용이 가능한 페이지를 만들어줍니다.
수행 방식
이 포트폴리오 프로젝트에서는 다음과 같은 기술과 도구를 활용했습니다.
- Python 패키지: Panel
- Conda와 VSCode를 스크립트 및 환경 관리 도구로 사용
세 가지 복잡도가 다른 애플리케이션을 테스트해보았습니다.
- 간단한 앱(Simple App)
- 복잡한 앱(Big App)
- Material 디자인 대시보드(Material Dashboard)
각 애플리케이션은 로컬 Python 서버와 GitHub Pages에 배포하여 기능과 속도를 테스트했으며, 모든 앱이 성공적으로 배포되었습니다.
GitHub Pages에 동적 앱 배포하기
Panel을 사용하면 Python 스크립트를 HTML로 변환하여 웹 콘텐츠로 쉽게 통합할 수 있습니다. 웹페이지 상에서 실시간 업데이트 및 사용자의 상호작용이 가능해진다는 것입니다.
특히, GitHub Pages에 배포하는 과정에서 Panel의 pyodide-worker 기능을 활용하여 WebAssembly를 통해 변환하습니다.
1. 로컬 서버에 배포하기
Python의 http.server를 이용해 로컬에서 서버를 에뮬레이션하고, 각 애플리케이션을 어떤 성능으로 실행할 수 있는지 검사했습니다.
모든 애플리케이션이 성공적으로 로드 되었고, 로컬 환경에서도 원활하게 작동되는 것을 확인했습니다.
2. GitHub Pages에 배포하기
GitHub Repositories에 HTML 및 JavaScript 파일을 ‘docs’ 폴더에 구성함으로써 GitHub Pages에 배포가 가능했습니다.
이는 사용자들이 쉽게 동적으로 상호작용할 수 있는 페이지를 제공하며, GitHub를 통해 무료로 호스팅할 수 있다는 장점을 지닙니다.
결론
Holoviz의 Panel을 활용한 동적 GitHub Pages 구축은 그리 복잡하지 않은 프로세스로, 몇 가지 간단한 설정만으로도 동적 포트폴리오를 쉽게 구성할 수 있었습니다.
데이터 전문가들이 프로젝트를 더욱 매력적으로 발표할 수 있는 방법이 되었으며, 특히 소규모 프로젝트에 매우 적합한 솔루션이라고 결론지을 수 있었습니다.
여러분도 개인 프로젝트나 포트폴리오를 동적으로 만들어보고 싶다면, 아주 간단한 몇 가지 설정으로도 시도해볼 수 있습니다.
