PBM 기술과 의료기기 전문성을 담은 헬스케어 기업 웹사이트
Design Concept
의료 기술을 더 명확하게 보여주는 웹 경험
의료기기 기업이 가진 전문 기술과 제품 정보를 어렵지 않게 이해할 수 있도록 명확한 정보 구조와 신뢰감 있는 시각 언어를 중심으로 설계했습니다.
화이트 기반의 넓은 여백과 블루·민트 계열 컬러를 활용해 의료·기술 분야의 깨끗하고 전문적인 이미지를 표현하고, PBM 기술과 제품, 임상 데이터, 인증 정보는 카드와 수치 중심의 구조로 정리해 사용자가 핵심 내용을 빠르게 파악할 수 있도록 구성했습니다.
또한 기술력만 강조하기보다 임상 근거와 글로벌 네트워크, 기업 소식까지 함께 보여주어 연구·제품·비즈니스가 연결되는 기업 브랜드 경험을 구현했습니다.
Design Elements
-
01
핵심 기술을 이해하기 쉽게
PBM이라는 전문 기술을 단순한 텍스트 설명으로 전달하기보다 핵심 효과와 적용 영역을 카드형 콘텐츠로 구조화했습니다.
사용자가 기술의 개념과 활용 가능성을 빠르게 이해할 수 있도록 정보를 시각적으로 분리하고 단계적으로 전달했습니다. -
02
데이터와 근거로 만드는 신뢰
기업 지표, 임상 데이터, 연구 결과, 인증 및 수상 정보를 별도의 콘텐츠 영역으로 구성해 브랜드의 전문성을 객관적으로 보여주었습니다.
추상적인 홍보 문구보다 수치와 검증 가능한 정보를 중심으로 신뢰도를 강화했습니다. -
03
글로벌 의료기업의 확장성
해외 진출 국가와 글로벌 네트워크를 시각적으로 보여주어 국내 의료기기 기업을 넘어선 브랜드 확장성을 표현했습니다.
지도와 국가 정보를 활용해 글로벌 사업 범위를 한눈에 이해할 수 있도록 구성했습니다.
Responsive
디바이스 대응
PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.
Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일
Design System
컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.
Colors
- Point Color#65BDBC
- Medical Blue#53ABCB
- Mint Green#65BDBC
- Soft Blue Gray#F7F9FB
- Deep Navy#141A20
Typography
Aa 가나다 Pretendard
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Aa 가나다 Gilroy
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789
- 가나다 Aa
- 가나다 Aa
Regular · Bold
Main Page
메인 페이지
첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.
스크롤하여 전체 보기 ↓
Sub Page
서브 페이지
주요 서브 페이지를 같은 규칙으로 설계했습니다.
02 Pages
Note
기술과 제품 중심의 복잡한 정보를 일관된 구조 안에서 명확하게 전달하도록 설계했습니다.
회사소개, 기술소개, 제품, 임상·연구, 글로벌 등 각 서브페이지의 목적은 다르지만 사용자가 동일한 흐름으로 정보를 이해할 수 있도록 공통 레이아웃과 정보 위계를 적용했습니다.
각 페이지는 핵심 메시지 → 주요 정보 → 상세 콘텐츠 → 관련 자료 → 문의 CTA의 흐름을 기본으로 구성해 콘텐츠 확장성과 유지보수 효율을 함께 확보했습니다.
- Grid
- 1200px 기준 12컬럼 그리드를 적용해 제품 카드, 기술 설명, 연구 자료 등 다양한 콘텐츠를 안정적으로 배치하고 전체 사이트의 정렬감을 유지했습니다.
- Header
- 각 서브페이지에 동일한 비주얼 구조를 적용하고, 페이지별 핵심 메시지와 이미지만 변경해 브랜드 통일성과 콘텐츠별 차별성을 함께 확보했습니다.
- CTA
- 제품과 기술 정보를 확인한 사용자가 바로 비즈니스 문의나 제품 상담으로 이어질 수 있도록 주요 서브페이지 하단에 공통 CTA를 배치했습니다. 특히 B2B 성격을 고려해 단순 문의가 아니라 파트너십과 제품 문의로 연결되는 전환 구조를 구성했습니다.
Mobile
모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.
Bottom Bar
Optimization
-
Menu
PC기업, 기술, 제품, 임상, 글로벌 정보를 전체 구조로 탐색
MO제품과 기술, 문의 중심으로 핵심 메뉴를 간결하게 구성
-
Layout
PC기술, 제품, 임상 정보를 넓은 화면에 카드와 그리드 형태로 배치
MO정보 우선순위에 따라 세로 흐름으로 재구성해 탐색 부담 최소화
-
Typography
PC대형 영문 헤드라인과 명확한 정보 위계로 글로벌 브랜드 이미지 강조
MO전문 용어와 설명이 작은 화면에서도 쉽게 읽히도록 크기와 행간 최적화
-
Image
PC제품 이미지와 의료 환경 이미지를 넓게 활용해 기술력과 활용성을 전달
MO제품과 핵심 메시지 중심으로 이미지 비율을 조정해 정보 집중도 향상
