2023 첫 포트폴리오를 만들고...

지난 3주 동안 포트폴리오 사이트를 만들어 보았다.

빠른 시일 내에 만들려고 하다 보니, 레이아웃, 색, 이미지소스, css, js 등을 계획적으로 구성하지 않고 만들게 되었다. 

포트폴리오가 완성되었을 즈음 반성을 많이 하게 되었다.

포트폴리오를 소개하는 글을 작성하면서 포트폴리오를 설명해 보겠다...🥹

 

목차

1. 사용된 기술

2. 레이아웃 구조 & 애니메이션 효과

3. 포트폴리오를 만들고 나서 느낀 

 

1. 사용된 기술(라이브러리)  소개

• GSAP(GreenSockAnimationPlatform)

- GSAP는 웹에서 다양한 동적 애니메이션을 표현할 수 있게 도와주는 라이브러리입니다.

• Lenis 

- 레니스 라이브러리는 빠른 스크롤을 지원하는 오픈 소스이고, 구현하는 웹 페이지 전체에 스므스 효과를 구현합니다.

• jQuery

 

2. 레이아웃 구조

전체적인 구조는 우선, 사이트에 대한 정보를 제공하기 위해 meta정보를 설정하고

main태그 안에 수직 구조 레이아웃, 수평 구조 레이아웃 다시 수직 구조 레이아웃으로 크게 3단계로

나뉩니다. 이를 통해 가로 / 세로 화면을 구현하려고 했습니다. 

 

[section1]

비디오 컨테이너 + 비디오 화면을 덮는 img 컨테이너 + text 컨테이너 2개로 구성되어 있습니다.

컨테이너마다 z-index 값과 포지션 값을 다르게 주어 비디오 화면을 덮는 구성을 만들었고,

이후 GSAP의 ScrollTrigger플러그인을 가져와 GSAP에 등록 후 ScrollTrigger 애니메이션의 기본 동작을

play와 reverse로 설정하였습니다. 

그다음에 각각의 애니메이션을 관리하기 위한 Timeline을 생성하여 여러 애니메이션을 시간에 따라

순차적으로 관리하고 제어하였습니다.

 

조금 더 자세하게 설명하면 비디오를 덮고 있는 컨테이너를 트리거시점으로 잡고, scrub과 pin을 설정하여

스크럽 되는 동안 화면이 고정되어 보이도록 했습니다.

그 후 이미지 컨테이너 요소의 크기를 확대하고 이징 효과를 주어 마치 창문 안으로 들어가는 효과를 주었습니다.

 

[horizontal layout]

우선 가로로 작업하기 위해 레이아웃부터 가로로 세팅되어야 합니다. 해당 레이아웃 안에는 섹션이 총 12개로

이므로 width를 1200%로 설정했습니다. 높이는 100vh, display:flex를 이용하여 가로로 정렬하였습니다.

그 후 to() 메서드를 사용하여 선택한 요소들의 가로축으로 이동시키는 xPercent를 설정하였고, 마지막 요소를 

제외한 모든 요소들을 왼쪽으로 100%만큼 이동시킵니다. 

이렇게 하면 요소들이 수평으로 배치된 것처럼 보이는 효과를 얻을 수 있습니다.

 

한 가지 중요한 설정이 필요한데, 끝나는 시점을 horizontal.offsetWidth - innerWidth로 설정해야 합니다.

좀 더 쉽게 설명하자면, 길을 따라 걸어가고 있는데 그 길의 끝이 어딘가에 있습니다. 

그리고 지금 보고 있는 것은 눈앞에 보이는 경치와 도로의 폭이 있다고 가정해 보겠습니다.

이때 offsetWidth는 그 길의 전체 너비를 의미하고, innerWidth는 지금 보고 있는 화면의 너비를 뜻합니다.

offsetWidth - innerWidth는 남은 길의 길이를 나타냅니다.

이렇게 설정하면 애니메이션의 길이가 남은 만큼 계속해서 움직이다가, 남은 길의 길이만큼 움직인 후 끝나게 됩니다.

 

