본문 바로가기
데브파이브
태블릿 목업 — 관리자 대시보드 (Antool)
화면: 키보드 케이스를 장착한 태블릿이 책상 위에 놓인 목업 (화면에 대시보드)
장면
- 키보드 폴리오를 장착한 태블릿이 어두운 책상 위에 세워진 목업
- 우측: 또 다른 태블릿(뒷면), 스프링 노트 여러 권
- 배경: 밝은 회색 벽, 오피스 분위기
화면 UI (부분 노출)
- 상단 바: 앤툴 (Antool Co., Ltd.) · 기업명 등 메뉴
- 탭: 그룹형 · 그룹별 · 이사회관리 · 회원관리 · 사업내역
- (우측) 데이터 내보내기
- 지표 카드 4종 (남색): 2025년 1월 기준 그룹 현황 · 회원 수 등
- 라인 차트 + 막대 차트 (연도별 지표 추이)
창업진흥원 PMS

창업진흥원 PMS 프로젝트는 정해진 창업진흥원 디자인 시스템을 기반으로, PMS 실무자 응용 서비스 내 주요 화면을 사용자가 더 쉽게 이해하고 활용할 수 있도록 디자인한 작업입니다.


본 프로젝트에서는 성과통계조회 화면, 기업카드, 닮음 지수 화면을 중심으로 복잡한 공고 및 기업 정보를 체계적으로 확인할 수 있는 화면 구성을 설계했습니다. 그래프, 표, 증감 수치, 태그, 색상, 툴팁 등 다양한 시각 요소를 적절히 활용해 많은 정보가 포함된 화면에서도 사용자가 필요한 데이터를 빠르게 탐색할 수 있도록 구성했습니다.


또한 디자인 시스템과 웹 접근성 기준을 준수하며, 신뢰감과 전문성을 갖춘 공공 서비스형 UI를 목표로 진행되었습니다. 방대한 정보는 접고 펼칠 수 있는 구조와 가로 스크롤 탐색 방식을 함께 고려해, 실무자가 많은 데이터를 효율적으로 확인할 수 있는 사용 경험을 설계했습니다.

