회원들이 가장 많이 본 디자인 뉴스
디자인 연구
페이스북 아이콘 트위터 아이콘 카카오 아이콘 인쇄 아이콘

주목할 만한 브랜드, 디자인 시스템 및 가이드라인



참고로 삼을 만한 우수 브랜드, 디자인 시스템 및 가이드라인을 찾아보았습니다. 브랜드 관리 측면에서 가이드라인의 필요성을 강조하면 이것은 디자인부서뿐 아니라 모든 부서에 해당하는 일이 됩니다. 가이드라인을 만들지 않았더라면 드러나지 않았을 텐데 가이드를 만들고 공유하고 규정화하게 되면 이런 것도 관리해야 되는구나 하는 내부 인식도 생기게 되고, 이것이 디자인부서의 영향력을 키우는 데 역할을 하게 되지 않을까 생각합니다.
온라인 서비스의 사용자 편의성과 접근성을 높이기 위해 민간 및 공공영역에서 사용되고 있는 주목할만한 가이드라인들을 살펴보시죠.

 

1. 민간의 브랜드, 디자인 시스템 및 가이드라인  

 

 

 

애플 휴먼인터페이스가이드라인

애플OS 및 응용프로그램의 인터페이스 가이드라인. 세계적으로 가장 먼저 알려진 UI, UX 가이드라인의 고전

https://developer.apple.com/design/human-interface-guidelines/

 

마이크로소프트 플루언트 디자인 시스템(Fluent Design System)

마이크로소프트의 윈도우 및 응용프로그램의 인터페이스 가이드라인

https://www.microsoft.com/design/fluent/#/

 

구글 머터리얼 디자인 가이드라인

안드로이드 운영체계와 응용프로그램의 인터페이스 가이드라인

https://material.io/design/

 

아우디 웹 사용자 인터페이스 가이드라인

웹, 홍보, 동영상 제작, 공간 등 기업의 브랜딩과 관련된 광범위한 범위를 두루 상세하게 제시하는 브랜드 가이드라인.
일러스트의 톤앤매너, 문이 닫히는, 배기음 사운드도 다루고 있음.

https://www.audi.com/ci/en/guides/user-interface/introduction.html#

 

스코다 Skoda 브랜드 디자인 가이드라인

스코다는 폭스바겐 그룹 산하 자동차 브랜드. 디자인컨셉인 큐빅으로부터 시작해서 다양한 브랜드 요소를 총정리함

https://skoda-brand.com/explore-our-brand

 

IBM 디자인 가이드라인

짜임새있게 잘 만들어진 브랜드 가이드라인. 사진자료, 서비스 시연용으로 사용할 수 있는 다양한 데모용 사이트도 제시

https://www.ibm.com/design/language/ 

 

IBM 오픈소스 디자인 가이드라인(카본 디자인시스템 Carbon Design System)

IBM의 디자인 언어를 기반으로 시스템 코드, 디자인 툴과 각종 리소스, 휴먼 인터페이스 지침에 대한 공개용 버전

https://www.carbondesignsystem.com/

 

구글의 웹마스터가이드라인

웹서비스가 구글 검색이 잘 될 수 있게 만들기 위한 가이드라인. 개발자를 위한 것이지만 디자이너들도 알아야 할 내용들이 많음.

https://developers.google.com/search/docs/advanced/guidelines/webmaster-guidelines

 

에어비앤비 디자인 시스템

다양한 플랫폼에서 시각적 일관성을 유지하고 서비스의 사용성을 높이기 위한 가이드라인

https://airbnb.design/building-a-visual-language/

 

우버 디자인 시스템

브랜드 체계, 타이틀, 폰트, 모션그래픽에서의 텐션 등 가이드.
프리젠테이션 템플릿, 그래픽 요소, 사진 라이브러리 운영

https://brand.uber.com/kr/ko/

 

메타(페이스북) 브랜드 가이드라인

