전공 졸업전시 공식 웹사이트입니다. 전시 기간 방문객을 위한 안내 기능과, 작품을 온라인에서 열람할 수 있는 전자도록 기능을 하나의 사이트 안에 함께 구성했습니다. 전시가 끝난 뒤에도 작품 기록이 그대로 남아 아카이브로 이어지는 구조입니다. 제작 완료 시점이 아니라 운영이 지속되는 것을 전제로 설계했습니다.
화면 구성과 정보 흐름
첫 화면은 전시 타이틀을 낱자 단위로 분해해 검정 배경 위에 크게 배치했습니다. 오프라인 포스터의 시각 언어를 웹에 그대로 옮긴 구성으로, 처음 접속한 방문객이 사이트의 성격을 별도 설명 없이 바로 파악할 수 있도록 했습니다. 오른쪽에는 움직이는 인물 실루엣 이미지를 두어 타이포그래피 중심 화면에 동적인 요소를 더했습니다.
전시 슬로건은 한국어와 영어를 나란히 표기했습니다. 개폐장 일정은 날짜, 요일, 시간을 한곳에 모아 표시했고, 날짜 부분에만 핑크색을 적용해 한눈에 구분되도록 했습니다. 정보가 많더라도 위계를 색으로 정리해 스캔 속도를 높이는 방식입니다. 섹션 사이에는 전시명 텍스트가 옆으로 흐르는 띠(마퀴)를 넣어 시각적 구분선 역할을 맡겼습니다.
전시 소개(About)는 첫 화면 안에도 요약 형태로 배치했습니다. 처음 방문한 사람이 별도 페이지 이동 없이 전시 주제와 포스터를 바로 확인하고, 관심이 생기면 About 전체 페이지로 자연스럽게 이어지는 흐름입니다.
About 페이지
About 페이지에는 전시 주제 "Beyond the Frame" 소개글과 포스터 이미지 두 종을 배치했습니다. 아래로는 지도교수, 총괄, 그래픽팀, 미디어팀, 디자이너 순으로 전체 구성원 명단이 이어집니다. 역할명은 왼쪽에 크게 표기하고, 소속 구성원은 격자 형태로 나열했습니다.
디자이너 이름을 누르면 해당 학생의 작품 목록으로 바로 이동합니다. 이름 자체를 검색 링크로 처리한 구조라 개인 페이지를 별도로 만들 필요가 없고, 구성원 목록과 작품 탐색이 자연스럽게 연결됩니다.
페이지 하단(푸터)에는 한국어와 영어로 전시명, 기간, 장소를 함께 표기했습니다. 전시장 방문에 필요한 정보를 별도 페이지 없이 한 곳에 정리해 불필요한 이동을 줄였습니다.
작품 목록과 탐색 구조
분류 탭과 작품 카드
작품 목록(Works) 페이지는 상단 분류 탭(카테고리 필터)으로 전체 보기와 세부 분류를 전환하는 구조입니다. 어떤 유형의 작품이 있는지 먼저 파악한 뒤 원하는 분야만 골라 볼 수 있어, 방문 목적에 따라 탐색 경로가 달라집니다. 분류 항목은 아래와 같습니다.
| 카테고리 | 작품 유형 |
|---|---|
| UX/UI Design | 팀 단위 UX/UI 설계 프로젝트 |
| UX/UI Practice | 개인 및 소규모 팀 실습 결과물 |
| BX Design | 브랜드 아이덴티티 디자인 |
| Digital Product Design | 디지털 제품 및 서비스 디자인 |
| Package Design | 패키지 및 인쇄물 디자인 |
| Motion Graphics Design | 유튜브 영상 연동 모션 작업 |
| Advertising Design | 광고 및 캠페인 디자인 |
| Infographics | 인포그래픽 시각화 결과물 |
| Capstone Design | 종합 설계 프로젝트 |
각 작품은 미리보기 이미지(썸네일), 연도, 분류명, 참여 디자이너 이름을 카드 형태로 표시합니다. 영상 작업(Motion Graphics Design)은 유튜브 미리보기 이미지를 자동으로 불러와 표시하고, 카드를 클릭하면 작품 상세 페이지로 이동합니다.
메뉴 구조와 이름 검색
상단 메뉴는 About, Works, Designer, Instagram, Youtube, Archive로 구성됩니다. Instagram과 Youtube는 외부 채널로 바로 연결되고, Archive는 지난 연도 전시 기록을 연도별로 모아두는 페이지입니다.
메뉴 오른쪽 검색 아이콘을 누르면 이름 입력창이 열립니다. 디자이너 이름을 입력하면 해당 학생의 작품 목록으로 바로 이동하는 구조로, 특정 학생의 작품을 찾으러 온 방문객은 목록 페이지를 거치지 않고 이름만으로 바로 찾아갈 수 있습니다.
검색 대응과 운영 관리
검색 노출 설계
검색 대응은 제작 단계에서 함께 구성했습니다. 전시 안내 페이지와 작품 기록 페이지의 역할이 검색 결과에서 흐려지지 않도록 제목 체계와 기본 메타 요소(title, meta description, canonical)를 정리했고, 네이버 검색등록(서치어드바이저)과 구글 애널리틱스를 연동해 유입 경로와 방문 현황을 추적합니다.
전시 개요, 작품 분류, 디자이너 정보가 한 흐름 안에서 읽히도록 페이지 구조를 잡은 것도 같은 맥락입니다. 카카오톡이나 메신저로 링크를 공유할 때 미리보기 이미지와 설명이 함께 노출되도록 공유 태그(OG 태그)를 설정했고, 이미지에는 대체 텍스트(alt)를 넣어 이미지가 로딩되지 않는 환경에서도 내용을 파악할 수 있게 처리했습니다. 검색 노출과 관련된 항목은 관리자 페이지 안에서도 담당자가 직접 수정할 수 있도록 별도 메뉴로 분리했습니다.
관리자 페이지와 운영 흐름
별도의 관리자 페이지(CMS)를 구축해 운영자가 코드 수정 없이 콘텐츠를 직접 관리할 수 있는 구조를 갖췄습니다. 작품 등록, 수정, 삭제와 카테고리 편집, 디자이너 정보 관리가 한 화면에서 처리됩니다. 인스타그램과 유튜브 게시물 등록도 같은 관리자 페이지에서 진행합니다.
공지사항과 팝업은 전시 기간 중 수시로 변경될 수 있어 관리자 페이지에서 바로 올리고 내릴 수 있도록 처리했습니다. 방문 통계는 애널리틱스 메뉴에서 확인합니다.
다음 연도 전시로 넘어갈 때는 기존 데이터를 아카이브로 이관하고 새 작품과 디자이너 정보를 등록하는 방식입니다. 매년 같은 구조 위에 내용만 교체해 운영할 수 있어 연도별 누적 관리가 무리 없이 이어집니다.
