1. 프론트엔드가이드
1.1. 기술환경
1.1.1. OS/Browser
1.1.2. 모바일 디바이스
1.1.3. 다국어
1.1.3.1. 기획/디자인
1.1.3.2. 언어별 글자수 체크
1.1.3.3. 다국어 가이드
1.2. HTML
1.2.1. 문서타입(DOCTYPE)
1.2.2. 인코딩
1.2.2.1. ex) UTF-8
1.2.3. Meta Tag
1.2.3.1. google
1.2.3.1.1. title
1.2.3.1.2. description
1.2.3.2. facebook
1.2.3.3. twitter
1.2.3.4. 메타 태그 - 미리보기, 편집 및 생성
1.2.4. Favicon
1.2.4.1. Favicon 생성기
1.2.4.2. Favicon Browser별 비교
1.3. CSS
1.3.1. OS/Browser 확인후
1.3.2. CSS 방법론
1.3.2.1. BEM
1.4. javascript
1.5. 웹접근성
1.6. 네이밍 규칙
1.6.1. ID
1.6.2. Class
1.6.3. javascript
1.6.4. Image
1.6.5. 네이밍 서비스 참고
1.7. 폰트 정의
1.7.1. 시스템 폰트
1.7.1.1. OS별 시스템 폰트
1.7.1.2. 글로벌 서비스 폰트
1.7.2. 웹폰트
1.7.2.1. 상업용 폰트 찾기
1.7.2.1.1. 한글
1.7.2.1.2. 영문
1.7.2.1.3. 한자
1.7.2.1.4. 일본어
1.7.2.2. 선호하는 웹폰트
1.7.2.2.1. 노토산스/본고딕(구글/Adobe)
1.7.2.2.2. 나눔체(네이버)
1.7.2.2.3. 스포카 한 산스(스포카)
1.7.2.3. 서브셋 폰트 제작
1.7.2.3.1. 서브셋 폰트 메이커
1.8. 미디어
1.8.1. 이미지
1.8.1.1. 아이콘
1.8.1.1.1. SVG/PNG/GIF
1.8.2. 비디오
1.8.2.1. youtube/vimeo
1.8.2.1.1. custom
1.8.3. 오디오
1.9. 컴포넌트
1.9.1. 템플릿
1.9.2. 컴포넌트 프로토타입
1.10. 현황판
1.10.1. 기획/디자인/개발 파트에서 확인 가능한 프로젝트 현황판
1.10.2. 현황판 프로토타입
2. 01. 프로젝트 전 체크사항
2.1. 프로젝트 체크리스트 예시
2.2. 기획체크
2.2.1. 데이터가 없는 경우
2.2.1.1. Empty States
3. 공통
3.1. 체크사항
3.1.1. OS/Browser
3.1.1.1. OS
3.1.1.1.1. windows OS
3.1.1.1.2. Mac OS
3.1.1.1.3. iOS
3.1.1.1.4. Android OS
3.1.1.2. Browser
3.1.1.2.1. Edge
3.1.1.2.2. Internet Exploler
3.1.1.2.3. Chrome
3.1.1.2.4. Firefox
3.1.1.2.5. Safari
3.1.1.2.6. Etc
3.1.1.3. OS/Browser 점유율 확인 사이트
3.1.1.3.1. statcounter
3.1.1.3.2. netmarketshare
3.1.1.3.3. w3counter
3.1.2. 웹접근성 준수 범위
3.1.2.1. AA
3.1.2.2. AAA
3.1.3. 모바일 디바이스 지원 범위
3.1.4. 다국어
3.1.5. 이메일
3.1.5.1. 클라이언트별 CSS 지원이 다르기 때문에 필요
3.1.5.2. HTML/CSS 이메일 클라이언트 지원 여부
3.1.5.3. 이메일 클라이언트 테스터(유료)
3.1.5.4. Mail to Link 제너레이터
3.1.5.5. * 온라인 버전 지원 여부
3.1.6. 폰트정의(디)
3.1.6.1. 시스템폰트
3.1.6.1.1. PC/Mobile OS 폰트
3.1.6.2. 웹폰트
3.1.6.2.1. 예시
3.1.7. 인쇄 범위
3.1.8. Favicon(디)
3.1.9. 용어의 정의(기)
3.1.9.1. 기능상의 용어를 일관성있게 네이밍 - 더보기/more - 메세지/메시지 - 핸드폰/휴대폰
3.2. 소프트웨어
3.2.1. 포토샵
3.2.2. 스케치
3.2.3. 일러스트레이터
3.2.4. 피그마
3.2.5. 제플린
3.2.6. 버전관리
3.3. 테스팅 툴
3.3.1. PC
3.3.1.1. Internet Ex 호환성 모드
3.3.1.2. Virtucal Box
3.3.1.2.1. OS/Browser 버전별 가상 머신
3.3.1.3. Browser Online
3.3.2. Mobile
3.3.2.1. Android
3.3.2.1.1. genymotion
3.3.2.2. iOS
3.3.2.2.1. Mac OS(Xcode)
3.3.2.2.2. Mac OS(Safari)
3.3.3. browserstack open-source
4. 통합된 UI를 만드는 데 사용되는 일련의 개별 스타일, 구성 요소 및 지침입니다.
5. 디자인 시스템 리소스
5.1. lightningdesignsystem
5.2. codyhouse
5.3. carbondesignsystem
6. 디자인 명세서
7. 체크리스트
7.1. HTML 유효성 검사
7.2. HEAD 체크리스트
7.3. 프론트엔드 체크리스트
7.4. 프론트엔드 성능 체크리스트
7.5. 프론트엔드 디자인 체크리스트(EN)
7.6. 포괄적 디자인 체크리스트
7.7. 폰트 로딩 체크리스트
8. 디자인 가이드
8.1. 지침
8.1.1. 접근성
8.1.1.1. 컬러
8.1.1.2. 키보드
8.1.2. 콘텐츠