한컴 - UX/UI Review
Website Review

한컴

UX/UI 케이스 리뷰 ·

브랜드 아이덴티티와 실사용 시나리오를 균형 있게 연결해, 탐색이 빠르고 일관된 경험을 제공하는 것을 목표로 분석했습니다. 본 리뷰는 정보구조, 상호작용, 콘텐츠 전략, 접근성, 퍼포먼스 관점에서 개선 포인트를 정리합니다.

더블루캔버스 살펴보기
한컴 웹사이트 주요 화면
주요 랜딩 화면의 핵심 메시지와 비주얼 히어라키

프로젝트 소개

한컴 웹사이트는 다각화된 제품 포트폴리오와 B2B·B2C 고객군을 동시에 아우르는 정보 전달이 핵심 과제입니다. 본 리뷰는 현 구조를 사용자 여정 기준으로 재배열하여, 첫 진입부터 구매·문의·채용 등 주요 전환으로 이동하는 길을 짧고 명확하게 만드는 데 초점을 맞추었습니다. 특히 카테고리 네이밍과 랜딩의 메시지 밀도를 조정해 인지 부하를 낮추고 선택지를 축소하는 전략을 제시합니다. 또한 콘텐츠 블록의 재사용성을 고려해 디자인 시스템화하고, 카드·배지·알림 등 반복 패턴의 시각적 일관성을 강화하여, 브랜드 신뢰도를 높이는 방향으로 설계합니다.

본 문서는 히어라키, 내비게이션, CTA 배치, 폼·검색·필터 등 상호작용 패턴, 그리고 접근성·성능 최적화까지 포함합니다. 각 섹션은 실제 화면 흐름을 가정한 시나리오 기반으로 구성되어 있어 실무 적용 가능성이 높습니다. 아울러 SEO 관점에서 정보 구조와 메타 데이터, 오픈그래프, 스키마 마크업까지 고려하여 탐색엔진 친화도와 공유 확산성을 동시에 확보하는 것을 목표로 합니다.

핵심 요약: 정보 구조의 단순화, 메시지 밀도 조정, 패턴의 일관성, 전환 경로의 단축, 접근성과 성능의 체계적 개선.

문제 정의와 목표

현재 정보 구조는 제품/솔루션/서비스 용어가 혼재되며 카테고리 깊이가 일정하지 않아, 사용자가 자신에게 맞는 진입점을 찾기 어렵습니다. 또한 1차 내비게이션과 히어로 영역 메시지가 중복되거나 역할이 모호해 상위 가치 제안의 전달력이 낮아질 위험이 있습니다. 본 리뷰는 상위 3초 안에 핵심 가치를 인지시키고, 다음 액션(체험, 구매, 문의, 데모 신청)으로 자연스럽게 이어지는 여정을 만드는 것을 1차 목표로 둡니다. 그 과정에서 메뉴 체계를 과업 기반(Task-based)으로 정돈하고, 라벨을 사용자 언어로 교정합니다.

측정 가능한 목표로는 전환 퍼널의 이탈 감소, 제품 상세 페이지 체류 시간 증대, 검색 유입 키워드 다각화, 코어 웹 바이탈 개선을 제시합니다. 특히 LCP·CLS·INP 지표는 머천다이즈 이미지 최적화, 폰트 디스플레이 전략, 스크립트 지연 로딩으로 달성 가능합니다. 더불어 CTA 가시성 규칙(간격·대비·스크롤 노출 빈도)을 수립해 일관된 클릭 경험을 제공하고, 반복 영역은 컴포넌트화해 운영 효율을 높입니다.

정보구조와 UX 전략

메뉴는 ‘고객 과업’ 중심으로 재편하는 것이 유효합니다. 예: 도입 검토(개요·가격·도입사례) → 실제 사용(가이드·다운로드·교육) → 확장(애드온·플러그인·파트너). 이러한 구조는 사용자의 기대 모델과 일치해 탐색 효율을 높입니다. 또한 랜딩에서는 상단 히어로의 주요 가치 제안을 1문장으로 압축하고, 그 아래에 제품 라인업을 3~5개 카드로 제한해 선택 피로를 줄입니다. 카드에는 대표 스크린샷, 핵심 기능 3가지, 명확한 CTA를 배치합니다.

상호작용 설계에서는 검색과 필터를 우선 제공합니다. 입력 폼은 단계적 공개(Progressive Disclosure)로 인지 부담을 완화하고, 오류 예방·복구 메시지를 명확히 하여 폼 완료율을 높입니다. 접근성 측면에선 키보드 포커스 경계, 대비 기준(최소 4.5:1), 대체 텍스트 정책, 라이브 영역 알림 사용 등 WCAG 원칙을 반영합니다. 또한 도움말·FAQ를 상황별로 인라인 제공해 스스로 문제를 해결할 수 있도록 돕습니다.

비주얼 디자인 시스템

브랜드 톤앤매너는 신뢰감과 실행력을 동시에 담아야 합니다. 기본 색상은 브랜드 블루를 중심으로, 보조 색으로 중립 계열을 두어 가독성과 대비를 확보합니다. 제목·본문·캡션 타이포 스케일을 정의하고, 컴포넌트 레벨에서 버튼·배지·알림·카드·탭·모달 등의 상태(활성/비활성/호버/포커스)를 명세합니다. 이미지 가이드는 캡션 일관성과 대체 텍스트 정책을 포함하며, 그래프·도표는 색맹 친화 팔레트를 사용해 정보의 구분을 보장합니다.

에셋 운영 관점에선 리스트 노출용 썸네일과 본문 대표 이미지를 역할 분리하여 사용하며, 향후 WebP/AVIF로 확장 시에도 원본을 보존합니다. 또한 레이지 로딩과 명시적 크기 지정으로 레이아웃 시프트를 방지하고, 컴포넌트 토큰화(간격·그리드·그림자·반경)를 통해 디자인 변경 시 파급 범위를 최소화하며 문서화로 협업 효율을 높입니다.

더블루캔버스 소개

더블루캔버스는 데이터 기반의 전략과 미감 있는 인터랙션을 통해, 비즈니스 임팩트를 만드는 디지털 경험을 설계합니다. 브랜드 스토리텔링, UX 리서치, 정보구조 수립, UI 컴포넌트 시스템, SEO·퍼포먼스 최적화까지 전 과정을 통합적으로 제공합니다. 특히 검색 친화 콘텐츠 아키텍처전환 중심 랜딩 구조에 강점을 갖고 있으며, 대규모 운영을 고려한 디자인 토큰·문서화 체계를 통해 장기 유지보수 비용을 낮춥니다. 파트너십 문의는 아래 링크를 통해 진행하실 수 있습니다.