본문 바로가기
목록으로
목록으로

한국과학창의재단 과제관리시스템

MOBILE & WEB DESIGN

한국과학창의재단
과제관리시스템 신규 구축

프로젝트 요약 웹 접근성 지침을 준수한 사용자 맞춤형 통합 과제관리 UI/UX 구축
작업 기간 2025.08.01 ~ 2026.03.30 (약 8개월)
담당 범위
디자인
100%
퍼블리싱
100%
작업 환경 Photoshop, Illustrator, HTML5, CSS3, JS, jQuery
적용 표준 웹 콘텐츠 접근성 지침 준수 및 모바일 반응형 웹
사이트 링크 홈페이지 방문 🔗
PC 메인
모바일 메인
PROJECT CONCEPT

프로젝트 기획 의도 및 목표

연구자와 관리자 모두를 만족시키는
스마트한 통합 과제관리 플랫폼 신설.

한국과학창의재단의 다양한 과학 기술 및 창의 인재 육성 사업을 원활하게 운영하기 위해, 직관적인 공고 확인부터 체계적인 과제 접수 및 사후 관리까지 전 과정을 아우르는 새로운 온라인 플랫폼을 구축했습니다.

방대한 연구 행정 데이터를 누구나 쉽게 다룰 수 있도록 웹 접근성을 강화하고, 사용자 역할(연구자, 심사위원, 관리자)에 맞춘 직관적이고 유연한 대시보드 환경을 설계하는 데 중점을 두었습니다.

CORE REQUIREMENT

핵심 구축 방향

효율적인 과제 탐색과
스마트한 행정 처리 시스템의 결합.

기획 방향탐색 직관화
구현 목표카드형 대시보드
01. USER-CENTRIC DASHBOARD

공고의 접수 상태와 핵심 매뉴얼을 메인 전면에 카드 형태로 배치하여, 사용자가 필요한 메뉴에 가장 빠르게 접근할 수 있도록 동선을 설계했습니다.

기획 방향현황 시각화
구현 목표진행 단계 인디케이터
02. PROCESS VISUALIZATION

마이페이지 내 과제 현황을 협약, 수행, 정산, 종료 등 단계별 프로그레스 바 형태로 시각화하여 현재 진행 상태를 직관적으로 전달합니다.

기획 방향접근성 극대화
구현 목표모바일 최적화
03. MOBILE WORKSPACE

복잡한 데이터 테이블과 내부 시스템 UI를 모바일 환경에 유연하게 대응시켜, 장소에 구애받지 않는 끊김 없는 행정 업무를 지원합니다.

DESIGN STRATEGY

어떤 기준으로 설계했는가

신뢰와 혁신을 상징하는 블루 톤과
콘텐츠 가독성을 높이는 클린 레이아웃.

한국과학창의재단의 CI 컬러인 블루 계열을 메인으로 활용하여 공공기관의 신뢰도와 과학기술의 혁신적인 이미지를 부여했습니다. 텍스트 위주의 방대한 서식 폼과 목록들이 시각적 피로도를 주지 않도록, 여백을 충분히 확보하고 명확한 탭(Tab) 구조를 활용한 클린 레이아웃을 전면에 적용했습니다.

WEB DESIGN : HOME

직관적인 카드형 정보 배치와 이용매뉴얼 Quick UI

주요 사업공고에 '접수중/접수예정' 상태 뱃지를 적용하여 핵심 과제를 한눈에 파악할 수 있습니다. 퀵 매뉴얼 바와 시스템 문의 콜센터를 전면에 배치하여 대시보드 중심의 사용성을 극대화했습니다.

한국과학창의재단 과제관리시스템 메인 화면 UI
WEB DESIGN : ONLINE SYSTEM

통합 검색과 4열 그리드 기반 온라인접수 대시보드

상단에 직관적인 검색바를 배치하고 하단에는 탭 필터링과 4열 카드 그리드를 적용했습니다. 공고 기간, 접수 상태, 원클릭 신청 버튼을 직관적으로 파악하도록 UI를 고도화했습니다.

한국과학창의재단 온라인접수 시스템 대시보드 UI
WEB DESIGN : MY PAGE

진행 단계 시각화로 완성한 맞춤형 과제 수행 현황

수행 중인 과제 상태를 뱃지로 명확히 구분하고, 협약부터 종료까지의 진행 위치를 아이콘 프로그레스 바로 제공합니다. 주요 정보와 팝업조회 버튼을 빠르게 이용할 수 있도록 탐색 동선을 최적화했습니다.

한국과학창의재단 마이페이지 과제 현황 UI 및 진행 단계 시각화
MOBILE DESIGN

디바이스 제약 없는 유연한 반응형 UI/UX

다양한 모바일 해상도와 브라우저 환경에 완벽히 대응합니다. 복잡한 표와 현황 대시보드가 모바일에 최적화된 세로형 카드로 자연스럽게 재배치되어 장소에 구애받지 않는 쾌적한 열람을 지원합니다.

모바일 메인 화면
모바일 마이페이지 과제 현황 화면

과제관리시스템 내부 관리 UI 시안

업무 효율성과 데이터 시각화를 극대화하기 위해 세밀하게 설계된 내부 시스템 주요 화면입니다. 복잡한 행정 서식을 직관적으로 제어할 수 있도록 레이아웃을 부각했습니다.
(보안 정책 준수를 위해 화면 내 주요 데이터는 더미 데이터로 구성되었습니다.)

DOCUMENT ISSUANCE SYSTEM

단계별 프로세스 및 이력 조회 중심 UI

본인확인부터 발급신청까지 4단계 스텝 배너로 진행 단계를 명확히 전달합니다. 조회된 과제수행실적 목록을 직관적인 데이터 테이블과 상태 태그로 구성하여 관리자의 조회 편의성을 극대화했습니다.

확인서 발급 이력조회 및 목록 UI 시안
REAL-TIME PREVIEW UI

문서 실시간 미리보기 및 발급 설정 분할 UI

발급될 증명서 레이아웃을 좌측에 실시간으로 보여주고, 우측에 용도 선택 및 출력 설정 패널을 분할 배치하여 출력 전 오류를 방지하고 발급 프로세스의 효율성을 대폭 향상시켰습니다.

확인서 문서 미리보기 및 발급신청 UI 시안