✍️ 이프 홈페이지 개편 프로젝트 회고록
이번에 새해를 맞이하여 새로운 디자인과 함께 사내 홈페이지를 재구축하는 프로젝트를 진행하였는데요,
작업자의 입장으로써 내용 설명보다는 기술적인 부분들을 공유하면서,
어떤식으로 작업을 하였는지 하나씩 설명 드리도록 하겠습니다.
그럼 본론 시작하겠습니다.
0. 개발 환경
우선, 기존 개발환경부터 살펴보겠습니다.
저희 기존 홈페이지에 들어가서 개발자 도구를 키고,
Source 탭을 보면 WordPress 폴더를 볼 수 있듯이 기존에는 전문지식이 크게 없어도 블로그를 쉽게 구축할 수 있는 도구인 WordPress 로 구축이 되었었는데요.
제가 WordPress 사용 경험이 있는건 아니지만 관련해서 찾아보니 블로그를 쉽게 구축할 수 있고,
일반적인 소개 사이트까지도 쉽게 구축할 수 있다는 장점이 있지만 단점이 더 많았어요.
“WordPress”도 도구로 분류되기 때문에, 사용하려면 따로 사용법을 익혀야하고,
PHP 기반으로 현대적인 개발방식과는 거리가 멀어 유지보수가 힘드며,
버전 업데이트를 하지 않을경우, 브루트포스 (무차별 대입 공격) 에 노출되기 쉽다는 점들이 있었습니다.
그래서 이를 갈아엎고 대표적인 웹 개발 언어 (HTML + CSS + JS) 로 작업하여
웹 개발자라면 누구나 코드를 읽고 유지보수할 수 있는 형태로 작업하였고, 애니메이션을 통해 사용자에게 동적인 UX를 제공할 수 있도록 노력하였습니다.
백엔드의 경우는 JAVA 기반의 전자정부표준프레임워크 (egovframework) 로 구성되어있어 공공 SI 개발자라면 유지보수가 가능하며, 보안도 크게 걱정할 필요가 없도록 작업되었습니다.
개발 환경 설명은 여기까지하고, 다음 레퍼런스 활용에 대해 알아보겠습니다.
1. 레퍼런스 활용
먼저, 레퍼런스 활용입니다.
프로젝트 초기때는 사실 작업할게 크게 없습니다.
굳이 있다면 환경세팅정도? 이지만 환경세팅 템플릿은 이미 있었기에, 참고할만한 자료들을 이것저것 찾아봤습니다.
지디웹
지디웹은 카테고리별로 다양한 스타일로 제작된 홈페이지들을 살펴볼 수 있는데요,
저는 그중에, “디자인” 카테고리를 선택하여 디자인 위주의 홈페이지들을 찾아봤습니다. 처음보면 어지러울 정도의 동적인 애니메이션들이 들어가있는건 디자인 카테고리에 많더라구요. 그래서 선택했습니다.
참고하면서 “이건 구현할만하겠다” 고 생각이 드는 것들을 골라서 개인 Notion에 정리도 하였고, 따로 모아놓은 사이트를 만들어서 배포하였습니다.
https://next-ifcommunity-ver2.netlify.app/html/ref
본격 작업 전에 구현할 인터렉티브 컴포넌트를 미리 구현하여 직접보면서 얘기하고, 피드백 받을 수 있도록 했습니다.
이걸 만들 당시에는 퇴근 후 집와서도 작업하고, 주말에도 틈틈히 작업할 만큼의 쉬운 작업은 아니였는데요.
그래도 회의 때 직접 결과물을 보면서 얘기하니까 클라이언트가 어떤 느낌의 애니메이션을 원하고 있고, 이러한 부분은 빼거나 추가했으면 좋겠다라는 피드백들도 들으면서 어떤 애니메이션이 들어가면 좋을지 결정하는데에 큰 도움이 됐었던 것 같습니다.
2. 애니메이션 구현
다음으로, 애니메이션 구현입니다.
위 말이음 페이지처럼, 단순히 사용자가 들어왔을 때 애니메이션이 나타나게 하는 1회성 애니메이션 들은
css transition 이나 css keyframes 로도 충분히 구현 가능한데요.
하지만, 제가 원했던 건 위처럼 스크롤 위치에 따라 애니메이션이 발동되는 스크롤 기반 애니메이션 이 필요했습니다.
여기서 말하는 스크롤 기반 애니메이션은 다음과 같습니다.
- 스크롤을 내리면 텍스트가 Fade in / Scale Up
- 특정 Section에 진입하면 스크롤을 내려도 Section이 고정 됨.
- 스크롤 양에 따라 특정 요소가 점점 커진다거나, 다른 요소로 전환됨.
그래서 저는 비교적 쉽게 애니메이션을 구현할 수 있는 GSAP을 선택했어요.
GSAP을 이용한 애니메이션 데모 몇 가지를 살펴보면, 슬라이더나 여러 효과들을 다채롭게 구현할 수 있는 것 같습니다. 특히, 저는 마지막 데모가 가장 마음에 드는데요.
이걸 사실 시연 스크립트 준비하다가 뒤늦게 찾아버려서 저런 부분들은 추후에 고도화할 때, 추가하면 더 좋을 것 같다는 생각이 듭니다!
아무튼 그래서, GSAP은 jQuery와 같은 포지션이라고 생각하면 쉬울 것 같아요. jQuery도 그냥 쓴다기 보단, 자바스크립트를 쉽고 짧은 문법으로 쓰기 위해 나온 라이브러리니까요.
3. 인터렉티브 컴포넌트
다음은, 이 프로젝트에 사용 된 인터렉티브 컴포넌트들을 소개하면서, 구현은 어떻게 했는지 간략하게나마 설명 드리도록 하겠습니다.
첫번째로, 3D Cube juggling 입니다.
3D Cube juggling (CSS, JS)
이름은 그냥 큐브들의 위치가 마치 저글링 하는 형태를 띄는거 같아서 임의로 지은 이름입니다 😂😂
구현은 심플하게 CSS + JS만으로 하였으며, 생각보다 쉬웠습니다.
먼저, 계속 돌아가는 3D CUBE를 만들어야 합니다.
CSS/JS 만으로 돌아가는 3D CUBE 만들기
- front (앞면)
- back (뒷면)
- left (왼쪽면)
- right (오른쪽면)
- top (윗면)
- bottom (밑면)
- 총 6개 면을 담당하는 div를 만들고
absolute로 각div를 겹치게 합니다.- 각 6개 면에 적당한 그라데이션 색상을 주고,
- 3d 효과를 부여하는 CSS 속성인
perspective와transform-style: preserve-3d를 적용 한 다음 - 회전을 계속 시키기위해 자바스크립트로
transform: rotateX, rotateY, rotateZ를 반복시켜 적용하였습니다.
js안쓰고 CSS keyframes 만으로도 가능할거 같은데, 이부분은 작업자 스타일이나 요구사항에 따라 좀 다를 수 있을 것 같아요.
3D CUBE가 완성 되었다면, 처음에 큐브가 한 곳에 모였다가 확 퍼지는 애니메이션을 만듭니다.
한 곳에 모였다가 퍼지는 애니메이션 만들기
- 큐브가 있을 위치와 마지막 큐브가 있을 위치 값을 미리 잡아둡니다.
- 자바스크립트 settimeout으로 몇초 뒤에
active클래스를 추가해줘라고 코드를 작성 합니다. active클래스가 추가되면 큐브는 마지막 위치로 이동하게 CSS를 작성합니다.
이렇게 구성하면, 처음에 큐브가 한 곳에 모여있다가 확 퍼지는 애니메이션을 만들 수 있습니다.
느린 화면으로 보면 위와 같습니다.
그 다음은, 2번째 섹션에 있던 배경 부분입니다.
Billboard points (three.js)
해당 부분은 jpg 나 png로는 표현할 수 없는 부드럽고 정교한 애니메이션을 구현하기 위해 3D를 쉽게 개발해주는 three.js 라이브러리를 사용하였습니다.
three.js 자체가 진입장벽이 좀 높은 편이긴한데, 그래도 예제가 많이 있어서 있는 예제에 조금 디벨롭하여 써도 된다는게 장점입니다.
https://threejs.org/examples/?q=points%20billboards#webgl_points_billboards
예제 중에 저는 points billboards 를 사용했는데요,
해당 라이브러리를 심도있게 다뤄본적은 없어서 ai한테 디자인된 이미지를 첨부하고 three.js 형태로 만들어달라고 했습니다.
나온 결과물에서 부자연스럽거나 추가됬으면 하는 부분들만 조금 추가한 정도라,
AI를 도구로 삼아 썼을 때, 저정도의 결과물까지 나올 수 있구나라고 생각해주시면 될 것 같아요.
다음은, 3번째 섹션이 들어가 있었던 구 (원형) 입니다.
Sphere (three js)
이 부분 역시, three js의 예제를 가져와서 우리가 원하는 형태가 될 수 있게 약간의 수정만 거쳤습니다.
기존 예제를 기준으로 원이 울렁거리는 애니메이션, 원 안에 들어간 큐브 삭제, 원 크기 및 색감 정도만 조정하였습니다.
그리고, 코딩리스트에서 위와 같이 세부 옵션들을 조정할 수 있는 인터페이스를 제공하여 원하는 느낌을 바로바로 볼 수 있도록 구현했습니다.
Planet (three.js)
이 프로젝트에 사용되지는 않았지만, 쓰일지도 몰라서 우주 행성같은 느낌도 구현해보았는데요,
행성 같은걸 three js 로 직접 그리기도 가능하지만, 크기나 질감, 조명같은 효과들을 넣을 수록 그만큼 코드도 길어져서 관리가 힘들더라구요.
그래서 sketch fab나 poly pizza같은 사이트를 들어가보면 3D 게임에 사용되는 모델들을 glb 파일 형태로 다운로드 받아서 사용할 수가 있는데, 여기서 모델을 .glb 파일로 다운로드 받은 다음에, three.js 로 브라우저에 렌더링 시키는게 제일 간단한 것 같습니다.
단점은, 고퀄리티의 모델이면 돈주고 사야한다는게 단점이 될 것 같습니다.
마지막으로, 3번째 섹션에서 슬라이드 넘길 때마다 움직이는 이미지입니다.
Inline SVG
위 영상처럼, 3번째 섹션에서 각 슬라이드를 넘길 때마다 우측 상단에 이미지 애니메이션이 진행되는데요.
이미지를 좀 더 동적으로 보여주면 어떨까 싶어서, SVG 코드를 직접 HTML안에 넣어서 쓰는 인라인 SVG 방식을 선택했습니다.
SVG란 무엇인가?
구현 설명 이전에 우선 SVG는 무엇인가에 대해 간략하게 짚고 넘어가겠습니다.
SVG 는 픽셀 (px) 이 아닌 수학적 계산인 즉, 점과점으로 이미지를 그리기 때문에 아래와 같은 장점들이 있습니다.
- 크기 조절에 제한이 없음
- 벡터 기반이기 때문에 확대해도 이미지가 깨지지 않음
- SVG는 코드로 이루어져 있기 때문에 CSS, JS를 통한 애니메이션 효과 부여 가능
- 다양한 화면 크기에서도 선명하게 표시 되며, 비율대로 크기가 줄어드는 반응형 이미지도 쉽게 가능
그에 반해, 단점도 물론 존재하는데요.
과도하게 많은 색상이나 그라데이션같이 복잡한 그래픽이 들어가면 오히려 용량이 커지게 되며,
렌더링 성능을 저하시킬 수 있기 때문에 .jpg , .png , .svg 는 각 장단점이 있기에 용도에 맞게 사용하는게 중요합니다.
svg 설명은 여기까지 하고, 구현 설명으로 다시 돌아가보겠습니다.
svg는 이런식으로 코드 형태로 제공되어 굳이 .svg 파일을 가지고 있지 않아도, 저 코드만 가지고 있다면
이미지가 정상적으로 표시되게 됩니다.
<path> 태그는 이미지를 그리기 위한 점과 선을 나타내는 것이며,
<g> 태그는 <path> 태그를 묶기 위한 그룹 역할을 하는 것이라고 생각하면 되는데요.
위 이미지에서 저는 빨간박스 친 바깥쪽 태그랑, 가운데 로고만 애니메이션이 동작하면 되기 때문에,
내가 사용할 <path> 만 <g> 태그로 그룹화하여 그룹화한 태그에 클래스를 각각 다르게 부여하여
CSS keyframes 를 통해 원하는 타이밍에 특정 요소가 애니메이션이 동작하도록 구현하였습니다.
4. 결론 (마무리)
이전부터 정적인 사이트말고, 여러 애니메이션이 들어가있는 사이트를 언젠간은 작업해봐야겠다 계속 말만 하고 시간이 없단 핑계로 계속 미루고 있었는데요.
이번 기회를 통해 여러 애니메이션이 들어간 화면을 작업해보면서, 시행착오는 당연하게도 많았지만 완성된 결과물을 보며 뿌듯하기도 하고, 내가 이정도 역량까지 낼 수 있는 사람이구나라는 것을 깨닫게 되는 순간이였던 것 같습니다.
애니메이션 구현해달라고 요구를 받으면 사실 어떻게 구현해야하나 하는 막막함에 겁부터 났었는데,
이번 프로젝트를 통해 이것저것 경험해보니 전보단 그래도 어느정도 “구현” 에 대한 갈피가 잡힌 것 같아가지고 저한텐 되게 의미있는 프로젝트가 되었던 것 같아요.
마지막으로, 이렇게 중요한 프로젝트에 참여 할 기회를 주신 대표님께 감사의 말씀을 드립니다.
감사합니다.
