프론트엔드 커리어를 시작하면서 처음 제작했던 인터랙티브 포트폴리오입니다.
2016년 10월, 프론트엔드 개발 분야로 본격적으로 입문하면서 제작한 인터랙티브 이력서입니다. 당시 인터랙티브 디밸로퍼로 알려진 김종민님의 포트폴리오에 영감을 받아 웹페이지 상에 인터랙션을 구현하는 것에 큰 관심을 가지게 되었습니다. 웹페이지를 직접 디자인하고, 각 페이지 및 요소에 어울리는 애니메이션을 정의해 구현했습니다.
Sketch, HTML, SASS, JQuery, Gulp
_common.sass, _home.sass, _skills.sass, _projects.sass, _contact.sass 와 같이 모듈화한 SASS 파일로 스타일을 구성하고, 작성한 SASS 파일은 태스크 러너 Gulp를 이용하여 css 파일로 변환하여, 최종 dist 파일로 추출하였습니다.
각 페이지에 대한 구현은, index.html에 페이지 전체의 레이아웃을 정의하고, 각 메뉴 클릭시, jQuery의 load 메서드를 활용하여 index.html 내 app-section 클래스 하위에 동적으로 HTML을 로드하는 식으로 구현했습니다.
원하는 인터랙션을 구현하기 위해 여러가지 레퍼런스를 찾아보고, 구현 방법을 고민하는 것 자체로 성장할 수 있었던 시간이었습니다. 홈 화면의 캐릭터가 그려지는 듯한 효과를 위해 CSS 속성인 stroke-dasharray, stroke-dashoffset를 이용했습니다. 간단한 효과였지만 사용자들에게 시각적 집중을 끌어낼 수 있었던 것 같고, 뒤이어 마우스에 반응하는 인터랙션들 역시 흥미로움을 자극하는 요소로 활용되었습니다. 작업을 통해 마이크로 인터랙션을 통해 사용자들에게 더 나은 경험을 제공하는 것에 대해 탐구하게 된 계기가 되었습니다.