프론트엔드 취준하면서 웹 포트폴리오를 만들어볼까 싶어,
과거에 만들어 두었던 나의 개인 포트폴리오 사이트 소스를 다시 다운 받았다.
당시에 웹퍼블리셔 국비 학원에서 한달 동안 직접 포토샵이랑 일러스트로 디자인하고 UXUI 연구한다고 새벽 늦게까지 작업하다 잤던 기억이 난다.
저 당시엔 CSS가 내 마음대로 핸들링이 안되어 너무 힘들어서 새벽 2시에 울고 그랬는데 🤣
지금 생각하면 포기하지 않고 남들보다 사이트 하나 더 만들어보겠다는 나의 노력과 의지 덕분에 지금까지 올 수 있지 않았나라는 생각이 들었다.
벌써 3년이 넘은 나의 개인 웹 사이트...!
매달 1300원 가량 내면서 유지해온 이유는 그때 당시에도 퍼블리셔 - 프론트엔드 개발자로 성장하고 싶은 마음에 계속 남겨두었는데 역시 과거의 나에게 너무 칭찬하고 고맙다.
물론 2년 동안 유령 사이트라 의미없는 지출이 되긴 했지만 그래도 포기하지 않고 퍼블리셔 취업도 성공했고 지금은 프론트엔드 개발자를 위해 준비를 하고 있으니 어떻게보면 나의 히스토리와 추억이 담긴 공간이지 않을까라는 생각이 든다.
오랜만에 열어본 소스를 보니 열심히 노력한 흔적이 느껴져서 귀엽게 느껴졌다.
나름 파일 관리도 깔끔하게 잘 했구나 (물론 의미 없는 파일도 있었지만 😅)
231205
이미지 첨부하면 벨로그에서 에러가 발생해서 나중에 기회되면 다시 수정하기로 😥
🫧 HTML
HTML 소스를 보니 생각보다 시멘틱 마크업 처리도 잘했길래 오~ 하고 감탄이 나왔다 ㅋㅋㅋ
당시 선생님께서 시각장애를 가진 사람이나 시력이 좋지 않은 노약자들을 생각해서 마크업을 신경써서 해야한다고 늘 강조하셨는데 지금 생각해도 좋은 선생님께 가르침을 받아서 다행이라고 생각한다.
면접 당시에도 마크업을 굉장히 잘 했다고 칭찬을 받았던 기억이 있다.
쉽지만 절대 대충해서는 안되는 부분이라고 생각한다. 특히 프론트엔드 개발자라면 더더욱...!
🫧 CSS
CSS는 전역 공통 색상을 지정하기 위해 root를 사용했다.
이 부분은 현업에서도 칭찬을 받았던 부분인데, 웹사이트에는 주로 사용되는 색상이 정해져 있기 때문에(예를 들어 메인색, 보조색 등등...) 이런식으로 변수화 해 두면 나중에 유지보수할 때 한번에 수정할 수 있기에 굉장히 편리하다.
그리고 각 section 마다 주석을 달아서 어디 부분에 대한 소스인지 나타낸 것도 오호~했다.
하지만! 그래도 부족한 부분이 많이 보였기에 ㅎㅎ... 보는 내내 엄마 미소로 보게 되었다.
🫧 Javascript(Jquery)
마지막으로 간단한 스크립트다.
스크롤 Top 버튼에 대해 간단하게 구현 해 두었다.
이때는 Jquery를 사용해서 동적 UI를 개발했는데, 이때만해도 솔직히 소스를 잘 이해하지 못했다.
아무래도 JS 없이 바로 Jquery를 사용해서 스크립트에 대한 벽이 너무나도 높았고 힘들었다.
하지만 다시 보면 Jquery 짱짱맨 소리가 절로 나온다...
요즘은 React, Vue로 보통 개발하면서 Jquery가 많이 죽긴했지만 난 그래도 Jquery가 좋다.
특히 동적인 UI를 만드는데 Jquery만큼 직관적이고 쉬운 라이브러리는 없다고 생각한다.
아마도 퍼블리셔 경험이 있는 분들이라면 다들 공감하지 않을까...?!
별거 없지만 그래도 이렇게 다시 보니 추억이 새록새록하고 좋다.
무엇보다 내가 많이 성장했구나라는 보람이 느껴져서 약간 뭉쿨했다. (물론 넘어야할 산이 더 많지만!)
앞으로도 초심의 마음을 절대 잊지 않고 항상 낮은 자세로 배우고 가꿔나가려는 자세로
멋진 프론트엔드 개발자로 성장해야겠다. 😄
