GOV.UK 디자인 시스템을 Vue에서 쓰는 컴포넌트 라이브러리, GOV.UK Vue

 (govukvue.org)
2P by GN⁺ | ★ favorite | 댓글 1개
  • GOV.UK Vue는 Vue 앱에서 GOV.UK Design System 기반 UI를 만들기 위한 커뮤니티 컴포넌트 라이브러리임
  • 수정하지 않은 GOV.UK Frontend 스타일을 사용해 다른 GOV.UK 서비스와 시각적 일관성을 맞추도록 설계됨
  • GOV.UK Frontend JavaScript는 Vue 방식 코드로 다시 구현됐고, 접근성 기능도 전체 지원함
  • 2025년 6월 7일 공개된 v1.1.0은 2025년 6월 GOV.UK 리브랜딩과 파일 업로드 컴포넌트 개선을 포함함
  • 공식 Design System 팀이 지원을 맡지 않으므로, 사용 중 도움이나 기능 요청은 프로젝트 담당자에게 직접 전달해야 함

Vue 앱에서 쓰는 GOV.UK 컴포넌트

  • GOV.UK Vue는 GOV.UK Design System 컴포넌트를 Vue 앱에서 사용할 수 있게 하는 커뮤니티 프로젝트임
  • 폼, 내비게이션, 패널, 테이블 등 GOV.UK Design System 컴포넌트를 Vue 앱에 적용할 수 있음
  • 시작과 탐색, 지원을 위한 문서가 제공됨

GOV.UK Frontend 호환성과 v1.1.0 변경점

  • 프로젝트는 GOV.UK Frontend와의 호환성과 일관된 GOV.UK 서비스 스타일을 목표로 함
    • 수정하지 않은 GOV.UK Frontend 스타일을 사용함
    • GOV.UK Frontend JavaScript는 관용적인 Vue 코드로 다시 구현됨
    • 모든 접근성 기능을 지원함
  • GOV.UK Vue v1.1.0은 2025년 6월 GOV.UK 리브랜딩을 지원함
    • 리브랜딩 스타일을 활성화하려면 <html>에 govuk-template--rebranded 클래스를 추가함
    • GOV.UK 브랜드 서비스라면 header에 :rebrand="true", footer에 :show-crown="true"를 전달함
    • 업데이트된 에셋 경로는 installation instructions에서 확인 가능
  • 파일 업로드 컴포넌트도 함께 개선됨

