INSIDE e-FRONT

 

안녕하세요! 

오늘은 최근 성공적으로 오픈한 바이오/의약 연구개발 전문기업 '비엔씨랩(BNC LAB)' 홈페이지 리뉴얼 구축 사례를 소개해 드리려 합니다.

 

바이오텍·제약·의료기기 기업의 홈페이지는 단순한 회사 소개 페이지가 아닙니다. 

글로벌 파트너사와 투자자, 규제 기관까지 다양한 이해관계자들이 기업의 기술력과 신뢰도를 처음 접하는 창구이기 때문에, 전문성과 비전을 동시에 담아내는 정교한 UI/UX 설계가 필수입니다. 

 

이번 비엔씨랩 프로젝트가 어떤 전략으로 완성되었는지, 기획 단계부터 세부 페이지 구현까지 꼼꼼히 풀어드리겠습니다.

 

 

 

 

🏢 Client Overview : 비엔씨랩은 어떤 기업인가요?

 

**(주)비엔씨랩(BNC LAB)**은 질병 치료와 의료 혁신을 발전시키는 데 중점을 둔 바이오 제약 연구 회사입니다. 핵심 연구 영역은 크게 세 가지입니다.

 

치료용 단백질·펩타이드 바이오 의약품 개발: GLP-1 계열 비만 치료제, 보툴리눔 톡신 등 고난도 바이오 의약품 연구를 주도합니다.

DDS(Drug Delivery System) 연구: 기존 바이오 의약품의 체내 전달 효율을 높이는 차세대 약물 전달 시스템을 연구합니다.

 

고순도 단백질·펩타이드 물질 연구개발: 원료 물질의 순도와 안정성을 확보하여 원천 기술 경쟁력을 쌓아가고 있습니다.

 

특히 주목할 점은 비엔씨랩이 미용 성형 관련 의료기기(필러) 및 보툴리눔 톡신(보톡스)을 주력으로 개발·생산하는 코스닥 상장 바이오 벤처기업 '(주)한국비엔씨'의 자회사라는 것입니다. 

 

이 관계는 단순한 지분 구조를 넘어, 이번 홈페이지 프로젝트의 핵심 방향성을 결정짓는 중요한 요소가 되었습니다.

 

🎯 Project Point : 기획 의도 및 디자인 전략

 

프로젝트 핵심 미션 두 가지

 

① 글로벌 스탠다드 충족 — 다국어 디지털 쇼룸 구축

바이오 기업의 잠재 파트너는 국내에만 있지 않습니다. 해외 제약사, 글로벌 VC, 해외 학술 기관과의 협력을 위해서는 국문/영문 완전 이중 언어 지원이 선택이 아닌 필수입니다. 단순히 텍스트를 번역하는 수준을 넘어, 언어별로 최적화된 어조(Tone & Manner)와 정보 구조를 갖추는 것을 목표로 삼았습니다.

 

② 모회사와의 '패밀리룩(Family Look)' 설계 — 그룹 신뢰도 확보

상장사인 모회사 '한국비엔씨(BNC KOREA)'와의 브랜드 연속성을 확보하는 것이 두 번째 핵심 미션이었습니다. 브랜드 아이덴티티(BI), 컬러 시스템, 타이포그래피 스타일 가이드를 계승하되, 비엔씨랩만의 'R&D 스핀오프 기업'다운 학술적이고 전문적인 톤을 더해 모자 관계의 통일성과 비엔씨랩 고유의 정체성을 동시에 달성했습니다.

 

핵심 디자인 컨셉

 

"Deep Science, Clear Vision" — 깊이 있는 과학을 명확하게, 누구에게나.

 

메인 컬러로 딥 블루(Deep Blue) 계열을 채택했습니다. 블루는 바이오·의약 업계에서 신뢰, 과학적 정밀함, 미래지향성을 상징하는 색으로 폭넓게 사용됩니다. 모회사의 컬러 톤을 계승하면서도, 명도와 채도를 미세하게 조정하여 비엔씨랩 사이트만의 차별화된 깊이감을 표현했습니다. 이를 배경으로 화이트와 라이트 그레이를 여백 색으로 활용해 콘텐츠가 선명하게 부각되도록 했습니다.

 

