약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트

펠릭스디가 연구·개발하는 약물전달시스템(DDS) 기술과 제품, 회사의 비전을 한눈에 전달하기 위해 구축한 공식 기업 웹사이트입니다. 메인 화면은 “Building Innovation, Drug Delivery System” 배너에서 시작해 핵심가치 소개 → 기술소개 → 제품소개 → 회사소개 → 고객지원 → 오시는길과 문의 순서로 한 화면씩 넘어가는 풀페이지 스크롤로 구성했습니다. 특히 연구분야·기술소개·특허소개로 이어지는 기술 정보 구조와 국소지향적 약물 전달 패치·자동화 기기 두 제품 소개를 분리해 방문자가 필요한 정보를 바로 찾도록 했으며, 블루와 오렌지 포인트 컬러, 깔끔한 Pretendard 서체로 신뢰감 있는 바이오 기업의 인상을 담았습니다.

#펠릭스디
#바이오기업
#약물전달시스템
#DDS
#약물전달패치
#기업홈페이지
#풀페이지스크롤
#기업웹사이트
#반응형웹
#UIUX

Client: 펠릭스디
Category: 기업홈페이지

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 대표 이미지

Design Concept

기술의 깊이를 가볍게 전하다

전문적인 연구 내용을 처음 접하는 방문자도 부담 없이 기업의 방향을 이해할 수 있도록 하는 것을 디자인의 출발점으로 삼았습니다.
메인 첫 화면에는 “Building Innovation”이라는 핵심 문구와 배경 이미지를 크게 배치하고, 이후 섹션은 한 화면에 하나의 메시지만 담는 풀페이지 구성으로 정보를 차분히 전달했습니다.
스카이 블루와 앰버 오렌지를 포인트로 사용해 연구 기업의 신뢰감과 따뜻함을 함께 표현했고, 서브 페이지에서는 연구분야와 제품의 기술 설명을 이해하기 쉽게 정리했습니다.

Design Elements

01

풀페이지 스크롤 메인 구성

배너부터 기술·제품·회사소개·문의까지 한 화면에 하나의 주제만 보이도록 나누었습니다.
긴 기업 소개를 단계적으로 읽을 수 있고 화면 옆 점 내비게이션으로 섹션을 이동할 수 있습니다.
02

기술·제품 중심 정보 구조

연구분야, 기술소개, 특허소개를 기술 메뉴로 묶고 제품소개를 별도로 두어 정보를 구분했습니다.
메인의 카드형 바로가기로 방문자가 관심 있는 분야의 상세 페이지로 곧바로 이어집니다.
03

국소지향적 패치·자동화 기기 제품 카드

국소지향적 약물 전달 패치와 자동화 기기를 영문 부제와 함께 큼직한 카드로 소개했습니다.
제품 상세 페이지에서는 패치의 구조와 차별점을 항목별로 풀어 설명했습니다.

Responsive

디바이스 대응

PC · 태블릿 · 모바일 전 환경에서 정보의 순서와 사용성이 동일하게 유지되도록 반응형으로 설계했습니다.

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 PC 화면

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 태블릿 화면

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 모바일 화면

Desktop
1920 × 1080
데스크톱
Tablet
768 × 1024
태블릿
Mobile
375 × 812
모바일

Design System

컬러 팔레트와 타이포그래피를 시스템으로 정의해 화면 전반에 일관된 규칙을 적용했습니다.

Colors

Main Color#3C9BD0

Sub Color#E18317

Point Color#31DDB9
Sky Blue#3C9BD0
Amber Orange#E18317
Charcoal#212627
Ink Black#222222
Mist Blue#ECF5FB
White#FFFFFF

Typography

Aa 가나다 Pretendard

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Aa 가나다 Noto Sans KR

가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789

Weight

가나다 Aa
가나다 Aa

Regular · Bold

Main Page

메인 페이지

첫 화면에서 브랜드와 핵심 서비스를 먼저 보여주고,
스크롤 흐름에 따라 필요한 정보로 자연스럽게 이어지도록 구성했습니다.

www.example.com

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 메인 페이지

스크롤하여 전체 보기 ↓

Sub Page

서브 페이지

주요 서브 페이지를 같은 규칙으로 설계했습니다.

02 Pages

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 서브 페이지 1 — Sub Page 연구분야 페이지 01

약물전달 기술의 가능성을 풀페이지로 담은 바이오 기업 웹사이트 서브 페이지 2 — Sub Page 제품소개 페이지 02

Note

기술·제품·회사 정보를 동일한 서브 페이지 규칙으로 일관되게 확장할 수 있도록 설계했습니다.

모든 서브 페이지는 상단 타이틀 영역, 하위 메뉴 이동, 본문 콘텐츠의 순서를 동일하게 유지했습니다.
콘텐츠 페이지와 게시판이 같은 틀을 공유해 새로운 메뉴가 추가되어도 같은 규칙 안에서 관리할 수 있습니다.

Grid: 좌우 여백을 일정하게 둔 중앙 정렬 레이아웃에 카드형 항목을 같은 간격으로 배열했습니다.
Header: 상단 고정 헤더에 4개 대메뉴와 하위 메뉴를 두어 어느 화면에서나 이동할 수 있게 했습니다.
CTA: 메인 하단과 고객지원 메뉴에 “1:1 문의하기” 버튼을 두어 문의로 자연스럽게 이어지도록 했습니다.

Mobile

모바일 환경에서 자주 쓰는 기능을 손이 닿는 곳에 배치했습니다.

Bottom Bar

슬라이드 메뉴모바일에서는 햄버거 버튼으로 우측에서 열리는 전체 메뉴 제공

1:1 문의 버튼연락처와 지도 아래 문의하기 버튼을 크게 배치해 바로 접수

Optimization

Menu

PCMenu · 4개 대메뉴와 마우스 오버 하위 메뉴

MOMenu · 햄버거 버튼으로 여는 우측 슬라이드 메뉴
Layout

PCLayout · 한 화면 한 섹션의 풀페이지 구성

MOLayout · 카드를 세로로 쌓은 단일 열 구성
Typography

PCTypography · 60px 큰 타이틀과 얇은 서체 대비

MOTypography · 화면 폭에 맞춰 줄어드는 타이틀 크기
Image

PCImage · 배경 이미지 위 흰색 문구 배치

MOImage · 로고와 아이콘을 작게 줄여 가독성 확보