매력적인 포트폴리오 제작기

들어가며

항상 포트폴리오를 수정할 때마다 '어떻게 하면 더욱 매력적으로 보일까?'라는 고민을 많이 합니다...

 

단순히 pdf 파일이나 노션을 통해 텍스트와 이미지로만 정리하는 것을 넘어서, 보는 사람에게 직관적이고 재미있게 다가갈 수 있는 표현 방법을 찾고자 했습니다. 

한 가지 아이디어로 제 기술 스택을 워드클라우드처럼 시각화하여 보는 사람이 흥미를 갖고 볼 수 있도록 제작하려고 하였습니다.

---

Tableau를 활용한 반응형 포트폴리오

과거 한 프로젝트에서는 사용자가 직접 클릭하며 데이터를 더 흥미롭게 탐색할 수 있는 대시보드를 제작한 경험이 있습니다.

 

그때의 경험을 바탕으로 제가 프로젝트마다 사용한 기술 스택들을 워드 클라우드 방식과 결합하여 조금 더 좋은 포트폴리오를 만들 수 있지 않을까 하는 생각으로 구현해 보았습니다.

 

첫 번째로, 데이터를 생성했습니다.

테스트 데이터입니다.

실제로 구현이 가능한지 체크해 보기 위해 임시로 데이터를 생성하였습니다.

 

구현하고 싶은 기술 스택의 기술의 이름 열과 그들의 크기를 결정하는 점유율 열을 만들었습니다.

 

두 번째로, 태블로로 구현해 보았습니다.

Tableau

'텍스트' 마크를 활용하여 워드클라우드를 구현하였습니다.

 

하지만 단순 텍스트로 워드클라우드를 구현하다 보니 매력적으로 다가오지 않았습니다.

 

그래서 해당 기술들의 로고를 사용하여 보여주기 위해 커스텀 도형을 사용하였습니다.

Tableau 커스텀 도형 사용하기

 

 

 

Tableau 커스텀 도형

이미지처럼 커스텀 도형으로 해당 기술들의 로고들을 통해 시각화하였습니다.

 

하지만 문제가 있었습니다.

기존에 워드클라우드를 구현했던 것처럼 위치가 자유롭게 배치되지 않고 일렬로 정렬된 점과

마우스를 갖다 댔을 때, 제가 생각한 대로 구현이 되지 않는다는 점입니다.

 

첫 번째 문제점은, 엑셀 파일에 X, Y 좌표를 입력하여 해결할 수 있었습니다.

 

하지만 두 번째 문제점은, 태블로에서 불가능한 영역이었습니다.

 

이 문제들을 보완하고자, Tableau가 아닌 HTML 기반으로 직접 제작하는 방식을 선택했습니다.

 

---

 

HTML을 활용한 반응형 포트폴리오

ChatGPT와 CodePen을 활용한 바이브 코딩

웹을 구현하는 기술은 지식이 부족하여 ChatGPT를 통해 바이브 코딩을 하였습니다.

 

ChatGPT가 구현해 준 HTML을 CodePen을 통해 확인하고 수정하여 깃허브에 해당 index.html 파일을 업로드하여 호스팅 하였습니다.

CodePen - Create a New Pen

 

아이디어

기술 스택 클라우드 구현 이미지

구현 아이디어는 기술들의 로고들을 워드클라우드처럼 자유롭게 배치하고, hover 기능을 통해 해당 로고들에 마우스를 갖다 대었을 때, 이미지의 크기가 살짝 커지는 기능을 구현하여 시각적 효과를 주었습니다.

 

파이썬 로고 클릭 시 나타나는 팝업 이미지

해당 아이콘을 클릭했을 때, 실제로 프로젝트에서 사용한 해당 기술들의 이미지를 팝업으로 보여주어 어떻게 해당 기술을 사용하였는지 보여주도록 하였습니다.

 

이용해 보기

해당 웹은 테스트용으로 지속적으로 업데이트 중이며, 새로운 기능들이 추가될 때마다 업데이트하겠습니다.

 

티스토리 글쓰기 HTML에 해당 웹을 임베드하였습니다. 코드가 궁금하신 분들은 하단 푸터에 있는 깃허브 아이콘을 클릭하여 확인 부탁드립니다!

 

한 번씩 이용해 보시고 의견을 편하게 댓글로 남겨주세요!