CI는 레드로 바뀌었는데,
화면에는 오렌지가 남아 있었습니다.
홈페이지를 처음 만들 때 HLB의 색은 오렌지였습니다. 그룹 CI가 레드로 바뀐 뒤 로고는 교체했지만, 하위 페이지의 탭과 강조색에는 예전 오렌지가 그대로 남아 있었습니다. 한 화면 안에서 두 가지 색이 서로 다른 시기의 회사를 말하고 있었습니다.
그룹의 레드를 기준으로 색의 자리를 다시 정하기BLUECANVAS SELECTED WORKHLB THERAPEUTICS · BIO & PHARMA
HLB THERAPEUTICS · WEBSITE RENEWAL PROPOSAL
환자에게닿을 때까지
HLB테라퓨틱스 홈페이지 리뉴얼 제안
브랜드 해석 · 정보 구조 · UI 디자인 · 인터랙션
01 / OVERVIEW프로젝트 개요
희귀질환 신약과 의약품 콜드체인,
두 사업을 한 문장으로.
HLB테라퓨틱스는 처방 약이 없는 희귀질환을 위해 신약을 개발하고, 온도에 민감한 바이오의약품을 전국으로 유통하는 회사입니다. 안과 질환 치료제 RGN-259와 교모세포종 치료제 OKN-007을 개발하고 있고, 전국 일곱 곳의 센터에서 의약품 콜드체인을 운영합니다.
블루캔버스가 지금의 HLB테라퓨틱스 홈페이지를 만든 뒤, 회사의 이름과 CI가 바뀌었고 콜드체인 사업은 전국 단위로 커졌습니다. 회사가 자란 만큼 홈페이지도 다시 설계할 때가 되었다고 보고 리뉴얼 방향을 제안했습니다. 이 페이지는 그 제안과 과정을 정리한 기록입니다.
운영 중인 HLB테라퓨틱스 홈페이지- #바이오 상장사
- #희귀질환 신약
- #의약품 콜드체인
- #IR 정보 구조
- #파이프라인 시각화
- #브랜드 경험
- #디자인 시스템
- #인터랙션
- #반응형
회사가 걸어온 숫자에서 출발했습니다.
2000
회사를 세운 해
2021년 HLB테라퓨틱스로 사명 변경
2010
코스닥에 상장한 해
HLB그룹 계열 바이오 상장사
2건
미국 FDA 희귀의약품 지정
RGN-259 · OKN-007
7곳
전국 콜드체인 센터
구리 본사부터 제주까지
숫자 출처: HLB테라퓨틱스 홈페이지 공개 자료(2026년 10월 확인)
02 / THE QUESTION
신약을 개발하는 회사와 백신을 나르는 회사. 처음 온 사람에게 HLB테라퓨틱스는 둘 중 어느 쪽으로 보일까요? 두 사업을 한 회사의 이야기로 들려줄 한 문장이 필요했습니다.
ANALYSIS
지금의 홈페이지에서
지금의 홈페이지에서
발견한 세 가지
우리가 만든 홈페이지를 다시 처음 온 사람의 눈으로 읽었습니다. 회사는 몇 년 사이 크게 달라졌는데, 화면은 그 변화를 따라가지 못하고 있었습니다.
CI는 레드로 바뀌었는데,
두 사업이
서로 다른 회사처럼 보였습니다.
파이프라인은 어두운 DNA 이미지 위에서, 콜드체인은 물류센터 표와 지도 안에서 따로 소개되고 있었습니다. 신약 개발을 지켜보는 투자자와 백신 유통을 맡기려는 제약사가 같은 회사의 같은 원칙을 읽기 어려웠습니다.
두 사업을 「닿을 때까지」라는 한 문장으로 묶기중요한 소식이
같은 무게로 쌓이고 있었습니다.
임상 진행 공지와 주주간담회 안내, 인증 소식이 같은 모양의 목록으로 이어졌습니다. 주주와 파트너, 콜드체인 고객사가 각자에게 필요한 소식을 골라 읽기 어려웠습니다.
소식마다 프로그램과 사업 꼬리표를 달아 골라 읽게 하기홈페이지를 여는
네 사람을 먼저 그렸습니다.
바이오 상장사의 홈페이지에는 생각보다 다양한 사람이 옵니다. 방문자를 나이나 직업이 아니라 홈페이지를 연 이유로 나누었습니다. 이유가 다르면 가장 먼저 봐야 할 화면도 달라지기 때문입니다.
이번 공시는
무엇을 뜻할까?
- 최근 공시와 IR 자료
- 파이프라인 진행 현황
- 주주 안내
시안에서는 첫 화면의 최근 소식 띠
이 물질의 근거를
확인할 수 있을까?
- 핵심 물질 설명
- 임상 정보와 논문
- 협력 문의 창구
시안에서는 프로그램별 연구 자료 목록
우리 백신을
맡겨도 될까?
- 온도 기준과 관리 체계
- 센터 위치와 시설
- 견적 문의
시안에서는 온도 눈금과 센터 지도
이 질환을 위한 약이
개발되고 있을까?
- 질환을 쉬운 말로
- 개발 중인 프로그램
- 임상 정보 링크
시안에서는 질환별 쉬운 설명 카드
03 / BRAND THINKING
두 사업은
두 사업은
같은 일을 하고 있었습니다.
- 01 · 신약 개발시간을 지킵니다
라이선스 도입부터 임상과 허가까지, 한 물질이 환자에게 닿기까지는 긴 시간이 걸립니다. 신약 개발은 그 시간을 끝까지 견디는 일입니다.
- 02 · 의약품 콜드체인온도를 지킵니다
센터에서 병원까지 바이오의약품은 정해진 온도를 벗어나지 않아야 합니다. 콜드체인은 그 온도를 끝까지 지키는 일입니다.
- 03 · HLB테라퓨틱스그리고 사람에게 닿습니다
지켜 낸 시간과 온도는 결국 한 사람에게 닿습니다. 경영비전 Human Life Better가 말하는 더 나은 삶은 그 순간에 시작됩니다.
BRAND STATEMENT
Human Life Better를
우리말로 옮기면,
「환자에게 닿을 때까지」입니다.
경영비전 「Human Life Better」에서제안 문장 「환자에게 닿을 때까지」로
정확하게 말합니다.
과장된 수식어 대신 단계와 날짜로 말합니다. 바이오 상장사의 홈페이지에서는 한 문장이 투자 판단에 쓰일 수 있기 때문입니다.
한 번 더 풀어 씁니다.
질환과 물질의 이름 옆에는 환자와 가족이 읽을 수 있는 설명을 한 번 더 붙입니다. 전문 용어를 지우지 않고 곁에 쉬운 말을 둡니다.
같은 형식으로 알립니다.
임상 소식과 공시는 언제나 같은 순서와 모양으로 보여 줍니다. 형식이 같아야 지난 소식과 새 소식을 나란히 비교할 수 있습니다.
VISUAL PRINCIPLE · CLARITY
흐릿한 것을
흐릿한 것을
선명하게.
- 01어려운 과학 용어는 쉬운 말로 한 번 더 풀어 씁니다.
- 02개발 단계는 언제나 같은 모양의 선으로 보여 줍니다.
- 03투자자의 언어와 환자의 언어를 함께 준비합니다.
RGN-259는 각막 질환을 위해 개발 중인 점안제입니다. 눈을 위한 약을 개발하는 회사의 홈페이지라면 무엇보다 선명하게 읽혀야 한다고 생각했습니다.
PHOTOGRAPHY DIRECTION
사람의 표정 대신,
사람의 표정 대신,
빛과 물질로 말합니다.
지금의 첫 화면은 점안제를 넣는 인물 사진 한 장이었습니다. 희귀질환을 다루는 회사가 낯선 모델의 표정을 앞세우기보다, 연구실의 빛과 물질, 온도를 지키는 현장으로 이야기를 전하도록 사진의 기준을 세웠습니다.
- DO손과 도구, 빛과 물질
- DO현장의 차가운 빛과 정돈된 구도
- DON'T과장된 표정의 스톡 모델
- DON'T질환 부위를 그대로 드러내는 사진
04 / COLOR SYSTEM그룹의 레드는 그대로,
그룹의 레드는 그대로,
쓰는 자리는 한 방울로.
HLB테라퓨틱스의 레드는 그룹이 함께 쓰는 CI 색입니다. 레드를 바꾸지 않되 화면을 칠하는 색이 아니라 방울 하나의 자리에만 두기로 했습니다. 나머지는 깊은 잉크와 차가운 얼음색이 받칩니다.
HLB Red#EF3E36RGB 239 62 54
도착의 신호
그룹 CI 레드입니다. 현재 단계와 도착 지점처럼 가장 먼저 봐야 할 한 곳에만 씁니다.
- 흰 글씨
- 3.9:1 큰 글자
- 잉크 글씨
- 4.8:1 AA
Text Red#C42B22RGB 196 43 34
읽히는 레드
흰 바탕 위에서 레드로 글자나 링크를 써야 할 때 쓰는, 한 단계 깊은 레드입니다.
- 흰 글씨
- 5.7:1 AA
- 잉크 글씨
- 3.3:1 큰 글자
Ink#0B1220RGB 11 18 32
과학의 바탕
본문 글자와 어두운 장면의 바탕입니다. 검정보다 푸른 기운이 있어 얼음색과 자연스럽게 이어집니다.
- 흰 글씨
- 18.7:1 AAA
- 잉크 글씨
- 1.0:1 사용 안 함
Frost#9CC3D5RGB 156 195 213
차가운 보조
어두운 바탕 위의 보조 글자와 선, 온도 그래프에 씁니다.
- 흰 글씨
- 1.9:1 사용 안 함
- 잉크 글씨
- 10.0:1 AAA
Ice#EAF2F5RGB 234 242 245
맑은 면
넓은 밝은 면과 카드에 써서 화면에 차가운 여백을 만듭니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 잉크 글씨
- 16.5:1 AAA
Paper#F7F9FARGB 247 249 250
기본 바탕
순백보다 눈이 편한 기본 바탕입니다. 사진과 카드가 그 위에 놓입니다.
- 흰 글씨
- 1.1:1 사용 안 함
- 잉크 글씨
- 17.7:1 AAA
레드는 2퍼센트,
가장 중요한 한 곳에만.
한 화면에서 바탕과 글자가 대부분을 차지하고, 얼음색은 넓은 면을, 서리색은 선과 보조 정보를 맡습니다. 레드는 현재 단계, 본사 위치, 기준을 벗어난 온도처럼 그 화면에서 가장 먼저 봐야 할 한 곳에만 놓입니다.
흰 바탕 위의 CI 레드는 명도 대비가 3.9:1이라 작은 글자에는 쓰지 않습니다. 글자가 레드여야 할 때는 대비 5.6:1의 Text Red로 바꿔 씁니다.
TRY IT · 온도의 색
온도에도
온도에도
색을 정했습니다.
콜드체인 화면에서는 온도마다 쓰는 색을 미리 정했습니다. 차가울수록 깊은 서리색이 되고, 냉장 바이오의약품의 기준인 2~8℃는 얼음색 띠로 표시합니다. 기준을 벗어난 순간에만 레드가 켜집니다.
5℃냉장 기준 2~8℃ · 정상
TYPOGRAPHY세 가지 목소리
환자에게
닿을 때까지
한국어의 목소리
제목부터 본문까지 한국어는 Pretendard 한 가족으로 정리했습니다. 굵은 제목은 자간을 좁혀 단단하게, 본문은 행간 1.75로 편안하게 씁니다.
RGN-259
프로그램 이름의 목소리
넓게 펼친 영문은 HLB 워드마크의 기하학적인 글자와 어울리고, 큰 화면에서 프로그램 이름을 또렷하게 세웁니다.
2026.10.12
2–8℃ · Phase 3
데이터의 목소리
날짜와 단계, 온도처럼 비교해야 하는 숫자는 고정폭 글꼴로 맞춥니다. 숫자의 자리가 같아야 표를 빠르게 읽을 수 있습니다.
- Display96 / 800 / -0.06em
- Heading56 / 800 / -0.05em
- Title28 / 700
- Body18 / 400 · 행간 1.75
- Data15 / 500 · Mono · tabular
05 / GRAPHIC SYSTEMLINE & DROP
선 하나와 방울 하나로
모든 흐름을 그립니다.
선은 시간과 경로를, 방울은 도착과 지금을 뜻합니다. 두 도형만으로 파이프라인과 콜드체인 경로, 연혁과 공시 목록을 그려 어느 화면에서든 같은 회사로 읽히게 했습니다.
06 / DESIGN DIRECTIONS같은 뼈대, 네 가지 표정
하나의 정답을 그리기 전에,
네 가지 가능성을 펼쳤습니다.
같은 사실과 같은 정보 구조에서 출발해도 무엇을 먼저 보여 주느냐에 따라 홈페이지의 성격은 크게 달라집니다. 두 사업을 잇는 문장, 환자를 위한 과학, 투자자를 위한 숫자, 콜드체인의 온도라는 네 방향으로 메인 페이지를 끝까지 그려 보았습니다.
아래 화면은 실제로 제작한 시안입니다. 스크롤을 내리면 각 시안의 메인 페이지가 위에서 아래로 넘어갑니다.
STRUCTURE FIRST
색을 칠하기 전에 회색 상자로 뼈대를 먼저 맞췄습니다. 손잡이를 움직이면 같은 화면의 뼈대와 완성본을 비교할 수 있습니다.
최종 제안
Until It Reaches닿을 때까지
두 사업을 「시간을 지키는 일」과 「온도를 지키는 일」로 묶고, 두 선이 만나는 끝에 레드 방울 하나를 두었습니다. 어두운 첫 화면에서 밝은 본문으로 넘어가며 회사의 이야기를 차분하게 펼칩니다.
- 수면 위 레드 방울과 한 줄의 선으로 여는 첫 화면
- 현재 단계를 방울로 표시하는 파이프라인 보드
- 구리 본사에서 전국으로 이어지는 콜드체인 지도
Pretendard ExtraBold · Archivo · Plex Mono
탐색 시안
Clear Science선명한 과학
환자와 가족, 의료진이 질환과 물질을 이해하도록 과학을 쉬운 말로 풀어낸 방향입니다. 큰 명조 제목과 밝은 렌즈 사진이 설명하듯 말을 겁니다.
- 렌즈처럼 빛을 모으는 물방울로 여는 첫 화면
- 질환을 쉬운 말로 설명하는 세 장의 카드
- 43개의 점으로 보여 주는 Thymosin beta 4
Noto Serif KR · Pretendard
탐색 시안
Investor Desk숫자로 말하는
주주와 파트너가 가장 먼저 찾는 공시와 파이프라인을 첫 화면에 모았습니다. 어두운 대시보드 위에서 날짜와 단계가 고정폭 숫자로 정렬됩니다.
- 파이프라인·공시·핵심 숫자를 한 화면에 모은 대시보드
- 2000년부터 이어진 연혁 축
- License-in에서 License-out까지의 사업 모델
Archivo Expanded · IBM Plex Mono
탐색 시안
Cold Chain온도를 지키는
회사를 온도로 소개하는 방향입니다. 거대한 「2–8℃」와 서리 결정 사진이 콜드체인의 정확함을 먼저 보여 줍니다.
- 2–8℃를 크게 세운 첫 화면
- -70℃부터 상온까지 이어지는 온도 눈금
- 전국 일곱 곳의 센터와 열두 단계의 유통 과정
Archivo Black · Pretendard · Plex Mono
DECISION무엇을 기준으로 골랐을까요?
가장 화려한 시안보다
두 사업을 함께 말하는 시안을.
여섯 가지 기준으로 네 시안을 함께 평가했습니다. 가장 무게를 둔 기준은 신약 개발과 콜드체인을 한 회사의 이야기로 읽히게 하는가였습니다. 한쪽 사업만 앞세운 시안은 다른 쪽 방문자를 놓치기 때문입니다.
평가 기준A · 닿을 때까지B · 선명한 과학C · 숫자로 말하는D · 온도를 지키는
그룹 CI와의 조화
두 사업을 한 회사로
투자자의 정보 접근
환자·의료진의 이해
콘텐츠 운영과 확장
다른 바이오 기업과의 차별성
B · 선명한 과학
질환을 쉬운 말로 설명하는 카드
C · 숫자로 말하는
공시 바로가기와 고정폭 숫자
D · 온도를 지키는
온도 눈금과 센터 지도
A · 닿을 때까지최종 제안안
채택하지 않은 시안의 장점은 버리지 않고 A안의 상세 페이지로 옮겼습니다.
- 01다시 읽기운영 중인 홈페이지와 공개 자료 살펴보기
- 02나누기방문 이유로 네 사람 정의하기
- 03세우기두 사업을 잇는 한 문장 찾기
- 04그리기메인 페이지 시안 네 가지
- 05고르기여섯 가지 기준으로 함께 평가
- 06다듬기파이프라인·콜드체인 화면과 모바일
07 / PIPELINE같은 데이터, 두 개의 언어
투자자에게는 단계를,
환자에게는 질환을 먼저.
파이프라인은 같은 데이터로 두 가지 설명을 준비했습니다. 투자자와 파트너는 개발 단계와 지정 현황을 먼저 보고, 환자와 가족은 어떤 질환을 위한 약인지부터 읽습니다. 아래 화면의 버튼으로 두 설명을 바꿔 볼 수 있습니다.
개발 중인 프로그램
시안 화면
RGN-259Thymosin beta 4 점안제
신경영양성각막염 NK안과 · SEER · 미국 FDA 희귀의약품 지정
각막 상처가 잘 낫지 않는 희귀 질환각막의 감각이 줄어 작은 상처도 쉽게 낫지 않고 되풀이되는 퇴행성 질환입니다. RGN-259는 이 질환을 위해 개발 중인 점안제입니다.
임상 3상 · 허가를 받기 전, 많은 환자에게서 효과와 안전성을 확인하는 단계입니다.
RGN-259Thymosin beta 4 점안제
안구건조증 DED안과 · ARISE
눈물이 부족하거나 쉽게 마르는 질환눈물층의 양과 질이 줄거나 눈 표면이 손상되어 건조감과 화끈거림이 생기는 질환입니다.
임상 3상 · 허가를 받기 전, 많은 환자에게서 효과와 안전성을 확인하는 단계입니다.
OKN-007Disufenton sodium
교모세포종 · 신규 진단 GBM뇌종양 · 연구자 임상 · 미국 FDA 희귀의약품 지정
새로 진단받은 교모세포종뇌종양 가운데 악성도가 가장 높은 종양입니다. 방사선 치료, 테모졸로마이드와 함께 쓰는 방법을 미국 연구자 임상으로 확인하고 있습니다.
임상 2상 · 환자에게서 효과를 살피고 알맞은 용량을 찾는 단계입니다.
OKN-007Disufenton sodium
교모세포종 · 재발 GBM뇌종양 · 경구 임상
다시 생긴 교모세포종재발한 환자를 대상으로 먹는 약 형태의 임상을 진행하고 있습니다.
임상 1상 · 안전성을 중심으로 확인하는 첫 임상 단계입니다.
개발 단계는 2026년 10월 HLB테라퓨틱스 홈페이지에 공개된 진행 현황을 옮긴 것입니다.
CORE SUBSTANCE43개의 아미노산으로 이루어진
43개의 아미노산으로 이루어진
작은 단백질
RGN-259의 핵심 물질인 Thymosin beta 4는 우리 몸의 거의 모든 조직에 있는 작은 단백질입니다. 상세 페이지에서는 이런 설명을 숫자와 점으로 먼저 보여 주고, 연구 자료는 그 아래에 둡니다.
08 / COLD CHAIN
센터에서 병원까지,
센터에서 병원까지,
온도는 그대로.
콜드체인은 보이지 않는 일을 보여 줘야 하는 사업입니다. 전국 일곱 곳의 센터를 지도 위에 선으로 잇고, 운송 중인 온도를 기준 범위와 함께 보여 주는 화면을 제안했습니다.
- 수도권구리 본사와 이천 대형 냉장센터에서 출발합니다.
- 영남권대구와 부산의 Depot, 김해의 영남센터로 이어집니다.
- 호남 · 제주광주 Depot과 제주 직영센터까지 같은 기준으로 관리합니다.
열두 단계의 일을
한 줄의 선으로.
입고 검수부터 배송 완료 확인까지, 의약품 한 상자가 거치는 열두 단계를 하나의 선 위에 올렸습니다. 고객사는 지금 어느 단계를 지나고 있는지 한눈에 확인하고, 단계마다 지켜야 하는 관리 기준을 함께 읽을 수 있습니다.
- 01입고 제품 검수
- 02SKU 분류
- 03재고 등록
- 04전용 공간 적치
- 05출고 발주서 접수
- 06시스템 업로드
- 07배차 시스템 업로드
- 08운송 서류 출력
- 09피킹 · 패킹
- 10분류 적재
- 11출고
- 12배송 완료 확인
- 의약품별 전용 보관의뢰사별 전용 공간과 초저온 백신 보관
- KGSP 설비보안·소방·방충, 비상 발전 설비
- Validation보관소·수송 용기·차량, KOLAS 검교정
- TMS · WMS배송과 창고를 잇는 디지털 관리
- 우발상황 대응대책위원회와 상황별 대응 매뉴얼
- 직무교육 · 문서관리KGSP 직무교육, SOP와 데이터 무결성
09 / INVESTOR RELATIONS공시를 기다리는 사람을 위해
소식의 종류가 달라도,
형식은 언제나 같게.
바이오 상장사의 홈페이지에서 가장 자주 열리는 곳은 투자정보입니다. 공시와 IR 자료, 주주 안내를 첫 화면의 한 줄에서 바로 열 수 있게 했습니다.
임상과 관련된 소식은 프로그램, 적응증, 단계, 한 문장 요약, 원문 공시의 순서를 지키는 카드 형식으로 정했습니다. 소식마다 형식이 같으면 지난 소식과 새 소식을 나란히 비교할 수 있습니다.
최근 공시시안 화면
- 기업설명회(IR) 개최공시
- 증권발행결과(자율공시)공시
- 콜드체인 품질·환경 관리체계 국제표준 인증보도자료
- HLB그룹 통합 주주간담회 개최 안내공지
공시IR 자료실주주 안내지배구조
10 / MOBILE손안에서도 끊기지 않는 선
작은 화면에서도
선은 이어집니다.
공시를 확인하는 주주도, 센터 위치를 찾는 고객사도 휴대폰으로 홈페이지를 처음 여는 경우가 많습니다. 작은 화면에서는 최근 소식을 첫 화면 아래에 바로 두고, 파이프라인은 가로로 넘겨 보게 했습니다.
- 첫 화면 바로 아래의 최근 공시
- 가로로 넘겨 보는 파이프라인 단계
- 지도 대신 목록으로 바뀌는 센터 안내
- 엄지가 닿는 자리의 문의 버튼
DESIGN SYSTEM같은 선에서 나온
같은 선에서 나온
부품들
버튼과 꼬리표, 단계 막대와 온도 칩까지. 담당자가 바뀌어도 같은 화면을 만들 수 있도록 부품 단위로 정리했습니다.
YOUR SCIENCE, SEEN CLEARLY.
당신의 기술은
당신의 기술은
누구에게 닿아야 하나요?
바이오·제약 기업의 홈페이지는 투자자와 파트너, 환자와 채용 지원자가 함께 읽는 곳입니다.
누가 오는지부터 함께 정리하겠습니다.
- Client
- HLB테라퓨틱스
- Scope
- 리서치, 브랜드 경험 전략, 정보 구조, UI 디자인, 인터랙션 프로토타입
- Brand
- CI: HLB그룹 · 해석과 웹 적용: 블루캔버스
- Status
- 리뉴얼 제안 (최종 미채택) · 운영 중인 홈페이지 제작