제작 기간2025. 06 - 2025. 08
고객사앤톡
사용 기술Figma
서비스
미리보기
상단 헤더
로고: STP 창업진흥원
페이지 제목: 사업공고 조회
탭: 수급목적(선택됨) | 상세정보
좌측 사이드바 (필터/목록)
진행 단계 표시 (스텝 인디케이터)
공고 목록 (체크박스 리스트):
- 사업명 (공고번호)
- 창업성공패키지 (공고번호...)
- 여러 개의 지원사업 공고 항목들
- 각 항목에 첨부/링크 아이콘
버튼: 사업 상세보기 / (조회)
메인 콘텐츠 (대시보드)
공고 선택
- 공고 선택 드롭다운
- 총 N개 공고 (파란색 배너)
1. 연도별 참여기업 수
- 막대 + 꺾은선 혼합 그래프
- X축: 2021 ~ 2025 (연도별)
- 데이터 테이블 (참여기업/모집기업 등 구분)
2. 사업별 유형
- 누적 막대그래프
- X축: 2021 ~ 2025
- 유형별 구분 (색상 범례)
3. 성별
- 인구 피라미드형 가로 막대그래프 (남/여)
- X축: 연도별
4. 연령
- 도넛 차트
- 중앙 수치: 2,432명 (전체 참여 인원)
- 연령대별 구분 (10대~60대 이상)
5. 지역
- 대한민국 지도 (시각화)
- 총계: 2,432/2,643
- 지역별 순위 막대: 경기, 서울, 부산, 인천, 대구, 광주, 대전, 울산 등
6. 산업분류
- 트리맵(Treemap) 차트
- 업종별 구분 (색상 블록)
- 하단 상세 데이터 테이블
화면에 마우스를 올려보세요!
고객 요구사항
& 프로젝트 방향
클라이언트의 인터뷰 및 협의를 통해 프로젝트의 핵심 요구사항을 도출하였으며, 인사이트를 바탕으로 사용자 경험과 브랜드 관점에서 개선이 필요한 5가지를 기반으로 설계하였습니다.
1.
창업진흥원 디자인 시스템을 준수한 PMS 실무자 응용 서비스 화면 디자인
2.
성과통계조회, 기업카드, 닮음 지수 화면의 정보 구조와 사용 흐름 정리
3.
그래프, 표, 증감 수치, 태그, 색상, 툴팁을 활용한 데이터 탐색성 강화
4.
방대한 정보를 접고 펼칠 수 있는 구조와 가로 스크롤 방식으로 효율적인 확인 경험 제공
5.
웹 접근성을 고려해 누구나 이해하기 쉬운 신뢰감 있고 전문적인 UI 방향 반영
6.
검토 및 발표 과정에서 화면 흐름을 직접 확인할 수 있는 시연용 프로토타입 제공
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.헤더
typo
폰트 굵기: ExtraBold · Bold · Medium · Regular · Light · Thin
메인 폰트
Aa — Pretendard GOV
타이포그래피 스케일
Navigation Title — 24px
창업성공패키지
모집공고
Heading — 22px
창업성공패키지
모집공고
Label — 19px
창업성공패키지
모집공고
Body — 16px
창업성공패키지
모집공고color
메인 컬러 팔레트
색상	HEX	용도
🔵 밝은 파랑	#3B82F6	Primary
🔵 진한 남색	#002B68	Secondary
🔵 파랑	#004EA1	Secondary2
그레이스케일
HEX	위치
#F8F9FE	좌측 (밝은 흰색)
#8F9098	중앙 (회색)
#2F3036	우측 (진한 회색)헤더
typo
폰트 굵기: ExtraBold · Bold · Medium · Regular · Light · Thin
메인 폰트
Aa — Pretendard GOV
타이포그래피 스케일
Navigation Title — 24px
창업성공패키지
모집공고
Heading — 22px
창업성공패키지
모집공고
Label — 19px
창업성공패키지
모집공고
Body — 16px
창업성공패키지
모집공고color
메인 컬러 팔레트
색상	HEX	용도
🔵 밝은 파랑	#3B82F6	Primary
🔵 진한 남색	#002B68	Secondary
🔵 파랑	#004EA1	Secondary2
그레이스케일
HEX	위치
#F8F9FE	좌측 (밝은 흰색)
#8F9098	중앙 (회색)
#2F3036	우측 (진한 회색)
타이포 그래피
& 컬러 시스템
사용자의 시각적 편의를 고려한 명도 대비와 체계적인 컬러 시스템을 구축하였으며, 확장이 용이한 타이포그래피와 공통 컴포넌트를 설계하여 브랜드의 일관된 경험을 구현하였습니다.헤더
typo
폰트 굵기: ExtraBold · Bold · Medium · Regular · Light · Thin
메인 폰트
Aa — Pretendard GOV
타이포그래피 스케일
Navigation Title — 24px
창업성공패키지
모집공고
Heading — 22px
창업성공패키지
모집공고
Label — 19px
창업성공패키지
모집공고
Body — 16px
창업성공패키지
모집공고color
메인 컬러 팔레트
색상	HEX	용도
🔵 밝은 파랑	#3B82F6	Primary
🔵 진한 남색	#002B68	Secondary
🔵 파랑	#004EA1	Secondary2
그레이스케일
HEX	위치
#F8F9FE	좌측 (밝은 흰색)
#8F9098	중앙 (회색)
#2F3036	우측 (진한 회색)헤더
typo
폰트 굵기: ExtraBold · Bold · Medium · Regular · Light · Thin
메인 폰트
Aa — Pretendard GOV
타이포그래피 스케일
Navigation Title — 24px
창업성공패키지
모집공고
Heading — 22px
창업성공패키지
모집공고
Label — 19px
창업성공패키지
모집공고
Body — 16px
창업성공패키지
모집공고color
메인 컬러 팔레트
색상	HEX	용도
🔵 밝은 파랑	#3B82F6	Primary
🔵 진한 남색	#002B68	Secondary
🔵 파랑	#004EA1	Secondary2
그레이스케일
HEX	위치
#F8F9FE	좌측 (밝은 흰색)
#8F9098	중앙 (회색)
#2F3036	우측 (진한 회색)

비즈니스의 ,

아이디어만 있어도 됩니다. 첫 상담부터 출시까지, 데브파이브가 함께합니다.
지금 문의하기
빠른 문의하기