고려대학교 120주년

프로젝트 개요

고려대학교 120주년 웹사이트는 기념 연도의 상징성과 대학 브랜드의 정체성을 동시에 전달해야 하는 과제 위에 서 있습니다. 본 리뷰는 “사용자가 첫 화면에서 어떤 가치를 즉시 이해하는가”, “행사·연표·아카이브 등 주요 정보에 어떻게 도달하는가”, “브랜드 톤앤매너가 디지털 인터페이스 전반에서 얼마나 일관되게 구현되는가”라는 세 가지 질문을 중심으로 진행했습니다. 특히 영문/국문 동시 제공 상황에서의 언어 토글 가시성, 모바일 퍼스트 그리드 안정성, 그리고 이벤트성 콘텐츠의 생명주기 관리에 대한 UX 고려가 중요합니다. 본 리뷰에서는 정보구조(IA), 내비게이션 패턴, 주요 화면의 시각 체계, 접근성과 퍼포먼스, SEO 관점에서 실제 개선에 바로 적용할 수 있는 제안을 제시합니다.

또한 본 리뷰는 서비스 기획 의도를 추정하는 수준에 머무르지 않고, 사용자 관찰에 기반한 상호작용 흐름 가설과 측정 가능한 개선 지표(예: 주요 CTA 클릭률, 행사 상세 도달 시간, 검색 유입 키워드 클릭 스루 등)를 함께 제공합니다. 이를 통해 단순한 미관 개선을 넘어, 방문 목적 달성률과 반복 방문 유도라는 실질적 성과로 이어지도록 돕습니다.

정보구조와 내비게이션

헤더의 1차 메뉴는 ‘소개·연표·행사·아카이브’와 같은 사용자의 기대 모델에 맞추어 구성하는 것이 효과적입니다. 현재 랜딩에서 강조되는 핵심 메시지와 주요 진입 버튼(예: 행사 바로가기, 일정 확인, 기록보기)을 시각적으로 구분해 주 경로를 명확히 해야 합니다. 메뉴 깊이는 2단계를 넘지 않도록 제한하고, 동일 레벨 내 항목 수를 5±2 범위에 유지하면 인지 부하를 줄일 수 있습니다. 검색 진입은 글로벌 헤더에 항상 노출하고, 결과 페이지에서는 연도·유형·테마 기반의 필터를 제공해 오래된 기록과 최신 소식을 효율적으로 탐색할 수 있게 합니다.

모바일에서는 탭바 패턴을 활용해 ‘홈·행사·연표·검색’을 고정 노출하고, 히어로 영역의 대형 비주얼이 스크롤 진입을 과도하게 지연시키지 않도록 초기 뷰포트 높이를 고려해 크기를 최적화합니다. 브레드크럼은 데스크톱에서만 노출하고, 동일 계층 내 이전/다음 항목 이동 버튼을 제공해 연속 탐색성을 높입니다. 마지막으로, 단발성 행사나 공지 카드에는 만료 플래그와 보관 정책을 명시해 정보의 최신성 신뢰를 유지합니다.

비주얼 시스템과 브랜드

120주년 아이덴티티는 색상, 타이포그래피, 모티프(기념 로고·리본·패턴 등)의 조합으로 시스템화되어야 합니다. 본 사이트는 교색(와인·블랙)의 대비를 기반으로 강조 색(#0b5bcb 계열)을 액션과 링크에 일관되게 적용할 것을 권장합니다. 버튼·태그·배지 등의 구성요소는 반경·선굵기·그림자 규격을 토큰화해 모듈로 관리하면, 신규 섹션이 추가되더라도 전체 톤이 무너지지 않습니다. 또한 행사 카드에서는 썸네일 프레임과 타이틀 높이를 고정하여 카드 그리드의 리플로우를 방지하고, 캡션에는 출처/기간/장소를 짧게 병기해 맥락을 보완합니다.

영상과 이미지 사용 시에는 대체 텍스트와 자막을 기본 제공하여 접근성을 높이고, 히어로 이미지는 1x/2x 소스로 분기해 고해상도 디스플레이에서 선명함을 유지합니다. 단일 이미지만 제공되는 경우 중복 사용은 피하고, 섹션 내에서는 그래픽 대신 텍스트 계층과 하이라이트 콤포넌트(노트, 체크리스트, 참고 링크)로 정보의 밀도를 설계하는 편이 바람직합니다.

접근성·성능·SEO

접근성 측면에서는 명도 대비(AAA 권장), 포커스 링 커스터마이즈, 키보드 트래핑 방지, 스킵 링크 제공이 중요합니다. 폼과 인터랙티브 요소는 ARIA 레이블을 갖추고, 동적 콘텐츠는 라이브 리전으로 보조 기술에 전달해야 합니다. 성능 최적화를 위해서는 이미지의 지연 로딩, CSS/JS 번들링과 압축, 폰트 서브셋 구성, 그리고 LCP 요소의 초기 렌더 앞당기기가 핵심입니다. 또한 핵심 경로의 리소스에 대해 preload를 활용하면 초기 체감 속도가 크게 개선됩니다.

SEO는 구조화된 데이터(Organization, Event, BreadcrumbList 등)와 시맨틱 태그 섞기, 중복 타이틀/메타 방지, 정규 URL 설정(canonical)로 기반을 다집니다. 연표/아카이브는 ‘연도·인물·주제’의 조합 키워드로 내부 링크를 엮어 크롤러 친화적 허브를 만들 수 있습니다. 이미지에는 한국어 대체 텍스트를 제공하고, 오픈그래프 이미지를 지정해 소셜 공유 시 메시지 전달력을 높입니다. 궁극적으로는 실사용 데이터(검색 유입어, 클릭 위치 히트맵, 이탈 지점)를 토대로 가설-실험-학습 사이클을 반복하는 운영 체계가 필요합니다.

권고안 및 마무리

요약하면, 본 웹사이트는 기념 브랜드의 상징성과 정보 탐색의 효율성을 균형 있게 구현함으로써 더 높은 목적 달성률을 기대할 수 있습니다. 우선순위는 ① 헤더 IA 단순화 및 핵심 CTA 노출 강화, ② 카드/버튼/배지 등 UI 토큰 정규화, ③ 이미지 전략과 퍼포먼스 최적화, ④ 구조화 데이터·내부링킹 강화로 정리됩니다. 이러한 개선을 짧은 스프린트로 나누어 진행하면 위험을 낮추면서 효과를 검증할 수 있습니다. 실무 지원이 필요하다면, 더블루캔버스의 UX 전략·디자인·프런트엔드 역량을 통해 빠른 속도로 구현·검증을 도와드릴 수 있습니다.