Devfolio v1

* 이미지를 클릭하여 확대하실 수 있습니다.

프로젝트 소개

• 제작 인원: 2명 (개발 1명, 디자인 1명)
• 제작 기간: 2020.08 — 2020.10

본인을 알리고, 그동안 배운 기술을 실제로 활용해보기 위해 제작한 첫 포트폴리오 사이트입니다. 인트로 모션, 프로젝트 슬라이드 등 시각적 효과를 라이브러리 의존 없이 직접 구현하는 것에 집중했습니다. 사이트의 목적이 본인의 역량을 알리는 것이었기 때문에, 시각적 효과를 직접 만들어냈다는 점 자체가 핵심 포인트였습니다.

주요 구현

인트로 모션 & 슬라이드

사이트 접속 시 시각적 효과를 주는 인트로 애니메이션을 순수 JavaScript로 구현했습니다. 프로젝트 소개 페이지에서는 진행했던 프로젝트들을 슬라이드 형식으로 탐색할 수 있는 UI를 직접 제작했고, 슬라이드 전환 모션도 라이브러리 없이 CSS 트랜지션과 JavaScript 이벤트 처리로 구현했습니다.

반응형 & 크로스 브라우저

PC에서 확인할 수 있을 뿐만 아니라 다른 브라우저, 태블릿이나 모바일과 같이 여러 기기에서 동일한 화면을 볼 수 있도록 반응형으로 제작했습니다. 당시 유행하던 UI 패턴과 색상 트렌드를 참고하여 디자이너와 모든 화면을 상의하며 구성했습니다.

최소 라이브러리 지향

기본적인 이벤트 처리, 모션 효과, DOM 조작을 외부 라이브러리 없이 직접 구현하여 해당 기능의 로직과 동작 원리를 이해하는 데 초점을 두었습니다. 이 접근 방식 덕분에 이벤트 루프, 리플로우/리페인트 같은 브라우저의 내부 동작을 체감할 수 있었습니다.

배운 점

• 라이브러리 없이 인터랙션을 구현하며 DOM 이벤트, CSS 트랜지션, 타이밍 제어에 대한 기본기를 확립했습니다.
• 디자이너와 모든 화면을 상의하고 구성하며 디자인-개발 협업 프로세스를 경험했습니다.
• 반응형 웹 제작을 통해 크로스 브라우저·크로스 디바이스 대응 역량을 쌓았습니다.

지금 돌아보면

당시에는 “라이브러리 없이 직접 만든다”는 것 자체가 목표였고, 그 과정에서 브라우저 동작 원리를 체감할 수 있었습니다. 지금이라면 직접 구현과 라이브러리 활용의 트레이드오프를 더 정확히 판단할 수 있고, 유지보수성과 성능을 동시에 고려한 선택을 할 것입니다. 이때 쌓은 기본기가 이후 v2에서 GSAP을 도입할 때 “어디까지 직접 하고 어디부터 라이브러리를 쓸 것인가”를 판단하는 근거가 되었습니다.