안녕하세요. 홈페이지 디자인을 전문으로 하는 웹에이전시 그로스코드(Growth Code)입니다.
이 글에서는 팹리스 반도체 회사 홈페이지 제작 사례로, 스마트폰
카메라용 반도체부터 자동차 전장, 디지털 헬스케어까지 사업을 넓혀온
코스닥 상장사 DONGWOON ANATECH의 웹사이트를 소개해드리겠습니다.
Project Information
✔ Client: ㈜Dongwoon Anatech
✔ Type: 반응형 웹사이트 / 국문·영문
✔ Business: 아날로그·전력 반도체 설계(팹리스), 디지털 헬스케어, 생체인식
설명에 앞서 회사에서 홈페이지 제작 업무를 맡으신 담당자님이라면 아래 가이드가 도움이 되실겁니다.
기획 방향: 넓어진 사업을 하나의 기술 기업으로 묶기
동운아나텍은 2006년 설립 이후 스마트폰 카메라의 손떨림 방지(OIS)와
자동초점(AF) 반도체로 성장했고, 지금은 자동차·산업용 모터 드라이버, 타액
기반 혈당 측정기, 지문인식 카드까지 사업 영역이 크게 넓어졌습니다.
방문자도 해외 고객사 엔지니어, 투자자, 입사 지원자로 다양합니다.
그래서 팹리스 반도체 회사 홈페이지 제작의 방향을 "서로 다른 사업을 저전력·고효율 아날로그
기술이라는 하나의 이야기로 묶고, 방문자 유형별로 길을 나누는 것"으로 잡았습니다.
메뉴는 Business, Newsroom, Careers, About
DWA 네 개로 나누고, Business 아래에 Mobile,
Automotive & Industrial, Healthcare,
Biometric Solutions 네 개 사업군과 세부 제품을 정리했습니다.
국문과 영문은 우측 상단에서 바로 전환할 수 있습니다.
메인 페이지: 한 문장으로 회사를 설명하기
메인 첫 화면은 "Sensing Life, Driving the
Future with Analog Intelligence"라는 슬로건과
함께, 반도체 칩과 회로 기판을 표현한 블루 톤 비주얼로 시작합니다.
감지(Sensing)와 구동(Driving)이라는 두 단어로 카메라
반도체와 헬스케어, 모터 드라이버를 모두 아우르도록 문장을 설계했습니다.
이어지는 Who we are 영역에서는 설립 연도와 사업 분야를 짧게
요약하고, 아래에 대표 제품 카드와 최신 뉴스를 배치했습니다.
첫 화면에서 브랜드 메시지를, 스크롤 두세 번 안에 사업
범위와 최근 소식을 확인할 수 있는 흐름입니다.
회사소개 페이지의 Core Business Areas에서는 반도체,
헬스케어, 생체인식 세 영역을 칩과 디지털 이미지와 함께 정리해, 처음
방문한 사람도 회사의 전체 사업 구조를 한 화면에서 이해할 수 있게 했습니다.
제품 페이지: 모든 제품을 같은 틀로
팹리스 반도체 회사 홈페이지 제작에서 가장 공을
들인 부분은 제품 페이지의 형식입니다.
제품 수가 10개가 넘기 때문에, 페이지마다 구성이 다르면
엔지니어가 원하는 정보를 매번 새로 찾아야 합니다.
그래서 모든 제품 페이지를 기술 소개, 주요 특징, 주요 Application 세
단계로 통일하고, 각 단계에 01, 02, 03 번호를 크게 달았습니다.
OIS Controller IC 페이지를 본 사람이 Motor
Drivers 페이지에서도 같은 위치에서 같은 정보를 찾을 수 있습니다.
그 아래에는 OIS 적용 전과 후를 비교하는 기술 예시 이미지와,
DW9828, DW9835처럼 실제 모델명으로 정리한 제품 라인업을 두었습니다.
모델명마다 다운로드 아이콘을 달아 고객사 엔지니어가 필요한 자료를 바로
받을 수 있도록 한 것도 B2B 반도체 사이트에서 중요한 부분입니다.
자동차용 Motor Drivers 페이지에서는 공조 플랩, 파워 시트, 도어, 블로워
모터처럼 차량 안에서 칩이 쓰이는 위치를 자동차 이미지 위에 직접 표시했습니다.
눈에 보이지 않는 반도체가 어디에 쓰이는지 그림으로 보여주면,
전문가가 아닌 투자자나 지원자도 기술을 쉽게 이해할 수 있습니다.
헬스케어 페이지: 수치와 특허로 시장성을 증명
신사업인 D-SaLife®(타액 기반 혈당 모니터링 시스템) 페이지는 제품
설명보다 먼저 전 세계 당뇨병 현황을 수치로 보여주며 시작합니다.
2형 당뇨 환자 5.9억 명, 그중 2.5억 명은 자신이 환자인지 모른다는 데이터를
앞에 두어, 채혈 없이 측정하는 제품이 왜 필요한지 자연스럽게 설득하는 구성입니다.
이후 실제 기기 이미지와 함께, 한국·미국·EU·중국·일본·인도에
등록·출원된 특허 현황을 세계 지도 위에 국가별로 표시했습니다.
아직 시장에 알려지지 않은 신제품일수록 특허처럼 객관적인
근거를 시각적으로 보여주는 것이 신뢰를 만듭니다.
공신력: 글로벌 네트워크, IR, 품질 정책
Global Footprint 페이지에는 본사와 중국 심천·상해, 일본
동경, 대만 등 해외 지사와 영업망을 세계 지도 위에 정리했습니다.
해외 고객사 입장에서는 가까운 곳에서 기술
지원을 받을 수 있는지가 중요하기 때문입니다.
코스닥 상장사이기 때문에 IR 페이지에는 금융감독원 전자공시(DART) 목록을
그대로 연동해, 별도로 관리하지 않아도 최신 공시가 자동으로 보이도록 했습니다.
연혁 페이지에는 수출의 탑 수상, 세계일류상품 선정, 월드클래스
300 선정, 코스닥 상장 같은 이력을 시기별로 정리했습니다.
Quality Policy 페이지에는 품질방침,
환경방침과 함께 분쟁광물 정책까지 담았습니다.
글로벌 완성품 제조사와 거래하는 반도체 회사에게 이런 정책 공개는 공급망 심사에서
확인하는 항목이기 때문에, 회사소개 메뉴 안에 독립 페이지로 두었습니다.
디자인: 다크 히어로와 블루 포인트
서브 페이지 상단은 검은 배경 위에 제품이 쓰이는 장면 이미지를 가운데
두고, 굵은 영문 제목과 한 줄 슬로건을 올리는 형식으로 통일했습니다.
본문은 화이트와 옅은 블루 배경을 번갈아 쓰고, 동운아나텍의 네이비 블루를
제목과 버튼에 반복해 페이지가 많아도 하나의 브랜드로 보이도록 했습니다.
메인의 제품 영역은 스크롤에 따라 카드가 가로로 넘어가는 인터랙션을, 뉴스
영역은 좌우 슬라이드를 적용했고, 서브 페이지의 각 단계는 스크롤에 맞춰 차례로
나타나도록 해 정보가 많은 기술 페이지도 지루하지 않게 읽히도록 했습니다.
마무리
팹리스 반도체 회사 홈페이지 제작에서는 기술을 자세히 설명하는
것만큼, 여러 사업과 제품을 같은 틀로 정리해
고객사·투자자·지원자가 각자 필요한 정보를 빠르게 찾게 하는 구조가 중요합니다.
여기에 제품 적용 위치 그림, 특허와 시장 수치, 공시와 품질 정책처럼 확인
가능한 근거를 더하면 기술 기업으로서의 신뢰를 자연스럽게 보여줄 수 있습니다.
그로스코드가 진행한 다른 홈페이지 제작 레퍼런스가
궁금하다면 포트폴리오를 함께 확인해보세요.
홈페이지 제작과 관련해 궁금한 점이 있으시면 아래
링크를 클릭하셔서 문의 주시기 바랍니다.
감사합니다. :)