목록보다 장면에 가깝게
처음에는 프로젝트 카드들을 나열하는 방식도 충분하다고 생각했습니다. 하지만 포트폴리오 안에서 프로젝트는 가장 오래 머무는 페이지이기 때문에, 사용자가 스크롤할 때마다 하나의 프로젝트에 집중하게 만들고 싶었습니다.
그래서 프리뷰 이미지는 화면의 큰 면적을 차지하고, 설명 영역은 오른쪽에서 조용히 따라오게 구성했습니다. 정보는 적지 않지만 한 번에 하나씩 보이게 만드는 것이 핵심이었습니다.
이 작업을 하면서 가장 먼저 느낀 것은 '페이지가 예쁘다'와 '페이지가 기억에 남는다'는 말이 다르다는 점이었습니다. 예쁜 카드는 금방 만들 수 있지만, 사용자가 프로젝트 하나를 보고 다음 프로젝트로 넘어가는 순간까지 자연스럽게 설계하는 일은 훨씬 더 많은 결정을 요구했습니다.
특히 프로젝트 이미지를 크게 쓰기로 결정한 뒤에는 설명 영역의 비율이 계속 문제였습니다. 이미지가 너무 크면 텍스트가 부속처럼 보였고, 텍스트가 너무 강하면 프로젝트의 첫인상이 약해졌습니다. 결국 왼쪽은 전시 화면처럼, 오른쪽은 설명서처럼 서로 다른 역할을 갖게 두는 쪽이 가장 안정적이었습니다.
처음 만든 버전은 장식이 꽤 많았습니다. 배경에 그림자처럼 들어간 텍스트, 강조선을 닮은 그라데이션, 오른쪽 원형 라인 같은 것들이 있었는데 막상 화면에 올려보니 프로젝트 자체보다 장식이 먼저 보였습니다. 포트폴리오에서는 내가 만든 결과물이 주인공이어야 해서, 장식은 계속 덜어내는 방향으로 갔습니다.
애니메이션은 기다림이 되면 안 된다
GSAP 전환을 넣으면서 가장 많이 조정한 부분은 속도였습니다. 애니메이션이 예뻐도 다음 콘텐츠가 늦게 바뀌면 사용자는 기다린다고 느끼기 때문입니다.
결국 제목의 작은 움직임, 이미지 크로스페이드, 설명 텍스트 전환이 동시에 시작되도록 타임라인을 정리했습니다. 장식보다 반응성이 먼저였습니다.
처음에는 제목이 먼저 움직이고, 그다음 이미지가 바뀌고, 마지막에 설명이 따라오는 식으로 타임라인을 만들었습니다. 머릿속에서는 영화 같은 연출이었지만 실제로 스크롤하면서 보면 한 박자씩 늦었습니다. 특히 오른쪽 설명이 조금 늦게 바뀌는 순간, 화면이 내 입력을 바로 받아들이지 않는 것처럼 느껴졌습니다.
그래서 전환을 순차 실행이 아니라 같은 시점에 겹쳐 실행하도록 바꿨습니다. 이미지가 사라지는 동안 다음 이미지가 들어오고, 텍스트도 거의 동시에 교체되게 했습니다. 사용자는 여러 애니메이션을 따로 보는 것이 아니라 하나의 상태 변화로 받아들이기 때문에, 내부 구현도 그 감각에 맞춰야 했습니다.
GSAP을 쓰면 많은 것을 쉽게 움직일 수 있지만, 그래서 오히려 멈추는 판단이 중요했습니다. 모든 요소가 움직이면 화면이 풍성해지는 것이 아니라 읽기 어려워졌습니다. 이 페이지에서는 모션을 '방향을 알려주는 신호' 정도로만 남기려고 했습니다.
남겨둔 기준
좋은 인터랙션은 화려한 기술보다 사용자의 시선을 어디에 둘지 결정하는 일에 가깝다고 느꼈습니다.
앞으로도 포트폴리오를 고칠 때는 '움직임이 의미를 갖는가'를 먼저 보고, 그다음에 디테일을 더하려고 합니다.
이번 프로젝트 페이지를 만들면서 생긴 기준은 단순합니다. 첫째, 큰 글자는 정말 큰 역할을 할 때만 씁니다. 둘째, 포인트 컬러는 시선이 필요한 순간에만 둡니다. 셋째, 애니메이션은 사용자의 행동과 거의 동시에 반응해야 합니다.
또 하나 배운 것은 피드백을 빨리 보는 것의 중요성이었습니다. 코드 안에서 괜찮아 보이는 수치도 실제 브라우저에서 보면 비율이 쉽게 틀어졌습니다. 특히 포트폴리오처럼 감각적인 화면은 컴포넌트 단위로만 판단하면 놓치는 것이 많았습니다.
아직 완성이라고 말하기보다는, 지금의 기준을 계속 다듬는 중이라고 생각합니다. 그래도 이 페이지를 만들고 나서 내가 어떤 화면을 좋아하는지 조금 더 알게 되었습니다. 정보는 명확하고, 움직임은 가볍고, 장식은 결과물을 방해하지 않는 쪽입니다.