지원 책임과 후원 경로

  • GOV.UK Vue는 GOV.UK Design System의 커뮤니티 리소스이며, Design System 팀은 사용 지원을 제공하지 않음
  • 도움이나 기능 요청은 Matt Eason에게 직접 연락해야 함
  • 프로젝트 지원은 Ko-fi 또는 GitHub Sponsors를 통해 가능함

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Michigan에서 오픈 데이터 운동에 12년 정도 참여해 왔는데, 2010년 영국에서 정권 교체를 계기로 국가의 디지털 발자국을 다시 상상한 사례에서 많은 영감을 받았음
    당시 변화의 핵심 설계자가 설명한 영상은 https://www.youtube.com/watch?v=yvB6BqYs2T0임
    이 사람의 상사에 관한 O'Reilly 영상도 있었던 것으로 아는데 찾지 못했음. 아쉽게도 또 다른 정권 교체로 이런 개발 흐름은 끝났지만, 상층부가 많이 떠난 뒤에도 변화 자체는 느린 속도로 계속된 것으로 보임
    12년 가까이 지난 지금도 미국의 어떤 정부 웹사이트도 영국의 명확함과 단순함에는 견줄 수 없음

    • GDS가 보수당 정부로의 전환에서 태어났다는 점이 흥미로움. 14년 뒤의 Tories는 개방성, 미래지향성, 공공서비스 투자와는 거리가 멀어 보임
    • 영국인으로서, Gov.uk가 2010~2024년 여러 정권을 거치면서도 숙청을 피했다는 게 놀라움
      속도를 늦추고 레이더 아래에 있었던 것이 도움이 됐겠지만, 아니었다면 HM Treasury의 멍청한 지출 검토 같은 과정에서 잘렸을 가능성이 큼
      Government Digital Service(GDS)는 최근 Cabinet Office, 즉 권력 중심에 꽤 가까운 곳에서 Department for Science, Innovation and Technology로 옮겨졌음. 이 이동 이후에도 GDS와 Gov.uk가 같은 영향력과 효과를 유지할 수 있을지 흥미로움
    • https://public.digital/about-pd/our-people는 2010년대에 Government Digital Service(GDS) 출범에 관여했던 여러 고위 인력이 만든 컨설팅 회사임
    • Michigan 거주자로서 궁금한데, https://data.michigan.gov/가 Michigan 오픈 데이터의 중심인지, 아니면 알아둘 만한 다른 출처도 있는지 궁금함

  • 멋지긴 하지만, 이게 공식 gov.uk 프로젝트가 아니라는 점은 아주 명확히 해야 함. 예를 들어 헤더나 프로젝트 설명 등에 "unofficial"이라는 단어를 넣는 식이 좋겠음

  • 상당히 잘 만들었음. URL을 보지 않았다면 공식 gov.uk 웹사이트에 들어온 느낌이었을 정도임
    다만 다른 사람이 말했듯 약간 오해를 부를 수 있어서, gov.uk 용도 밖에서 어떤 맥락에 쓸 수 있을지 궁금함
    디자인 시스템 자체는 정말 좋아서 사람들이 복사해 쓰는 건 괜찮지만, Bootstrap 웹사이트들처럼 보이는 수준까지 가지만 않으면 좋겠음

    • RNIB, 즉 영국의 시각장애 및 시력 손실 관련 자선단체가 좋은 예임. 이들은 [0]에서 보이는 탐색 경로와 아코디언처럼 GOV.UK Frontend의 여러 부분을 웹사이트에 사용함. 여러 지방의회도 이를 쓰거나 변형해서 사용함
      접근성 테스트가 매우 많이 되어 있으니, 접근성이 매우 높은 우선순위인 맥락에서는 사용하는 게 합리적임
      GOV.UK Frontend는 Sass 변수로 많이 커스터마이즈할 수 있어서, 예를 들어 [1]의 글꼴 스택처럼 원한다면 컴포넌트가 GOV.UK처럼 보일 필요도 없음. GOV.UK Vue는 모든 스타일을 Frontend에서 가져오므로 Frontend만큼 커스터마이즈 가능함
      [0] https://www.rnib.org.uk/living-with-sight-loss/assistive-aid...
      [1] https://github.com/alphagov/govuk-frontend/blob/main/package...
    • US Web Design System도 여러 구현체를 링크하고 있고, 그중에는 커뮤니티가 만든 것도 있음. 다양한 프레임워크로 시스템을 더 쉽게 구현하려는 시도는 새로운 일이 아님
      https://designsystem.digital.gov/documentation/implementatio...
      matteason, 잘 만들었음
    • 두 번 오해하고 있는 걸 수도 있는데, 첫 우려는 이게 정부 서비스를 사칭하는 데 쓰일 수 있다는 것이었음
      그런데 두 번째로는, 웹 기술 스택을 잘 모르는 입장에서 보기에 원본을 다른 스택, 즉 Vue로 재구현해서 같은 목적에 쓰려는 것일 수도 있겠다는 생각이 들었음
      기본적으로 선호하는 스택으로 gov.uk 사이트를 만들고 싶고, 그 스택이 이 프로젝트와 같다면 이걸 쓰라는 뜻인지 궁금함. 완전히 잘못 이해했을 수도 있으니 누가 명확히 해주면 좋겠음

  • 매우 흥미로움. 프랑스 정부도 디자인 시스템을 제공하고 있음: https://www.systeme-de-design.gouv.fr/
    Vue 구현체도 있음: https://vue-ds.fr/

    • 내가 이용하는 gouv.fr 영역에서는 아직 이게 적용된 걸 보지 못했음
      특히 색상 팔레트가 마음에 듦
      Vue Storybook이 데모 컴포넌트를 먼저 보여주면 좋겠음. 사실 모든 Storybook이 그랬으면 함

  • Matt, 이거 보니 정말 멋지고 1.0 축하함
    질문이 하나 있는데, 예전에 같이 일했을 때 이후로 GDS의 JavaScript 입장이 완화됐는지 궁금함. 특히 점진적 향상이 사실상 필수였던 기준 [1] 말임
    더 통제된 사용자 그룹이나 비 gov.uk 프로젝트를 목표로 하는 건지, 아니면 SSR로 사용 가능한 첫 HTML 응답을 제공하는지 궁금함
    [1] https://www.gov.uk/service-manual/technology/using-progressi... 마지막 업데이트: 2019년 12월 16일

    • 아니, 완화되지 않았음
      GDS가 몇 년 전부터 힘과 기술적 방향성을 잃긴 했지만, 이 규칙은 여전히 최종 사용자에게 큰 이득임. 솔직히 기술자들이 그날그날 유행하는 프레임워크를 쓰고 싶다는 이유로 이 원칙을 대충 넘기는 걸 보는 데 질렸음
      이해관계가 있긴 함. 중앙정부를 대상으로 하는 폼 SaaS를 운영하고 있고, GOV.UK 디자인 시스템도 다시 구현했음. 하지만 의도된 방식대로 했고, JavaScript는 점진적 향상에만 사용했음
    • AL 안녕!
      이 프로젝트의 목표는 일반적인 트랜잭션형 GOV.UK 서비스가 확실히 아님. 설치 가이드 상단에 이런 메모를 추가했음

      GOV.UK Vue 또는 어떤 JavaScript 라이브러리든, 표준 트랜잭션형 정부 서비스라면 프로젝트에 적합하지 않을 수 있습니다. 시작하기 전에 점진적 향상과 더 복잡한 서비스 구축에 관한 지침을 반드시 읽으세요. GOV.UK Vue는 대화형 지도나, JavaScript가 허용 가능하다고 판단한 내부 도구처럼 더 복잡한 서비스에 사용하도록 설계되었습니다.
      GDS도 현재 Frontend를 React/Vue/Svelte/Angular 등과 더 밀접하게 통합하는 방법을 탐색 중이라서, 절대 금지된 것은 아님: https://github.com/alphagov/govuk-frontend/issues/5172
      SSR/SSG는 지원함. 문서 사이트도 SSG Nuxt 앱임. 다만 특정 컴포넌트가 처음 렌더링된 상태만으로도 사용 가능하도록 동작을 개선할 작업이 필요함. 예를 들어 서버 렌더링 버전에서는 아코디언 컴포넌트를 기본적으로 열어두는 식임

  • Gov.uk는 성공적인 디자인으로 유명함. 왜 그 디자인이 그렇게 잘 설계되고 구현됐는지 다루는 자료가 있는지 궁금함. 그리고 그 공로로 기사 작위를 받은 사람이 있었는지도 궁금함

    • 가끔 GitHub 이슈를 읽는데, 배울 게 많음

  • 이거 마음에 듦. 매우 사용하기 좋아 보이고 시각적으로도 지나치게 복잡하지 않음
    내가 찾은 Vue용 컴포넌트 라이브러리 중 기능이 가장 완성도 높은 건 PrimeVue https://primevue.org/이고, CSS 유틸리티 https://primeflex.org/와 아이콘 https://primevue.org/icons도 함께 있음
    React 버전 https://primereact.org/, Angular 버전 https://primeng.org/, JSF 버전 https://www.primefaces.org/도 있음
    다양한 기술 스택을 넘나들면서도 여러 테마 지원과 괜찮은 컴포넌트를 많이 제공하는 라이브러리가 더 많았으면 좋겠음

  • 우리 정부를 자랑스러워하는 일이 드문데, 디지털 팀은 몇 년째 정말 잘하고 있음

  • 자랑 좀 하자면, 일반적인 폼 기반 Django 사이트용 Crispy Forms 템플릿 팩인 https://github.com/wildfish/crispy-forms-gds/를 만들었음
    Matt가 정말 잘 해냈고, 접근성 요구사항을 다루는 고통, 특히 gov.uk가 모든 사람이 사이트에 접근할 수 있는지 확인하려고 프로젝트에 요구하는 감사 절차의 상당 부분을 덜어줄 것임

  • 성능은 어떻게 비교되는지 궁금함. 일반적인 광대역 연결에서 여전히 100밀리초 안에 로드되게 만들 수 있나? 즉 즉각적으로 느껴질 만큼 빠른 수준 말임

답변달기