👩‍💻 나의 포트폴리오 프로젝트

🔍 Project Overview

✨ 아래 링크에서 프로젝트 데모 확인이 가능합니다.
minzy.studio

awwwards 사이트를 보다보면, 인터랙티브하고 창의적인 웹 디자인들이 많다. 혹시 awwwards라는 사이트를 모른다면, 한번 참고해 보길 바란다!
awwwards

아래는 시간이 난다면 한번 참고해볼만한 2021 웹 디자인 트렌드
2021 웹디자인 트렌드

포트폴리오 레이아웃을 구상하면서 남들이 다하는 페이지는 만들고 싶지 않았고,

awwwards 같은 곳에서 등장하는 인터랙티브한 웹 구현도 공부할겸 스크롤 애니메이션들이 들어간 비슷한 느낌은 사이트들을 찾아 레퍼런스로 클론해보기로 결심했다!
디자인레퍼런스1
디자인레퍼런스2

가능한 한 눈에 들어오는 single 페이지로 구성하려고 했고, navbar를 클릭하면 해당 섹션으로 갈 수 있도록 구현하고

정적 페이지 생성을 위해 개츠비를 선택하였고, styling은 styled-components를 적용, 배포는 정적 웹사이트를 배포하는 용도의 heroku보다 빠르다고 느꼈던 netlify를 이용하였다.
heroku와 netlify 모두 AWS 처럼 한국에 서버가 없기 때문인건지 느린 부분이 있어서 다음 프로젝트는 꼭 AWS로 배포해볼 예정이다.

사용기술

• HTML5 / CSS3
• JavaScript(ES6+)
• Gatsby, React
• GSAP
• Styled-components

구현사항

• 클릭으로 자동 scroll이 가능한 navbar
• GSAP의 scrollTrigger을 이용한 애니메이션
• parallax, skew 애니메이션
• mobile first 반응형 웹

---

✨ Navbar 섹션이동 자동 스크롤

scrollIntoView를 이용하여 클릭하면 해당 섹션으로 이동 가능합니다.

✨ Gsap을 이용한 scrollTrigger 텍스트 애니메이션

✨ scrollTrigger skew, parallax 이미지 애니메이션

✨ About section 언어 스위치

✨ 반응형 웹

데스크탑, 아이패드, 모바일 순으로 반응형 웹을 구현하였습니다.

---

🌿 후기

🐝 페이지 첫 로딩 스피드 성능 향상, 성능 최적화

리팩토링 과정에서 코드를 분리하고 미디어 파일을 압축하여 빨간색 경고 표시가 떴던 40점 대의 페이지를 초록색 안정권에 들 수 있는 97점으로 향상 시켰다!!!
(빨간색으로 경고를 보여주던 40점대의 스크린샷은 찾아봤는데 없다..충격 받아서 안 찍었나..?🥺 아래는 97점으로 향상된 PageSpeed Insights 캡쳐화면이다.)
페이지 성능 체크 링크

리팩토링을 하면서 독일 기업의 실무에 일하는 친구에게 완성된 포트폴리오 컨펌을 받기 위해 독일 시간에 맞춰 새벽까지 깨있고 리팩토링이 절대적으로 필요해서 엄청 물어보고.. 진짜 울면서 리팩토링했다..하..😭

사실 포트폴리오를 내야 할 곳이 있어서 굉장히 빠른 시간내(3-4일 내)로 모든 결과물을 만들어내야 했기도 했고, 정적인 웹사이트니까 금방 만들겠지~!라고 생각한 나의 오만에 뼈저리게 후회했다..

내가 처음 생각없이 시간에 쫓겨 만든 코드들은 구현은 되었지만, 스파게티 처럼 꼬여🍝 첫 랜딩도 느리고 컴포넌트 분리가 되지 않아 다 뜯어 고쳐야하는..

이정도로 시간에 쫓기면서 코딩을 해본 적은 처음이라 아무 생각도 안하고 코드를 짰더니 오히려 리팩토링 할 때 너무 힘들었기에 좋은 교훈을 얻을 수 있었다..생각하고 만들기..🧠

예쁘고 멋진 결과물을 구현하는 것도 중요하다고 볼 수 있지만,
이런 작은 프로젝트에서도 결과적으로는 컴퓨터적인 사고, 효율적인 코드를 짜는 것이 중요하다는 점을 느꼈다.
많이 배우고 익숙해져서 처음 부터 잘 짤 수있는 튼튼한 프론트엔드 개발자가 되고싶다..

디자이너가 아무리 어려운 디자인을 요구하더라도 꼭 재사용 가능하고 유지보수가 쉬운 코드로 구현해내는 프론트엔드 개발자가 되고싶습니다!🥺