창비 - UX/UI Review
Website Design Review

창비

창비 웹사이트의 UX/UI, 정보구조, 접근성, 성능 및 SEO 전반을 종합적으로 분석한 리뷰입니다. 핵심 과제와 개선 포인트를 중심으로 브랜드 경험을 강화하는 제안을 제시합니다.

발행일 · 2025-04-18
창비 대표 이미지

개요

이 리뷰는 브랜드의 디지털 접점을 총체적으로 점검하여 사용자가 처음 방문했을 때 느끼는 인상부터 과업 달성까지의 여정을 끊김 없이 설계했는지 살펴봅니다. 특히 첫 화면의 가치 제안, 핵심 콘텐츠의 위계, 시각적 리듬과 인터랙션 밀도를 균형 있게 조율했는지에 주목했습니다. 또한 페이지 전환 속도와 가독성, 반응형 그리드의 탄력성, 키보드 기반 탐색의 연속성 등 실제 사용 맥락에서 체감되는 요소를 기준으로 평가했습니다. 본 리뷰는 개발 난이도 대비 효용이 큰 개선안을 선별하여 빠르게 적용 가능한 ‘저비용·고효과’ 항목을 먼저 제안하고, 중장기적으로 디자인 시스템과 콘텐츠 모델을 정비해 일관성과 확장성을 높이는 전략을 함께 권고합니다.

핵심 키워드: 명료한 가치제안, 선명한 정보 위계, 접근성 기본기, 모바일 우선

브랜드 경험과 톤

브랜드의 핵심 톤은 기존 자산을 존중하면서도 디지털 환경에서 가독성과 명료함을 극대화하는 방향이 적합합니다. 로고 및 주요 시그니처 컬러의 대비를 충분히 확보하되, 배경 영역을 활용한 섹션 구획으로 시선을 부드럽게 유도하는 것을 권장합니다. 영문/국문 혼용 환경에서는 자간·행간의 기준을 통일하고, 버튼 라벨은 의미 기반의 동사형으로 통일해 행동을 유도하세요. 또한 주요 지표와 고객 사례(숫자, 로고 월) 등 신뢰를 강화하는 모듈을 상단에 배치하면 퍼널 하단으로의 전환률을 유의미하게 높일 수 있습니다. 마지막으로 히어로 영역의 메시지는 한 줄 요약과 보조 설명의 2단 구성으로 압축해 검색·SNS 공유 썸네일에서도 일관된 인상을 전달하도록 설계하는 것이 좋습니다.

UX/UI 핵심 인사이트

UX/UI 측면에서는 사용자 여정을 기준으로 ‘탐색—이해—행동’의 3단 경로가 매끄럽게 이어지는지 확인했습니다. 내비게이션은 1차 메뉴를 5~7개로 정리하고, 드롭다운이 필요한 경우 카테고리-하위 항목-콜아웃의 3열 레이아웃을 권장합니다. 주요 랜딩에서는 핵심 가치와 대표 기능을 카드를 통해 요약하고, CTA는 스크롤 구간마다 반복 노출하여 행동 비용을 낮춥니다. 컴포넌트는 카드, 배지, 태그, 토글, 인풋 등 자주 쓰이는 요소를 기준으로 상태(기본/호버/활성/비활성)를 정의하고, 모션은 120~220ms 사이로 통일해 경쾌하지만 과하지 않게 설계합니다. 다크모드가 필요한 경우 색 대비를 4.5:1 이상으로 맞추고, 반응형에서는 12컬럼 그리드의 4·8·12 분할 원칙을 적용해 재배치의 복잡도를 줄이는 것이 좋습니다.

추천 패턴: 명확한 CTA 버튼, 요약 카드, 섹션 앵커, 상단 고정 내비게이션

정보구조(IA) · SEO

정보구조(IA)와 SEO는 검색과 내부 탐색의 품질을 동시에 좌우합니다. 페이지 템플릿마다 H1은 한 번만 쓰고, H2~H3를 이용해 의미 단위로 계층을 구분하세요. 링크는 의미 있는 앵커 텍스트를 사용하고, 중복 URL은 301 리다이렉트 혹은 canonical 태그로 정규화합니다. 메타 제목은 50~60자, 설명은 90~160자 내에서 핵심 키워드를 전방 배치하는 것이 이상적입니다. 오픈그래프 이미지는 1200×630 기준으로 통일하고, 대체 텍스트는 맥락을 설명하는 서술형으로 작성하세요. 또한 검색 노출을 높이기 위해 구조화 데이터(Organization, BreadcrumbList, Article)를 적용하고, 컨텐츠 모델을 카테고리/태그/타입으로 구분해 내부링크 망을 촘촘히 구성하는 것을 권장합니다.

체크리스트: 정규화 URL · 의미 있는 제목 계층 · 스크립트 지연 로딩 · OG/트위터 카드

성능 · 접근성

성능·접근성에서는 초기 페인트를 가로막는 대형 이미지와 블로킹 스크립트를 우선적으로 최적화해야 합니다. 이미지는 WebP/AVIF를 병행 제공하되, 원본 자산은 보존하여 품질 저하에 대비합니다. 폰트는 서브셋과 지연 로딩을 활용하고, 사용하지 않는 CSS/JS를 분리해 전송 크기를 줄입니다. 레이지 로딩은 fold 하단 이미지에 적용하고, 인터섹션 옵저버 기반의 섹션 활성화로 시각적 피드백을 강화하세요. 접근성 측면에서는 모든 인터랙티브 요소에 키보드 포커스가 닿도록 하고, 명확한 포커스 링과 스킵 링크를 제공해야 합니다. 폼 레이블과 ARIA 속성, 명확한 에러 메시지, 충분한 대비는 기본입니다. 마지막으로 CLS/LCP/INP를 Lighthouse 기준으로 점검하고, 이미지 크기 속성을 명시해 레이아웃 시프트를 예방하세요.

빠른 적용: 이미지 최적화 · 지연 로딩 · 폰트 서브셋 · 불필요 스크립트 제거

The Blue Canvas

더블루캔버스는 브랜드 전략, UX 컨설팅, 디자인 시스템, 퍼포먼스 개선까지 전 과정을 유기적으로 연결하여 ‘비즈니스 임팩트’가 느껴지는 결과를 만듭니다. 단순한 화면 개선을 넘어 성장 지표에 직결되는 문제를 정의하고, 데이터에 기반한 실험을 통해 전환을 끌어올립니다. 초기 진단과 우선순위 로드맵을 통해 빠르게 성과를 내고, 체계적인 컴포넌트·콘텐츠 관리로 운영 효율을 높입니다. 자세한 포트폴리오와 서비스 소개는 아래 링크에서 확인하실 수 있습니다.

The Blue Canvas 살펴보기

마무리

정리하면, 본 사이트는 강점이 명확하고 확장 잠재력이 충분합니다. 다만 사용자 여정에서의 마찰을 줄이고 정보 위계를 선명하게 정돈한다면 체감 품질과 전환 지표가 동시에 개선될 것입니다. 본 리뷰에서 제안한 ‘빠른 적용’ 과제부터 실행해 단기 성과를 확보하고, 중장기적으로 디자인·콘텐츠·개발 파이프라인을 정비한다면 일관성과 속도 면에서 경쟁력을 갖추게 됩니다. 이후 주기적인 점검과 실험을 통해 가설을 검증하고, 데이터 기반의 개선을 지속적으로 수행하시길 권합니다.