그 후 horizontal 레이아웃이 끝나고 다시 수직 레이아웃 형태로 바뀌는 것처럼 보이게 됩니다.

 

[section5]

sectio5의 부분은 해당 섹션의 만나면 트리거 되어 y축으로 scrub 되도록 설정하여 표현했습니다.

여기에 '나타나는(reveal)' 효과를 줄려고 했지만 시각적으로 불편함을 주게 될까봐 수평 구조에는 애니메이션을

더 주지는 않았습니다.

 

[section17]

수평 구조가 끝난 후 section17에서는 텍스트가 제자리에서 움직이도록 표현하여 작업했습니다.

타임라인을 생성하고, 각 텍스트 요소에 autoAlpha값과 duration 그리고 y축 값을 각각 설정하여 1초씩 지연

되어 보여지도록 하였습니다.

 

[section18]

section18의 경우에도 앞서 설명한 것처럼 타임라인을 설정하여 나타나고 사라지게 만들었으며, 세 번째

텍스트 같은 경우 두 번째 타임라인을 설정하여 첫 번째 타임 라인이 실행되고 그다음에 실행되게 하였습니다.

 

3. 회고

 

최근 3주 동안 취업을 위해 포트폴리오를 제작하면서 다양한 경험과 깨달음을 얻었습니다.

이 과정에서 발생한 문제점과 그것으로부터 얻은 교훈들에 대해 솔직하게 나누고자 합니다.

 

처음에는 포트폴리오 제작을 시작하면서 문서화에 대한 중요성을 간과했습니다.

각 단계와 작업 내용을 문서화하지 않으면 나중에 작업 내용을 잊어버리거나 혼동할 수 있음을 깨달았습니다.

이로 인해 작업의 효율성이 떨어지고 결과물의 품질에도 영향을 받았습니다.

다음번에는 작업 과정을 체계적으로 문서화하여 효율적인 작업을 진행하고자 합니다.

또한 포트폴리오의 각 페이지와 레이아웃에 통일성이 부족한 문제가 있었습니다.

이로 인해 제작과정이 혼란스러웠고, 전체적인 느낌이 일관되지 않았습니다.

디자인과 레이아웃에 더 신경써서 일관성 있는 UI/UX를 제공하도록 노력하겠습니다.

가장 중요한 깨달음은 여러 작은 사이트보다 완성도 있는 하나의 사이트를 제작하는 것이 더 의미 있는 일임을 깨달았습니다.

많은 것을 담으려 하다보니 작은 사이트 여러 개를 만들게 되었는데 이러한 여러 개의 작은 사이트가 아니라 하나의 사이트에서 저의 능력과 아이디어를 더 효과적으로 표현할 수 있도록 하겠습니다. 

요약

1. 문서화

-  유지보수, 코드 이해도 향상, 유지보수 간편화, 학습 리소스 등 이점을 가진다.

2. 디자인 툴을 이용한 레이아웃 제작 및 변수 설정 등 계획 작성 후  개발 

- 명확한 방향을 설정하고 이후 프로그래밍을 시작한다면 좀 더 체계적인 프로그래밍이 가능해진다.

3. 모듈화 및 번들링 작업

- 모듈화와 번들링 통한 개발은 코드의 가독성, 재사용성, 의존성 관리, 디버깅 등 여러 가지 측면에서 유용하다.

4. 하나의 완성도 높은 웹사이트 제작

 

이러한 회고를 통해 제 포트폴리오 제작 과정에서 겪은 문제점과 교훈들을 나누었습니다.

앞으로는 이를 기반으로 더 나은 작업과 개선된 포트폴리오를 만들어나가려 합니다.

각 경험은 더 나은 발전을 위한 첫걸음이며, 지속적인 성장을 위한 계기로 삼을 것입니다.

감사합니다.

 

4. 개선

현재 vite.js를 이용하여 포트폴리오ver.02를 만들어 보고 있습니다.

ver01을 만들면서 반성했던 점과 수정이 필요한 부분을 모두 담아 좀 더 나은 웹 사이트를 제작 중입니다.