본문 바로가기 메인메뉴 바로가기
이 누리집은 대한민국 공식 전자정부 누리집입니다.

소개

디자인시스템 소개

디자인시스템은 대학적십자사 홈페이지에 일관성과 효율성을 부여하기 위해 만들어졌다.
이 가이드라인은 내부 디자이너, 개발자를 포함한 모든 관련 직원들이 사용할 수 있도록 설계되었으며 우리의 목표는 일관된 브랜드 아이덴티티를 구축하고, 사용자 경험을 향상시키며, 디자인 및 개발 프로세스를 효율화하는 것이다.

이 디자인시스템의 핵심 가치는 일관성, 효율성, 확장성, 그리고 접근성이다. 일관성 있는 디자인은 사용자들에게 신뢰감을 주고, 브랜드의 인지도를 높일 뿐만 아니라 반복적인 작업을 줄이고 리소스를 절약하게 할 수 있다.
또한 추후 확장성을 통해 미래의 요구사항에 유연하게 대응할 수 있게 해주며, 모든 사용자가 홈페이지를 이용할 수 있도록 디지털 정부서비스 UI/UX 가이드를 기반으로 준수해야 할 UI/UX에 대한 세부 사항을 제시한다.

도입 배경

디지털 서비스에 기반하여 행정서비스 이용 방법은 점차 대면에서 온라인으로 변화하고 있으며, 국민의 공공서비스 이용 효율성과 생산성은 크게 향상되었다.
그러나 이용 실태조사 결과 등에 따르면 이용자 입장에서 대한적십자사 홈페이지의 이용은 복잡하고 어려워 개선이 필요한 것으로 나타났다.
대한적십자사 홈페이지에 대한 사용자 이용 경험 조사 결과와 UI/UX 분석 결과에 따르면 이용 불편의 주요 원인은 경로 문의, 어려운 용어 등 직관적이지 않고 복잡한 프로세스로 인해 스스로 문제를 해결할 수 없는 것, 유사한 목적과 기능을 제공함에도 불구하고 서비스별로 이용 절차와 표현 방식에 복잡한 데 있었다.
위와 같은 문제를 해결하기 위해 대한적십자사 홈페이지 구축 및 운영에 참여하는 많은 사람이 끊임 없이 노력을 기울이고 있으나, 홈페이지에서 제공하는 UX경험의 일관성과 최적화가 한계에 도달한 실정이다.
이에 따라 모든 사용자가 대한적십자사 홈페이지를 통해 직관적이고 일관성 있게 사용함으로써 불필요한 시간 낭비를 줄이고, 효율적인 UI/UX 개발 체계를 구축하기 위한 기준을 마련하기 위해 본 가이드라인을 개발하게 되었다.

목적

홈페이지의 현황과 주요 특징을 명확히 전달하고, 이를 통해 홈페이지에 대한 인식을 제고하여 더 많은 사용자가 홈페이지를 적극적으로 사용할 수 있도록 활성화 하는데 목적을 두었다.

  • 첫째, 사용자 경험의 제고와 이용자 만족도 향상
    UI/UX를 일관된 기준을 기반으로 설계함으로써 사용자가 편리하고 효과적으로 이용할 수 있도록 만든다.
  • 둘째, 사용자 경험을 향상하기 위한 접근 방법과 지침 제시
    좋은 사용자 경험이란 무엇인가에 대한 방향성을 제시하고 제시된 기준을 따를 수 있는 방법을 안내한다.
  • 셋째, UI/UX 개발 및 관리에 투입되는 비용 절약
    본 가이드라인은 대한적십자사 홈페이지를 개발하는 데 참고할 수 있는 일관된 기준을 제시하여 사용자 간 소통을 지원하고 의사결정에 필요한 노력을 줄여준다. 또한 잘못된 설계로 인한 수정·보완을 최소화하여 비용 절감에 도움을 줄 수 있다.

개발 과정

본 가이드라인은 대한적십자사 홈페이지에 대한 UI/UX 현황 분석 결과에 기반하여 개발되었다.

