UI/UX

“어떻게 만들어졌을까?” 범정부 UI·UX 가이드라인 개발 비화

범정부 UI·UX 가이드라인 개발 및 적용 프로젝트

2024.06.21

디지털 전환이 한창인 최근 대한민국의 UI·UX 디자인은 빠르게 상향 평준화 되고 있다. 당장 여러 포털 사이트의 뉴스 피드만 봐도 산업 분야를 가리지 않고 매일 UI·UX 개선 소식이 올라온다.

이렇듯 전반적인 디지털 서비스가 제공하는 UI·UX 수준이 높아지고 있지만 여전히 해결되지 않는 문제가 있었으니 바로 ‘불편한 디지털 정부서비스의 UI·UX’다.

실제로 온라인 커뮤니티 등에선 디지털 정부 서비스 UI·UX에 관한 비판을 어렵지 않게 찾아볼 수 있다. 액티브X를 필두로 한 각종 추가 프로그램 설치 요구 장벽에 대한 불만부터 시작해 불필요한 페이지 이동, 고령층을 배려하지 않은 디자인, 복잡한 화면 구성 등 비판 사유 역시 다양하다.

문제는 이런 불편이 단순히 사용자 불만 증가를 넘어 직접적인 디지털 정부 서비스의 전반적인 사용률 저하, 정부에 대한 신뢰도 하락으로 이어지고 있다는 점이다. 점점 발전하는 민간 UI·UX 디자인과 다르게 정체되고 통일되지 않은 디자인에 역체감을 느끼는 것이다.

이에 결국 행정안전부(행안부)와 한국지능정보사회진흥원(NIA)은 국내 디지털 에이전시 플립컨소시엄와 함께 정부기관의 UI·UX 디자인 개선에 사용될 ‘범정부 UI·UX 가이드라인’ 개발에 나서게 된다.

과연 이렇게 무거운 사명을 지고 프로젝트를 시작한플립컨소시엄은 어떤 과정을 거쳐 가이드라인 개발에 성공했을까?

<프로젝트 기본 정보>
1. 프로젝트명: 범정부 UI·UX 공통가이드 개발 및 적용
2. 클라이언트사: 행정안전부, NIA
3. 대행사(제작사): 플립컨소시엄(플립커뮤니케이션즈, 에스앤씨랩, 유저커넥트)
4. 오픈일: 2024년 04월 02일
5. URL: https://uiux.egovframe.go.kr/guide/index.html

철저한 사전 조사는 물론 글로벌 국가 디자인 분석까지

모름지기 잘 만든 UI·UX 디자인 작업물에는 심도 있는 사전 조사와 분석이 뒤따르는 법이다. 실제 이번 프로젝트를 주도한 플립컨소시엄은 특히나 심도 깊은 조사와 분석, 검증을 진행해 주목을 받고 있다.

가장 먼저 플립컨소시엄은 가장 많은 사용률을 보이는 5개 기관을 대상으로 콘텐츠 접근성 평가, 사용성 휴리스틱 평가는 물론 기관 서비스 운영 담당자와 서면 대면 인터뷰를 수행하고, 사용자 목소리(VOC) 분석을 진행했다.

그 결과 플립컨소시엄은 기존 정부기관 핵심 서비스에 121개의 유형화된 사용자 관점 UI·UX 문제, 67건의 VOC 휴리스틱 공통 이슈, 다수의 문서구조 및 콘텐츠 구조 이슈는 물론, 사용자의 어려움을 파악하고, 이러한 문제를 해결하기 위한 적절한 방안 적절한 해결 방안과 가이드가 없어 어려움을 겪고 있는 기관 실무자 상황까지 파악하는 데 성공했다.

 공공 웹과 앱을 사용할 때 자주 마주치는 문제 중 하나는 복잡하거나 직관적이지 않은 UI·UX로 인해 국민들이 불편을 겪을 뿐만 아니라, 이러한 불편이 디지털 정부 서비스의 전반적인 이용률 저하로 이어지고 있는 상황이었죠.

김기연 에스앤씨랩 리더

일반적인 UI·UX 디자인 프로젝트라면 차고 넘칠 정도로 충분한 조사였지만, 플립컨소시엄은 조사를 멈추지 않았다. 1차적으로 현 문제 상황을 파악한 플립컨소시엄은 곧바로 글로벌 국가 및 기업의 UI·UX 디자인 현황을 파악하는 추가 조사 진행에 나선다. 해외 정부와 민간 기업의 사례를 통해 글로벌 기준에서도 뒤쳐지지 않는 디자인을 만들겠다는 노림수였다.

