2024 서울시립대 시각디자인 졸업전시 인터랙티브 플랫폼

서울시립대학교 시각디자인전공 졸업전시는 온라인 플랫폼을 통해 디지털 전시를 진행합니다. 방문자는 3D 공간을 탐색하며 작품 설명, 프로세스, 디자이너 정보를 확인할 수 있습니다.

WebGL을 활용해 전시관을 구현하고, 카테고리 필터, 검색, 즐겨찾기 기능을 제공하여 작품 접근성을 높였습니다.

비주얼 설계

• WebGL 배경에 조명 효과와 입체적인 타이포그래피를 더해 몰입감을 높였습니다.
• 네비게이션 메뉴는 햄버거 아이콘과 카테고리 바를 결합하여 다양한 탐색 경로를 제공합니다.
• 작품 목록은 그리드 뷰와 3D 공간 뷰를 자유롭게 전환할 수 있습니다.

정보 구조

• Intro → Program → Works → Designers 순으로 이어지는 네비게이션이 전시 스토리를 체계적으로 전달합니다.
• 작품 상세 페이지는 작품 설명, 이미지, 프로토타입 링크, 디자이너 소개를 한 화면에 제공합니다.
• 카테고리 필터와 태그 검색, 즐겨찾기 기능으로 원하는 작품을 빠르게 찾을 수 있습니다.

디자인 강점

• 다크 톤과 네온 라이트 효과가 미래지향적 전시 분위기를 조성합니다.
• 3D 공간 속 작품명을 실시간으로 노출해 탐색 재미를 제공합니다.
• 디자이너 카드에 사진, 전공 트랙, SNS 링크를 제공하여 네트워킹을 지원합니다.
• 반응형 레이아웃으로 데스크톱과 모바일 어느 환경에서도 일관성 있는 경험을 제공합니다.

사용자 경험 특징

• 작품 리스트와 3D 전시 공간을 오가며 다양한 방식으로 작품을 감상할 수 있습니다.
• 언어 전환(한/영)과 다국적 관람객을 고려한 설명 구조를 지원합니다.
• 즐겨찾기한 작품은 별도 섹션에서 모아볼 수 있어 북마크 역할을 합니다.
• 로딩 화면에 진입 애니메이션을 적용해 사용자 기대감을 높였습니다.

기술 구현 관점

• Three.js와 Ammo.js를 이용한 물리 기반 인터랙션으로 공간감을 구현했습니다.
• 코드 스플리팅과 Lazy Load로 초기 로딩 시간을 최적화했습니다.
• 크로스 브라우저 대응, 모바일 성능 튜닝을 통해 다양한 환경에서 안정적으로 동작합니다.
• Google Analytics 이벤트 트래킹으로 작품 뷰, 공유, 즐겨찾기 데이터를 수집합니다.

서울시립대 시각디자인전공 졸업전시 사이트는 WebGL 기술을 활용해 온라인 전시 경험을 극대화한 사례입니다. 작품 탐색과 디자이너 네트워킹, 프로그램 안내까지 아우르는 정보 구조가 설계되어 있습니다.

향후 VR 모드나 작품별 인터랙티브 체험을 추가한다면 디지털 전시의 확장성을 더욱 넓힐 수 있을 것입니다.