[PortFolio]웹퍼블리셔의 JavaScript기반 SVG(pass)그려지는 효과 및 이메일API을 활용한 포트폴리오 제작

프로젝트를 만든 이유

(html, css, javascript) 를 기반으로 SPA( single-page application ) 동적 웹페이지인 라임올리브 홈페이지를 제작후, react를 배운후 바로 토이프로젝트 미니블로그를 기획하고 Router로 SPA 페이지메뉴 구성을 제작하였습니다.

두개의 프로젝트를 끝마친 뒤, 라임올리브 프로젝트를 제작을 하면서 폴더의 가속성과 웹접근성이 부족하다고 느껴서 이번 프로젝트는 폴더의 가속성도 높이고 웹표준성 및 웹접근성도 제대로 만들어 보자는 생각으로 저를 소개하는 포트폴리오를 제작하게 되었습니다. (사실 라임올리브를 제작하면서 디자인적인 요소도 신경 쓰고 싶어서 스크롤 애니메이션 효과를 넣어서 예쁜 홈페이지를 제작하고 싶었습니다.)

포트폴리오를 제작하면서 이 프로젝트는 제가 직접 디자인하고 싶었고 제가 피그마로 디자인을 그대로 홈페이지 구현해보고 싶었습니다.

유튜브로 공부하다가 pass를 이용한 스크롤 애니메이션 구현을 javascript로 활용하는걸 보다가 나도 한번 새롭게 포트폴리오에 적용을 해봐야겠다고 기획을 하고 실행에 옮겼습니다.

포트폴리오에는 메일을 주고 받을수 있는 기능인 contact기능도 넣고 싶어서 maill-api를 활용해서 메일 보내기 기능도 기획하게 되었습니다.

사용기술 및 소요시간

Design tools: Figma

Code editor: VScode

Language:

HTML, CSS (Bootstap, media)
Javascript (open API, IntersectionObserver, addEventListener, onscroll)

Code service: Github(Sourcetree)

Hosting: Github pages

소요시간: 총 30일 소요

폴더구조

CSS:

각 스타일시트를 style.css에 import 참고 가능, 전역 css를 사용하게 담아 놓은 폴더입니다.

Images:

SVG형식 pass와 이미지들을 담아 놓은 폴더입니다.

Js:

각 기능별로 함수를 선언하여 동작시키는 이벤트함수를 담아 놓은 폴더입니다.

구현기능

1.One path drawing 기법으로 사용하여 일러스트로 path를 직접 디자인하기

일러스트를 활용해서 직접 svg형식의 이미지를 디자인을 하였습니다.

one path drawing 기법을 사용해서 패스라인을 끊김없이 하나의 선으로 디자인을 해야만 스크롤을 내릴때 끊어지는 현상이 없이 자연스러운 효과를 낼수 있게 됩니다.

패스를 작업을 하던 도중에 일러스트에서 svg형식으로 내보낸 후, 웹페이지에서 보면 위아래가 여백이 보이는 현상이 있어서 고민을 하다가 직접 svg파일을 들어가 일러스트로 캔버스 사이즈를 줄이니깐 웹페이지에 여백이 보이는 현상을 해결 할수 있었습니다.

2.자바스크립트를 활용하여 스크롤시 패스가 그려지는 효과 구현

스크롤시 패스가 그려지는 모습

엘리먼트를 가져오고 패스 길이값을 참조해 공백과 대쉬길이를 스타일에 적용한 모습

rario값을 구하는 함수 구현후, 스크롤 발생시 각 함수와 인자가 호출하는 함수를 적용한 모습

ratio0값을 구하기 위해 window.scrolly + window.innerheight 값을 더한값과 div의 offsettop을

빼주고 div의 offsetheight 을 나눠주면 ratio을 구할수 있게 구현 합니다.

ratio1값을 구한 값도 같기 때문에 패스 총 길이와 패스공백을 구해야 ratio0시점을 알기 때문에 length- (length * ratio) 곱하고 빼주면 됩니다. 화면을 스크롤 하여 내려가면 length- (length * 0) => length- (length * 1) 이 되서 1000 - 1000이 되어 다시 ratio가 0 이되고 다 그려지는 형태가 됩니다.

패스가 화면 중간부터 나타나기 위해 innerheight값을 줄여 화면 중간에 나오도록 구현하게 되었습니다.

3.자바스크립트를 활용하여 스크롤시 페이드인(Fade-in) 되는 효과 구현

스크롤시 리스트가 페이드되는 모습

api를 활용해 비동기적으로 관찰하여 스크롤 감지하여 이벤트를 적용한 모습

비동기적 감지: 브라우저 성능에 부담을 주지 않으면서 화면에 보이는 요소의 상태를 확인합니다.
이벤트 기반 실행: 스크롤 시 교차 영역의 변화를 감지하여 콜백 함수를 실행하여 페이드 인 효과를 적용합니다. 이벤트 리스너를 사용자가 `addEventListener`함수로 직접 추가하는 개념이 아니라, `IntersectionObserver API`에 관찰 대상으로 등록된 요소들에 스크롤 이벤트가 추가 됩니다.

queryselectorAll 함수를 사용하여 .fade__wrap-Y를 갖는 모든 요소를 관찰하기 때문에 각 요소가 이벤트가 적용이 됩니다.