💻 Page Review : 주요 섹션 상세 분석

 

1. Main Visual : 첫 3초가 전부다

 

 

웹사이트 첫 화면(히어로 섹션)은 방문자의 이탈 여부를 결정짓는 가장 중요한 구간입니다. 비엔씨랩의 메인 비주얼은 다음 세 가지 요소를 조화롭게 결합하여 강렬한 첫인상을 만들어냅니다.

 

배경 그래픽: 분자 구조를 형상화한 고해상도 3D 렌더링 이미지를 활용해 바이오 R&D 기업의 정체성을 직관적으로 전달합니다. 

사진이 아닌 CG를 선택한 이유는 현실적 제약(촬영 환경, 기밀 유지)을 피하면서도 기업이 지향하는 '미래 기술'의 이미지를 자유롭게 표현하기 위해서입니다.

 

캐치프레이즈: "Beyond Discovery, to Sustainable Bio-Innovation" — '발견을 넘어 지속가능한 바이오 혁신으로'라는 슬로건을 굵고 명확한 타이포그래피로 배치했습니다. 단어 하나하나에 기업의 비전이 담겨 있으며, 영문과 국문을 함께 노출해 글로벌·로컬 모두를 아우릅니다.

 

UX 편의 요소: 우측 상단에 BNC KOREA(모회사 사이트) 바로가기 버튼과 KR/EN 언어 전환 토글을 직관적으로 배치했습니다. 

방문자가 어떤 목적으로 접속했든 원하는 정보로 빠르게 이동할 수 있도록 내비게이션의 첫 단추를 명확히 했습니다.

 

2. ABOUT US : '보여주는 신뢰'의 힘

 

 

바이오 기업에서 투자자나 파트너가 가장 먼저 확인하는 것 중 하나는 실제 연구 인프라의 수준입니다.

 

텍스트로 "최첨단 설비를 갖추고 있습니다"라고 백 번 쓰는 것보다, 연구소 현장 사진 한 장이 훨씬 설득력 있습니다.

 

ABOUT US 섹션에서는 첨단 장비가 가득한 비엔씨랩 연구실 전경 사진을 와이드 스크린 비율로 배치했습니다. 이를 통해 방문자는 스크롤을 내리는 순간 '이 회사는 실제로 연구를 하는 곳이구나'라는 직관적 신뢰감을 형성합니다. 

 

사진 위에는 기업의 핵심 가치(Core Value)와 연혁(History)을 간결하게 오버레이하여, 시각적 임팩트와 정보 전달을 동시에 달성했습니다.

 

💡 설계 포인트: 이미지 선택 시 실험 장비의 복잡함이 적당히 드러나는 앵글을 사용해 '과학적 깊이'를 연출하되, 지나치게 어수선하지 않도록 정돈된 공간을 선택했습니다. 방문자가 '신뢰'를 느끼면서도 '압도'당하지 않는 균형이 핵심이었습니다.

3. CI (Corporate Identity) : 로고 하나에도 전략이 있다

 

 

CI 소개 영역은 단순히 로고를 크게 보여주는 공간이 아닙니다. 브랜드의 철학과 지향점을 시각 언어로 번역하는 구간입니다.

 

화이트 배경 위에 비엔씨랩 로고를 중심에 배치하고, 그 옆에는 DNA 이중나선 구조를 모티프로 한 투명하고 푸른 3D 오브제 이미지를 매치했습니다. DNA 이중나선은 생명과학의 근원을 상징하는 동시에, '끊임없이 이어지는 혁신의 사슬'이라는 의미를 담고 있습니다.

 

또한 CI 영역 하단에는 로고 심볼의 형태적 의미, 컬러의 상징, 서체 선택의 이유 등 브랜드 스토리를 간결하게 담아, 단순히 보여주는 것을 넘어 '이 기업이 왜 이 로고를 선택했는지'를 이해관계자가 납득할 수 있도록 구성했습니다.

