대학·연구소 연구자
지금 신청할 수 있는 공고가 있는지, 접수는 언제 마감되는지 확인합니다.
BLUECANVAS SELECTED WORK / 03PUBLIC · BIO R&D
KOREA DRUG DEVELOPMENT FUND · 2021 → 2026
신약개발의 긴 여정,
그 첫 화면을
설계했습니다.
국가신약개발재단 홈페이지를 처음 만든 2021년부터
다시 그린 2026년까지의 기록입니다.
2026 확정안현재 운영 중인 첫 화면
01 / THE BRIEF이름이 바뀌던 해의 과제
기관의 이름이 바뀌던 해,
홈페이지가 할 일도
달라졌습니다.
2021년 1월, (재)범부처신약개발사업단은 국가신약개발재단으로 새롭게 출발했습니다. 10년 동안 이어 온 범부처전주기신약개발사업을 마무리하고, 국가신약개발사업과 코로나19 치료제·백신 신약개발사업을 함께 이끌게 되었습니다.
끝난 사업의 기록과 새 사업의 공고가 한 사이트 안에 함께 있어야 했습니다. 연구자와 기업이 이 사이트를 찾는 이유도 분명했습니다. 지금 신청할 수 있는 공고를 확인하고, 제출할 서식을 내려받고, 어떤 과제가 지원받고 있는지 살피는 일입니다.
그래서 기관을 멋지게 소개하는 화면보다, 이 일을 빨리 끝내게 하는 화면을 먼저 설계했습니다.
운영 중인 홈페이지 방문하기3
개의 사업을 한 사이트에 담았습니다
9
개의 메인 시안을 그렸습니다
2021년 다섯 안, 2026년 네 안
5+
년 넘게 함께 운영하고 있습니다
2021 · A NEW NAME
(재)범부처신약개발사업단
국가신약개발재단
2011년부터 이어 온 사업단이 2021년 1월 재단으로 새롭게 출발했습니다.
2021년 첫 시안의 첫 문장도 이 소식이었습니다.
- 2011.09(재)범부처신약개발사업단 설립
- 2020.09코로나19 치료제·백신 신약개발사업단 출범
- 2021.01국가신약개발재단 설립
02 / WHO COMES HERE누가, 무엇을 찾으러 오는가
네 부류의 방문자,
서로 다른 급한 일.
디자인을 시작하기 전에 방문자를 네 부류로 나누고, 각자가 가장 먼저 하려는 일을 적었습니다. 겹치는 일이 가장 많은 정보가 첫 화면의 맨 앞자리를 차지합니다.
제약·바이오 기업
지원 범위와 프로그램, 사업화 지원 내용을 비교합니다.
과제 수행기관
규정과 서식을 내려받고, 자주 묻는 질문과 교육·행사 일정을 찾습니다.
언론·유관기관·국민
사업의 성과와 보도자료, 매달 발행하는 소식지를 읽습니다.
FIRST SCREEN PRIORITY
첫 화면에 놓을 순서를 먼저 정했습니다.
- 01사업공고접수기간과 진행 상태를 함께 보여줍니다
- 02공지사항제목을 한 줄에 모두 보여줍니다
- 03사업별 바로가기참여하는 사업에서 바로 출발합니다
- 04성과와 파이프라인숫자와 그래프로 요약합니다
- 05소식보도자료, 소식지, 갤러리를 모읍니다
03 / BRAND THINKING로고의 파랑에서
로고의 파랑에서
출발했습니다.
정밀하고 차분한 실험실의 질감 위에
공공기관의 신뢰를 얹을 색을 찾았습니다.
CI는 재단이 보유한 원본을 그대로 쓰고, 웹에서는 깃발의 칸을 해석한 모티프를 따로 만들었습니다.
새로 그리지 않고,
규칙으로 읽었습니다.
국가신약개발재단의 CI는 하늘색에서 짙은 파랑으로 내려가는 사각형 위에, 칸을 쌓아 오른쪽 위로 올라가는 깃발을 얹은 형태입니다. 저희는 이 CI를 웹에서 지킬 두 가지 규칙으로 해석했습니다.
칸을 쌓아 올라가는 깃발
단계를 하나씩 통과하는 신약개발처럼, 정보도 순서대로 쌓이게 배치했습니다. 진행 방향은 언제나 왼쪽에서 오른쪽입니다.
밝은 파랑에서 짙은 파랑으로
밝은 파랑은 버튼과 공고처럼 행동을 부르는 곳에, 짙은 남색은 제목과 배경처럼 신뢰를 쌓는 곳에 썼습니다.
- TRUST국가 R&D 사업을 맡은 기관의 신뢰
- FULL CYCLE유효물질부터 임상까지 이어지는 전주기
- OPEN산·학·연·병을 잇는 개방형 혁신
- PUBLIC누구나 찾고 읽을 수 있는 공공성
04 / COLOR SYSTEMCI에서 꺼낸 다섯 가지 색
색마다 맡은 일을
먼저 정했습니다.
파랑은 많이 쓸수록 흐려집니다. 그래서 다섯 가지 색에 각자의 역할을 나눠 주고, 역할 밖에서는 쓰지 않았습니다. 코럴은 화면 전체에서 2%를 넘지 않습니다.
신뢰의 바탕
히어로와 성과 영역의 배경입니다. 2026년 확정안에서는 화면의 3분의 1을 차지합니다.
행동의 색
버튼과 링크, 탭처럼 누를 수 있는 요소에 씁니다. CI의 짙은 파랑에서 가져왔습니다.
이어 주는 색
그라데이션과 그래프에서 파랑을 밝게 이어 줍니다. CI의 위쪽 하늘색입니다.
오래 읽는 면
공고 목록과 카드처럼 오래 읽는 영역의 바탕입니다.
단 하나의 강조
연구·산업 동향처럼 성격이 다른 정보를 구분할 때만 아껴 씁니다.
MEASURED COLOR RATIO2021년과 2026년,
2021년과 2026년,
첫 화면의 색은 이렇게 달라졌습니다.
2021년의 첫 화면은 밝은 회색 위에 놓인 게시판에 가까웠습니다. 2026년에는 짙은 남색이 화면의 3분의 1을 차지하고, 파랑의 비중은 일곱 배 넘게 늘었습니다.
2021
2026
두 확정안의 메인 화면 전체를 색상 토큰 기준으로 분류해 측정했습니다.
TYPOGRAPHY가장 자주 받은 요청은
가장 자주 받은 요청은
‘글씨를 조금 더 크게’였습니다.
2021년 피드백에서 글자 크기에 관한 요청이 여러 번 반복되었습니다. 2026년 리뉴얼에서는 본문을 16px 이상으로 두고, 제목과 숫자의 크기 차이를 크게 벌려 훑어보기 쉽게 만들었습니다.
성공적인 신약개발,
대한민국의 미래입니다.
- Display60 / Black
- Section36 / Bold
- Card title24 / Bold
- Lead18 / Medium
- Body16 / Regular
05 / 2021 · FIVE MAIN DRAFTS히어로를 걷어내기까지
다섯 번 그린 첫 화면,
주인공이 바뀌었습니다.
처음 두 시안은 새 이름을 알리는 큰 이미지로 시작했습니다. 세 번째 시안에서 이미지를 걷어내고 사업공고를 첫 화면의 주인공으로 올렸습니다. 아래 화면은 당시 제작한 디자인 원본입니다.
새 이름을 크게 알리는 첫인상
투명한 세포 이미지를 첫 화면 가득 펼치고, 명칭 변경 소식을 제목으로 올렸습니다. 재단 소개는 하늘색에서 파랑으로 흐르는 그라데이션 카드에 담았습니다.
첫인상은 밝아졌지만, 공고와 공지는 화면 아래로 밀려났습니다.
짙은 남색과 DNA로 그린 첨단 바이오
어두운 남색 배경과 DNA 이미지로 첨단 바이오의 인상을 강하게 냈습니다. 공지사항은 히어로 바로 아래에 띠 형태로 붙였습니다.
인상은 강해졌지만, 찾는 정보까지의 거리는 그대로였습니다.
히어로를 걷어낸 대시보드
큰 이미지를 덜어내고 사업공고를 첫 화면에서 가장 큰 카드로 올렸습니다. 접수기간과 진행 상태를 카드 안에서 바로 확인할 수 있습니다.
첫 화면의 주인공이 이미지에서 공고로 바뀌었습니다.
메뉴의 이름부터 다시 정했습니다
메뉴를 알림마당·사업안내·재단소식·재단소개로 정리하고, 사업단 파이프라인과 연구동향을 첫 화면으로 올렸습니다.
기관 내부의 말 대신 이용자가 쓰는 말로 메뉴를 부르기 시작했습니다.
사업마다 문을 따로 냈습니다
세 개의 사업을 메뉴 첫 단계에 나란히 세우고, 펼침 메뉴에서 모든 하위 페이지를 한 번에 보여주었습니다. 페이스북·유튜브·뉴스레터 구독은 한 줄에 모았습니다.
이용자는 자신이 참여하는 사업에서 바로 출발할 수 있게 되었습니다.
06 / FEEDBACK INTO RULES
요청 하나하나가
설계 기준이 되었습니다.
2021년 5월부터 8월까지 재단과 주고받은 수정 요청 문서를 다시 읽었습니다. 요청을 화면 하나로 끝내지 않고, 이후 모든 페이지에 적용할 규칙으로 바꿨습니다.
7개의 요청이
사이트 전체의 규칙이 되었습니다
사이트 전체의 규칙이 되었습니다
-
공지 제목은 한 줄에 모두 보이게 하고, 최신동향과 지원과제는 목록으로 보여 달라는 요청이 있었습니다.
메인은 목록을 빠르게 훑는 화면입니다.
-
사업공고 게시판을 새로 만들고, 접수 시작일과 마감일, 사업별 말머리 검색을 넣기로 했습니다.
공고는 기간과 상태를 가진 데이터입니다. 마감일이 지나면 상태가 자동으로 ‘종료’로 바뀝니다.
-
비전, 목표, 지원 범위, 추진 전략, 추진 체계를 한 페이지에 차례대로 담아 달라는 요청이었습니다.
사업 소개는 한 페이지 안에서 하나의 흐름으로 읽힙니다.
-
메뉴와 본문 글자를 조금 더 크게 하고, 모든 하위 메뉴를 탭으로 구분해 달라는 요청이었습니다.
꾸밈보다 읽기 쉬움을 먼저 챙깁니다.
-
세 가지 추진 전략을 같은 파란 계열 안에서 서로 다른 색으로 구분해 달라는 요청이었습니다.
같은 계열 안에서 명도로 구분합니다.
-
긴 연혁의 세로 길이를 줄이고, 시기별로 묶고, 연도를 잇는 선이 끊기지 않게 해 달라는 요청이었습니다.
긴 기록도 짧은 호흡으로 읽히게 합니다.
-
이미 끝난 범부처전주기신약개발사업은 회색으로 처리해 다른 두 사업과 구분해 달라는 요청이었습니다.
끝난 사업은 흐리게 두고, 기록은 남깁니다.
07 / THE FULL CYCLE
10년이 걸리는 길을
10년이 걸리는 길을
한 줄로 읽게.
사업 소개 페이지에서 가장 공들인 부분은 신약개발의 전주기를 그린 이 한 줄이었습니다. 어떤 프로그램이 어느 단계를 돕는지, 표보다 진행 방향이 먼저 읽히게 했습니다.
-
01타겟 발굴·검증TARGETTPP
-
유효물질 02스크리닝SCREENING
-
선도물질 03최적화OPTIMIZATION
-
후보물질 04비임상NON-CLINICALPRE-IND
-
05임상시험 디자인CLINICAL DESIGNIRB · IND
-
06임상 1·2·3상CLINICAL TRIAL
-
07품목허가 신청NDA승인
-
08출시LAUNCH
유효물질 발굴부터 임상 2상까지, 국가신약개발사업이 지원하는 구간
08 / PIPELINE표에서 그래프로, 그래프에서 검색으로
같은 데이터,
세 번의 다른 화면.
파이프라인은 재단이 가장 자주 업데이트하는 데이터입니다. 2021년에는 개발 단계별 표로, 2023년에는 치료 분야별 막대그래프로, 2026년에는 숫자 요약과 통합 검색으로 화면을 바꿔 왔습니다.
개발 단계마다 열을 나누고 과제를 카드로 쌓았습니다.
치료 분야마다 개발 단계와 모달리티의 분포를 한 줄로 비교합니다.
전체 과제 수와 단계별 수를 먼저 보여주고, 과제명·적응증·타겟·수행기관으로 한 번에 찾습니다.
국가신약개발사업 협약과제609개
- Discovery409
- Preclinical127
- Phase 150
- Phase 223
운영 중인 파이프라인 페이지의 공개 수치입니다(2026년 10월 기준).
09 / 2026 · RENEWAL5년 뒤, 다시 그린 첫 화면
대시보드는 지키고,
순서와 인상을 다시.
5년 사이 재단의 사업은 늘어났습니다. SEED 창출 플랫폼과 CMC 인프라, 신약R&D사업화지원, 교육·행사 신청까지 첫 화면이 안내해야 할 곳이 많아졌습니다.
2021년에 정한 ‘공고가 먼저’라는 원칙은 지키고, 성과와 파이프라인을 숫자와 그래프로 보여주는 방법을 네 가지 방향으로 탐색했습니다.
-
A2026.05
소개를 먼저 읽는 순서
-
B2026.05
성과를 먼저 보여주는 순서
-
C2026.05
보고서처럼 읽히는 에디토리얼
-
D2026확정안
가장 짙은 공고, 숫자로 말하는 성과
B안의 순서를 바탕으로 사업공고 카드를 가장 짙은 남색으로 바꿔 화면에서 가장 먼저 눈에 들어오게 했습니다. 재단 소개는 문의 바로 앞에 두었습니다.
확정안 · 현재 운영 중
시안 직접 보기
10 / DETAILS확정안을 가까이에서
가까이 볼수록
이유가 보이도록.
확정안의 각 영역은 2021년에 정한 규칙과 2026년에 새로 정한 우선순위를 함께 따릅니다. 실제 운영 화면을 영역별로 나눠 소개합니다.
진행 중인 사업공고를 짙은 남색 카드에 올리고 접수기간과 진행 배지를 붙였습니다. 옆에는 연구자와 기업이 자주 찾는 바로가기를 모았습니다.
협약과제, 기술이전, IND 승인 같은 성과를 원형 지표로 보여주고, 파이프라인은 치료군·모달리티·개발단계 세 가지 원형 그래프로 나눴습니다.
보도자료, 뉴스레터, 갤러리, 유튜브를 같은 높이의 열로 나눠 원하는 소식을 바로 고를 수 있게 했습니다.
펼침 메뉴에서 모든 하위 페이지를 한 번에 보여줍니다. 종료된 사업에는 ‘종료’ 표시를 붙여 진행 중인 사업과 구분했습니다. 2021년에 정한 규칙을 그대로 이어 갔습니다.
11 / EVERY PAGE하위 페이지까지,
하위 페이지까지,
같은 규칙으로.
공고 목록, 파이프라인, 사업 소개, 연혁, 행사 신청까지
같은 머리말과 탭, 표의 규칙으로 다시 맞췄습니다.
12 / IN YOUR HANDS이동 중에 확인하는 공고
마감일은
손안에서 확인합니다.
공고 마감일을 확인하는 일은 이동 중에도 자주 일어납니다. 모바일에서는 하위 메뉴를 가로로 밀어 넘기는 탭으로 바꾸고, 파이프라인은 전체 과제 수와 검색창을 한 카드에 모았습니다.
첫 화면에서 바로 보이는 사업 소개 버튼가로로 넘기는 하위 메뉴 탭숫자와 검색을 한 카드에 모은 파이프라인표는 가로 스크롤로 열을 지킵니다
13 / AFTER LAUNCH오픈한 다음 날부터
만들고 끝나지 않았습니다.
5년째 함께 고칩니다.
공공기관의 홈페이지는 사업이 바뀔 때마다 함께 바뀌어야 합니다. 오픈 이후에도 새 사업의 페이지를 더하고, 소식지를 만들고, 행사 신청을 받는 일까지 재단과 함께 운영하고 있습니다.
- 2021.08국문 홈페이지 구축
메인과 하위 페이지를 디자인하고, 사업공고 게시판과 자동 종료 기능을 만들었습니다.
- 2021.12오시는 길 추가
재단과 평가장, 두 곳의 위치를 지도와 함께 안내했습니다.
- 2022소식지 디자인
매달 발행하는 뉴스레터와 카드뉴스의 디자인을 맡았습니다.
- 2023.02파이프라인 화면 개편
과제 분포를 치료 분야와 개발 단계별 막대그래프로 다시 그렸습니다.
- 2023.05CMC·행사 신청 페이지
CMC 인프라 안내와 교육·행사 신청 페이지를 더했습니다.
- 2023.07Global C&D 사이트 리뉴얼
해외 기관의 기술과 국내 기업을 잇는 테크페어 사이트를 다시 만들었습니다.
- 2023.11SEED 창출 플랫폼
신약개발 SEED 창출 플랫폼의 국문 홈페이지를 만들었습니다.
- 2024.08사업 소개 개편
바뀐 사업 내용에 맞춰 국가신약개발사업 소개 페이지를 고쳤습니다.
- 2026.05메인 리뉴얼 시안
첫 화면의 순서와 인상을 네 가지 방향으로 다시 탐색했습니다.
- 2026.10운영 중
확정안을 운영하면서 교육·행사 신청 완료 안내 메일과 소식지 발송까지 함께 관리합니다.
14 / MEET THE WEBSITE이제, 직접 확인해 보세요.
설명한 선택들이
지금도 매일 쓰이고 있습니다.
공고를 확인하는 연구자부터 소식지를 읽는 국민까지,
국가신약개발재단 홈페이지에서 직접 둘러보세요.
FOR PUBLIC INSTITUTIONS, FOUNDATIONS AND R&D PROGRAMS
정보가 복잡할수록,
정보가 복잡할수록,
첫 화면은 단순해야 합니다.
공공기관과 재단, 연구 지원 사업의 홈페이지를 고민하고 계신다면
지금 가진 자료와 이용자의 요청부터 함께 살펴보겠습니다.
다른 프로젝트
국가신약개발재단 / WEBSITE 2021 · RENEWAL 2026IA · UI/UX Design · Publishing · Development · OperationBLUECANVAS