UI/UX 현황 분석은 관련 분야 전문가에 의한 평가 외에도 실증적인 사용자의 행동 데이터와 바탕으로 수행되었다.
종합적인 결과 분석을 통해 여러 서비스에서 빈번하게 사용되는 구성 요소, 반복적으로 발견되거나 서비스 이용을 단절시키는 UI/UX 문제를 선별하여 가이드라인의 개발 범위를 도출했다. 분석 과정에서 확인된 UI/UX 문제를 해결하기 위한 방안을 중심으로 가이드의 세부 내용을 구성하되 각 구성 요소를 사용할 때 일반적으로 준수해야 할 사항 역시 포함하였다.

최종적으로 각 담당자들과 실제 대한적십자사 홈페이지의 운영자·개발자로부터의 검토 의견 수렴과 가이드라인에 따라 개발된 사용자 인터페이스에 대한 사용성 평가가 실시되었다. 이 결과를 토대로 수정/ 보완을 거쳐 가이드라인의 구성과 내용을 확정하였다.

활용 범위

본 가이드라인은 대한적십자사 홈페이지의 UI/UX 설계 및 개발에 참고할 수 있도록 개발했으며, 스타일가이드, 컴포넌트, 서비스 패턴을 활용하여 상황에 맞게 가이드라인을 활용하면 된다.


이용 대상 및 주요 특징


이용 대상

본 가이드라인은 대한적십자사 홈페이지의 기획·구축·운영·관리에 참여하는 모든 이들을 위해 개발되었다. 대한적십자사 홈페이지 운영자, 관리자, 기획자, 디자이너, UI/UX 디자이너, 퍼블리셔, 개발자는 프로젝트의 상황과 목적에 맞게 본 가이드라인을 참고할 수 있다.

주요 특징

본 가이드라인의 주요 특징을 파악해 두면 가이드라인의 구성과 활용 방법을 더 쉽게 이해할 수 있다.

  1. 1. 사용자 관점의 핵심 UI/UX 문제를 해결할 수 있는 실질적인 방안 제시
    • VOC, 부서별 담당자, 사용성 및 접근성 진단 등 실제 사용자가 온비즈 플랫폼 이용 시 겪게 되는 불편과 어려움을 분석
    • 사용자 데이터 분석 결과를 기반으로 사용성 가이드라인을 제시
    • 구성 요소 및 단일 화면을 넘어 서비스 이용 목적 달성을 위한 사용자 여정을 고려하여 사용자 경험을 향상할 수 있는 구체적인 가이드라인을 제시
  2. 2. 가이드라인 적용의 실효성을 높이기 위한 콘텐츠 구성
    • 원칙 - 대한적십자사 홈페이지 UI/UX의 방향성과 설계 기준이 되는 상위 원칙
    • 스타일 - 컴포넌트, 기본 패턴을 시각적으로 일관성 있게 표현하기 위한 규칙
    • 컴포넌트 - 사용자 인터페이스의 가장 작은 단위로 일관성 있게 사용되는 공통 요소에 대한 가이드
    • 서비스 패턴 - 컴포넌트 요소들이 조합되어 핵심 과업을 수행하는 데 반복적으로 함께 사용되는 사용자 인터페이스 집합에 대한 가이드
  3. 3. 포용적인 UI/UX 설계 및 구현을 위한 구체적인 안내 제공
    • 스타일, 컴포넌트, 서비스 패턴 등 구성 요소별 접근성 가이드라인 제공
    • 웹 콘텐츠 접근성 관련 국제 표준(WCAG 2.1)의 적합도 수준 AA를 달성할 수 있는 기준 마련
  4. 4. 대한적십자사 홈페이지의 일관성을 확보하기 위한 가이드 제시
    • 온비즈 플랫폼 UI/UX 설계의 방향성과 목표 공유를 위한 디자인 원칙 명시
    • 온비즈 플랫폼 아이덴티티 요소 및 재사용 가능한 구성 요소 기반의 가이드 제공
  5. 5. 가이드에 대한 이해도 향상과 정확한 적용을 위한 참고 예제 제공
    • 핵심 서비스 패턴 가이드의 이해를 돕기 위한 표준 프로토타입
    • 구성 요소별 유형, 구조를 파악할 수 있는 이미지 예제
    • 사용성 가이드라인의 정확한 적용을 위한 모범 사례