개요
한 줄 요약 — 홍익대학교 산업디자인학과가 2025년 졸업전시를 위해 만든 What If 웹사이트는 전시 카탈로그가 아니라 그 자체로 하나의 작품처럼 설계됐다. 검은 캔버스 위로 코발트블루와 주황빛이 뒤엉킨 유체 그래픽이 산맥처럼 흐르고, 그 위에 'What If'라는 라이트 세리프 워드마크가 조용히 얹힌다. 상단 내비게이션은 PROJECTS·MAGAZINE·EXHIBITION·INDEX·ARCHIVE 다섯 축과 검색 아이콘으로 압축돼 있고, 좌측 하단 '↓ Scroll down'과 우측 'Enter'가 진입 동선을 나눠 안내한다. 이번 리뷰는 이 전시형 홈페이지가 '쓸모없음의 쓸모'라는 추상적 주제를 어떻게 시각 언어와 UX/UI로 옮겨냈는지, 그리고 첫 화면이 온라인 방문자를 실제 오프라인 전시장까지 이어주는지에 초점을 둔다.
브랜드 & 메시지
브랜드의 심장은 두 번째 화면에 있다. 거대한 'What If' 아래로 쓸모없음의 쓸모, 무쓸모 디자인 / 만약에, What If라는 한 쌍의 문장이 전시 전체의 테제를 압축한다. 왼쪽에 붙은 '2025년도 홍익대학교 산업디자인학과 졸업전시' 배지가 발화 주체를 분명히 하고, 본문은 실용성만을 판단 기준으로 삼는 목적 중심 디자인에서 벗어나겠다는 선언을 한국어와 영문으로 나란히 싣는다. 색과 톤도 이 태도를 정확히 따라간다. 무채색 배경을 기본으로 두고 전기적인 코발트블루를 유일한 강조로 쓰는 절제된 팔레트는, 장식을 덜어내면서도 브랜드를 또렷하게 각인시킨다. CTA는 흔한 '자세히 보기' 대신 전시장 문을 여는 은유인 'Enter' 한 단어로 통일돼, 관람이라는 행위 자체를 인터페이스의 결정적 동작으로 끌어올린다.
UX/UI 관점
화면에서 확인되는 웹디자인의 강점은 분명하다. 첫째, 풀스크린 다크 캔버스와 유체 그래픽으로 스크롤 첫 순간부터 몰입을 만든다. 둘째, 'What If' 워드마크를 오프닝·개념 화면·하단 세 지점에서 반복 배치해 페이지 전체에 시각적 후렴을 심는다. 셋째, '↓ Scroll down'과 'Enter'를 좌우로 나눠 두어, 훑어보는 사용자와 곧장 진입할 사용자의 동선을 동시에 배려한다. 넷째, 전시 일정을 'Offline Exhibition 2025. 11. 04 — 2025. 11. 08'로 좌우 정렬해 핵심 정보를 한눈에 붙잡는다. 다섯째, 실제 전시장 사진(벽에 투사된 'What If', 관람객 실루엣)을 넣어 온·오프라인을 잇고 현장감을 전한다. 여섯째, Projects 섹션은 다섯 개 작품 썸네일을 균형 잡힌 그리드로 늘어놓고 'Enter' 버튼으로 탐색을 유도해, 방대한 졸업 작품을 부담 없이 미리 보게 한다.
IA·SEO 전략
전시형 홈페이지 제작은 상시 운영되는 기업 사이트와 목표가 다르다. 지금의 정보 구조는 PROJECTS·MAGAZINE·EXHIBITION·INDEX·ARCHIVE 다섯 축으로 깔끔하지만, 작품 하나하나가 검색에서 발견되려면 개별 상세 페이지마다 학생명·작품명·지도 맥락을 담은 고유한 <title>과 meta description이 붙어야 한다. INDEX가 사실상 사이트맵 역할을 하는 만큼 내부 링크의 앵커 텍스트를 작품명 중심으로 다듬으면 크롤러가 주제를 더 정확히 잡는다. 전시는 2025. 11. 04~11. 08로 기간이 한정되므로, 종료 후에도 ARCHIVE URL이 영속되도록 canonical을 고정하고 '만약에, What If' 같은 콘셉트 키워드를 제목 계층에 노출하는 편이 유리하다. 개막 전 검색 유입을 위해서는 전시 기간·장소(마포구 와우산로)를 Event 구조화 데이터로 마크업해 리치 결과를 노리는 것을 권한다. MAGAZINE 콘텐츠는 전시가 끝난 뒤에도 유입을 만드는 장기 자산이 되므로 별도 색인 전략을 세울 만하다.
성능·접근성
비주얼의 밀도가 높은 만큼, 이런 전시형 웹사이트 제작에서 성능은 가장 큰 변수다. 풀스크린을 채우는 유체 그래픽과 대형 히어로가 LCP를 좌우하므로, 배경이 영상·캔버스 기반이라면 포스터 프레임을 먼저 그리고 나머지를 지연 로드해 첫 페인트를 앞당겨야 한다. Projects의 고해상 작품 썸네일 다섯 컷은 WebP/AVIF 병행 제공과 명시적 width·height 지정으로 용량과 CLS를 함께 잡는 게 좋다. 접근성에서 가장 눈에 띄는 지점은 대비다. 개념 화면의 영문 스테이트먼트가 검은 배경 위 옅은 회색으로 깔려 판독이 어려운데, 명도를 끌어올리면 국제 관람객의 가독성이 곧바로 개선된다. 여기에 작품 이미지의 의미 있는 대체 텍스트, 키보드 포커스 순서, 'Enter'·검색 등 인터랙티브 요소의 초점 표시를 정리하면 몰입감을 해치지 않으면서 기본 위생을 갖출 수 있다.
디지털 파트너 더블루캔버스
졸업전시나 브랜드 캠페인처럼 '한 번의 강렬한 인상'이 성패를 가르는 프로젝트는, 감각적인 화면과 탄탄한 기술 기반이 동시에 필요하다. The Blue Canvas는 바로 그 지점을 메운다. 전시·공간·문화 브랜드를 위한 몰입형 홈페이지 제작부터, 검색에서 오래 살아남는 웹사이트 제작과 SEO 구조 설계, 개막 전후 트래픽을 끌어올리는 퍼포먼스 마케팅까지 하나의 흐름으로 잇는다. What If가 보여준 다크 캔버스와 유체 그래픽 같은 개성을 유지하면서도, LCP·CLS·접근성 같은 기본기를 놓치지 않는 웹디자인이 우리가 지향하는 방향이다. 전시형 사이트, 브랜드 사이트, 아카이브 플랫폼을 고민한다면 아래에서 사례와 협업 방식을 확인해 보길 권한다.
마무리와 다음 스텝
홍익대학교 산업디자인학과의 What If 웹사이트는 '쓸모없음의 쓸모'라는 관념을 화면 언어로 옮기는 데 성공한 사례다. 절제된 컬러, 반복되는 워드마크, 은유로서의 'Enter'가 개념과 인터페이스를 한 몸으로 묶었다. 다음 단계는 세 가지로 좁혀진다. 첫째, 옅은 회색 영문 카피의 대비를 높여 이중언어 가독성을 확보한다. 둘째, 대형 배경과 작품 썸네일의 로딩 순서를 재배치해 LCP·CLS를 다잡는다. 셋째, 작품별 상세 페이지에 고유 메타데이터와 Event 구조화 데이터를 붙여 전시 종료 후에도 검색 가시성이 이어지게 한다. 몰입은 이미 완성됐으니, 이제 발견되게 만들 차례다.