한국 카본 - UX/UI Review
UX/UI ReviewCase Study

한국 카본

발행일

소재·제조 분야의 전문성을 기반으로 한 한국 카본 웹사이트를 UX/UI, 정보구조(IA), 접근성, 퍼포먼스 및 SEO 관점에서 입체적으로 진단하고, 서비스 목적 달성을 위한 개선 인사이트를 제시합니다.

더블루캔버스 자세히 보기
한국 카본 웹사이트 대표 화면

프로젝트 개요

한국 카본은 복합소재 전문 기업으로, 기술 신뢰성과 안정적 공급 역량을 동시에 요구받는 산업 생태계 한복판에 서 있습니다. 본 리뷰는 공개된 화면 구성과 일반 사용자 관점에서의 탐색 여정을 기준으로 작성했습니다. 특히 가시성(Visibility)이해가능성(Comprehensibility)을 중심으로 정보 계층을 점검했으며, 제품 라인업과 레퍼런스, ESG 관련 콘텐츠가 어떤 순서로 만나지며 어떤 맥락으로 연결되는지 분석했습니다. 또한 진입 경로(검색/직접/추천 등)에 따라 달라질 수 있는 초기 인상과 주요 행동 유도(문의, 다운로드, 파트너십 등)의 배치 효율성, 콘텐츠의 유지보수 가능성까지 고려하여 개선 아이디어를 도출했습니다. 본 문서는 내부 파일명이나 작업 히스토리가 아닌, 외부 사용자와 검색엔진이 실제로 경험하는 흐름을 기준으로 설명합니다.

리뷰는 크게 정보 설계, 상호작용, 시각 언어, 접근성, 성능과 SEO 다섯 축으로 구성됩니다. 각 축은 확인된 강점을 먼저 정리하고, 그 다음 실행 난이도와 영향도를 기준으로 개선 우선순위를 제안합니다. 또한 구성요소의 재사용 관점에서 디자인 시스템화 가능성을 고려해 버튼, 배지, 카드 그리드 등의 패턴을 통일하는 방안도 함께 제시했습니다. 최종적으로는 이해관계자(구매·개발·영업)가 공통으로 원하는 핵심 정보로 신속히 이동하도록 빠른 길(Shortcut)을 구성하는 것이 KPI 달성에 유리합니다.

UX/UI 인터랙션

첫 화면 히어로 영역은 브랜드 톤을 분명히 드러낼 수 있는 중요한 장치입니다. 히어로 카피는 사용자가 ‘무엇을 얻는가’를 직관적으로 이해하도록 가치 제안(Value Proposition) 중심으로 재구성하는 것을 권장합니다. 또한 1차 CTA는 ‘문의하기’, ‘제품 카탈로그 보기’처럼 명확한 행동을 제시하고, 2차 CTA는 ‘기술 리포트 다운로드’ 등 정보 탐색형 액션으로 병치하면 탐색 성향이 다른 사용자 모두를 포용할 수 있습니다. 네비게이션은 최대 2뎁스까지만 노출하고, 3뎁스는 문맥 내 링크로 연결하여 과도한 호버 메뉴를 억제하는 편이 모바일·PC 공통의 명료성을 높입니다.

카드형 리스트는 썸네일·타이틀·메타 정보 순서로 시각적 계층을 유지하고, 리스트와 상세의 컴포넌트를 한 세트로 설계해 유지보수를 단순화하는 것이 좋습니다. 버튼과 배지, 알림 박스는 반경, 음영, 타이포 스케일을 일관되게 유지하여 인지 부하를 줄여야 합니다. 인터랙션은 과도한 애니메이션 대신 포커스/호버 상태만 정확히 전달하고, 폼 요소는 오류 메시지를 필드 바로 아래에 제공하여 수정 행동을 빠르게 유도합니다. 마지막으로, 제품·레퍼런스 상세에서 근거 자료(데이터시트, 인증서, 테스트 결과)를 구조화된 블록으로 제공하면 B2B 맥락에서 신뢰와 전환율을 함께 끌어올릴 수 있습니다.

정보구조(IA)와 내비게이션

전반적인 메뉴 체계는 ‘회사 소개–제품–기술/인증–레퍼런스–문의’의 흐름으로 단순화하는 것이 이해와 학습 비용을 줄입니다. 특히 제품 군이 많은 경우에는 상위 카테고리에서 적용 산업해결 과제를 함께 제시해 사용자가 스스로 라우팅할 수 있게 돕는 것이 효과적입니다. 상세 페이지에서는 핵심 스펙, 적용 사례, 다운로드, 상담 CTA의 순서를 고정하여 각 페이지에서 길을 잃지 않도록 해야 합니다. 또한 레거시 문서(PDF 등)를 단순 업로드하기보다는 주요 표와 수치를 HTML로 재구성하여 검색성과 반응형 가독성을 확보하는 편이 유지보수와 SEO에 유리합니다.