4. R&D : 어려운 과학을, 쉽고 아름답게

 

 

연구개발(R&D) 소개는 모든 바이오 기업 홈페이지에서 가장 다루기 까다로운 섹션입니다. 내용 자체가 전문적이다 보니 자칫 학술 논문처럼 딱딱해지기 쉽고, 그렇다고 지나치게 쉽게 풀면 전문성이 희석될 수 있습니다.

 

이번 비엔씨랩 프로젝트에서는 최근 글로벌 테크·바이오 기업의 웹 트렌드를 반영한 플랫 디자인 벡터 일러스트를 핵심 시각 요소로 채택했습니다.

 

블루톤 단색 계열로 통일해 페이지 전체의 컬러 체계와 일관성을 유지했습니다.

 

연구원들의 실험 장면, 분자 모형, 실험 기기 등을 친근하고 현대적인 스타일로 묘사하여 전문성과 접근성의 균형을 맞췄습니다.

 

각 연구 분야(단백질 의약품 / DDS / 고순도 물질)를 별개의 일러스트 카드로 나누어, 방문자가 비엔씨랩의 연구 포트폴리오를 한눈에 파악할 수 있도록 했습니다.

 

💡 설계 포인트: 스톡 이미지나 사진을 쓰지 않고 커스텀 일러스트를 제작한 이유는 '독창성' 때문입니다. 스톡 이미지는 경쟁사도 같은 이미지를 쓸 수 있지만, 커스텀 일러스트는 비엔씨랩만의 자산이 됩니다.

5. NEWS : 신뢰는 꾸준함에서 나온다

 

 

뉴스·보도자료 섹션은 기업의 '활성도'를 증명하는 공간입니다. 업데이트가 멈춰 있는 뉴스 페이지는 오히려 신뢰를 떨어뜨릴 수 있기 때문에, 운영이 편리한 구조 설계도 함께 고려했습니다.

 

카드형(Grid) 레이아웃 채택: 썸네일 이미지, 카테고리 태그(공지사항 / 언론보도), 제목, 요약 텍스트, 날짜가 카드 한 장에 정돈되어, 여러 소식을 빠르게 스캔할 수 있습니다.

 

충분한 여백(Whitespace) 활용: 정보 밀도가 높아도 숨막히지 않도록, 카드 간격과 내부 패딩을 여유 있게 설정해 가독성을 높였습니다.

 

필터 기능 지원: 공지/언론보도/연구 성과 등 카테고리별 필터링 기능을 추가하여 원하는 정보를 빠르게 찾을 수 있도록 했습니다.

 

관리자 CMS 연동: 담당자가 별도의 코딩 없이 웹 기반 CMS에서 쉽게 뉴스를 등록·수정·삭제할 수 있도록 설계하여, 꾸준한 업데이트가 실제로 이루어질 수 있는 환경을 만들었습니다.

 

6. LOCATION : 지도 하나에 담은 글로벌 비전

 

 

'오시는 길' 페이지는 흔히 가장 소홀해지기 쉬운 섹션입니다. 하지만 비엔씨랩 프로젝트에서는 이 공간도 브랜드 메시지를 전달하는 기회로 활용했습니다.

 

지도 API를 기본 배경으로 사용하되, 그 위에 세계 지도 윤곽선 그래픽을 반투명하게 레이어링했습니다. 이 단 하나의 시각적 선택이 "우리는 한국에 있지만, 글로벌 시장을 바라보고 있다"는 메시지를 명확하게 전달합니다. 

 

실제 주소와 연락처 정보는 하단 딥 블루 배경의 정보 바에 명확하게 표기했고, 대중교통 안내와 주차 정보도 함께 담아 실용성을 놓치지 않았습니다.

 

7. R&D Pipeline : 바이오 홈페이지의 '꽃'

 

 

바이오 기업 홈페이지에서 투자자와 파트너사가 가장 집중적으로 살펴보는 페이지가 바로 **신약 개발 파이프라인(Pipeline)**입니다. 임상 단계가 어디까지 왔는지, 어떤 질환을 타겟하는지, 경쟁 약물 대비 차별점은 무엇인지를 한눈에 파악할 수 있어야 하기 때문입니다.

 

