개요 및 핵심 인사이트
셀트리온 웹사이트는 글로벌 바이오 의약품 기업으로서의 신뢰성과 임상/파이프라인 정보를 체계적으로 보여주는 데 집중하고 있습니다. 상단 내비게이션은 제품·연구·투자정보 등 주요 여정을 잘 구분해 주며, 첫 화면의 비주얼 톤은 안전성과 혁신을 함께 암시하는 녹색계열 그라데이션과 사진 사용으로 브랜드 포지셔닝을 분명히 합니다. 다만 메인 히어로의 메시지가 제품 가치 제안과 투자자/의료진/구직자 등 핵심 페르소나별 기대 정보에 바로 연결되는가에 대해서는 더 날카로운 연결 설계가 요구됩니다. 특히 CTA의 행위 동사와 링크 목적지의 정보밀도를 조정하면 초기 이탈을 줄이고 목표 페이지 도달률을 높일 수 있습니다. 본 리뷰는 첫인상, 내비게이션 구조, 가독성과 접근성, 성능 및 SEO까지 전 과정을 관통하며, “의미 단위로 묶고(Chunk) 우선순위를 명확히 표지(Signpost)한다”는 원칙으로 개선 포인트를 정리합니다.
브랜딩과 스토리텔링
브랜드 레벨에서 가장 중요한 지점은 “과학의 신뢰”와 “환자 삶의 개선”을 하나의 이야기로 엮는 서사 구조입니다. 현재 톤앤매너는 청정·안정의 이미지를 잘 전달하지만, 스토리 레벨에서 핵심 가치 제안(예: 치료 접근성 향상, 비용 혁신, 글로벌 임상 협력 등)을 타깃별로 재구성해 보여주는 장치가 더 필요해 보입니다. 예를 들어 메인과 카테고리 랜딩에서 “임상 단계별 파이프라인 맵”과 “환자 임팩트 사례”를 교차 배치해 ‘왜 지금 이 기술이 의미가 있는지’를 직관적으로 제시하면, 기업 스토리가 단순 소개를 넘어 설득으로 전환됩니다. 또한 브랜드 어휘집(단어·문장 패턴)을 정의해 헤드라인, 리드 문장, CTA 버튼 문구의 일관성을 유지하면, 페이지 간 이동 시에도 ‘셀트리온다움’이 유지됩니다. 비주얼은 제품/연구/사람을 균형 있게 다루되, 연구 현장의 정밀함과 환자 중심 가치가 함께 보이도록 캡션과 크레딧을 충실히 제공하는 것이 좋습니다.
UX/UI 구성과 상호작용
내비게이션은 정보량이 많은 산업 특성상 중첩 메뉴를 활용하게 되는데, 이때는 깊이를 2~3단계로 제한하고, 동일 레벨 내 항목 수를 7±2로 관리하며, 그룹 간 간격 대비와 섹션 라벨의 의미적 구분을 강화하는 것이 좋습니다. 카드·리스트·테이블 패턴을 혼용할 때는 ‘과업 단서(다음 행동을 암시하는 요소)’를 카드 하단에 반복 배치해 사용자가 주저 없이 클릭하도록 유도합니다. UI는 여백 스케일(8/12px 계열), 타이포 스케일(Clamp 기반), 대비(텍스트/배경 최소 4.5:1) 원칙을 체계화하고, 상태 피드백(hover/focus/active)을 명확히 표기해 키보드 사용자도 동일한 피드백을 경험하도록 합니다. 폼과 검색은 의료·투자 맥락에서 정확성이 중요하므로 자동완성, 유효성 검사, 에러 복구 메시지의 가이드 톤을 표준화하는 것이 필수입니다. 마지막으로 주요 여정(제품 → 임상 데이터 → 문의/구매/투자 자료)별 마이크로 플로우를 측정 이벤트와 함께 정의해, UI 개선이 실제 전환으로 연결되는지를 점검할 수 있어야 합니다.
정보구조(IA)와 SEO 전략
IA는 이용자 관점에서 “누가(의료진/환자/투자자/연구자) 무엇을(제품·논문·임상·IR) 찾는가”로 재분류하는 것이 효과적입니다. 최상위 메뉴 라벨을 역할 기반으로 보정하고, 각 란딩에 핵심 과업 링크 묶음(퀵 액션)을 제공하면 탐색 비용이 크게 줄어듭니다. SEO 측면에서는 제품·효능·임상 용어가 전문적이므로, 용어집(GNB 또는 풋터에서 노출)과 구조화된 데이터(Product, MedicalWebPage 등 Schema.org)를 병행해 검색 친화도를 높입니다. 제목은 브랜드명 + 페이지 주제 + 가치 제안의 3요소를 유지하고, 요약(meta description)은 140~160자로 핵심 키워드를 자연스럽게 포함합니다. 이미지에는 대체 텍스트와 캡션을 제공하고, 국제 대상이라면 다국어 hreflang을 준비합니다. 또 IR 자료실의 PDF는 파일명·타이틀·요약을 일관화해 검색 노출과 접근성을 동시에 개선할 수 있습니다.
성능과 접근성 최적화
초기 구동 성능은 이미지/폰트/스크립트의 지연 로딩과 번들 최적화에서 가장 큰 개선 여지가 있습니다. 이미지에는 width/height 속성과 적절한 sizes를 제공하고, 크리티컬 LCP 이미지는 preload로 선행 로딩합니다. 웹폰트는 서브셋 분리와 font-display:swap을 적용해 텍스트 FOUT를 허용하고 CLS를 방지합니다. 스크립트는 경로별로 나누어 필요 페이지에서만 로드하고, 서드파티는 async/defer를 기본으로 하며, 관측 포인트(LCP, CLS, INP, TTFB)를 웹 바이탈로 수집합니다. 접근성은 시맨틱 구조(h1~h2, landmark), 포커스 탐색 순서, ARIA 라벨, 명도 대비를 체계적으로 준수해야 합니다. 특히 테이블과 차트는 캡션·스코프·요약을 포함하고, 키보드 조작이 필요한 컴포넌트에는 role과 상태 변화를 충분히 제공해야 합니다.
The Blue Canvas 소개
The Blue Canvas는 기업의 디지털 브랜드 경험을 설계·검증하는 UX/UI 파트너입니다. UX 리서치, 디자인 시스템, 정보구조(IA), 접근성 준수, 웹 성능 및 SEO 개선까지 제품 여정 전반을 통합적으로 다룹니다. 특히 의료·바이오와 같이 규제와 신뢰가 중요한 산업에서 “정확한 정보 전달”과 “명확한 행동 유도”를 균형 있게 설계해 전환율을 높인 사례를 다수 보유하고 있습니다. 셀트리온과 같이 글로벌 스케일의 사이트는 지역별 언어·규정·시장 특성을 고려한 정보 설계가 필수입니다. 초기 스코핑 단계에서 KPI(전환·도달·체류)와 추적 이벤트를 정의하고, 디자인/콘텐츠/엔지니어링이 하나의 ‘측정 가능한 목표’를 공유하도록 프로젝트를 조직합니다.
파트너십 문의는 아래 링크를 통해 확인하실 수 있습니다. 프로젝트 상황에 맞춘 빠른 진단과 실무 적용 가능한 제안서를 제공해 드립니다.
마무리 및 다음 단계
본 리뷰에서 도출된 개선 포인트는 브랜딩 스토리의 일관성, UX/UI의 과업 중심 설계, IA·SEO의 구조적 보강, 성능·접근성의 기술적 최적화로 요약할 수 있습니다. 단기에는 메인 메시지와 CTA 일원화, LCP 이미지 최적화, 포커스 스타일 확립부터 시작하는 것을 권장합니다. 중기에는 제품/임상/IR 흐름을 잇는 역할 기반 내비게이션, 용어집과 구조화 데이터 도입, 로그 기반 UX 개선 사이클을 정착시키면 효과가 큽니다. 마지막으로 다국어·지역 확장 시에는 콘텐츠 거버넌스와 컴포넌트 단위의 디자인 시스템을 도입해 변경 비용을 줄이고 일관성을 유지해야 합니다. 작은 승리를 빠르게 축적하며 지표로 확인하는 과정이 장기 경쟁력을 만듭니다.