브레드크럼은 현재 위치와 상위 맥락을 동시에 보여주는 최소한의 길잡이입니다. 모바일에서는 브레드크럼을 간략화하고, 데스크톱에서는 hover 시 하위 항목으로 점프 가능한 미니 패널을 제공해도 좋습니다. 검색엔진을 통한 진입을 고려하면 어느 페이지에서 시작하더라도 회사의 핵심 가치와 주력 제품 라인으로 이동하는 링크가 상시 보이는 것이 이상적입니다. 이는 사용자와 크롤러 모두에게 사이트 전반의 의미 네트워크를 명확히 전달합니다.

퍼포먼스와 SEO

이미지는 가능하면 WebPAVIF를 병행 제공하고, 주요 히어로 이미지를 제외한 모든 시각 자원에 지연 로딩(loading="lazy")을 적용하면 LCP·CLS 지표를 안정화할 수 있습니다. CSS와 자바스크립트는 사용량 기준으로 분리해 필수 영역 우선 로드 전략을 취하는 것이 좋습니다. 메타 정보는 title·description·og 태그를 페이지별로 구체화하고, 구조화 데이터(Organization/Product/Article)를 단계적으로 도입해 검색 결과의 풍부한 스니펫 노출 가능성을 높입니다. URL 규칙은 영문 슬러그를 사용해 크롤러와 공유에 유리하도록 유지합니다.

콘텐츠 전략 차원에서는 고객이 자주 묻는 질문, 적용 사례, 공정·소재 선택 가이드 같은 의사결정 보조 콘텐츠가 전환에 직접 기여합니다. 내부 링크를 통해 관련 제품과 기술 문서로 연결하고, 다운로드 전 입력 폼은 최소 필드만 요구하여 이탈을 줄이세요. 마지막으로, 사이트 전반에서 동일한 의미의 단어는 하나의 용어로 통일해 검색 쿼리 매칭과 사용자 이해를 동시에 개선하는 것을 권장합니다.

시각 언어와 접근성

색 대비는 본문 기준 최소 4.5:1, 큰 텍스트 3:1을 준수하는 팔레트를 기본값으로 삼아야 합니다. 버튼과 링크는 색상 외에도 형태·선·아이콘으로 상태를 구분하여 색각 이상 사용자를 배려합니다. 모든 이미지에는 구체적 맥락을 반영한 대체 텍스트를 제공하고, 작은 장식 이미지는 빈 alt로 처리합니다. 헤딩 계층은 H1–H2–H3 순서를 엄격히 지키고, 영역을 구분하는 카드·섹션에도 명확한 레이블을 부여하면 스크린리더 탐색 품질이 향상됩니다. 포커스 링은 숨기지 말고, 키보드만으로도 모든 인터랙션을 수행할 수 있어야 합니다.

브랜드 톤과 관련해서는 소재·기술의 정밀함신뢰를 전달하는 차분한 색 체계와 간결한 그리드가 적합합니다. CTA는 핵심 행동을 단일 색상으로 통일하고, 섹션 배경에 은은한 대비를 주어 정보 블록 구분을 돕습니다. 이러한 원칙을 컴포넌트 토큰(색상, 간격, 반경, 그림자)으로 추상화하면 향후 페이지 확장 시 일관성을 유지하면서도 개발 효율을 확보할 수 있습니다.

더블루캔버스와의 연계

더블루캔버스는 전략·콘텐츠·디자인·프론트엔드까지 이어지는 전 과정을 통합적으로 다루며, 데이터에 기반한 실질적 개선을 지향합니다. 초기 진단 이후에는 핵심 경로를 우선 최적화하고, 성과 대시보드를 통해 전환·체류·검색 지표의 변화를 투명하게 공유합니다. 한국 카본과 같은 제조·소재 기업의 특성을 반영해 B2B 의사결정 구조에 맞춘 내비게이션과 증거 기반 콘텐츠를 구성하고, 글로벌 확장을 고려한 다국어·영문 슬러그·국가별 스키마 전략을 병행합니다. 협업이 필요하시다면 아래 링크를 통해 대화를 시작하실 수 있습니다.

본 리뷰는 공개 자료를 기반으로 작성되었으며, 실제 제품·서비스 정책과는 다를 수 있습니다.