-
프론트엔드 개발자를 위한 가이드 문서 모음 (NO. 10)DEV/유용한 사이트 2017. 1. 31. 15:15
프론트엔드 개발자를 위한 가이드 문서 모음 (No. 10)
원문: 20+ Docs and Guides for Front-end Developers (No.10) by Louis Lazaris
또 다시 배움의 시기가 찾아 왔네요! 전편과 마찬가지로, 이번 글에서도 프론트엔드의 다양한 분야에서 개발 속도를 높이는 데 도움이 될 법한 가이드, 문서, 웹사이트 등의 학습 자료들을 모아보았습니다.
그러니 친히 저희가 준비한 문서 및 가이드 시리즈 그 열번째 글을 즐겨 주시고, 혹시나 빠트린 것이 있다면 댓글을 통해 알려주시는 것도 잊지 마세요.
1. CSS 모드 쿼리 및 범위 선택자(Mod Queries and Range Selectors)
패트릭이 최근 A List Apart에 기고한 “모드 쿼리”에 관한 글을 읽어 보셨다면 이 사이트를 이해하기가 더 쉬울 것입니다. 그리드 레이아웃에 나열될 요소의 갯수가 고정값이 아닐 때, CSS 선택자를 사용하여 어떻게 대응할 수 있는지 안내해 주는 가이드 사이트입니다.
2. 어쩌면 자바스크립트가 필요 없을지도 모릅니다(You Might Not Need JavaScript)
우선 드릴 말씀은, 이 사이트에서 소개하는 컴포넌트가 모든 사용자 층이 보기에 의미를 담고 있거나(semantic) 접근성이 잘 보장되어 있는 것은 아닙니다. 그렇지만 자바스크립트를 사용하지 않고 오직 HTML, CSS, Sass 만으로 어떠한 것들을 만들어 낼 수 있는지 보여주는 다양한 기법들이 올라와 있습니다.
3. 어마무시한 HTML5 요약본(The HTML5 Mega Cheat Sheet)
HTML5 태그 (오래된 것, 새로운 것, 폐기된 것 모두 포함), 속성(attribute), 데스크탑 및 모바일 브라우저 지원 정보, 이벤트 핸들러, 캔버스 관련 기능을 정리해 놓은 매우 백과사전적인 인포그래픽입니다. PDF 파일로 내려받을 수도 있습니다.
4. SVG 제작 가이드
‘상호 호환적(interoperable)이고, 재사용 가능하며, 성능 좋고, 효율적이고, 실용적인 SVG를 만들기 위한 몇가지 모범 기법에 대한 설명과 이에 대한 코드 예시를 담은’ W3C 공식 문서입니다.
5. HTML 5.2 W3C Working Draft
WHATWG에서 제작한 HTML5 명세서는 별다른 판(version) 구분 없이 쭉 “living standard” 상태이지만, 이와는 별도로 W3C에서는 자신들이 쓴 명세서 판을 높이는 중입니다. HTML 5.2에서 바뀌거나 달라진 점이 무엇인지 궁금하다면 이 문서를 읽어 보세요.
6. 웹 개발자 체크리스트
개발자들이 프로젝트를 마칠 때 쯤에 보면 좋을 법한 체크리스트이며 광범위한 사항을 다룹니다. 사용성, 접근성, SEO, 코드 품질, 보안을 비롯한 많은 카테고리가 명시되어 있습니다. 또한 각 카테고리의 항목 안에는 체크 완료 하는데 도움이 될 만한 자료 링크가 포함되어 있습니다.
7. Can I animate...?
CSS 속성을 입력하면 “애니메이션화(animatable)” 가능한지 여부와, 브라우저가 해당 속성을 애니메이션화 시키기 위해 사용하는 계산 방법에 대해 알려주는 간단한 사이트입니다.
8. 테스트할 모바일 기기 제대로 고르기
BrowserStack에서 제작한 모바일 기기 테스팅 가이드 사이트입니다. 시장 점유율 데이터, OS 버전, 스크린 사이즈, 뷰포트 및 해상도 정보 등을 기반으로 합니다. 이 사이트는 “30,000명이 넘는 BrowserStack 고객들을 대상으로 한 사용자 통계와 현재의 글로벌 시장 트렌드를 바탕으로 통찰한 결과이며, 최신 및 출신 예정 기기 정보가 목록에 지속적으로 갱신 되고 있다”고 합니다.
9. 디자이너를 위한 웹 성능 최적화 체크리스트
Jon Yablonski가 만든 이 동적인 체크리스트는 Yon이 디자이너를 위해 쓴, 손쉽게 적용하는 프론트엔드 프로젝트 성능 향상 방법에 대한 글을 기반으로 만든 것입니다. 각각의 체크 항목에 그가 쓴 글 중 해당 항목과 관련된 부분으로 이동하는 링크가 심어져 있습니다.
10. 웹 플랫폼 기능의 사용 가능성은 얼마나 될까?
“caniuse.com과 StatCounter의 데이터를 기반으로, 이 페이지에서는 웹 플랫폼 기능이 기본 내장되어 있는 브라우저를 사용하는 유저가 얼마나 되는지, 각각의 기능별로 그 비율을 표시합니다. 당연하게도, 이 데이터는 polyfill을 비롯한 다른 대비책 존재 가능성은 고려하지 않은 것입니다.”
11. 자바스크립트 개발자 실태조사
“9000명이 넘는 개발자가 제 1회 자바스크립트 개발자 실태조사에 참여하였습니다. 참여자들이 답한 질문의 범위는 프론트엔드 프레임워크와 상태 관리부터, 빌드 툴 및 테스팅 라이브러리에 이릅니다. 설문조사 결과를 통해 개발자들이 앞으로 배우고자 하는 라이브러리가 무엇인지, 사용자 만족도가 가장 높은 라이브러리는 무엇인지 알아볼 수 있습니다. 또한 설문조사 결과를 살펴봄으로써 항상 변화하는 자바스크립트 생태계에 대해 한층 더 깊게 이해할 수 있는 기회가 되기를 바랍니다.”
12. 모바일 사용 통계
실시간 모바일 사용에 대한 정보를 애니메이션을 곁들여서 인포그래픽으로 표현한 사이트 입니다. 매 초마다 온라인 활동이 얼마나 증가하는지 다양한 측면에서 관찰할 수 있습니다.
13. 폰트 로딩 전략에 관한 자세한 가이드
Zach Leatherman은 웹 폰트에 관한 자세하면서도 기술적인 가이드를 만들었습니다. 개발자가 웹 폰트를 다룰 때 따를 만한 모범 전략 및 추천 방법이 많이 실려 있습니다.
14. MDN 학습 공간
이미 몇번 보았을지도 모를 사이트입니다. 사이트 내용 중 대부분이 초심자를 위한 것이기 때문에 모든 독자에게 적합하지는 않으나, MDN 내에 존재하는 모든 HTML, CSS, 자바스크립트 자료를 빠르게 찾아볼 수 있는 훌륭한 중심점의 구실을 합니다.
15. 공 튀기기
Sparkbox 소속 개발팀이 제작한 간단하면서도 인터렉티브한 사이트입니다. 동일한 공 튀기기 애니메이션을 다양한 기술을 통해 어떻게 만들었는지 코드로 선보입니다. 애니메이션 라이브러리 사용을 고려하고 있을 때, 이러한 비교 과정을 거친다면 각각의 기술에서 사용하는 API와 예상되는 작업 비용을 비교해 볼 수 있습니다.
16. 접근성 가이드라인(체크리스트)
“개발 과정에 접근성을 부여한다면 사용자 경험을 전반적으로 향상시킬 수 있습니다. 이 체크리스트를 통해, 여러분이 프로젝트에서 맡은 역할이 무엇이든 상관없이 작업 과정 내에 접근성에 대한 사항을 포함시킬 수 있습니다.” 개발자, 엔지니어, 프로젝트 매니저, QA, 편집자를 위한 각각의 섹션이 포함되어 있습니다.
17. WebAIM 접근성 체크리스트
WebAIM에서 제작한, 한결 더 기술적이고 자세한 접근성 체크리스트를 웹에서 확인할 수 있습니다. PDF 파일로도 내려받을 수 있으며, 체크리스트는 HTML과 스크립트/플러그인 두 파트로 나누어져 있습니다.
18. Loadsh/Underscore는 (아마도) 필요하지 않습니다
Loadsh나 Underscore와 같은 유틸리티 라이브러리가 제공하는 기능을 순수 JavaScript로 대체하는 방법을 나열한, 훌륭하고 방대한 자료입니다. 각 방법의 브라우저 호환성에 관한 정보도 들어있습니다.
19. 웹을 위한 접근성 패턴
eBay의 개발자인 Ian McBurnie가 만든, 접근성을 지닌 웹 패턴 개발에 대해 서술한 훌륭한 자료입니다. 패턴의 예로는 자동완성, 체크박스, flyout 메뉴, 페이징, 툴팁 등등이 있습니다. 관련 GitBook에서 이 패턴에 관한 문서를 열람할 수 있습니다.
20. 앵귤러 코드 리뷰
앵귤러 1.X 버전 사용자들을 위한 코드 리뷰 체크리스트입니다. 읽어 보면서 코드 스타일, 설계, 보안성, 접근성, 성능을 위한 모범 기법을 사용하고 있는지 스스로 점검해 볼 수 있습니다. 사이트에 가입하시면 앵귤러 2를 위한 체크리스트 출시 알림을 받아볼 수 있습니다.
이 밖의 훌륭한 자료들
- 진보적인(progressive) 웹 애플리케이션
- React는 어떻게 작동하는 것일까?
- React 패턴
- 작디 작은 자료 구조
- Random HTML Tags
- SVG 2 새로운 기능들
- 보안 관련 체크리스트
여러분이 제안해주세요
이 외에 프론트엔드 개발자를 위한 학습 자료를 만들고 있거나 알고 있다면, 댓글로 알려주세요. 다음 포스트를 쓸 때 참고하겠습니다.
아래는 지금까지 연재한 이 시리즈의 포스트 목록입니다.