디지털 정부 UI/UX 가이드라인, KRDS 살펴보기
대한민국 정부 디자인 시스템을 파헤치다
지난 6/20(목) 오픈패스에서 ‘디지털 정부 UI/UX 가이드라인 살펴보기’ 온라인 세미나를 진행했습니다.
이번 세미나에서는 행정안전부가 3월 공개한 디지털 정부 서비스 UI/UX 가이드라인이 어떤 방법으로 만들어졌는지, 특징은 무엇인지 얘기를 나눴습니다.
특별히 이번 가이드라인을 제작해주신 디자인 에이전시 플립커뮤니케이션즈, 함께 작업을 진행해주신 SNCLab 실무자 분들을 모시고 더욱 생생한 비하인드 스토리를 들을 수 있었습니다.
진행자 : 오픈패스 PM 안재찬, 듀오톤 크리에이티브 디렉터 정다영
게스트 : 플립커뮤니케이션즈 크리에이티브 디렉터 박은경, SNCLab 리더 김기연
디지털 정부 UI/UX 가이드라인의 배경
안재찬 : 먼저 KRDS, 디지털 정부 UI/UX 가이드라인에 대해 간단히 소개해 주시겠어요?
박은경 : 네, KRDS는 대한민국의 디자인 시스템입니다. 사용자들이 정부 서비스를 더 편리하고 쉽게 이용할 수 있도록 돕는 것을 목표로 하고 있습니다. 디지털 정부 서비스를 사용자 중심으로 앱과 웹에 구축할 수 있도록 가이드와 지침을 담고 있어요. 정부 산하 기관들에서 서비스들을 운영하실 때 효율적으로 운영하실 수 있도록 지원하는 디자인 시스템이라고 보시면 좋을 것 같습니다.
안재찬 : 디자인 시스템이 무엇인지 한 번 짚고 넘어가면 좋을 것 같습니다. 디자인 시스템은 무엇이고, 스타일 가이드와는 무엇이 다른지 설명해주실 수 있을까요?
박은경 : 스타일 가이드와 디자인 시스템을 비슷한 관점으로 보시는 분들이 많습니다. 스타일 가이드는 그래픽 관점, 혹은 스타일 관점에서 소개를 하는 가이드를 얘기합니다. 반면 디자인 시스템이라는 것은 스타일 가이드를 플랫폼화, 시스템화 하여 확장해서 사용할 수 있도록 하는 것입니다. 스타일 가이드와는 개념적으로 다른 관점에서 보셔야 한다고 생각합니다.
안재찬 : 정부의 디자인 시스템이 만들어진 계기가 굉장히 궁금합니다.
김기연 : 이 프로젝트는 2017년에 시작됐습니다. 처음 개발이 됐을 때는 간단하게 문서 형태로만 개발이 이루어졌어요. 개발 후 활용도가 계속 떨어지는 상황에서 정부가 굉장히 많은 고민을 했습니다. 2018년에 개정 후, 컴포넌트 도입 등 시도를 했지만 역시 그때도 문서로 되어있었기 때문에 한계가 존재했죠.
이런 부분들을 해결하기 위해 정부에서 디자인 시스템을 계획했고, 2022년에 시범 사업을 통해 디자인 시스템 개발을 준비했습니다. 그리고 작년, 이것을 조금 더 체계화해서 만들어야 겠다는 관점에서 가이드라인을 개발하게 되었습니다.
디자인 시스템 구축 과정
안재찬 : 어떤 프로세스로 이 프로젝트가 진행 되었는지 간단히 설명을 부탁드려요.
박은경: 처음에는 디자인 시스템에 담아야 하는 요소들이 어떤 것인지부터 정의하는게 필요했습니다. 디지털 정부에서 어떤 것들을 쓰고 있는지 연구하는 것 부터 시작했습니다. 사용자 의견도 꾸준히 들었고요.
이런 과정들을 통해 이번 가이드라인에 어느 정도까지 담을 것인지 상당히 많은 고민을 했고, 그 과정에서 컴포넌트, 패턴의 개념들을 도출한 후 스타일과 가이드라인을 정의하기 위해 상당히 많은 자료 조사를 수행했습니다. 그렇게 제작한 가이드라인을 스타일 측면에서 먼저 도입하고, 기관들과 테스트 하면서 수정을 반복한 후 배포를 진행했습니다.
정다영 : 스타일 범위 선정에 있어서 고민되었던 포인트가 있으셨나요?
김기연 : 프로젝트의 목표는 분명했어요. 일관성 있는 정부의 스타일, 품질 유지 등을 방향성으로 가지고 있었습니다.일관성을 가지면서, 유연성도 확보할 수 있는 형태의 효율적인 요소들이 어떤 것들이 있는지 파악하기 위해 다른 나라의 스타일 가이드 요소를 찾아봤습니다.
그 후 사용자 관점에서 사용자 여정을 기반으로 서비스 패턴 5가지를 선정 했고요. 컴포넌트 등 공통적인 것들을 글로벌 패턴으로 정의하고, 그 안에서 사용자 관점의 기준에서 어떤 서비스를 주로 이용하시는지를 기준으로 선정했습니다.
정다영 : 혹시 기준을 잡아가시면서 겪으신 애로사항은 없으셨나요?
박은경 : 고려해야 하는 유형이 너무 많았다는 게 제일 큰 문제였어요. 정부에서는 쇼핑몰도 있고, 홍보 페이지도 있고, 국세청 홈택스같은 아주 복잡한 신청 기능까지 아주 다양한 것들이 있습니다.
그러다보니 과연 우리가 이번에 어디서부터 어디까지 정의해야 될지 상당히 고민스러웠고, 결국 저희가 내린 결론은 ‘사용자한테 집중’이었어요. 이 사람들이 정부 서비스를 이용할 때 어떤 어려움을 느끼는지, 거기에 집중해서 가이드를 하면 사용자들이 더 편리해지지 않을까 생각했습니다.
정부에 피그마 도입을 제안한 이유
정다영 : 정부 프로젝트에 피그마 도입을 직접 제안하신게 너무 대단하다고 생각해요. 어떤 방식으로 제안이 이루어졌나요?
박은경 : 초기에는 의사소통의 문제를 해결하기 위해 피그마를 제안했습니다. 피그마는 업무 효율성과 리소스 배포에 큰 장점이 있죠. 도입 초기에는 저항이 있었습니다. 아무래도 피그마를 잘 모르시기도 했구요. 사실 피그마만 사용한다고 하면 굉장한 허들로 느끼셨을 것 같습니다.
그래서 저희가 어떻게해서든 포토샵, PDF 등 필요한 형식에 맞게 소스화를 해서 드리겠다고 말씀드려서 저항하시는 분들의 마음을 돌릴 수 있었습니다. 이후 피그마를 어떻게 활용하는지 살짝만 알려드렸는데, 실제로 써보니 굉장히 편리하다 느끼셔서 도입이 이루어질 수 있었습니다.
정다영 : 기존 레거시가 있었지만, 거기에 맞게 대응할 수 있도록 방안을 마련해주신 덕분에 피그마가 도입된 것 같습니다. 정부 담당자분의 깨어있는 사고도 중요했던 것 같아요.
정부 관계자와의 인터뷰, 어떻게 진행하셨나요?
안재찬 : 말씀해주신 것처럼 쇼핑몰, 뱅킹, 홈택스 등 관계자분들이 굉장히 많습니다. 이 분들을 인터뷰하는 과정은 어떻게 진행하셨나요?
김기연 : 크게 두 가지 형태로 진행했습니다. 먼저 대면으로 한 기관씩 찾아뵙고 집단 미팅을 진행했습니다. 이후 서면으로 부족한 부분들에 대해서 의견을 받는 형태로 진행했는데요, 확실히 진행하면서 관계자분들이 어려운 점을 많이 토로해주시고 도움이 되는 얘기도 많이 해주신 덕분에 수월하게 진행할 수 있었습니다.
KRDS는 어떻게 구성되어 있나요?
김기연 : 디지털 정부 UX/UI 가이드라인 KRDS 같은 경우에는 크게 5가지의 구조를 가지고 있습니다. 디자인 원칙, 스타일 가이드, 컴포넌트, 기본 패턴, 서비스 패턴으로 구성이 되어 있구요. KRDS의 디자인 원칙은 아래와 같은 7가지 요소로 정의되어 있습니다.
사용자 중심의 서비스
모든 사용자를 포용하는 서비스
공통된 경험 안에서 개별 특성을 고려한 서비스
빠르고 간단한 서비스
쉽게 이해하고 사용할 수 있는 서비스
사용자의 다양한 상황을 고려하는 서비스
신뢰할 수 있는 서비스
박은경 : KRDS의 스타일 가이드는 소스화되어 피그마에 정리가 되어있습니다. 정리된 요소는 아래 5가지 입니다.
컬러(Color)
타이포그래피(Typography)
쉐이프(Shape)
레이아웃(Layout)
시스템 아이콘(System Icon)
가장 기억에 남는 에피소드는?
정다영 : KRDS의 구성이 보면 볼수록 굉장히 전문적이라는 생각이 듭니다. 컬러부터 타이포그래피, 레이아웃까지 굉장히 체계적으로 정리가 되어있는데요. 이 과정에서 혹시 기억나는 에피소드가 있으신가요?
박은경 : 이 프로젝트를 진행하는 과정에서 저희가 가이드를 정리하는 과정이 선행되고, 정부 산하 기관에서 가이드를 적용해야 하는데 타이밍이 잘 맞지 않았어요. 동시에 병행하는 과정에서 저희가 가이드를 만들고 기준을 세우고, 배포하는 과정에서 질문들이 굉장히 많았습니다. 세세하고 명확하게, 구체적으로 가이드를 제시하지 못하면 실제로 사용되기 쉽지 않아서 굉장히 디테일한 접근이 필요했습니다.
그래서 컴포넌트도 보시면 어떻게 사용되어야 하는지, 무엇을 의미하는지, 요소 하나하나에 이름을 부여하면서 과하다 싶을 정도로 설명을 달아놓았어요. 이것을 활용해서 소통하는데 분명히 도움이 될거라 생각하기 때문에 자세하게 정의를 해두었습니다.
정다영 : 그래서 디자이너가 만들었다는 생각을 했어요. 너무나 친절한, 디자이너의 마음을 읽은 디자이너의 작품이다. 누가 만들었을까 너무 궁금해서 수소문하며 찾아다녔던 기억이 납니다.
참고한 디자인 시스템은?
안재찬 : 이걸 처음 만드실 때 참고하신 디자인 시스템들이 있으실 것 같은데 혹시 어떤 것을 참고하셨는지, 몇 가지 정도인지 궁금합니다.
김기연 : 우선 스타일에서 참고한 것과 UI 가이드라인 참고한 것에 차이가 있습니다. 먼저 UI 가이드라인 개발을 하면서 굉장히 많은 사용성 가이드라인을 참고해야 했기 때문에 최소한 50개는 봤던 것 같아요. 모든 가이드라인을 리스트업하고 어떤 부분이 포함이 되면 좋을지 찾아내기 위해 굉장히 몰두하면서 봤습니다.
박은경 : 스타일 가이드 측면에서도 특정 브랜드 가이드가 아닌, 퍼블릭한 정부 시스템 가이드 작업을 하다 보니까 정부기관만 볼 수도 없고, 대기업만 참고할 수도 없어서 정말 전체적으로 대부분의 스타일 가이드를 리서치하고 항목 조사를 하고 어떤 내용을 담고 있는지 봤습니다.
노먼 닐슨(Norman Nielsen)의 UX 가이드까지 샅샅이 뒤져가면서 봤습니다. 다만 특정 기업, 특정 시스템만 벤치마킹 하지는 않았습니다.
접근성, 어디까지 고려하셨나요?
안재찬 : 아무래도 전 국민을 대상으로 진행되는 서비스다 보니 어느 정도 수준까지 고려해서 가이드를 준비하셨는지 말씀해 주실 수 있을까요?
김기연 : 접근성에서 타겟 사용자를 정의하는 게 중요했어요. 최근 인클루시브(inclusive) 디자인이 상당히 화두가 되고 있습니다. 인클루시브 디자인의 핵심인 ‘가장 어려움이 있는 사용자를 대상으로 하면 나머지 사용자들은 편하게 쓸 수 있다’는 개념을 상당히 좋아하는데요. 가장 많은 어려움을 가지고 있는 시각장애인 분들과 고령 사용자 분들을 타겟으로 잡았습니다. 한국에서 반드시 준수해야 할 콘텐츠 접근성 지침을 참고하되, 해외 국제 표준들을 참고해서 반영될 수 있도록 노력을 기울였어요.
정다영 : 이게 보통 어려운 일이 아닐텐데요. 실제로 그 내용들을 반영하시면서 기울였던 노력을 조금만 자랑해 주실 수 있을까요?
박은경 : 아무래도 정부에서는 인클루시브 접근성을 지향하시긴 하셨지만, 특히 디지털 취약계층 분들을 강조하셨어요. 예를 들어 서체의 크기도 민간에서 사용하는 것 보다 더욱 큰 상태로 기준 가이드를 잡았습니다. 하지만 일반인 입장에서도 이용하기 괜찮고 보기좋아야 하기 때문에 괜찮은 스타일 혹은 규격에 고민이 많았습니다.
서체 하나도 1 픽셀을 키우면서 기존에 있던 것들과 비교해서 가독성이 얼마나 좋아지는지 등을 검토해서 스펙을 수정하고, 교정하는 작업을 진행했습니다. 실제 유저 테스트(UT)를 통해서 우리가 당연하다고 생각하는 게 당연하지 않을 수도 있다는 것도 많이 깨달았습니다.
웹사이트로 공개한 이유는 무엇인가요?
정다영 : 디자인 에이전시를 운영하는 입장에서, 특정 회사의 디자인 시스템을 만들다보면 보통 내부에서 주로 쓰시다 보니까 노션으로 문서화를 하거나 피그마 라이브러리로 배포만 해도 커뮤니케이션 측면에서 크게 문제는 없었어요. 그런데 이런 멋진 작업물을 웹사이트로 공개한 이유가 있으실까요?
박은경 : 이 웹사이트는 사실 지난 정부 과제에는 없었어요. 그런데 기존에 배포된 문서화된 가이드는 업데이트가 공유가 쉽지 않았습니다. 그런 문제가 너무 뻔하게 보이니까, 저희가 만든 것들이 잘 반영이 되어야 겠다고 생각했고 해당 가이드의 사용성을 높이기 위해 무리수를 둬서 작업을 했습니다. 지금도 완벽하지는 않지만, 조금 더 잘 사용하셨으면 좋겠다는 마음에 웹사이트를 제작해 배포했습니다.
김기연 : 한 가지 비하인드만 더 말씀 드리자면, 공공기관이나 정부 사이트들이 내부에서 참고 하시기에 노션같은 툴 접근이 쉽지 않습니다. 그래서 접근이 더욱 쉽게 열려있는 형태가 필요했고, 그러다보니까 웹사이트와 같은 방안을 찾아낸 계기가 된 것 같습니다.
박은경 : 무엇보다도 저희가 하는 일이 ‘완성형’이 되어야 하니까요. 많은 분들의 리소스가 들어간, 노력과 노고가 담긴 작업이었는데 이런 것들이 실제 쓰임이 좋아야 한다고 생각합니다.
실제로 쓰여야지, 쓰이지 않으면 아무것도 의미가 없다고 생각해요.
정부가 얼마나 UX/UI에 진심인지, 디자인 시스템을 만들기 위해 어떤 노력이 필요한지 알 수 있었던 시간이었습니다. UX/UI 디자인, 아무리 강조해도 모자라지 않는 비즈니스의 핵심 역량입니다.
오픈패스 홈페이지에서 더 많은 디자인 콘텐츠를 만나보세요.
