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

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



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

 

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개의 게시물은 임시로 내용 조회가 가능하며, 이후 로그인이 필요합니다. ( 임시조회 게시글 수: )