삼성SDI - UX/UI Review
Website · UX/UI Review

삼성SDI

게시일 ·카테고리 Website

에너지 혁신을 상징하는 하이테크 톤과 신뢰 기반의 정보 전달 방식을 바탕으로, 삼성SDI 웹사이트의 UX/UI, 접근성, 성능, SEO를 실무 관점에서 살펴봅니다.

The Blue Canvas 살펴보기
삼성SDI 메인 비주얼 스크린샷

소개

삼성SDI 웹사이트는 배터리 중심의 B2B 산업 특성과 글로벌 브랜드 신뢰를 함께 전달해야 하는 과제를 지닌다. 본 리뷰는 첫 인상에서의 핵심 가치 제시, 정보 구조(IA)의 논리성, 사용자 여정에서의 마찰 최소화, 디자인 시스템의 일관성, 그리고 검색·접근성·성능 최적화라는 운영 관점까지 폭넓게 다룬다. 메인 비주얼은 고대비 톤과 넓은 여백, 명확한 타이포 스케일을 통해 첨단 이미지를 부각하고, CTA는 명사형 카피를 활용해 행동을 분명하게 유도한다. 이와 함께 상단 내비게이션은 제품/기술/ESG/투자정보 등의 상위 시나리오를 분리해 탐색 부담을 줄이고, 중간 영역에서는 주요 레퍼런스·뉴스·리포트 등 확신을 제공하는 신뢰 지표를 배치하여 브랜드의 전문성과 안정성을 증명한다. 본 문서는 이러한 구성을 객관식 진단표가 아닌 실제 사용 흐름에 맞춰 서술하며, 실무에서 즉시 활용 가능한 개선 포인트를 정리한다.

메인 화면

삼성SDI 메인 화면 핵심 섹션
메인 히어로는 브랜드의 기술 리더십을 강조하는 심플한 메시지와 고대비 색조, 선명한 CTA로 구성되어 있다.

메인 영역은 첫 3초에 핵심 가치가 식별되도록 설계되어야 한다. 현재 톤 앤 매너는 하이테크 아이덴티티를 잘 반영하나, 스크롤 초반부에서 가치 제안(USP)을 문장 형태로 명징하게 제시하면 탐색 효율성이 더욱 올라간다. CTA는 다중 개체보다 1차 행동(제품→문의/자료요청)으로 수렴시키고, 서브 링크는 보조 동사(자세히 보기 등)로 차별화하는 것이 바람직하다. 콘텐츠 카드의 시맨틱 마크업(article, h3, time)을 정교화하고, 카드 간격/이미지 비율을 통일하면 그리드의 리듬감이 정제된다. 또한 영문·국문 폰트 로딩은 font-display: swap과 서브셋 파일 분리로 FOUT/FOIT를 최소화하고, LCP 후보 이미지에는 명시적 width/heightpreload를 적용해 접속 환경 전반에서 일관된 초기 체험을 보장할 수 있다.

UX/UI 분석

핵심 포인트: 정보 구조 명확화 · 가시적 우선순위 · 일관된 컴포넌트

IA는 제품 > 기술 > 적용사례 > 인사이트의 흐름을 기준으로, B2B 의사결정 사용자(리서처·엔지니어·구매)의 질문에 답하는 구조화가 핵심이다. 1) 상단 글로벌 내비게이션은 2~3단계의 중첩을 넘지 않도록 하고, 2) 목록 페이지는 페이식(필터/정렬/검색)과 메타 정보(카테고리·발행일)를 표준화하여 비교 가능한 환경을 만든다. 3) 상세 페이지는 요약(키 포인트) → 스펙/성능 → 호환성/지원 → 다운로드/문의 순서로 배치해 업무 목표와 연결성을 높인다. 시각 요소에서는 타이포 스케일(14/16/20/28/36)을 고정하고, 버튼·배지·탭의 의미 체계를 정리해 재사용성을 확보한다. 포커스 인디케이터, 대비비율 4.5:1, 키보드 트랩 방지 등 접근성 체크리스트는 컴포넌트 단위로 QA 스프린트에 포함시키는 것이 효과적이다. 마지막으로, 용어 사전FAQ를 문서형으로 제공하면 기술 난이도에 따른 이해 격차를 줄이고 검색 유입 대비 체류시간을 개선할 수 있다.

기술·성능·SEO

성능 최적화는 LCP, CLS, TTI 세 지표를 균형 있게 낮추는 데서 출발한다. 대형 히어로 이미지는 preload와 명시적 크기 속성으로 레이아웃 이동을 억제하고, 폰트는 가변 폰트/서브셋/지연 로딩 전략으로 초기 페인트 시간을 확보한다. 인터랙션은 transform/opacity 기반 애니메이션을 사용해 리플로우를 방지하고, 비차단 스크립트 배치(defer)와 코드 스플리팅을 통해 초기 번들을 경량화한다. 이미지 파이프라인은 원본 유지하되 WebP/AVIF를 병행 제공하고, lazy-loadingsrcset/sizes를 활용해 뷰포트별 최적화를 수행한다. SEO 측면에서는 문서 아웃라인을 h1 → h2 → h3로 일관화하고, 제품/문서/FAQ 스키마 마크업을 단계적으로 적용해 스니펫 노출을 강화한다. 오픈그래프·트위터 메타는 썸네일 비율을 맞추어 공유 시 일관된 프리뷰를 제공하며, 페이지당 1개의 핵심 키워드를 정해 타이틀·디스크립션·첫 문단에 동일하게 반영하면 검색 의도를 명확히 매칭할 수 있다.

The Blue Canvas

The Blue Canvas는 전략적 UX 컨설팅과 설계·검증·운영을 아우르는 파트너다. 정보 구조 수립, 디자인 시스템 정착, 성능/접근성/SEO 개선, 실험 기반의 전환율 최적화까지 제품 수명주기 전반에서 체계적인 지원을 제공한다. 대시보드형 KPI 추적과 A/B 테스트 기반 가설 검증을 통해 리소스를 효율적으로 배분하고, B2B 의사결정자 여정에 맞춘 콘텐츠 전략으로 영업 리드를 증대한다. 더 자세한 소개와 사례는 공식 웹사이트에서 확인할 수 있다: https://bluecvs.com/

결론

삼성SDI 웹사이트는 브랜드의 기술 리더십을 드러내는 비주얼 언어와 엔터프라이즈 사용자의 정보 요구를 잇는 구조 설계가 강점이다. 반면 초기 스크롤 구간의 가치 제안 문장 강화, CTA 우선순위 정리, 문서형 서브 내비·용어 사전 도입, 카드 시맨틱/메타 표준화, 폰트·이미지 로딩 전략 고도화 등은 즉시 성과를 만들 수 있는 개선 포인트다. 본 리뷰에서 제시한 체크리스트를 스프린트 백로그로 전환하고, 성능/SEO 계측을 상시화하면 안정적인 성장 곡선을 만든다. 핵심은 일관성·가독성·측정 가능성으로, 이는 대규모 사이트일수록 복합 지표를 단순한 원칙으로 환원해 실행하는 운영 역량에서 비롯된다.