브랜드 사이트 UX/UI 리뷰

사이트 개요

LG생활건강은 생활용품·화장품·음료 등 다각화된 포트폴리오를 가진 기업으로, 브랜드 사이트는 방대한 정보 구조를 직관적으로 정리해 보여주는 것이 핵심 과제입니다. 첫 화면에서 기업 아이덴티티와 핵심 가치(지속가능성, 혁신, 품질)를 짧고 정확한 문장으로 전달하고, 이어지는 영역에서 제품/브랜드/지속가능경영/투자자정보 같은 대표 메뉴로 신속히 유도하는 흐름이 적절합니다. 특히 메인 히어로 영역에 과도한 크기의 배경 이미지나 장시간 재생되는 영상은 초기 로딩 지연과 시각적 피로를 초래할 수 있으므로, 해상도를 유연하게 낮춘 정적 이미지와 명도 대비가 좋은 타이포그래피 조합을 권장합니다.

탐색(네비게이션)은 최대 2단 구조로 제한하고, 3단 이상 깊어질 경우에는 검색(오토컴플리트 포함)과 태그형 필터를 병행해 사용자가 업무/관심사 기준으로 빠르게 목적지를 찾도록 돕는 것이 좋습니다. 퀵 링크(브랜드 A–Z, ESG 리포트, 뉴스룸, 채용)처럼 빈도가 높은 작업을 상단 고정 메뉴로 제공하면 재방문자 효율도 높아집니다. 본문 배치는 ‘문장 → 근거 → 행동’의 패턴을 유지하되, 성공사례·수상·인증·수치(예: 탄소 감축율, 포장재 경량화 수치)를 데이터 시각화와 함께 제시해 신뢰도를 높일 수 있습니다.

주의: 목록 카드 썸네일로 제공된 t.jpg/t.png 파일은 본문에서 사용하지 않습니다. 본문 대표 이미지는 1.jpg(또는 1.png)를 사용합니다.

UX 흐름

UX 흐름은 ‘탐색 난이도 최소화’와 ‘행동 유도 극대화’라는 두 목표에 맞춰 설계되어야 합니다. 상단 글로벌 내비게이션은 브랜드/제품, ESG, 뉴스룸, IR, 채용처럼 사용자 과업에 맞춘 용어로 단순화하고, 드롭다운에는 대표 카테고리와 바로가기를 함께 배치해 클릭 수를 줄입니다. 스크롤 진입 이후에는 섹션별로 8~14행 미만의 요약 문장을 두어 정보를 빠르게 훑어볼 수 있게 하고, 각 섹션 끝마다 1차 행동(브랜드 찾아보기, ESG 리포트 보기, 최신 뉴스 보기 등)을 버튼으로 배치해 사용자의 의사결정 지점을 명확히 제시합니다. 동일 계층의 버튼 라벨은 문장형이 아닌 동사형(‘보기/다운로드/신청’)으로 통일하는 것이 인지 부하를 낮춥니다.

카드/리스트 UI는 썸네일–제목–보조 정보(분류/날짜/태그)–행동 버튼 순서로 통일해 패턴 학습을 돕고, 요소 간 간격은 8의 배수 체계를 유지해 리듬을 맞춥니다. 접근성 측면에서는 키보드 포커스 순서를 DOM과 일치시키고, 포커스 스타일을 커스텀하더라도 최소 3:1 이상의 대비를 확보합니다. 양가시그널(예: 비활성 버튼인데 hover 스타일이 보이는 문제) 제거, 스켈레톤 UI를 통한 지각적 대기시간 단축, 인터랙션 지연 100ms 이하 유지 등 마이크로 UX까지 다듬으면 체감 품질이 크게 개선됩니다.

콘텐츠 전략

기업 스토리텔링은 추상적 수사 대신 검증 가능한 사실과 데이터를 중심으로 구성하는 것이 효과적입니다. 예를 들어 ‘지속가능경영’ 섹션에서는 연도별 탄소배출량/감축 목표, 재활용 소재 사용 비율, 공급망 관리 지표를 표준화된 지표(예: GRI, SASB)와 연결해 제시하고, 관련 PDF/데이터 다운로드를 함께 제공해야 합니다. 브랜드/제품 영역은 대중 친화적인 카피와 함께 피부 타입/성분/효능 태그로 탐색 경로를 개선하고, 각 상세 페이지에는 임상/검증 수치, 안전성 정보, 사용법(텍스트+짧은 동영상/애니메이션), 자주 묻는 질문을 포함합니다. 뉴스룸은 ‘핵심 요약 3줄 + 본문’ 구조로 구성해 검색 트래픽 유입 후 빠른 이해를 돕고, Open Graph/Twitter 카드 메타를 최적화해 SNS 공유 시 시각적 가독성을 보장합니다.

