개요
핵심 요약 — 대구대학교 70주년 디지털 역사관은 1956년 개교부터 2026년까지 대학의 70년을 하나의 아카이브로 엮어낸 기념 웹사이트다. 히어로에는 'FROM 1956 TO 2026'이 속이 빈 아웃라인 타이포로 화면을 가로지르고, 그 사이 초록 듀오톤으로 물든 캠퍼스 항공사진 위에 '사랑·빛·자유' 교훈을 새긴 골드 엠블럼 배지가 놓인다. 상단 내비게이션은 설립자 스토리, 대구대학교 발자취, 헤리티지 갤러리, DU 아카이브, 개교 70주년, 70주년 주요 행사, DU 영상관으로 이어지며 이 역사관이 다루는 콘텐츠의 지도를 한눈에 펼쳐 보인다. 이번 리뷰는 대학의 역사라는 무겁고 방대한 소재를 이 웹사이트가 어떤 시각 언어로 압축했는지, 스크롤 서사와 정보 구조, 그리고 홈페이지 제작의 완성도를 UX/UI 관점에서 짚어 본다.
브랜드 & 메시지
첫 화면의 메시지는 숫자 두 개로 요약된다. '1956'과 '2026'을 거대한 흰 산세리프 숫자로 세우고, 그 사이 여백에 'FROM'과 'TO'를 속 빈 아웃라인으로 흘려 70년이라는 시간의 폭을 형태 그대로 형상화했다. 서브카피 '가장 낮은 곳에서 품어온 큰 뜻으로, 시대 속에서 변화와 성취를 이어오다'는 설립 정신을 담담한 한 문장으로 전한다. 컬러는 에메랄드-틸 계열의 초록을 브랜드 축으로 삼았고, 흑백 기록사진에 초록 듀오톤을 입혀 과거와 현재를 하나의 톤으로 묶는다. 골드 엠블럼과 교훈 배지는 절제된 포인트로 대학의 기품을 얹는다. History와 Anniversary 토글은 같은 역사관을 두 관점으로 열람하게 하는 영리한 진입 장치이고, 하단의 'Scroll' 인디케이터는 이 사이트가 위에서 아래로 읽히는 스크롤 서사임을 예고한다. 다만 상단 내비게이션 항목이 일곱 개로 많은 편이라, 처음 방문한 사용자의 시선에는 밀도가 다소 높게 걸린다.
UX/UI 관점
이 웹사이트의 UX/UI에서 가장 돋보이는 강점은 다음과 같다. 첫째, 대형 타이포와 듀오톤 사진이 결합한 히어로는 '70년'이라는 주제를 설명 없이 각인시키는 강한 첫인상을 만든다. 둘째, 설립자 스토리 → 대구대학교 발자취 → 70년 스토리북·DU 아카이브로 내려가는 스크롤 구성이 시간축을 그대로 따라가 서사의 흐름이 자연스럽다. 셋째, 각 섹션마다 'Sprout of love', 'Steps of Liberty', 'Archive of Heritage' 같은 영문 라벨과 국문 헤드라인을 이원으로 배치해 리듬과 격을 동시에 확보했다. 넷째, 배경에 옅게 깔린 연도 숫자(1894·1956·2026)가 각 섹션의 시대적 좌표를 은은하게 새겨 준다. 다섯째, 시계 바늘 모티프의 타임라인과 폴라로이드처럼 흩뿌린 흑백 기록사진이 물성 있는 아카이브 감성을 살린다. 여섯째, 초록과 크림 페이퍼 질감으로 화면을 좌우로 가른 '70년 스토리북'과 'DU 아카이브' 대비가 콘텐츠 성격 차이를 색과 재질만으로 읽히게 한다. 화살표를 단 '설립자 스토리 →', '자세히 보기 →' 버튼은 다음 행동을 분명히 가리키는 어포던스로 작동한다. 웹디자인의 완성도가 높은 만큼, '70년 스토리북'에 붙은 'Coming Soon' 배지는 정식 오픈 시점의 콘텐츠 공백이 기대치를 흔들지 않도록 관리가 필요하다.
IA·SEO 전략
기념 역사관은 인물·연도·사건이라는 검색 자산이 풍부하다. 설립자 성산 이영식 목사, 개교 연도 1956, 헤리티지 갤러리와 DU 아카이브의 개별 기록물은 저마다 고유한 <title>과 meta description을 갖는 독립 페이지로 색인되는 편이 유리하다. 지금처럼 한 화면 안에서 스크롤로만 소비되면 개별 콘텐츠가 검색 스니펫으로 노출될 기회를 잃는다. 'Coming Soon' 상태인 70년 스토리북은 공개 전까지 noindex로 두거나 공개 시점을 명확히 관리해, 빈 페이지가 색인되어 품질 신호를 떨어뜨리지 않게 한다. 이 사이트는 daegu.ac.kr의 /history 하위 경로에 자리한 마이크로사이트인 만큼, canonical과 본교 사이트로의 내부링크 관계, 그리고 70th 서브도메인 사이의 중복 색인 여부를 정리해 두어야 한다. 기록사진이 다수인 특성상 파일명과 alt 텍스트에 인물명·연도·사건을 담아 이미지 검색 유입까지 설계하면, 역사관 고유의 롱테일 키워드가 살아난다.
성능·접근성
히어로의 대형 항공사진과 듀오톤 오버레이, 그리고 페이지 곳곳의 흑백 기록사진은 시각적 무게가 큰 만큼 초기 로딩의 병목이 되기 쉽다. 히어로 이미지는 지연 로딩을 피하되 WebP/AVIF와 반응형 srcset으로 용량을 낮춰 LCP를 앞당기고, 하위 섹션의 사진은 지연 로딩으로 나눠 부담을 분산하는 편이 좋다. 시계 바늘 타임라인과 스크롤 연동 애니메이션은 메인 스레드를 점유할 수 있으므로, prefers-reduced-motion을 존중해 모션 민감 사용자에게는 정적 화면을 제공해야 한다. 화면을 가로지르는 대형 아웃라인 타이포는 웹폰트 의존도가 높으니 font-display: swap과 서브셋으로 텍스트가 늦게 그려지는 구간을 줄인다. 접근성 측면에서는 초록 듀오톤 위에 얹힌 흰 텍스트의 대비를 기준선까지 끌어올리고, 장식용 연도 숫자에는 aria-hidden을 적용해 스크린리더의 소음을 없애야 한다. History/Anniversary 토글과 Scroll 인디케이터는 키보드 포커스와 상태 표시를 갖춰, 마우스 없이도 같은 서사를 따라갈 수 있어야 한다.
디지털 파트너 더블루캔버스
대학 70주년 역사관처럼 방대한 사료를 하나의 서사로 압축하는 프로젝트는, 브랜드 헤리티지를 다루는 홈페이지 제작 중에서도 난도가 높은 축에 든다. 인물과 연도, 기록물이 흩어진 원자료를 정보 구조로 세우고, 대형 타이포와 듀오톤 같은 시각 언어로 감정을 얹으며, 검색과 성능까지 무너지지 않게 지탱해야 하기 때문이다. The Blue Canvas는 대학·공공기관·기업의 기념관과 브랜드 사이트를 기획-디자인-개발-실험의 한 흐름으로 설계한다. 스크롤 서사와 아카이브 UX를 다루는 웹사이트 제작 역량, 인물·연도 중심의 롱테일을 살리는 SEO 검색엔진최적화, 그리고 공개 이후 유입과 체류를 끌어올리는 퍼포먼스 마케팅을 하나로 엮어, 개관 하루짜리 이벤트가 아니라 오래 검색되고 오래 읽히는 자산으로 남게 만든다. 역사관·기념 사이트의 홈페이지 제작을 고민한다면 아래에서 실제 사례와 협업 방식을 확인해 보길 권한다.
마무리와 다음 스텝
대구대학교 70주년 디지털 역사관은 'FROM 1956 TO 2026'이라는 단 두 숫자로 70년의 무게를 각인시키고, 초록 듀오톤과 골드 엠블럼으로 기품 있는 헤리티지 톤을 완성한 웹디자인이다. 서사의 밀도와 시각 완성도는 이미 높은 수준이니, 다음 세 가지를 다듬으면 검색 자산으로서의 수명이 크게 늘어난다. 첫째, 설립자·발자취·아카이브 콘텐츠를 개별 URL로 분리해 각 페이지가 독립적으로 색인되게 한다. 둘째, 'Coming Soon' 스토리북의 공개 로드맵을 명시해 기대치와 색인 품질을 함께 관리한다. 셋째, 히어로 이미지와 웹폰트, 스크롤 애니메이션의 로딩·모션 예산을 손봐 첫 화면 체감 속도와 접근성을 끌어올린다. 기념의 순간을 넘어 오래 읽히는 아카이브로 남기려면, 지금의 화면 완성도에 정보 구조와 성능이라는 뼈대를 더하는 것이 다음 스텝이다.