디자인코리아 2024 - UX/UI Review
Website Review

디자인코리아 2024

Publication·

국내 대표 디자인 행사인 디자인코리아 2024의 공식 웹사이트를 사용자 여정, 정보 구조, 인터랙션, 접근성 및 성능 관점으로 면밀히 살펴보고, 핵심 화면 구성을 중심으로 개선 포인트와 강점을 정리했습니다.

The Blue Canvas 살펴보기
디자인코리아 2024 메인 비주얼

개요 및 브랜드 컨텍스트

디자인코리아 2024 웹사이트는 방대한 행사 정보를 효율적으로 안내해야 하는 전형적인 정보 중심형 사이트입니다. 관람객, 참가사, 바이어 등 복수의 핵심 페르소나가 존재하기 때문에 홈 화면에서 곧바로 주요 시나리오(전시 관람 정보, 프로그램 일정, 참가·등록, 오시는 길 등)로 빠르게 진입할 수 있는 명확한 행동 동선이 필요합니다. 본 리뷰는 이러한 목적성에 얼마나 충실한지, 사용자가 목표 작업을 완수하는 데 걸리는 인지적 부담과 클릭 수를 얼마나 줄였는지에 초점을 맞춰 분석했습니다. 특히 헤더 내비게이션의 어휘 체계, 히어로 영역의 메시지·비주얼 조합, 섹션 간 대비와 위계, 그리고 푸터의 정보 밀도와 신뢰 요소 배치 등을 종합적으로 점검했습니다.

아울러 본 사이트는 행사 특성상 공지·변동 정보가 잦을 수밖에 없습니다. 따라서 콘텐츠 관리의 연속성과 변경 시 사용자가 혼란을 느끼지 않도록 하는 가이드가 중요합니다. 본 리뷰에서는 UI 구성요소의 상태 규칙과 라벨링 일관성, 날짜·시간 표기, 다국어/모바일 대응까지 폭넓게 살펴보고, 핵심 개선안을 제안합니다.

UX 흐름과 정보 구조(IA)

첫 방문자가 수행하려는 작업은 보통 세 가지로 나뉩니다. 관람 계획 수립(운영 시간, 장소, 티켓/등록), 프로그램 확인(컨퍼런스·포럼·부대행사 일정 및 연사 소개), 참가안내(기업/기관 신청, 부스 안내)입니다. 최상단 내비게이션과 홈 섹션 배치를 통해 이 세 흐름이 즉시 드러나며 상호 간에 혼동되는 용어(예: 이용안내/관람안내/참가안내)를 줄여야 합니다. 현재 구성을 기준으로 보면 상위 카테고리는 적절하나, 일부 세부 페이지로의 진입이 2~3뎁스로 깊어지는 구간이 존재합니다. 이 경우 동일 범주의 항목을 묶어 중간 허브를 제공하고, 카드·버튼의 시각적 차등(텍스트 대비/면적/아이콘)을 통해 사용자가 길을 잃지 않도록 돕는 것이 바람직합니다.

또한 검색과 필터는 행사형 사이트에서 체감 효율을 크게 끌어올립니다. 프로그램 일정은 날짜/트랙/장소 기준 필터를 기본 제공하고, 선택 상태를 상단 칩으로 요약해 빠른 해제·수정을 유도하면 좋습니다. 게시 공지의 경우 최신순·중요도 태깅을 병행하여 모바일에서도 한 화면 내 핵심 정보가 한 눈에 파악되도록 리스트 밀도를 조정할 필요가 있습니다. 세션 상세 페이지는 CTA(사전등록, 캘린더 추가)를 접점 상단에 고정하고, 연사 소개·관련 세션 이동 버튼을 인접 배치하여 탐색-행동의 전환 마찰을 최소화하는 구성이 이상적입니다.

비주얼 아이덴티티와 인터랙션

행사 브랜딩 컬러를 기반으로 한 다이내믹 그라디언트와 큼직한 타이포그라피는 주목도를 확보하는 데 효과적입니다. 다만 강한 색면이 많은 경우 본문 가독성을 위해 여백/줄간격/문단 간격을 충분히 확보해야 합니다. 버튼·뱃지·하이라이트 박스에는 브랜드 키 컬러를 활용하되, 본문 대비비(텍스트/배경)는 WCAG 2.1 AA 기준(일반 텍스트 4.5:1 이상)을 유지하는 것이 중요합니다. 인터랙션은 과도한 모션보다는 상태 변화의 명확성(호버/포커스/활성화)과 접근성 속성(ARIA 라벨, 키보드 포커스 반경)을 우선시해야 합니다. 특히 모바일에서는 뎁스가 깊은 메뉴보다 요약-확장 패턴(아코디언/탭)으로 정보량을 단계적으로 드러내는 것이 피로도를 낮춥니다.

히어로 이미지·프로그램 하이라이트 카드·전시 스냅샷 등 대표 시각 자료는 중복 노출을 지양하고 맥락에 맞는 캡션을 제공해야 검색·공유 시 의미가 온전히 전파됩니다. 본 페이지에서는 제공된 이미지를 기본 품질로 유지하면서도 lazy-loading을 통해 초기 렌더 비용을 완화했습니다. 썸네일은 리스트 전용으로 사용하고, 본문에는 메인 비주얼을 단일 노출하여 집중도를 확보했습니다.

핵심 키워드: 브랜드 일관성, 명확한 상태 표현, 가독성 기반 레이아웃, 모바일 우선 탐색

접근성과 성능 최적화

행사 사이트는 정보 접근성의 공공성에 준하는 품질을 목표로 해야 합니다. 키보드 전용 사용자도 모든 내비게이션 요소에 접근할 수 있어야 하며, 포커스 링은 브랜드 톤과 조화를 이루되 충분한 대비로 가시성을 확보해야 합니다. 이미지에는 의미 중심의 대체 텍스트를 제공하고, 장식 요소에는 적절히 aria-hidden을 부여해 보조 기술 사용자의 탐색 부담을 줄입니다. 성능 측면에서는 이미지의 지연 로딩과 합리적인 크기 조절, 서브셋 웹폰트 적용, 중요 스크립트의 지연/지시 로딩 정책을 병행하여 CLS·LCP 지표를 안정화하는 것이 중요합니다.

또한 구조화된 메타 태그와 명확한 문서 구조(h1-h2-h3 위계, 의미 있는 링크 라벨)는 검색 가시성과 공유 확장성에서 큰 차이를 만듭니다. 본 리뷰의 마크업은 이러한 원칙을 반영하여 제목·부제·섹션·목차를 체계적으로 배치했으며, 부가 스크립트로 목차 활성 상태를 제공해 독자가 위치를 쉽게 파악하도록 설계했습니다.

The Blue Canvas 소개

The Blue Canvas는 브랜드·서비스 경험을 데이터와 디자인의 균형으로 다루는 디지털 스튜디오입니다. 우리는 사용자의 실제 맥락에서 출발해 비즈니스 목표에 연결되는 UX 전략을 제안하고, 디자인 시스템과 컴포넌트 단위로 확장 가능한 인터페이스를 구축합니다. 리서치-IA-프로토타이핑-테스팅-디자인 운영까지 전 주기를 아우르는 협업 체계를 통해, 웹사이트·프로덕트·캠페인 등 다양한 접점에서 일관된 경험을 제공합니다. 더 자세한 정보는 아래 링크에서 확인하실 수 있습니다.