카피라이트는 ‘주장 → 근거 → 행동’의 순환을 유지하며, 숫자/고객 목소리/외부 인증을 근거로 배치합니다. 한글 맞춤법과 용어 표준(띄어쓰기, 단위 표기)을 문서 전반에 일관되게 적용하고, 한자/영어 병기는 필요한 곳에만 제한적으로 사용합니다. 멀티미디어는 웹 최적화된 자산(WebP/AVIF와 자막이 포함된 MP4, 필요 시 HLS)으로 제공하며, 캡션에는 ‘이미지/영상이 무엇을 증명하는가’를 분명히 적습니다. 마지막으로, 모든 다운로드 자료에는 파일 크기, 포맷, 업데이트 날짜를 표시해 사용자의 신뢰와 편의성을 함께 확보합니다.

기술 · SEO 체크

성능 최적화의 1순위는 이미지입니다. 대표 이미지는 1200px 기준으로 리사이즈하고, WebP/AVIF를 우선 제공하되 원본(JPEG/PNG)도 폴백으로 유지합니다. <img>에는 loading="lazy"와 width/height 속성을 지정해 CLS를 줄이고, CSS에서는 content-visibility: auto를 적절히 활용해 페인트 비용을 절감합니다. 폰트는 가변 폰트를 1종만 사용하거나, 서브셋을 제작해 초기 FCP를 낮춥니다. 스크립트는 defer 속성으로 지연 로딩하고, 서드파티 스크립트는 영향 범위를 측정해 꼭 필요한 것만 남깁니다.

SEO 측면에서는 페이지당 h1은 1개, 의미 있는 h2~h3 계층을 유지하고, 제목(50~60자)과 설명(110~150자)을 검색 의도에 맞춰 작성합니다. 구조화 데이터(Organization, BreadcrumbList, Article)를 상황에 맞게 추가하고, 이미지에는 대체 텍스트를 제공합니다. sitemap.xml과 robots.txt를 동기화하고, 캐시 무효화 전략(파일 해시, 버전 파라미터)을 통해 배포 직후 색인이 꼬이지 않도록 합니다. 접근성은 ARIA 레이블 남용을 피하고 네이티브 요소를 우선 활용하며, 포커스 트랩, 대비, 키보드 내비게이션을 검증합니다.

더블루캔버스 소개

더블루캔버스는 브랜드/캠페인 사이트, 프로덕트/마케팅 랜딩, 사내/공공 웹 프로젝트 전반에서 UX 컨설팅과 설계, 인터페이스 디자인, 퍼블리싱, 그리고 성능·접근성·SEO 기술 개선까지 일관된 기준으로 지원합니다. 본 리뷰에서 제안하는 개선안은 메시지–증거–전환의 흐름과 사용자 과업 중심의 정보 구조, 그리고 실측 기반의 성능/접근성 점검을 바탕으로 도출됩니다. 우리는 초기 진단–우선순위 매핑–실행 로드맵–QA/계측–지속 개선으로 이어지는 체계를 통해 ‘보이는 품질’과 ‘체감 속도’를 동시에 끌어올립니다.

특히 대규모 브랜드/기업 사이트처럼 이해관계자가 많은 프로젝트에서도, 공통 KPI(전환/재방문/체류/검색유입)를 분명히 설정하고 디자인·카피·개발이 같은 목표를 바라보도록 일하는 방식을 정리해 드립니다. 필요한 경우, 사내 팀과 합동 스프린트를 운영해 빠른 실험과 검증을 반복하며, 거버넌스 체계(컴포넌트/카피 가이드, 접근성 체크리스트, 릴리즈 플레이북)를 함께 구축합니다. 프로젝트 문의는 언제든 bluecvs.com을 통해 연락 주세요.

결론

LG생활건강 사이트의 핵심 과제는 다양한 이해관계자에게 방대한 정보를 빠르고 정확하게 전달하는 일입니다. 이를 위해서는 ‘명확한 언어–증거 제시–행동 유도’의 일관된 흐름과, 성능/접근성/SEO의 기본기를 굳건히 지키는 것이 최우선입니다. 네비게이션 단순화, 데이터 기반 스토리텔링, 이미지·폰트 최적화, 메타/구조화 데이터 정비만으로도 체감 품질은 크게 향상될 수 있습니다. 이후에는 검색 로그/행동 데이터 기반의 A/B 테스트와 콘텐츠 운영 가이드를 병행해 학습-개선을 지속하는 체계를 마련하시길 권합니다.