메타(기업) 및 페이스북, 인스타그램 등 서비스별 디자인 가이드라인 제시
지켜야 할 것(Do)과 하지 말아야 할 것(Don't)을 구분하여 함께 제시

https://www.facebook.com/brand/resources

 

스타벅스 브랜드 디자인 가이드

가이드라인과 다양한 활용사례를 공유

https://creative.starbucks.com/

 

SAP Fiori Design Guidelines

SAP 솔루션의 디자인 가이드라인

https://experience.sap.com/fiori-design-web/sap-fiori/

 

아틀라시안 Atlassian 디자인 시스템

Jira, Trello, Confluence, Bitbucket 등 개발 및 협업 도구를 만드는 곳으로 유명한 Atlassian의 디자인 시스템
브랜드, 경험의 기초요소, 콘텐츠, 기타 구성요소, 리소스 등 잘 구성됨

https://atlassian.design/

 

스포카 디자인가이드라인

UI디자인 소스 등 제시

http://bi.spoqa.com/

 

스포티파이 Shopify 디자인 시스템

개발자들이 참고하고 가져다 활용하게 좋게끔 제작

https://developer.spotify.com/documentation/general/design-and-branding/#attribution

 

리디 디자인가이드

전자책 플랫폼으로 유명한 국내 기업 리디. 디자인의 공통 원칙 안내

https://ridi.design/

 

넷플릭스

로고, 심볼 가이드라인

https://brand.netflix.com/en/

 

유튜브

로고, 심볼, 유튜브 파트너들이 참고해야 하는 정책 기준 등도 제시

https://www.youtube.com/howyoutubeworks/resources/brand-resources/

 

드롭박스

로고, 심볼

https://www.dropbox.com/branding

 

네이버 클로바 디자인 가이드라인

개발자를 위한 가이드라인

https://developers.naver.com/console/clova/client/Design/Brand.md

 

카카오 디자인가이드라인

로그인 버튼, QR 등 카카오 서비스에서 공통으로 사용되는 디자인요소 사용규정

https://developers.kakao.com/docs/latest/ko/reference/design-guide

 


2. 공공부문의 브랜드, 디자인 시스템 및 가이드라인   

 

 

 

 

영국 정부 디지털서비스 디자인 원칙

공공부문 가장 우수한 모델로 참조되는 사례

https://design-system.service.gov.uk/
 

https://www.gov.uk/guidance/government-design-principles

 

미국 정부 웹디자인 시스템(USWDS)

미국 정부도 2015년부터 UX, UI를 디자인하는 디지털 디자인 원칙을 만들고 운영해오고 있음

https://designsystem.digital.gov/

 

호주 정부 디자인 시스템

2016년부터 운영, 국제 웹 콘텐츠 접근성(WCAG 2.1) 지침을 따름

https://designsystem.gov.au/

 

남호주정부 UX디자인 가이드라인

정부 온라인 서비스의 접근성을 높이기 위한 가이드라인

https://www.accessibility.sa.gov.au/

 

남호주정부 인클루시브SA 미디어가이드라인

포용디자인과 관련한 홍보, 대민 커뮤니케이션에 대한 지침으로 참고할만 함

https://inclusive.sa.gov.au/resources/templates

 

이탈리아 행정 디자인 시스템

소프트웨어 개발자를 위한 가이드라인도 함께 운영

https://designers.italia.it/

 

우리나라 전자정부 웹사이트 UI·UX 가이드라인(2019)

정부, 공공기관 웹사이트 개발(분석설계시, 사업발주서 작성시, UX/UI품질점검시, 사용성 관련 만족도 조사시)에 있어 발주자와 개발자가 지켜야하고 디자이너가 참고해야 할 가이드라인

https://mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=69451

 

우리나라 행정공공기관 웹사이트 구축운영 가이드(2021.3.4.)

정부, 공공기관 웹사이트 구축 운영시 개발자, 관리자가 참고해야 할 가이드

https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=83218

 

웹콘텐츠접근성 지침 (WCAG) 2.1 번역본

시력장애, 청각장애, 운동장애, 언어장애, 학습장애, 인지장애 등의 장애인 및 비장애인을 포함한 인간이 웹에 접근할 수 있는 방법을 제시하는 지침

http://www.kwacc.or.kr/WAI/wcag21/

 

3. 웹사이트 구축/운영 관련 가이드라인  (출처 : '행정, 공공기관 웹사이트 구축운영 가이드' 72페이지. 2021.3. 행정안전부)

 

구분  

문서명  

발행년도  

발행기관  

사업대가 산정  

o SW사업 대가산정가이드  

2020  

한국소프트웨어산업협회  

사업계획서  

o 소프트웨어 분리발주 매뉴얼  

2017  

정보통신산업진흥원  

시스템 도입 

o 정보시스템 하드웨어 규모산정 지침  

2018  

한국정보통신기술협회 

o 네트워크 구축을 위한 장비 규모산정 지침  

2017  

플러그인 제거 

o 인터넷 이용환경 개선기술 안내서  

2016  

과학기술정보통신부/
한국인터넷진흥원
  

o 공공기관 플러그인 제거 가이드라인  

2019  

행정안전부  

정보접근성 

o 한국형 웹 콘텐츠 접근성 지침 2.1  

2015  

과학기술정보통신부
국립전파연구원
  

o 소프트웨어 접근성 설계지침  

2015  

산업통상자원부
국가기술표준원
  

개인정보보호 

o 개인정보의 안전성 확보조치 기준 해설서  

2020  

개인정보보호위원회/
한국인터넷진흥원 

o 개인정보의 기술적 관리적 보호조치 기준 해설서  

2020  

o 개인정보 영향평가 수행안내서  

2020  

o 개인정보 수집제공 동의서 작성 가이드라인  

2018  

o 주민등록번호 수집금지제도 가이드라인  

2014  

o 개인정보수집 최소화 가이드라인  

2016  

o 홈페이지 개인정보 노출방지 안내서  

2020  

소프트웨어 개발보안 

o 소프트웨어 개발보안 가이드  

2019  

행정안전부/
한국인터넷진흥원 

o 시큐어코딩 가이드  

2012  

o 소프트웨어 보안약점 진단가이드  

2019  

o 공개SW를 활용한 소프트웨어 개발보안 점검가이드  

2019  

UI·UX  

o 전자정부 웹사이트 UI·UX 가이드라인  

2019  

행정안전부  

자가진단  

o 전자정부 웹사이트 자가진단지표  

2019  

행정안전부  

테스트 및 시험운영  

o 정보시스템 성능관리지침  

2007  

한국정보통신 기술협회  

검색엔진 최적화  

o 검색엔진 최적화 기본 가이드(민간 SEO 가이드)  

2013  

주요 포털(구글, 네이버 등)  

기록물 관리 

o 기록물관리지침  

2020  

국가기록원 

o 폐지기관 기록물 관리 지침  

2008  

 

 

4. 참고할 만한 글

브랜드의 일관성을 위한 : 디자인 가이드 시스템 https://bythem.net/2021/03/31/브랜드의-일관성을-위한-디자인-가이드-시스템
주요 기업들의 디자인시스템 갤러리 https://designsystemsrepo.com/design-systems/?fbclid=IwAR0cdxLcVHq_Ksw6bj58xYKqVUZAb-LcS7RvP6RxoAF44wQVsF2SakcGKxk
The branding style guidelines archive https://brandingstyleguides.com/
글로벌 브랜드들의 브랜드 디자인 가이드 웹사이트 https://brunch.co.kr/@zwang/133
디자인시스템 모음 http://design.gabia.com/wordpress/?p=33570
퀄리티를 높이는 디자인 시스템 https://bythem.net/2021/07/30/퀄리티를-높이는-디자인-시스템/
[디자인가이드] 애플과 구글의 디자인 가이드 알아보기 https://chaeyeon-chaeyeon.tistory.com/34
북마크가 꼭 필요한 UI 가이드라인 45개 소개 https://brunch.co.kr/@ebprux/85
3가지 사례로 살펴보는 디자인 시스템의 오늘과 내일 https://yozm.wishket.com/magazine/detail/1067/
디자인 시스템 - [2] 12가지 세심한 스타일 가이드 https://ldrerin.tistory.com/422
디자인 시스템 1편 - 디자인 가이드/ 디자인 시스템은 왜 필요한가 https://www.pxd.co.kr/pages/story/story_detail_01.html
디자인 시스템 2편 - 디자인 가이드라인/디자인 시스템의 종류 https://story.pxd.co.kr/1435
디자인 시스템에 대해  알아야 할 모든 것 https://brunch.co.kr/@euid/1
에어비앤비의 디자인 시스템 https://brunch.co.kr/@eunlune/15
선별된 UI 스타일 가이드 목록 https://www.wenyanet.com/opensource/ko/60745ae8b8a6f86c86616e72.html
10가지 훌륭한 디자인 시스템으로부터 배우고 훔치는 방법 https://ichi.pro/ko/10-gaji-hullyunghan-dijain-siseutemgwa-geulobuteo-baeugo-humchineun-bangbeob-83135250730918
네이버 웹마스터 가이드 https://searchadvisor.naver.com/guide
- 네이버 검색 교육자료1 : 네이버 웹검색의 기초 https://searchadvisor.naver.com/doc/wmt_guide_ps_websearch.pdf
- 네이버 검색 교육자료2 : 네이버 웹마스터도구 활용 가이드 https://searchadvisor.naver.com/doc/wmt_guide_ps_quality.pdf
구글 검색엔진 최적화(SEO) 기본 가이드 https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=ko
우리나라 전자정부 웹사이트 UI·UX 가이드라인(행정안전부, 2019) https://mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=69451
우리나라 행정공공기관 웹사이트 구축운영 가이드(행정안전부, 2021) https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000045&nttId=83218
한국형 웹 콘텐츠 접근성 지침 2.1(국립전파연구원, 2015) http://news.seoul.go.kr/gov/files/2014/01/5552af1b5fb910.17981163.pdf
전자정부 웹사이트 품질관리 지침(행정안전부, 2021) https://www.mois.go.kr/frt/bbs/type001/commonSelectBoardArticle.do?bbsId=BBSMSTR_000000000016&nttId=83188 

 

* 조사 : 한국디자인진흥원 데이터플랫폼실. 2021.12. 

designdb logo
Tag
#디자인가이드라인 #디자인시스템
한국디자인진흥원의 저작물인 "주목할 만한 브랜드, 디자인 시스템 및 가이드라인"의 경우,
공공누리"출처표시+상업적 이용금지+변경금지" 조건에 따라 이용할 수 있습니다. 단, 사진, 이미지, 일러스트, 동영상 등의 일부 자료는
한국디자인진흥원이 저작권 전부를 갖고 있지 아니하므로, 자유롭게 이용하기 위해서는 반드시 해당 저작권자의 허락을 받으셔야 합니다.

목록 버튼 이전 버튼 다음 버튼
최초 3개의 게시물은 임시로 내용 조회가 가능하며, 이후 로그인이 필요합니다. ( 임시조회 게시글 수: )