그 결과 플립컨소시엄은 타 글로벌 국가와 기업의 디자인 현황 분석을 진행해 정부 아이덴티티 영역 관점, 스타일 요소 관점, 컴포넌트·패턴 관점 3가지 관점에서 우리 정부 디자인 시스템의 위치와 적용 방향성을 도출해낸다.

선진 글로벌 국가의 디자인 시스템과 민간 기업의 우수한 디자인 시스템을 분석하고 벤치마킹 하는 과정을 통해서 개발하고자 하는 공통 가이드의 방향성을 설정할 수 있었습니다.

마승욱 플립커뮤니케이션즈 팀장

디자인 가이드 본질에도 충실해

물론 아무리 철저히 조사를 진행해도 결과적으로 디자인 방향성이 좋지 못하면 가이드는 무용지물이 된다. 하지만 이번 범정부 UI·UX 가이드라인은 디자인 가이드라는 본질 자체에도 충실했으며, 그 결과 가이드를 적용한 여러 정부기관이 큰 디자인 개선을 보이고 있다.

사실 이런 디자인 개선의 뒤편에는 플립컨소시엄의 고뇌가 숨겨져 있다. 실제 본격적인 디자인 작업에 들어간 플립컨소시엄은 금세 ‘다양한 성격’이라는 문제에 직면하게 됐다. 로고만 하더라도 태극마크를 사용하고 있는 기관, 자신들만의 별도 로고를 사용 중인 기관 등 매우 복잡한 조직체계를 가져 운영하는 사이트 역시 다양한 성격을 지니고 있던 것이었다.

각 기관마다 다양한 서비스가 있고 이해 관계자들의 요구조건과 또 이 서비스를 사용하는 사용자들의 특성이 달라 이를 모두 수용할 수 있는 범용적인 가이드를 만든 것이 정말 큰 과제였죠.

문지환 에스앤씨랩 이사

이에 플립컨소시엄은 ‘스타일 가이드’ ‘기본 패턴 가이드’ ‘컴포넌트 가이드’ 3가지 가이드를 제시해 컬러, 타이포, 쉐입, 아이콘, 헤더, 배너, 푸터 등 UI 설계 필수 구성요소들은 물론, 디지털 정부 서비스의 핵심 과업인 서비스 패턴이나 HTML 코드 구조까지 규칙과 기준을 제시해 일관성을 갖추고, 사용성을 개선할 수 있는 가이드라인을 구성했다.

이번 가이드는 우선 사용자가 마주하는 첫 번째 시각 요소이자 핵심 브랜딩 요소인 공식 배너의 디자인에 적용됐다. 아울러 고용노동부의 경우 검색 필터에 대상 및 기간을 추가하고 결과 내 재검색 기능을 적용해 검색 편의성을 높였고, 국민건강보험은 로그인 인증 화면을 단순화해 사용자 경험을 개선했다.

디자인 측면에서 이번 범정부 UI·UX 디자인 가이드라인에서 가장 특징적인 디자인 요소는 유니버셜 디자인 접근방식이라고 생각합니다. 이 가이드라인에선 모든 사용자가 만족할 수 있도록 디자인하는 것을 최우선 원칙으로 삼았습니다.

박은경 플립커뮤니케이션즈 디렉터

기존 가이드라인의 한계를 뛰어넘다

이번 범정부 UI·UX 가이드라인이 기존 UI·UX 디자인 가이드라인들과 가장 차별화되는 점은 PDF나 기타 문서 형태가 아닌 ‘국내 최초 웹페이지 형식의 가이드라인’이라는 사실이다. 범정부 UI·UX 가이드라인이 웹페이지 방식으로 배포되면서 더 높은 정보 탐색성, 상호작용성, 업데이트 용이성을 갖추게 됐다.

여기에는 재미있는 뒷이야기가 있다. 사실 이번 프로젝트의 경우 첫 요구 범위에 웹페이지 가이드라인 개발이 없었다. 초기엔 단순한 문서 기반 가이드 제작 작업이었던 것. 하지만 기존 문서만으로 배포되던 가이드라인의 한계점과 문제들을 잘 알고 있었던 플립컨소시엄은 새로운 도전을 시작한다.

박득환 상무는 이런 도전을 “기존 문서 가이드라인의 문제점을 너무나 잘 알고 있기 때문에 좀 더 욕심을 내기로 했다”고 표현했다. 그리고 플립컨소시엄의 작은 욕심으로부터 시작된 도전은 수많은 국내 실무자들의 호평으로 이어졌다.

