제15회 광주비엔날레 파빌리온

제15회 광주비엔날레 파빌리온의 웹사이트를 제작했다.

제15회 광주비엔날레 파빌리온의 메인 화면에는 글자가 정적으로 쌓였다가 사라지는 애니메이션을 적용했다. 포스터가 가진 형상을 유지하면서도 웹이라는 매체의 특성을 함께 담아내고자 했다.

반응형 환경에 대응하기 위해 그래픽과 메인 텍스트, 국가 이름 텍스트의 위치와 크기를 어떤 비율로 조절할 것인지에 대한 고민을 이어갔다. 각 국가별 텍스트는 화면 밖으로 벗어나더라도 크기가 변경되지 않은 채 계속 넘쳐 쌓이도록 구성했다. 반면 중요한 메인 텍스트는 어떤 화면 크기에서도 항상 읽을 수 있도록 크기와 위치를 조정했다.

메인 그래픽은 화면 비율에 맞춰 항상 가득 차도록 구현했으며, 모바일과 데스크탑 각각의 화면 비율에 대응하기 위해 두 가지 베리에이션을 사용했다. (메뉴 아이콘은 별도로 두지 않았다. 다만 UX 관점에서 이러한 방식이 적절한 선택이었는지에 대해서는 계속 고민이 남았다)

모든 텍스트는 SVG로 업로드했다. 텍스트마다 미세한 조정이 필요한 부분이 있었고, 일부 요소는 의도한 크기와 여백을 정확하게 유지해야 했기 때문이다. 실제로는 글자보다 더 큰 박스 안에 텍스트를 배치하여 여백을 조절하는 방식을 사용했다.

특히 까다로웠던 부분은 브라우저마다 SVG 렌더링 방식에 차이가 있다는 점이었다. 작업 파일에서는 여백이 정확하게 맞아도 브라우저마다 이를 계산하는 방식이 조금씩 달랐다. 어떤 경우에는 오래된 브라우저 버그의 영향도 있었고, 실제 렌더링 계산 자체가 다른 경우도 존재했다. 이후 미세한 텍스트 조정이 필요한 상황에서 어떤 방식이 가장 적절한지에 대해서는 앞으로도 더 공부해볼 필요가 있다고 느꼈다.

장소 페이지에는 하나의 거대한 지도가 존재하며 실제 위치 추적은 map-area를 통해 이루어진다. 호버 등 인터랙션을 구현하기 위해 기본 지도 위에 동일한 크기의 선택 상태 이미지를 겹쳐 보여주는 방식을 사용했다.

지금은 비교적 널리 사용되는 CSS 기능이지만 당시 Safari에서는 text-wrap: pretty가 지원되지 않았다. 또한 pretty 옵션 자체도 예측하기 어려운 방식으로 동작하는 경우가 많았다. 그래서 해당 타이틀은 balance 기반의 줄바꿈 방식을 사용해 구현했다.

상세 페이지의 모바일 버전에서는 이전/다음 섹션으로 이동할 수 있는 네비게이션을 제공했다. 이 기능을 구현하면서 가장 많이 고민했던 부분은 어떤 기준으로 이전과 다음 섹션을 정의할 것인가였다.

플러그인의 도움을 일부 받기는 했지만 실제로는 “어떤 순간에 다음 섹션으로 넘어간다고 느껴지는가”에 대한 감각적인 기준을 찾는 과정이 더 중요했는데.. 특히 화면 끝에 닿아 더 이상 스크롤할 수 없는 상황, 혹은 섹션 길이가 지나치게 짧아 현재 어떤 섹션이 보이는지 애매한 상황 등 예상보다 많은 엣지 케이스가 존재했다.

이 문제는 반복적으로 스크롤을 테스트하며 적절한 감각을 찾아가는 방식으로 해결했다. 여기에 더해 화면 가장자리에 닿았는지, 특정 섹션이 실제로 화면 안에 얼마나 보이고 있는지 등을 보조적으로 판단하는 코드를 추가하여 네비게이션의 안정성을 높일 수 있었다.