Relax Relax
Relax Relax
대한민국 디지털 정부서비스의 사용자경험(UIUX)의 표준을 수립!
디지털 정부서비스 UI/UX 가이드라인
- 2024.03.01
디지털 정부서비스 UI/UX 가이드라인 개발 사업은 공공 디지털 서비스의 사용자
경험(UI/UX)을 혁신하여
국민이 공공서비스를 더 쉽고 편리하게 이용할 수 있도록 하는 것입니다.
About Project
Work Process
공공서비스 사용자들의 데이터 및 요구사항 분석을 기반으로 사용자 중심의 UI/UX 공통가이드를 구현 했습니다.
Analysis
사용자 분석
실제 이용 상황에서 사용자 의견과 일반적인 사용성에 대한 전문가 의견을 종합적으로 분석하여 핵심 UI/UX 문제점을 도출하였습니다.
글로벌 국가의 디자인 시스템 분석
글로벌 디지털 정부 가이드의 특성과 민간 서비스 디자인시스템의 동향을 종합적으로 분석하여 정부 아이덴티티 영역 적용 기준을 정의하고, 공통 가이드 개발 범위를 도출하였습니다.
국민 평가단 만족도 조사
다양한 연령 및 성별 그리고 디지털 취약계층을 포함한 300명의 국민평가단을 모집하여 300개의 공공기관의 UIUX 만족도 평가를 진행했습니다.
Developing a Guide
UI/UX 설계 원칙
누구나 더 쉽고 편리한 디지털플랫폼 정부 서비스를 목표로 총 7가지의 디자인원칙을
수립했습니다.
UI/UX 설계 원칙의 중요한 이유와 의미를 설명하고 이를 따르기 위한 주요 방안을
제시합니다.
스타일 가이드
일관성과 유연성 확보의 관점으로 사용자에게 가장 효과적으로 인지될 수 있는 칼라, 폰트, 레이아웃과그리드, 형태, 아이콘등 총 5가지 스타일요소를 선정하여 디지털 정부서비스의 디자인 스타일를 수립하였습니다.
컴포넌트
정부서비스 보편적인 UI요소를 방향으로 가장 빈번하게 사용되는 공통 구성요소를 선정하여 37가지 컴포넌트를 개발했습니다.
기본 패턴
디지털공공서비스의 핵심과업에서 공통으로 사용되는 11가지 과업 패턴을 기본 패턴으로 선정하여 구조 및 사용자 상호작용에 대한 가이드를 제시 했습니다.
- 도움
- 목록 탐색
- 필터링/정렬
- 상세 정보 확인
- 동의
- 사용자 피드백
- 개인 식별 정보 입력
- 첨부파일
- 입력 폼
- 확인
- 오류
필터링·정렬
필터링과 정렬은 사용자가 데이터를 원하는 기준에 맞게 선택하고 조직화 할 수 있게 합니다. 이를 통해 검색 결과를 좁히고 원하는 정보를 빠르게 찾을 수 있습니다.
도움
사용자를 위한 도움 패턴은 서비스 이용 도중 UI 작동 방식, 사용법, 과업 진행 상황 등을 설명하는데 도움을 줍니다. 이는 특히 디지털 취약계층 사용자에게 더 쉽고 빠르게 서비스를 이해하고 활용할 수 있도록 해줍니다.
사용자 피드백
사용자가 원하는 정보를 명확하고 간결하게 제공할 수 있도록 합니다. 또한 제목과 요약 정보를 포함한 링크를 통해 사용자가 쉽게 상세 정보에 접근할 수 있도록 가이드 합니다.
서비스 패턴 가이드
핵심서비스의 사용자 여정을 기반으로 사용자경험 설계를 위한 서비스 패턴 제작하고 서비스 특성을 고려하여 최적화 할 수 있도록 다양한 유형을 제공합니다.
- 방문
- 검색
- 로그인
- 신청
- 정책 정보 확인
디자인 리소스 및 표준 HTML 코드 개발
만들어진 가이드를 Figma기반의 디자인 리소스와 표준 HTML로 개발하여 디자이너와 개발자들이 쉽게 이해하고 사용할 수 있도록 개발되었습니다.
- 피그마
- 컴포넌트
- 패턴
- 코드
- 웹 페이지 가이드
디자인 리소스
디자인툴중 가장 사용율이 높은 Figma를 기반으로 쉽게 재 사용 할 수 있는 라이브러리와 패턴을 제공합니다.
표준 마크업
개발자들이 쉽게 이해하고 활용할 수 있도록 각 컴포넌트와 패턴 디자인에 상호작용을 적용한 HTML표준 마크업을 제공합니다.
웹 페이지 가이드
문서형태의 한계를 극복하기 위해 좁더 빠르게 편리하게 탐색하고 체험할 수 있는 공통가이드 웹페이지를 제공합니다.
범정부 공통 가이드는
모든 사용자를 포용하고 사용자 경험을 개선하는 것은 물론이고 각 기관들의 효율적인 운영/관리를 위해 제작되었습니다.이를 통해 정부 서비스의 품질을 향상 시키고, 국민들에게 더 나은 디지털 경험을 제공할 수 있을 것입니다.
당신이 원하는 디지털 비즈니스를 알려주세요.
당신이 원하는 디지털 비즈니스를알려주세요.
프로젝트 문의
어떠한 서비스를 시작하실 건가요? *
간단한 정보를 입력해 주세요.
- *
- **
- **
[필수] 개인 정보 수집•이용에 대해 동의합니다.
(등록된 내용은 프로젝트 의뢰 대응 이외의 용도로는 사용되지 않습니다.)
[선택] 플립의 뉴스레터, 플립그램(PULIPGRAM) 수신에 동의합니다.
우리와 함께 더 좋은 디지털 세상을 만들어봐요.
우리와 함께 더 좋은 디지털 세상을 만들어봐요.
Try PDS.
플립 디자인 시스템은 금융업무(Finance)를
모바일(Mobile) 중심으로 UI&UX의
최적화 된
경험을 제공하는 디자인 시스템입니다.
많은 인원이 프로젝트를 진행하다 보면 쓸데없는 곳에서 시간을 지체하기도 하고,
고객에게
일관성 없는 경험을 제공하기도 합니다.
이런 문제점을 해결해 업무 효율을 높이고, 고객에게는 더 나은 경험을 제공하기 위해
플립의 노하우를 ‘PDS(PULIP Design System)’에 담았습니다.
Introduction
플립 디자인 시스템은 기업의 가치를 빠르게
화면에 녹이는 디자인 시스템입니다.플립 디자인 시스템은
기업의 가치를 빠르게 화면에
녹이는 디자인 시스템입니다.
화면에 녹이는 디자인 시스템입니다.플립 디자인 시스템은
기업의 가치를 빠르게 화면에
녹이는 디자인 시스템입니다.
플립은 어떻게 해야 기업의 브랜드 가치로 좋은 고객 경험을 제공할 수 있을지, 많은 작업자들이 효율적으로 일할 수 있는지를 고민합니다.
PULIP Design System은 많이 사용되는 기본 UI 요소의 사용성에 대해 고민하고 UI KIT로 담아냈습니다. KIT를 이용해 공통 UI로 하는 반복 작업에 대한 고민은 줄이고 기업의 이미지를 녹이는 핵심적인 업무에 집중할 수 있도록 구조화했습니다.
기업 Identity기업의 인지적 측면
PDS UI KIT기능적인 측면
기업 UI 가이드
Configuration
PDS는 파운데이션과 컴포넌트, 금융 업무에 특화된
템플릿으로 구성되어 있습니다.PDS는 파운데이션과 컴포넌트,
금융 업무에 특화된 템플릿으로
구성되어 있습니다.
템플릿으로 구성되어 있습니다.PDS는 파운데이션과 컴포넌트,
금융 업무에 특화된 템플릿으로
구성되어 있습니다.
PDS는 기업의 스타일을 담을 수 있는 디자인 기본 요소(파운데이션), 필수 UI 요소(컴포넌트)와 지침, 금융 업무에서 반복적으로 사용되는 기능적 처리 업무 위주의 패턴(템플릿)으로 구성됩니다.
- Foundation(브랜딩 요소)
- Color
- Font
- Shape
- Layout
- ...
- Component(기본 UI 요소)
- Form
- Dialogs
- Navigation
- Contents
- ...
- Templete (화면의 패턴화)
- 회원 정보 입력
- 계좌 조회
- 상품 리스트
- 기간 조회
- ...
Structure
파운데이션 수정 시 컴포넌트,
템플릿, 적용된 실제 화면까지
한 번에 변경됩니다.
템플릿, 적용된 실제 화면까지
한 번에 변경됩니다.
프로젝트 시작 시 파운데이션을 변경하면 미리 디자인된 컴포넌트와 템플릿 디자인이 한 번에 반영됩니다. 이렇게 만들어져 공유되는 규칙을 잘 활용한다면 사이트의 설계나 디자인 시 사용되는 불필요한 커뮤니케이션을 줄여주며 추후 페이지를 관리하는 일 역시 훨씬 수월해집니다.
Strength
기능 중심 화면을 설계할 때
템플릿을 이용해 의사 결정 시간을
단축할 수 있습니다.
템플릿을 이용해 의사 결정 시간을
단축할 수 있습니다.
기능 중심의 반복되는 설계 화면 또한 디자인된 컴포넌트와 템플릿을 이용해서 프로토타입을 쉽고 빠르게 그릴 수 있습니다. 디자인된 화면 설계로 빠른 의사결정이 가능합니다.
Task Guide
디자이너가 프로젝트 스타터가 되어 작업자들에게
공통 UI 가이드를 빠르게 제공합니다.디자이너가 프로젝트 스타터가 되
어 작업자들에게 공통 UI가이드
를 빠르게 제공합니다.
공통 UI 가이드를 빠르게 제공합니다.디자이너가 프로젝트 스타터가 되
어 작업자들에게 공통 UI가이드
를 빠르게 제공합니다.
디자이너가 먼저 공통 UI 가이드를 정의한 후 작업이 시작됩니다.
정의된 가이드로
기획자, 디자이너, 퍼블리셔가 동시에 작업을 진행할 수 있으며,
이
방식은 반복되는 작업을 줄여주며, 톤앤매너를 유지하는 데 도움을 줍니다.
Contact Us
데모 요청이나 협업, 문의사항이 있다면 자유롭게 연락해 주세요.
We alwaysshowthe best performanceand leadership.
0 Winner
2024
웹어워드
- 디지털 정부서비스 UI/UX 가이드라인웹표준 혁신대상
&어워드
- 디지털 정부서비스 UI/UX 가이드라인과학기술정보통신부 특별상
- 스타필드 수원Winner
- 티맥스소프트 대표 웹사이트Winner
2023
웹어워드
- 삼성물산 건설부문대상
- LS 엠트론대상
- 아레나 코리아통합대상
- 대원미디어대상
스마트앱어워드
- KB스타플랫폼대상
&어워드
- 삼성물산 건설부문Grand Prix
2022
스마트앱어워드
- 교보생명대상
&어워드
- 교보생명Grand Prix
2021
ICT 어워드 코리아
- IBK기업은행 i-ONE Bank Global과학기술정보통신부 장관상
웹어워드
- 키움증권대상
스마트앱어워드
- KB국민은행 KB스타뱅킹최고대상
&어워드
- KB국민은행 KB스타뱅킹Grand Prix
- 한국투자증권 TRUE ETNGrand Prix
- 삼성웰스토리 미디어 플랫폼Winner
2020
웹어워드
- 삼성생명웹접근성 이노베이션대상
- 라온시큐어대상
- 버즈빌대상
스마트앱어워드
- KB저축은행 키위뱅크최우수상
&어워드
- 삼성생명Winner
- 스타필드 모바일Winner
2019
인터넷에코어워드
- 한화갤러리아 Right!Galleria 캠페인 마이크로사이트인터넷에코
최고대상
웹어워드
- 삼성화재UI/UX 이노베이션대상
- KB국민은행 케이봇 쌤대상
- 슈프리마최우수상
- 신세계면세점최우수상
- 오렌지라이프 옴니 플랫폼 '오늘'최우수상
스마트앱어워드
- KB저축은행 KB착한뱅킹대상
&어워드
- KB저축은행 KB착한뱅킹Grand Prix
- 신세계면세점Winner
2018
웹어워드
- 오렌지라이프생명보험통합대상
- 이지스자산운용대상
- 아웃백 스테이크하우스대상
- 삼성 디스플레이 솔루션즈대상
- 한국예탁결제원 크라우드넷최우수상
- IKEA FAMILY 홈퍼니싱 캠페인최우수상
- 한국예탁결제원 전자투표·전자위임장 모바일 서비스최우수상
스마트앱어워드
- 로젠택배대상
&어워드
- 아웃백 스테이크하우스Grand Prix
- 한국예탁결제원 전자투표·전자위임장 모바일 서비스Grand Prix
- 대덕강업 스틸1번가Grand Prix
2017
웹어워드
- KB금융그룹웹접근성 이노베이션대상
- KB손해보험대상
- 한국씨티은행최우수상
- IBK기업은행최우수상
- 한화생명보험최우수상
스마트앱어워드
- 한국씨티은행대상
- 타이틀리스트 어패럴 멤버십대상
- 삼성디스플레이솔루션즈 컨피규레이터대상
WMA Mobile Web Award
- 삼성디스플레이솔루션즈 컨피규레이터Best Electronics Mobile Application
- 삼성디스플레이솔루션즈 컨피규레이터Best Manufacturing Mobile Application
- 삼성 Display Solutions 반응형 웹Outstanding Mobile Website
&어워드
- 한국씨티은행Grand Prix
2016
웹어워드
- 삼성 Display Solutions 반응형 웹대상
- 포스코경영연구원 홈페이지대상
- 고어텍스® 브랜드 프로모션대상
- 삼성증권 원스톱 자산관리 서비스최우수상
- 히타치금속한국주식회사 홈페이지최우수상
- AIA생명 홈페이지최우수상
&어워드
- 삼성 Display Solutions 반응형 웹Grand Prix
- 파스쿠찌 홈페이지Grand Prix
- KB손해보험 홈페이지Grand Prix
- 고어텍스® 브랜드 프로모션Grand Prix
2015
iF Design Award
- Pulip communications Re-Branding ProjectCorporate Identity 선정
웹어워드
- KB손해보험 모바일 웹 금융 서비스최고대상
- 한국씨티은행 웹사이트기술 이노베이션대상
- IBK기업은행 웹사이트대상
- 대신증권 웹사이트대상
- 한화투자증권 웹사이트최우수상
스마트앱어워드
- Samsung Display Solutions 모바일 앱최우수상
&어워드
- KB손해보험 모바일 웹Grand Prix
- 한국투자증권 모바일 앱Grand Prix
- IBK기업은행 홈페이지Grand Prix
- 삼성전자 Display Solutions 모바일 앱Grand Prix
2014
웹어워드
- 교보라이프플래닛생명 웹사이트대상
- 키움증권 온라인 펀드마켓대상
- 한국투자증권 퇴직연금최우수상
- 고어텍스 서라운드 풋웨어 캠페인최우수상
스마트앱어워드
- ING생명 모바일센터 앱UI/UX 이노베이션대상
GOOD DESIGN
- 교보라이프플래닛생명 웹사이트GOOD DESIGN 선정
&어워드
- 교보라이프플래닛생명 웹사이트Grand Prix
- 고어텍스 GTKYD™ Promise 캠페인 Grand Prix
- 제로투세븐 쇼핑몰 모바일 웹Winner
- 라로슈포제 모바일 커머스Winner
2013
웹어워드
- LIG손해보험 웹사이트대상
- sK플래닛 웹사이트디자인 이노베이션대상
- 아웃백스테이크하우스 웹사이트대상
- 금호타이어 웹사이트대상
- 비쉬 공식 쇼핑몰대상
- 고어텍스 자켓에 관한 오해와 진실 캠페인최우수상
GOOD DESIGN
- sK플래닛 웹사이트최우수(특허청장상)
- 플립커뮤니케이션즈 기업 아이덴티티우수상(한국디자인진흥원장상)
- 타이틀리스트 어패럴 웹사이트GOOD DESIGN 선정
&어워드
- LIG손해보험 웹사이트Grand Prix
- sK플래닛 기업사이트Grand Prix
- ING생명 모바일센터 앱Grand Prix
- 고어텍스 자켓에 관한 오해와 진실 캠페인Grand Prix
- 녹십자 웹사이트Winner
- IBK ONE 브랜드체험관 프로모션Winner
2012
웹어워드
- BC카드 웹사이트웹표준 이노베이션대상
- 신한생명 웹사이트대상
- 삼성화재 모바일웹대상
- 웅진맘스테이션 쇼핑몰대상
- 한화증권 웹사이트우수상
- 루이까또즈 직영몰우수상
- 레스모아몰우수상
스마트앱어워드
- GS&POINT Plus앱UI/UX 이노베이션대상
- IBK 스마트터치 앱대상
&어워드
- SK M&C 포인트친구 애딩 서비스Grand Prix
- 비오템 World Wide Water 아쿠아틱 세계여행Grand Prix
- 세스코 무료진단 캠페인 Grand Prix
- 신한생명 웹사이트Winner
- 삼성화재 모바일웹Winner
- 현대카드 뮤직사이트Winner
- 레스모아몰Winner
2011
웹어워드
- 올림푸스 브랜드사이트대상
- IBK기업은행 모바일 웹대상
- 고어텍스 퍼포먼스쉘 마이크로사이트최우수상
- 슈퍼스타K3 웹사이트최우수상
- 고려대학교 안암병원최우수상
- 올림푸스 모바일웹최우수상
- 고려대학교 안암병원 모바일 웹최우수상
- 올가 쇼핑몰우수상
- 하나투어 H웨딩 웹사이트우수상
&어워드
- IBK기업은행 모바일웹Winner
- 슈퍼스타K3 웹사이트Winner
- 가그린 모바일웹Winner
- 템포 웹사이트Final
- 비오템옴므 하이리차지 에너지샷 캠페인Final
대한민국 커뮤니케이션대상
- 올림푸스 브랜드사이트웹사이트 디자인대상
코리아모바일어워드
- LIG손해보험 모바일 web한국인터넷진흥원장상
2010
GOOD DESIGN
- 코스모폴리탄 웹사이트GOOD DESIGN 선정
웹어워드
- 현대카드 에어라운지 마이크로사이트대상
- 금강제화 금강몰 웹사이트대상
- 현대카드 M포인트몰 app대상
- 현대카드 슈퍼시리즈 app최우수상
- LIG손해보험 모바일 web최우수상
- 골프큐브 웹사이트최우수상
- HMC투자증권 퇴직연금사이트최우수상
에코어워드
- LIG손해보험 모바일 web기술혁신대상
&어워드
- 골프큐브 웹사이트대상
- 현대카드 M포인트몰 app대상
- 현대카드 슈퍼시리즈 app최우수상
대한민국 커뮤니케이션대상
- 교통안전공단 웹사이트문화체육관광부 장관상
- LG싸이언 옵티머스Z 마이크로사이트디자인대상(사보협회장상)
코리아디자인어워드
- 현대카드 에어라운지 밴딩머신UI올해의 디자인 프로젝트
2009
GOOD DESIGN
- 이노블록 웹사이트GOOD DESIGN 선정
웹어워드
- 금융결제원 웹사이트 대상
- SK증권 웹사이트 최우수상
- LIG손해보험 웹사이트 최우수상
- 성남아트센터 웹사이트 최우수상
- 가그린 웹사이트 우수상
- 교통안전공단 웹사이트 우수상
&어워드
- 엔프라니 웹사이트 대상
- 성남아트센터 웹사이트 최우수상
- 가그린 웹사이트 최우수상
- 오산영어체험마을 웹사이트 최우수상
대한민국 커뮤니케이션대상
- 교통안전공단 블로그 최우수 브랜드블로그상(사보협회장상)
2008
GOOD DESIGN
- 세종문화회관 웹사이트GOOD DESIGN 선정
- 어도비 크리에이티브 프리덤 웹사이트GOOD DESIGN 선정
IBA 국제비지니스대상 FESTIVAL
- 어도비 크리에이티브 프리덤 웹사이트파이널리스트 선정
- 금호생명 웹사이트파이널리스트 선정
- 엔컴퓨팅 웹사이트파이널리스트 선정
웹어워드
- 세종문화회관 웹사이트 대상
- 금호생명 웹사이트 최우수상
&어워드
- 왈츠앤닥터만 커피박물관 최우수상
- 우리투자증권 머그카페 웹사이트 최우수상
대한민국 커뮤니케이션대상
- 세종문화회관 웹사이트 한국예술문화단체 총연합회장상
- 예감 웹사이트 디자인대상(사보협회장상)
- 금호생명 웹사이트 콘텐츠대상(사보협회장상)
2007
GOOD DESIGN
- 웹스미디어 웹사이트GOOD DESIGN 선정
MOWSNET AWARD
- 웹스미디어 웹사이트동상
웹어워드
- 웹스미디어 웹사이트 우수상
- 삼성화재 웹사이트 우수상
- 다음 한메일 문화라운지 우수상
&어워드
- 삼성화재 웹사이트 대상
대한민국 커뮤니케이션대상
- 웹스미디어 웹사이트 디자인대상
- 어도비 크리에이티브 프리덤 웹사이트 한국사보협회장 특별상
2006
웹어워드
- 산돌커뮤니케이션 웹사이트최우수상
플립인의 휴식공간
PULIP Pudding JEJUPULIP Pudding JEJU는 제주도에 위치한 플립 전용 빌라로, ‘푸딩처럼 말랑하고 부드러운 휴식공간’이라는 의미를 담고 있습니다. 바쁜 일상을 보내고 있는 플립인들의 리프레시를 위해 마련된 이 공간은 플립 직원이라면 누구나 무료로 이용이 가능합니다.
입사자에게 전하는
신규 입사 축하 문화플립커뮤니케이션즈에는 웰컴킷 증정, 입사 OT, 멘토링 제도, 입사자 케어 프로그램 등 입사를 축하하고 원활히 소통할 수 있도록 지원하는 제도가 마련되어 있습니다. 체계화된 입사 프로세스로 입사자가 플립인으로서 빠르게 소속감을 형성할 수 있도록 돕습니다.
Welcome WelcomeWelcome Welcome
- Thank youThank you
장기 근속자에게 전하는
장기 근속 감사 문화인재가 곧 기업가치이자 브랜드의 힘이라고 여기는 플립커뮤니케이션즈에는 장기 근속 직원에게 감사의 마음을 전하는 문화가 형성되어 있습니다. 장기 근속 직원들은 1, 5, 10년마다 마련된 근속복지 제도를 통해 다양한 혜택을 누립니다.
노력하는 전문가를 위한
Specialist 시상플립커뮤니케이션즈의 인재상은 본인의 일을 통해 자신의 꿈을 실현해 가는 노력하는 전문가입니다. 플립에서는 이처럼 기업의 가치를 실현하고, 노력하는 전문가로서 본보기가 되어준 직원을 Specialist(우수사원 포상제도)로 선정해 시상하고 있습니다.
Specialist SpecialistSpecialist Specialist
- Membership MembershipMembership Membership
활기찬 회사생활을 위한
플립 멤버십 문화플립커뮤니케이션즈는 생동감 있는 사내 분위기를 형성하기 위해 사내 공식 행사인 한마음데이를 운영합니다. 또한 플립인들의 단합을 위해 매년 워크숍, 체육대회, 송년회 등 전 직원이 하나되는 자리를 마련해 유대감을 강화하고 추억을 공유하는 시간을 갖습니다.
건강한 플립을 만드는
건강지키미 헬스키퍼헬스키퍼는 장시간 앉아서 근무하는 플립인들의 건강을 지키기 위해 마련된 전문 마사지 서비스입니다. 플립인이라면 누구든 사전 예약만으로 이용이 가능하며, 근무시간을 할애해 편안히 휴식을 취할 수 있어 직원들 사이에 높은 만족도를 얻고 있는 복지제도입니다.
Health keeperHealth keeper
- Pulip CafePulip Cafe
바쁜 일상 속 달콤한 여유
플립 카페플립 카페는 바쁜 일상 속에서도 잠시나마 여유를 찾고, 동료들과 자연스레 소통할 수 있도록 마련된 플립인들만의 편안한 휴식처입니다. 플립인들은 플립 카페에 마련된 향긋한 커피, 바삭한 토스트, 그리고 시원한 음료수와 함께 가벼운 리프레시를 즐깁니다.
