디자이너를 위한 오픈소스 프로젝트 6선
2015년 12월 20일 (일)
ⓒ 블로터닷넷, 이지현 기자 jihyun@bloter.net
오픈소스 프로젝트는 더이상 개발자만의 문화가 아니다. 최근에는 디자인 영역에서도 아이디어와 자료들을 공유하는 운동이 활발하게 전개되고 있다. 디자이너를 위한 오픈소스를 찾고싶다면 깃허브를 참고하자. 소스코드에서부터 관련 문서 웹주소까지 쉽게 찾아볼 수 있다.
아래는 웹·모바일 디자이너에게 유용한 오픈소스 프로젝트들이다. 실제 협업에서 사용할 수 있는 자료도 있지만 이제 막 디자인을 배우거나 디자인 감각을 익히고 싶은 개발자들에게 좋은 공부 자료가 될 수 있다. 반대로 개발 지식을 배우고 싶은 디자이너도 참고할 수 있을 것이다. 아쉽게도 한국에서는 기업이나 기관 단위로 디자인 자료나 가이드라인을 공개한 사례는 찾기 힘들다. 아래 프로젝트 모두 해외 프로젝트들이다.
1. 정부기관의 웹사이트 지침서, ‘US 웹디자인 스탠다드’
정부 웹사이트에 적합한 디자인이 무엇일까? 그 답을 찾고 싶다면 ‘US 웹디자인 스탠다드’를 살펴보면 좋다. 미국 정부의 IT 혁신 부서 ’18F’가 만든 오픈소스 프로젝트다. 18F는 미국정부기관 ‘제너럴 서비스 어드미니스트레이션‘에 소속돼 있는 팀이다. 시민과 정부기관에 필요한 소프트웨어를 만들고 있다. 18F가 개발한 기술은 누구나 사용할 수 있게 오픈소스로 공개된다.
최근 미국 정부 부처들은 US 웹디자인 스탠다드를 기준으로 웹사이트를 새로 개발하고 있다. US 웹디자인 스탠다드는 각 단계마다 버튼 색깔은 어떤게 좋을지, 구성요소들의 적합한 크기는 무엇인지 등을 제안하고 있다. 장애인이나 어린이들이 쉽게 이용할 수 있도록 접근성을 높이고 HTML 표준을 지켜 웹브라우저 호환성을 중시했다. 스마트폰이나 태블릿 환경에서도 웹사이트가 깨지지 않는 디자인을 추구하고 있다고 한다. US 웹디자인 스탠다드를 따른 웹사이트가 어떤 모습인지 보고 싶다면 ‘보트USA‘, ‘웹사이트 가이드라인 공식 홈페이지‘, ‘US 디지털 서비스 플레이북‘ 홈페이지를 방문해보자.
2. 스타일가이드 쉽게 만들자… ‘휴즈의 스타일가이드’
휴즈는 1999년 설립된 회사로 마케팅에서부터 미디어 제작, 웹사이트 디자인 등을 제공한다. 뉴욕시, 구글, TED, 구찌 웹사이트 기획·제작에 참여한 바 있다. 스타일 가이드란 웹사이트의 구성요소들을 어떻게 배치할지, 글자 모양은 어떻게 할지 등을 제안하는 규칙이다. 휴즈는 “기존 스타일 가이드는 PDF 형태로 배포된다”라며 “HTML 웹 형태로 스타일 가이드를 개발해 쉽게 수정하고 유지보수할 수 있게 만들었다”라고 스타일 가이드를 공개한 이유를 설명했다.
휴즈의 스타일가이드는 HTML, CSS, 자바스크립트 파일 등이 섞여 있으며, 파일 설치를 위해선 제이드, 노드JS 같은 지식을 알아야 한다. 휴즈는 인턴, 디자이너, 신입 개발자, 경력 개발자 등이 활용할 수 있게 스타일가이드를 만들었다고 한다. 개발 지식이 없더라도 부분적으로 이해할 수 있다. 모든 기능은 마치 블록을 조립하듯 나눠 필요한 기능만 따로 빼내 볼 수 있고, 파일을 수정할 수도 있다. 휴즈의 스타일 가이드는 모두 깃허브에 올라와 있다. 소스코드를 통째로 내려받을 수 있으며, 계속 수정되고 있다.
3. 무료 콘텐츠 웹사이트 주소 모음집, ‘어썸 스톡 리소스‘
저작권에 자유로운 콘텐츠를 찾고 있다면 ‘어썸 스톡 리소스’ 프로젝트를 살펴보자. 어썸 스톡 리소스에는 무료로 이용할 수 있는 콘텐츠 주소가 130개 이상 모여 있다. 사진, 영상, 음악을 내려받을 수 있는 주소부터 PSD 파일, 일러스트레이션, 벡터 그래픽 파일, 색상표, 웹디자인 패턴 등을 볼 수 있는 웹주소가 공유되고 있다. 라이선스는 대다수가 퍼블릭 도메인이나 CC0 라이선스를 따른다. 라이선스가 분명치 않거나 일부 비용을 지불해야 하는 콘텐츠를 별도로 분리해놓기도 했다.
어썸 스톡 리소스는 영국에 있는 한 웹개발자 겸 디자이너가 추진한 프로젝트다. 이 프로젝트는 집단지성을 이용해 계속 수정되고 있다. 공개된 내용 외에 추가할만한 좋은 주소가 생각났다면 누구든 어썸 스톡 리소스 문서를 업데이트할 수 있다.
4. 페이스북팀이 쓰는 무료 디자인 파일, ‘디자인 리소스’
페이스북은 오픈소스 문화에 적극적으로 동참하는 기업이다. 그동안 주로 내부 개발자들이 오픈소스 소프트웨어를 공개했지만 올해는 디자인팀도 오픈소스 문화에 적극 동참해 ‘디자인 리소스’라는 웹사이트를 공개했다. 디자인 리소스에는 크게 3가지 자료가 있다. 먼저 iOS 9 GUI 자료들이 있다. 파일은 포토샵 파일과 스케치 파일 형태로 제공되므로, 디자이너 입맛에 맞게 수정할 수 있다.
두번째로 ‘핸즈키트’라는 이미지 파일 모음집이 있다. 핸즈키트는 스마트폰을 잡고 있는 손 모양을 찍은 사진들이다. 스마트폰은 아이폰부터 넥서스같은 안드로이드 기기 모델까지 다양하다.
마지막으로 ‘오리가미’ 관련 파일들이 있다. 오리가미는 페이스북이 만든 프로토타입 도구다. 프로토타입 도구는 포토샵보다 간단한 기능만 지원한다. 오리가미는 앱이나 웹에 동적인 기능을 쉽게 표현할 수 있는게 특징이다. 개발 지식이 없어도 클릭 몇 번만으로 스와이프(화면을 옆으로 미는 기능), 스크롤, 탭 기능 등을 디자인에 바로 추가할 수 있다.
▲페이스북 오리가미
5. 구글의 ‘머티리얼 디자인 라이트’
구글은 모바일과 데스크톱 그리고 다양한 기기들을 아우르는 일관된 디자인 가이드라인을 2014년 공개했다. 이 디자인 가이드라인을 ‘머티리얼 디자인’이라고 부른다. ‘머티리얼 디자인 라이트'(Material Design Lite, MDL)는 머티리얼 디자인을 좀 더 쉽게 구현할 수 있도록 돕는 예제 소스 모음집이다. CSS, HTML, 자바스크립트 컴포넌트 등이 들어 있다. 개발자는 MDL를 참고해 버튼, 체크박스, 텍스트박스부터 레이아웃, 글씨 크기, 색상 등을 어떻게 적용해야 할지 알 수 있다. 소스코드들은 라이브러리, 프레임워크, 개발환경 등 외부 요소에 의해서 머티리얼 디자인이 변하지 않도록 신경썼다.
6. 위챗 UI 라이브러리
위챗은 텐센트가 만든 모바일 메신저다. 중국의 카카오톡이라고 보면 된다. 위챗 UI 라이브러리는 위챗 디자인팀이 공개한 오픈소스 프로젝트다. 모바일 웹 애플리케이션에서 유용한 위젯과 모듈 디자인이 들어 있다. 소스코드를 제외한 대부분의 설명이 중국어인 건 아쉽다. 국내 포털이나 주요 IT 기업들은은 아직 디자인 자료들을 공개하지 않고 있다는 점에서 위챗 디자인팀의 행보는 눈에 띈다.
▲위챗 UI
※ 본 내용은 (주)블로터 앤 미디어(http://www.bloter.net)의 저작권 동의에 의해 공유되고 있습니다.
Copyright ⓒ 블로터 앤 미디어. 무단전재 및 재배포 금지
| 번호 | 제목 | 조회수 | 작성 |
|---|---|---|---|
| 공지 | [Open UP 활용가이드] 공개SW 활용 및 개발, 창업, 교육 "Open UP을 활용하세요" | 398879 | 2020-10-27 |
| 공지 | [Open UP 소개] 공개SW 개발·공유·활용 원스톱 지원 Open UP이 함께합니다 | 388680 | 2020-10-27 |
| 4799 | [디지털산책] DT시대, `개방과 참여`가 핵심이다 | 3248 | 2016-01-06 |
| 4798 | [알아봅시다] 물리엔진 | 15793 | 2016-01-06 |
| 4797 | MS, R 분석 제품군 출시 | 3437 | 2016-01-06 |
| 4796 | 제 3의 모바일 OS, TIZEN은 무엇인가? | 3767 | 2016-01-06 |
| 4795 | 데비안 리눅스 프로그래머 사망 원인 ‘미스터리’ | 3283 | 2016-01-06 |
| 4794 | '살아도 산 게 아니다' 파탄 상태의 앱 개발 기술 5가지 | 4053 | 2016-01-06 |
| 4793 | 2015년 '오픈소스 해'→2016년 '플랫폼의 해' | 3521 | 2016-01-05 |
| 4792 | [알아봅시다] 오픈소스 소프트웨어정의데이터센터 (SDDC) | 3575 | 2016-01-05 |
| 4791 | 디자이너를 위한 오픈소스 프로젝트 6선 | 3897 | 2015-12-22 |
| 4790 | 오픈소스 SW업계, IoT부문 영향력 확대 | 3064 | 2015-12-22 |
0개 댓글