개요
동아쏘시오롤딩스는 의약과 헬스케어를 축으로 여러 계열사를 아우르는 지주그룹의 공식 웹사이트다. 첫 화면은 제품 카탈로그가 아니라 '세상을 더 이롭게, 행복한 삶을 만들어 갑니다'라는 문장으로 그룹의 존재 이유부터 꺼낸다. 하늘을 올려다보는 아이의 얼굴, 그 위에 얹힌 '인류의 건강과 행복을 위한 끝없는 도전'이라는 서브카피가 사이트 전체의 톤을 정한다. 이 리뷰는 기업 홈페이지 제작의 눈으로 히어로 메시지부터 상단 GNB(동아쏘시오그룹·정도경영·투자정보·PR Center), 밸류체인 소개, 정도경영, 뉴스까지 이어지는 스크롤을 따라가며, 투자자와 구직자, 언론, 일반 소비자라는 서로 다른 방문 목적이 한 페이지 안에서 어떻게 갈라지고 다시 모이는지 짚어본다.
브랜드 & 메시지
브랜드 층위에서 이 사이트가 잘한 대목은 '무엇을 파는가'보다 '왜 존재하는가'를 먼저 말한다는 점이다. 짙은 네이비 오버레이 위에 놓인 아이의 표정은 제약 지주회사가 흔히 택하는 딱딱한 이미지 대신 온기와 미래를 건넨다. 히어로 하단에는 01부터 05까지 번호가 매겨진 인디케이터가 깔려 있고, 각 슬라이드마다 'New Flow, New Shift', 'Un-One Value Creation', 'Stable Core and Disruptive Edge' 같은 영문 키워드가 국문 카피와 짝을 이룬다. 그룹의 방향성을 한 줄 슬로건으로 압축한 장치다.
CTA는 전 섹션이 검은 알약형 '자세히 보기 →' 버튼으로 통일돼 시선이 흔들리지 않는다. 상단 GNB는 4개(동아쏘시오그룹·정도경영·투자정보·PR Center)로 절제했고, 우측에는 정도경영·CLEAN 신고·인재채용·실적자료 같은 유틸리티를 따로 뒀다. 사명에 담긴 라틴어 'Socio'를 본문 카피로 풀어 쓴 점도 눈에 띈다. 다만 '자세히 보기'라는 라벨이 섹션마다 똑같이 반복되는 탓에, 목적지가 투자정보인지 사업소개인지 채용인지가 버튼만 봐서는 구분되지 않는다.
UX/UI 관점
실제 화면에서 확인되는 웹디자인 강점은 또렷하다. 첫째, 검은 알약형 CTA와 파란 스몰캡 영문 라벨(BUSINESS·VALUE·NEWS)이 섹션마다 반복되며 긴 페이지에 일정한 리듬을 만든다. 둘째, VALUE 영역의 '혁신 추구(Pursue Innovation)·변화 주도(Lead Change)·상호 신뢰(Trust Others)·함께 성장(Thrive Together)' 네 카드는 원형 이미지와 번호, 국·영문 병기로 그룹 가치를 스캔하기 쉽게 정리했다. 셋째, 추상적인 '밸류체인'을 포카리스웨트, 나랑드 사이다 제로 0kcal 같은 실제 제품 컷으로 보여줘 지주회사의 실체를 손에 잡히게 한다.
넷째, 정도경영(正道經營) 섹션에 인권경영·윤리경영·환경경영 서브카드를 붙여 ESG 신뢰 신호를 상단 가까이 끌어올렸다. 다섯째, 페이지 하단의 대형 파스텔 'SOCIO' 타이포와 코랄색 위쪽 화살표 그래픽은 브랜드 심벌을 시각 자산으로 밀어붙인 감각적인 마무리다. 여기에 NEWS 카드가 CSR·회사소식·제품소식 배지로 분류돼, '동아오츠카 포카리스웨트 2026 서울마라톤 공식음료', '창립 47주년 ESG 지속가능경영', '탄산수 라인바바 신제품' 같은 소식을 목적별로 훑게 한다.
IA·SEO 전략
지주그룹 사이트의 정보 구조는 계열사로의 분기가 관건이다. 이 홈페이지도 사업 소개와 뉴스에서 동아제약·동아오츠카 같은 계열사 이름이 자주 등장하고, 푸터에는 Family Site 선택 메뉴가 놓여 있다. 외부 계열사로 나가는 링크에는 rel과 새 창 정책을 일관되게 적용하고, 그룹 도메인과 계열사 도메인 사이에서 canonical이 서로를 잠식하지 않도록 정리해야 검색엔진이 각 사이트의 주제를 또렷이 인식한다.
투자정보와 실적자료는 대개 PDF로 배포되는데, 파일 안의 텍스트는 검색 스니펫에서 사각지대에 놓이기 쉽다. 분기 실적과 공시의 핵심을 요약한 HTML 페이지를 함께 두면 IR 키워드 유입을 잡을 수 있다. 언론 유입의 관문인 뉴스 상세는 Article 구조화 데이터, 발행일·수정일, 대표 이미지를 갖춰 검색 결과에서 신선도와 출처를 드러내는 편이 좋다. 국·영문 사이트를 함께 운영한다면 hreflang으로 언어별 정본을 명시해 중복 판정을 피한다.
성능·접근성
히어로는 고해상도 인물 사진에 번호형 슬라이드가 얹혀 있어 LCP(최대 콘텐츠 페인트)에 부담을 준다. 첫 슬라이드의 대표 이미지만 preload로 앞당기고 나머지는 지연 로딩으로 미루되, 자동 전환은 prefers-reduced-motion을 존중해 화면 멀미를 줄이는 편이 안전하다. 제품 컷과 밸류·뉴스 카드처럼 이미지가 많은 페이지인 만큼 WebP·AVIF 병행 제공과 명시적 width·height 지정으로 CLS(누적 레이아웃 이동)를 눌러야 한다.
접근성에서는 대비 점검이 우선이다. 정도경영 카드의 파스텔 배경 위 회색 소형 텍스트는 명도 대비가 아슬아슬해 보이는 반면, 검은 알약형 버튼 대비는 양호하다. 번호형 슬라이더는 키보드로 이동·일시정지가 가능해야 하고, 각 슬라이드 이미지에는 의미 있는 대체 텍스트를, 대형 'SOCIO' 장식 타이포에는 스크린리더가 건너뛰도록 처리하는 것이 자연스럽다.
디지털 파트너 더블루캔버스
제약·헬스케어 지주그룹처럼 여러 계열사와 IR·채용·언론 채널을 한 사이트에서 소화해야 하는 기업이라면, 홈페이지 제작은 디자인 이전에 정보 설계의 문제다. The Blue Canvas는 브랜드 철학을 담은 히어로 메시지 설계부터 계열사·IR·뉴스로 갈라지는 정보 구조, 그리고 검색엔진최적화(SEO)와 Core Web Vitals까지 하나의 흐름으로 엮어 기업 웹사이트를 만든다. 정적인 회사 소개에 그치지 않고, 뉴스·실적·채용 데이터가 검색과 광고 유입으로 이어지도록 퍼포먼스 마케팅까지 함께 설계하는 것이 우리의 강점이다.
웹디자인의 완성도와 전환 성과를 동시에 끌어올리는 홈페이지 제작을 고민하고 있다면, 아래에서 The Blue Canvas의 작업과 협업 방식을 확인해보길 권한다. 다음 링크는 새 창으로 열린다.
마무리와 다음 스텝
동아쏘시오롤딩스 웹사이트는 '세상을 더 이롭게'라는 한 문장으로 지주그룹의 정체성을 앞세우고, 밸류체인과 정도경영, 뉴스를 절제된 흐름으로 배치한 견고한 기업 사이트다. 남은 과제는 크지 않다. 첫째, 섹션마다 똑같은 '자세히 보기' 대신 '투자정보 보기·사업영역 보기·채용 바로가기'처럼 목적지가 드러나는 CTA 문구로 바꿔 탐색 실수를 줄인다. 둘째, 히어로 슬라이드와 제품 이미지를 최적화해 LCP·CLS를 손보고, 파스텔 카드의 텍스트 대비를 기준선까지 끌어올린다. 셋째, 실적·뉴스에 구조화 데이터와 HTML 요약을 얹어 IR·언론 검색 유입을 확보한다. 이 세 가지만 2주 단위 스프린트로 실행해도 체감 품질과 검색 가시성이 함께 올라간다.