프로젝트 개요
이번 사이트는 졸업전시의 주제와 작품 세계를 한눈에 파악할 수 있도록 비주얼 헤더와 핵심 카피, 작품 미리보기를 중심으로 구성되어 있습니다. 첫 화면에서 전시 아이덴티티를 명확히 전달하는 동시에, 학과 소개와 참여 학생 정보, 출품작 콘텐츠로 매끄럽게 이어지는 전환 동선이 안정적으로 설계되어 있습니다. 특히 상단 히어로의 대비와 타이포 리듬, 간격 체계가 모바일까지 일관되게 유지되어 접근성 기준을 상당 부분 충족합니다. 버튼, 배지, 알림 박스 같은 강조 컴포넌트는 색 대비와 크기, 여백이 충분해 터치 환경에서도 조작성과 가독성이 높습니다.
정보 구조는 전시 개요 → 학과/참여 → 작품/세부 → 안내/방문 등 계층적 내러티브를 따르며, 주제별로 섹션을 구분해 스캔 리딩을 돕습니다. 썸네일 그리드의 카드 레이아웃은 시각적 규칙을 잘 지키고 있어 다양한 작품 이미지가 섞여도 전체 피드가 일관된 톤으로 유지됩니다. 또한 고정 내비게이션과 우측 플로팅 TOC의 조합은 섹션 간 이동 효율을 끌어올리며 체류 시간과 페이지 깊이를 안정적으로 늘리는 데 기여합니다.
브랜딩 톤·메시지
전시는 학과의 교육 철학과 학생들의 실험 정신을 간결한 카피와 강조 배지로 전달합니다. 헤더 카피는 전시의 핵심 가치를 단문으로 요약해 첫 스크롤에서 메시지 인지를 끝내며, 배경 그래디언트와 주조 색의 대비가 강하지만 텍스트 음영과 여백을 충분히 둬 눈의 피로를 줄입니다. 버튼은 확실한 호버/포커스 피드백을 제공하고, 카드의 캡션과 크레딧 영역은 타이포 크기를 차등화하여 정보 우선순위를 명확히 했습니다. 요약하면, 브랜드 톤은 ‘도시적이고 학술적인 차분함’ 위에 ‘학생 작품의 실험성’을 얹어 차분하지만 선명한 인상을 남깁니다.
메시지의 맥락화 또한 잘 되어 있습니다. 학과 소개, 커리큘럼, 전시 소개 문단은 서술 길이(문장 수)와 행간, 문단 간 간격을 통일해 리듬을 만들고, 이미지 주변의 캡션/해설 박스가 관람 동선을 보조합니다. 결과적으로 키 비주얼은 주목성을 확보하고, 본문은 서술 밀도와 가독성을 균형 있게 유지합니다.
UX/UI 설계 포인트
네비게이션은 상단 고정 메뉴와 내부 앵커의 조합으로 구성되어, 작품 목록과 섹션 간 이동이 빠르고 직관적입니다. 카드 기반 그리드 리스트는 행 높이와 열 간격을 일정하게 유지해 시각적 안정감을 주고, 작품 상세로 진입하면 충분한 여백과 큰 이미지가 작품 몰입을 돕습니다. 인터랙션은 과도한 애니메이션을 지양하고, 포커스 아웃라인과 키보드 탐색에 대응해 접근성 요구를 반영합니다. 모바일에서는 탭 간격과 터치 타깃을 44px 이상으로 확보하여 오작동을 줄였습니다.
컴포넌트 레벨에서도 입력 폼과 버튼 그룹, 알림 박스의 상태가 시각적으로 구분되며, 링크/버튼 레이블은 동사 중심으로 작성되어 사용자의 다음 행동을 명확히 제시합니다. 결과적으로 정보 탐색 흐름이 매끄럽고, 작품 감상의 몰입감과 과업 완료의 효율이 동시에 달성됩니다.
IA · SEO · 퍼포먼스
정보 구조(IA)는 상위/하위 카테고리의 깊이가 얕아 빠른 탐색에 유리합니다. 문서 헤더에는 타이틀, 메타 설명, 오픈그래프 태그가 포함되어 있어 소셜 공유 시 미리보기 품질이 안정적입니다. 이미지에는 대체 텍스트(alt)가 제공되어 보조공학 환경에서도 맥락을 잃지 않습니다. CSS/JS는 페이지 내 임베드와 외부 리소스의 균형이 적절하며, 이미지에는 loading="lazy"를 적용해 초기 로딩에 부담을 주지 않습니다. 가능한 경우 WebP/AVIF 자산을 병행 제공하면 성능을 추가로 끌어올릴 수 있습니다.
URL 설계와 내부 링크 앵커는 의미 있는 키워드를 반영하고, 제목 태그의 위계를 h1→h2→h3로 유지해 문서 구조화가 잘 이루어집니다. 또한 스크롤 탐색에 대응하는 플로팅 TOC는 체류 시간을 늘리고 바운스레이트를 낮추는 데 긍정적으로 작용합니다.
디자인 미리보기
미리보기 섹션에서는 화면의 대비와 공간의 호흡, 컴포넌트 간 정렬 관계를 중심으로 시각 체계를 확인할 수 있습니다. 특히 상단 히어로가 강한 그라디언트와 두께감 있는 타이포로 시선을 끌어당긴 뒤, 본문으로 내려오면서 카드·캡션·버튼이 작은 단위의 질서를 형성한다는 점이 인상적입니다. 이는 전시의 자유로운 개성과 사이트 운영의 안정적 경험 사이에서 균형을 이루기 위한 설계 의도로 읽힙니다. 레이아웃은 1열 중심의 단일 흐름을 채택해 모바일과 데스크톱 모두에서 가독성 중심으로 콘텐츠를 배치했고, 이미지 가장자리의 라운딩과 그림자 깊이를 확보해 작품 이미지가 화면 위에서 ‘떠 보이는’ 느낌을 줍니다. 결과적으로 사용자는 작품에 집중하면서도 페이지의 구조를 쉽게 파악할 수 있습니다.
색 구성은 깊은 블루 톤과 중간 명도의 중성 배경을 조합하여, 작품 이미지의 다양한 색이 지나치게 튀지 않도록 안정적인 무대를 제공합니다. 버튼과 배지는 브랜드 컬러를 강조 포인트로 사용하면서도 텍스트 대비를 충분히 확보해 접근성 가이드라인을 충족합니다. 캡션과 보조 설명은 본문보다 한 단계 작은 크기와 옅은 컬러를 적용해 위계를 분명히 하였고, 이미지 파일은 lazy-loading으로 제공되어 초기 로딩의 부담을 낮춥니다. 필요 시 WebP/AVIF로의 병행 제공을 통해 성능을 한층 더 끌어올릴 수 있습니다.
The Blue Canvas 소개
더블루캔버스(The Blue Canvas)는 브랜드·제품·서비스의 디지털 경험을 분석하고 설계하는 UX/UI 전문팀입니다. 데이터 기반 IA 리디자인, 콘텐츠 전략, 컴포넌트 시스템 수립과 함께, 반응형 웹 성능 최적화와 접근성 개선을 일관되게 수행합니다. MVP 단계의 빠른 검증에서부터 대규모 리뉴얼, 글로벌 론치까지 상황에 맞는 정보 구조와 인터랙션 전략을 제안하며, 디자인 시스템·디자인 토큰·코드 핸드오프 등 실무 전환에 필요한 산출물을 함께 제공합니다. 또한 검색 노출을 높이기 위한 스키마, 메타, 내부 링크 전략을 일관되게 정비해 발견 가능성을 높이고, 퍼포먼스 최적화를 통해 체감 속도와 유지 비용을 동시에 개선합니다. 본 리뷰가 더 궁금하시다면 아래 링크에서 포트폴리오와 방법론을 확인해 보세요.
마무리 인사이트
본 사이트는 졸업전시라는 특수한 맥락에서 브랜딩 정체성과 작품 감상 경험의 균형을 훌륭히 잡아냈습니다. 히어로에서 작품 상세까지 이어지는 내러티브, 안정적인 타이포 리듬과 대비, 카드 그리드의 일관성은 학과의 메시지를 신뢰감 있게 전달합니다. 여기에 검색/필터 고도화, 이미지의 차세대 포맷 병행 제공, 스키마 마크업 보강 등을 더한다면 검색 가시성과 콘텐츠 도달률을 한층 끌어올릴 수 있습니다. 종합하면, 본 전시는 온라인 상에서도 ‘작품의 맥락’을 잃지 않도록 설계되어 있으며, 학과의 역량과 학생들의 실험성을 선명하고 친화적인 UX로 보여줍니다.
향후 운영 관점에서는 기획 전시/연계 행사/아카이브가 자연스럽게 연결되도록 구조를 확장하고, 카드 템플릿의 메타 정보(작가명, 태그, 카테고리)를 표준화하면 검색/필터의 정밀도가 높아집니다. 또한 이미지 자산의 \/images 경로 표준화, 캐시 무효화 정책, CDN·리사이즈 파이프라인과 같은 유지보수·배포 체계를 정비하면 장기적인 안정성이 강화됩니다. 마지막으로 보조공학 사용자 테스트를 주기적으로 수행해 폼·대화형 컴포넌트의 포커스 순서, ARIA 레이블, 키보드 트랩 등을 점검하면 접근성 성숙도를 한 단계 끌어올릴 수 있습니다.