비엔씨랩의 파이프라인 페이지는 다음과 같이 구성했습니다.

항목내용표기 방식그라데이션 바(Bar) 형태의 인포그래픽주요 프로젝트GLP-1(비만/당뇨), Hyaluronidase, Botulinum toxin 등표기 정보적응증(Indication), 현재 개발 단계(Discovery → 비임상 → 임상 1/2/3상 → 허가)시각 처리완료 구간은 진한 블루, 진행 중 구간은 중간 블루, 미도달 구간은 라이트 그레이로 구분

 

각 파이프라인 항목은 클릭 시 상세 모달 또는 팝업으로 연구 배경, 작용 기전(MOA), 기대 효과 등 추가 정보를 제공하도록 설계했습니다. 투자자들이 요청하는 IR(투자자 관계) 자료와의 연계도 고려한 구조입니다.

파이프라인 하단에는 비엔씨랩이 협력 중인 대학 및 연구기관의 로고를 그리드로 깔끔하게 배치했습니다. 기관명과 로고만으로도 연구 네트워크의 폭과 수준을 한눈에 가늠할 수 있어, 별도의 설명 없이 신뢰성을 전달하는 효과적인 장치가 됩니다.

 

🔍 기술 스펙 & 개발 주요 사항

항목내용다국어 지원국문(KO) / 영문(EN) 완전 분리 구성반응형(Responsive)데스크탑 / 태블릿 / 모바일 완전 대응브라우저 호환Chrome, Safari, Edge, Firefox 최신 버전 지원SEO 최적화메타 태그, OG 태그, 시맨틱 마크업, 사이트맵 적용CMS뉴스·파이프라인 콘텐츠 관리자 직접 업데이트 가능퍼포먼스이미지 WebP 변환 및 지연 로딩(Lazy Load) 적용보안SSL 인증서 적용, 보안 헤더 설정

 

💡 이 프로젝트에서 배운 것 — 바이오 홈페이지 3원칙

이번 비엔씨랩 프로젝트를 통해 다시 한번 확인한 바이오 기업 홈페이지의 핵심 원칙 세 가지를 공유합니다.

 

원칙 1. '신뢰'가 '예쁨'보다 먼저다

바이오 홈페이지의 1순위 목표는 투자자·파트너에게 신뢰를 주는 것입니다. 화려한 효과보다 정확한 정보, 명확한 구조, 실제 연구 환경을 보여주는 이미지가 더 강력합니다.

 

원칙 2. '파이프라인'에 가장 공을 들여라

방문자의 핵심 관심사는 항상 파이프라인입니다. 이 페이지가 한눈에 이해되지 않으면 아무리 나머지가 잘 만들어져도 목적 달성에 실패합니다.

 

원칙 3. '글로벌'을 처음부터 설계하라

다국어 지원은 나중에 추가하는 것이 아니라, 기획 단계부터 정보 구조와 레이아웃에 반영되어야 합니다. 한국어와 영어는 텍스트 길이와 행간이 다르기 때문에, 뒤늦게 번역본을 끼워 넣으면 디자인이 어긋나는 경우가 많습니다.

 

마무리하며

비엔씨랩 홈페이지 리뉴얼은 모회사인 한국비엔씨의 톤앤매너를 유지하면서도, 비엔씨랩만의 R&D 전문성을 전면에 부각시키는 데 집중한 프로젝트였습니다. 

 

기획 단계에서 '글로벌 파트너링을 위한 디지털 쇼룸'이라는 명확한 목표를 설정했기 때문에, 디자인과 개발의 모든 의사결정이 그 방향으로 일관되게 흘러갈 수 있었습니다.

 

 

 

크리에이티브 웹에이전시 이프론트

 

27년 제작 노하우와 경험 / 8000개의 홈페이지제작 / SEO(검색엔진최적화),GEO(생성형엔진최적화)

 

https://www.e-front.co.kr