화면 영역에 들어올때 요소가 감지하여 target.classlist.add 를 하여 클래스를 동적으로 추가를 하게 됩니다.

들어온 요소를 불투명도0인 상태에서 불투명도1로 효과를 주게 설정을 한후, translateY를 스타일을 주어 불투명이

0일때는 높이를 주고 불투명이 1일 경우 다시 0으로 맞추어 추가로 transition을 주어서

애니메이션처럼 스무스하게올라오는 효과로 구현을 하게 되었습니다.

4.Open Email API

이메일 양식 작성후 전송되는 모습

Email API를 사용하여 이메일을 보낼수 있는 기능을 구현을 하게 되었습니다.

이메일 작성을 끝내고 send your massage 버튼을 클릭하면 잠시후 이메일이 정상적으로 발송을 하며,

form 안에 엘리먼트들인 value들이 초기화가 됩니다.

프로젝트 제작중 어려웠던점

부트스트랩을 사용을 하다가 스타일을 넣었을때 스타일 적용 안되는 현상이 발생하여 약간의 난관을 겪었었다.

부트스트랩을 알아보던중 부트스트랩은 SCSS 타입으로 스타일을 사용하는 것을 알았다.

SCSS는 사용해 본 경험이 없어서 다른 해답이 있나 알아보던중 css적용을 할때 클래스 선택자 및 전역 선택자 id선택자 마다 우선순위가 있다는 걸 처음 알게 되었다... 역시 기본이 탄탄해야 순탄한 것을 이때 깨우쳤다.

css 우선순위로 클래스를 생성하여 다중 클래스로 스타일을 적용하다가 그러면 html에 스타일 링크를 부트스트랩 cdn주소 보다 바로 아래쪽에 선언을 하면 같은 클래스를 선언하였을때 우선순위가 부트스트랩 순위보다 아래에 선언한 스타일시트

에 우선순위가 바뀌겠다가 생각이 들어서 적용을 해보니 정상적으로 하나의 클래스만 스타일을 입혀도 작동이 잘 되었다.

모바일 환경에서 스크롤시 패스가 스무스하게 내려오는 효과를 같은 함수로 적용을 해서 보니 모바일 환경에서는 pc환경에서 레이아웃을 구성할때 하나의 섹션을 div 두개를 지정하고 flex 한후, 각 div에 50%만 들어오게 구현을 하여서

모바일 환경으로 들어올때 당연히 하나의 div는 밑으로 내려왔다.

이로 인해 패스를 적용을 한건 첫번째 div이기 때문에 아무리 패스가 나와야 할 구간에도 패스가 나오지 않는 현상이

나와서 이 문제를 해결하기 위해서 고민을 많이 했었다.

생각을 해봤을때 내가 자바스크립트로 offsetheigt를 계산할때 전체 window로 계산(100%를 계산하라고 함수를 적용함...)

했기 때문에 pc환경에서는 상관이 없지만 모바일에서 당연히 offsetheight가 중간비율 계산해야 패스가 나올수 있을것

같아서 실행에 옮겨서 이와 같이,

(scrollY - element.offsetTop) / element.offsetHeight > (scrollY - element.offsetTop) / (element.offsetHeight * 0.5)

수정 하면 이제는 전체 비율 100% 아닌 50%부터 즉 중간부터 계산이 적용이 되어서 패스가 raio 0부터 시작점 에서 스크

롤시 반부터 패스가 나오는 현상에서 이제는 정상적으로 처음부터 패스가 나오게 해결을 하였다.

view 화면에서 스크롤을 내릴때 fade-in 되는 효과를 구현을 했지만 구현한 효과가 위로 올라는 fade-in효과로만

구현만 해서 그런지 디자인 적으로 아쉬워서 옆으로 들어오는 효과도 구현을 하고 싶어 함수를

보면서 이번 문제는 어렵지가 않았다.

왜냐 하면 스크롤로 path 기능을 구현을 하였을때 이미 함수로 인수를 받아서 element 인수가 변수로서는 엘리멘트

인 즉 클래스요소를 가지고 와서 target이 자동으로 그 클래스 입혀 스타일이 나오기 때문이다.

위와 같이 같은 함수를 걸어서 if문 뒤에만 classList를 추가하여 따로 설정한 스타일 효과를 불러온다.

그럼 생각한 옆으로 들어오는 효과를 구현을 할수 있게 됩니다.

프로젝트 완성후 느낀점

이번 프로젝트를 끝내고 완성된 프로젝트를 보았을때 혼자서 해결하고 마무리를 지었을때 성취감이 들었습니다.

웹페이지에 배포를 한후, 예전에 했던 프로젝트에 미흡한 부분이랑 디자인이 부족했던 성과들이

이번 프로젝트를 계기로 디자인도 많이 바뀌고 가속성도 잘 준수하고 완벽한 프로젝트를 완성해서 자신감도

많이 올라간 단계입니다.

직접 openAPI도 만져보고 하드코딩으로 작성하여 자바스크립트 지식도 많이 올라갔습니다.

비동기적으로 데이터를 받아와서 웹페이지에 동작하는 async & await 을 알고 있기 때문에 jquery에 ajax를

공부해서 환경마다 다른 라이브러리 및 프레임워크를 사용하여 필요에 따라 다양한 동작을 만들고 싶은

욕심이 생겼습니다.

[프론트엔드] 개발자 장부영