실제 언제 어디서든 PC 및 모바일 기기로 가이드라인 적용 시뮬레이션할 수 있는 웹페이지 형식의 범정부 UI·UX 가이드라인에 대해 국내 IT 개발 교육 전문 플랫폼 인프런은 “정부기관 주도로 만든 UI·UX 가이드라인 중 가장 고도화된 형태의 규준과 리소스를 제공한다”며 호평을 전했다.

포토샵을 넘어 피그마로

이번 프로젝트를 통해 정부기관 웹서비스의 디자인이 개선된 사실 자체는 업계에 잘 알려져 있다. 그런데 플립컨소시엄이 정부기관의 디자인 작업 환경까지 개선해냈다는 점은 알려져 있지 않다.

대표적으로 ‘피그마(Figma)’의 도입이다. 플립컨소시엄은 프로젝트 작업을 거치면서 대부분 보안 등의 문제로 어도비 포토샵을 주된 디자인 툴로 사용하고 있는 정부기관의 디자인 환경에 UI·UX 특화 디자인 툴인 피그마를 도입해냈다.

이는 기존에 정체되고 불편했던 국내 정부기관 웹서비스의 UI·UX 디자인에 디자인 툴의 노후화 또한 적지 않은 영향을 미쳤다는 플립컨소시엄의 분석에 의한 것이었다. 실제 이미 많은 국내외 UI·UX 디자인 업계가 피그마로 주력 디자인툴을 교체했음에도 디자인 시스템을 지원하지 못하고, 협업성이 뒤떨어지며, 글로벌 트렌드에서 멀어지고 있는 어도비 포토샵을 사용하고 있는 작업 환경을 파악한 플립컨소시엄은 직접 설득에 나섰다.

정부기관의 디자인 개발 환경에 대한 인식이 바뀌고, 프로젝트나 운영에 사용하는 디자인툴이 변경되는 모습을 보면서 UI·UX 업무 형식의 축을 마련한 계기가 된 것 같아 뿌듯했습니다.

이행은 플립커뮤니케이션즈 디자이너

사용자들의 호평

플립컨소시엄의 진심이 담겼기 때문일까? 범정부 UI·UX 가이드라인의 적용 효과는 확실했다. 단순히 내부 테스트의 긍정적인 결과를 넘어서 사용자들의 호평이 이어진 것이다.

실제 평소 정부의 여러 디지털 서비스를 이용할 때마다 서비스별 이용 절차와 표현 방식에 일관성이 없어 어려움을 겪고 있던 A씨는 “특히 각 부처의 웹사이트마다 통합검색 아이콘 위치 구조가 달라 원하는 정보를 찾기 위해 여러 번 클릭해 많은 시간을 소모했다”며 “그러나 새로운 디자인은 쉽고 직관적인 화면을 통해 편리하고 효과적으로 원하는 서비스를 이용할 수 있게 됐다”고 말하며 개편을 칭찬했다.

정부 또한 이런 긍정적인 피드백을 확인하고, 개선을 계속해나가겠다는 입장이다. 실제 NIA는 “변화를 가속화하고, 디자인 시스템의 지속가능성을 위해 디지털 정부서비스 사용자뿐만 아니라, 가이드라인의 실사용자인 공무원이나 UI·UX 디자이너, 개발자의 의견을 반영해 디자인 시스템을 지속적으로 개선 및 보완해 나가겠다”며 지속적인 UI·UX 개선 의지를 내보였다.

---

Mini Interview
박득환 플립커뮤니케이션즈 상무

아직 가이드를 모든 정부기관에 실제로 적용해 보지 않은 만큼 빈틈이 있을 수 있습니다. 글로벌 국가의 디자인 시스템이 수년에 걸쳐 발전되고 있는 것처럼, 우리의 디지털 정부 서비스 UI·UX 가이드라인 또한 각 기관들의 의견을 수렴하고 사용자의 피드백을 꾸준히 수집·반영해 지속적으로 발전시켜 나가야 합니다.

여러 노하우를 통해 디지털 정부 서비스 UI·UX 가이드라인을 개발하는 데 있어 UX를 개선하고 효율적인 운영과 관리가 될 수 있도록 노력했습니다. 이번 가이드가 정부 서비스의 품질을 향상시키고, 국민들에게 더 나은 디지털 경험을 제공하는 계기로 이어지길 바랍니다.

• UI
• UX
• 디자인
• 플립커뮤니케이션즈

• 에디터김동욱 (jkkims@ditoday.com)