지난 글에서는 프로젝트를 다시 시작하면서 구조를 잡은 이야기를 했습니다. 이번에는 공개 사이트 화면, 그중에서도 시간을 제일 많이 쓴 메인 스크롤 연출 이야기입니다.

페이지는 네 개

• 프로필: 소개, 경력, 스킬, 프로젝트 슬라이더, 최근 글
• 포트폴리오: 고정 프로젝트와 나머지 프로젝트 목록, 상세
• 블로그: 태그 필터와 검색이 있는 목록, 목차가 있는 상세
• 방명록: 한마디 남기기와 답글

원형으로 닫히는 메인 화면

메인 첫 화면은 스크롤을 내리면 원 모양으로 닫히면서 다음 섹션이 드러나게 만들었습니다. 스크롤 위치에 맞춰 애니메이션이 움직여야 해서 GSAP의 ScrollTrigger를 썼고(scrub: true), 스크롤 자체는 Lenis로 부드럽게 만들었습니다.

원의 크기를 width로 바꾸면 스크롤할 때마다 레이아웃을 다시 계산해서 끊겨 보입니다. 그래서 크기 변화는 transform: scale로 처리했습니다.

다 열린 뒤에도 고정 레이어가 남아 있으면 아래 섹션이 클릭되지 않습니다. 그래서 끝까지 열리면 그 레이어를 숨기게 했습니다.

인트로 애니메이션은 처음 들어왔을 때 한 번만 보여주고, 다른 페이지에 갔다가 돌아오면 바로 완료된 화면이 보이게 했습니다. 이 상태는 zustand 스토어에 저장해 둡니다.

배경은 WebGL

페이지 배경에는 WebGL로 그린 안개가 계속 움직입니다. 계속 그리는 배경이라 신경 쓸 게 좀 있었습니다.

• 탭이 숨겨지면 그리기를 멈춥니다.
• 사용자가 움직임 줄이기(prefers-reduced-motion)를 켜두었으면 움직임을 줄입니다.
• WebGL 컨텍스트가 끊기는 경우도 처리합니다.
• 컴포넌트가 사라질 때 리스너랑 루프를 다 정리합니다.

프로젝트 슬라이더

프로필의 프로젝트 영역은 Swiper로 만들었습니다. 이전·다음 버튼을 클래스 이름으로 연결하면 같은 페이지에 다른 Swiper가 있을 때 버튼이 엉뚱한 슬라이더를 움직일 수 있어서, ref로 연결했습니다. 현재 위치는 01 / 06 같은 숫자와 진행 막대로 보여줍니다.

댓글 컴포넌트는 하나로

블로그 댓글이랑 방명록은 거의 같은 모양이라 컴포넌트를 하나로 만들고, 다른 부분만 옵션으로 뺐습니다.

• 헤더 위치: 블로그는 폼 위, 방명록은 폼 아래
• 라벨: 방명록만 닉네임, 비밀번호, 메세지 라벨을 보여줌
• 최소 글자 수, 안내 문구

이렇게 해둔 덕분에 나중에 API를 붙일 때 한 군데만 고치면 블로그와 방명록에 같이 적용됐습니다.

반응형

1024px, 768px, 500px 기준으로 전체 페이지를 반응형으로 맞췄습니다. 포트폴리오 고정 카드는 태블릿부터 이미지가 위, 정보가 아래로 바뀌고, 블로그 카드는 768px 이하에서 한 줄에 하나씩 나옵니다.

다음 글은 이 화면에 데이터를 내려줄 백엔드 이야기입니다.