본문 바로가기

2017

2017.04.27 16:13 / by eunhye jo(contact@eyegoodsoft.com)



오픈소스 프로젝트는 더이상 개발자만의 문화가 아닙니다. 최근에는 디자인 영역에서도 아이디어와 자료들을 공유하는 운동이 활발하게 전개되고 있습니다.


지금부터 소개할 내용은 웹·모바일 디자이너에게 아주 유용한 오픈소스 프로젝트들입니다. 실제 협업에서 사용할 수 있는 자료도 있지만 이제 막 디자인을 배우거나 디자인 감각을 익히고 싶은 개발자들에게도 좋은 공부 자료가 될 수 있을 것이며, 반대로 개발 지식을 배우고 싶은 디자이너도 참고할 수 있을 것입니다. 한가지 아쉬운 점은 한국에서는 기업이나 기관 단위로 디자인 자료나 가이드라인을 공개한 사례는 찾기 힘들며 아래 프로젝트들도 모두 해외 프로젝트 입니다.



1. 정부기관의 웹사이트 지침서, ‘US 웹디자인 스탠다드’


'US 웹디자인 스탠다드'는 미국 정부의 IT 혁신 부서 ’18F’가 만든 오픈소스 프로젝트로 정부 혹은 공공기관 웹사이트에 적합한 디자인에 대해 공부하고자 할 때 살펴보면 좋습니다.


최근 미국 정부 부처들은 US 웹디자인 스탠다드를 기준으로 웹사이트를 새로 개발하고 있습니다. US 웹디자인 스탠다드는 각 단계마다 버튼 색깔은 어떤게 좋을지, 구성요소들의 적합한 크기는 무엇인지 등을 친절하게 제안하고 있습니다. 장애인이나 어린이들이 쉽게 이용할 수 있도록 접근성을 높이고 HTML 표준을 지켜 웹브라우저 호환성을 중시했습니다. 또한 반응형 웹사이트 디자인을 추구하고 있다고 합니다. US 웹디자인 스탠다드를 따른 웹사이트가 어떤 모습인지 보고 싶다면 ‘보트USA‘, ‘웹사이트 가이드라인 공식 홈페이지‘, ‘US 디지털 서비스 플레이북‘ 홈페이지를 방문해 살펴볼 수 있습니다.




2. 스타일가이드 쉽게 제작하기  '휴즈의 스타일가이드'


휴즈는 1999년 설립된 회사로 마케팅에서부터 미디어 제작, 웹사이트 디자인 등을 제공합니다.스타일 가이드란 웹사이트의 구성요소들을 어떻게 배치할지, 글자 모양은 어떻게 할지 등을 제안하는 규칙입니다. 휴즈는 “기존 스타일 가이드는 PDF 형태로 배포된다”라며 “HTML 웹 형태로 스타일 가이드를 개발해 쉽게 수정하고 유지보수할 수 있게 만들었다”라고 스타일 가이드를 공개한 이유를 설명했습니다.


휴즈의 스타일가이드는 HTML, CSS, 자바스크립트 파일 등이 섞여 있으며, 파일 설치를 위해선 제이드, 노드JS 같은 지식을 알아야 합니다. 휴즈는 인턴, 디자이너, 신입 개발자, 경력 개발자 등이 활용할 수 있게 스타일가이드를 만들었다고 합니다. 개발 지식이 없더라도 부분적으로 이해할 수 있습니다. 모든 기능은 마치 블록을 조립하듯 나눠 필요한 기능만 따로 빼내 볼 수 있고, 파일을 수정할 수도 있으며 해당 프로젝트는 모두 깃허브에 올라와 있습니다.




3. 무료 콘텐츠 웹사이트 주소 모음집, ‘어썸 스톡 리소스‘


저작권에 자유로운 콘텐츠를 찾고 있다면 ‘어썸 스톡 리소스’ 프로젝트를 살펴볼 수 있습니다. 어썸 스톡 리소스에는 무료로 이용할 수 있는 콘텐츠 주소가 130개 이상 모여 있습니다. 사진, 영상, 음악을 내려받을 수 있는 주소부터 PSD 파일, 일러스트레이션, 벡터 그래픽 파일, 색상표, 웹디자인 패턴 등을 볼 수 있는 웹주소가 공유되고 있습니다.




4. 구글의 ‘머티리얼 디자인 라이트’


구글은 모바일과 데스크톱 그리고 다양한 기기들을 아우르는 일관된 디자인 가이드라인을 2014년 공개했습니다. 이 디자인 가이드라인을 ‘머티리얼 디자인’이라고 부릅니다. ‘머티리얼 디자인 라이트'(Material Design Lite, MDL)는 머티리얼 디자인을 좀 더 쉽게 구현할 수 있도록 돕는 예제 소스 모음집으로 CSS, HTML, 자바스크립트 컴포넌트 등이 들어 있습니다.




5. 위챗 UI 라이브러리


중국의 카카오톡이라고 불리는 위챗은 텐센트가 만든 모바일 메신저입니다. 위챗 UI 라이브러리는 위챗 디자인팀이 공개한 오픈소스 프로젝트로 모바일 웹 애플리케이션에서 유용한 위젯과 모듈 디자인이 들어 있습니다.





크리에이티브 커먼즈 라이선스eunhye jo님에 의해 작성된 이 저작물은 크리에이티브 커먼즈 저작자표시 4.0 국제 라이선스에 따라 이용할 수 있습니다.

[출처 : http://blog.eyegoodsoft.com/91]

맨 위로
맨 위로