[Side Project] 프론트엔드 포트폴리오 사이트 리팩토링

 

프로젝트 URL

 

깃허브 페이지 URL

https://baikseungjeon.github.io/project-portfolio/

백승전 포트폴리오

 

프로젝트 개요

 

2021.09.13 - [Project/Portfolio] - [Portfolio] 프론트엔드 포트폴리오 웹 사이트 개발

[Portfolio] 프론트엔드 포트폴리오 웹 사이트 개발

 

이것은 과거 제가 취업 준비를 하며 만든 프론트엔드 포트폴리오를 다 만들고 회고록 겸 포스팅 한 글입니다. 지금도 많이 미숙한 실력이지만, 저 시절에도 굉장히 부족한 부분이 많았고, 서류에서 탈락한 이유도 그런 부분에서 오는 부족한 포트폴리오 때문일 겁니다. 실제로 면접에서도 직접 포트폴리오의 부족한 부분을 지적 받기도 했었으니까요.

 

그래서 취업 후에 조금씩 시간을 내며 과거 저에게 배우기 위해 코드 리팩토링을 하고 있었는데, 포트폴리오 사이트는 부족한 부분이 많이 보여 몇 군데를 조금 보완했습니다.

 

scroll-snap 삭제

 

scroll-snap 삭제

우선 scroll-snap을 삭제했습니다. 어쩌면 제 포트폴리오가 다른 분들의 포트폴리오보다 경쟁력이 있었던 건, 앱이나 PPT 느낌을 연출해준 scroll-snap 기능이라고 생각했는데요. 하지만 면접관 분들이나 면접에 참관하는 개발자 분들이 꼭 제 포트폴리오를 PC에서만 보는 것이 아닌, 태블릿으로도 많이 보시는 것을 확인할 수 있었습니다.

 

따라서 화면 전체로 조작하는 태블릿의 특성 상 오히려 마이너스 요소라고 생각되어 기능을 삭제하였습니다. 그렇기 때문에 그 전에는 한 section 당 한 페이지 전체를 차지해야 하기 때문에 height : 100vh를 줬지만,

 

height : 100vh

 

현재는 위 아래 px 단위로 일정하게 margin과 padding을 지정하여 section을 구분해 줬습니다.

 

margin, padding : 50px 0

 

inner 태그 추가

 

inner 태그 추가

 

두 번째는 inner 태그를 추가했습니다. max-width를 지정함으로써 안에 요소들을 전부 중앙으로 배치하기 위함입니다.

 

swiper 플러그인 추가

 

swiper 플러그인

 

저는 포트폴리오에서 프로젝트를 세로로 블록 쌓아 보여드린 게 아닌 가로 슬라이드로 보여드렸는데요. swiper 플러그인의 존재를 알았음에도 하드코딩으로 진행하였습니다. 플러그인을 사용하는 것보다 직접 코딩하는 것이 당연히 취업에 있어 플러스 요소라고 생각했기 때문인데요.

 

하지만 이것이 모바일이나 태블릿에선 제 의도대로 출력이 안 되어 서류에서 탈락하거나 면접에서 지적을 받는 가장 큰 요소가 되었습니다. 엎친 데 덮친 격으로 앞서 말씀 드린 것처럼, scroll-snap도 멋대로 적용되어 은근 도전이 실패에 가까웠던 것 같습니다.(이또한 배웠기 때문에 결론적으로 성공이지만요 ㅎ) 아무튼 지나간 프로젝트라고 방치해두기 싫어서 swiper 플러그인을 사용하여 보완을 했습니다. 확실히 제가 직접 코딩한 것보다 훨씬 깔끔하네요.

 

제가 swiper 플러그인을 사용한 이유는 다음과 같은데요. 첫 번째로 정말 제가 코딩한 것보다 더 나은 퀄리티로 개발이 가능해서입니다.

그리고 두 번째로 현업에서도 데이터테이블 등 다양한 플러그인을 사용한다는 점 때문입니다.

 

물론 제 실력 부진으로 개발 완성도를 높이지 못한 것이니 코딩으로 보완을 해야 하는 게 맞겠지만, 이미 취업을 한 상황에서의 전, 앞으로 경력자로서 더 퀄리티 높은 프로젝트와 운영 가능한 서비스로 승부를 볼 것이기 때문에, 제가 여전히 신입으로서 평가를 받았다면 플러그인을 사용하면 안 됐겠지만, 전 그게 아니니 편리함을 채택했습니다.

 

결론

 

과거 제가 했던 프로젝트들을 보며 리팩토링의 필요성을 느끼거나 보완의 필요성을 느낀다는 건 참 감사한 일 같습니다. 그만큼 제가 발전을 했다는 것일 테니까요. 과거에 저한테 감탄한다면 그건 퇴보하는 거겠죠. 그래서 참 '새로운 프로젝트를 만들 시간에 예전에 했던 프로젝트를 다시 개발하는 게 시간낭비' 같으면서도 한편으로는 감사한 마음으로 임하고 있습니다.

 

이제는 학사 취득 + 회사 업무 + 리액트 강의 수강 + 리액트 프로젝트(백엔드 개발자와 현업)으로 얼른 레벨 업을 해서 1년 차가 될 때 더 큰 물에 가서 놀고 싶은 바람입니다.