web-starter-kit

KO | EN

gitlite — search

#javascript #python #golang #machine-learning #rust #macos #awesome #cli #pytorch #security #mcp #openai #ios #open-source

web-starter-kit

(★ 18,281)

Web Starter Kit - 멀티디바이스 웹사이트를 위한 워크플로우

web-starter-kit 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# [![Web Starter Kit](https://cloud.githubusercontent.com/assets/110953/11445049/f05512ba-9520-11e5-8fdb-8c8eb5f690d0.jpg)](https://github.com/google/web-starter-kit/releases/latest)

## 개요

[Web Starter Kit](https://developers.google.com/web/tools/starter-kit/)은 웹 개발을 위한 고유한 철학이 담긴 보일러플레이트입니다. 다양한 기기에서 훌륭한 사용자 경험을 구축하고 [성능을 최우선](#web-performance)으로 고려하는 도구들을 제공합니다. Google의 [Web Fundamentals](https://developers.google.com/web/fundamentals/)에 명시된 모범 사례를 따르며 생산성을 유지할 수 있도록 도와줍니다. 업계의 전문가와 신규 입문자 모두에게 든든한 출발점이 되어 줍니다.

### 주요 기능

| 기능 | 요약 |
|----------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Responsive boilerplate | 멀티 스크린 웹에 최적화된 반응형 보일러플레이트입니다. [Material Design Lite](http://getmdl.io)를 기반으로 합니다. [basic.html](https://github.com/google/web-starter-kit/blob/master/app/basic.html)을 통해 이것을 사용하거나 완전히 빈 상태로 시작할 수 있습니다. |
| Sass support                           | [Sass](http://sass-lang.com/)를 CSS로 손쉽게 컴파일하여 변수, 믹스인 등의 기능을 지원합니다. (프로덕션을 위해 `gulp serve` 또는 `gulp` 실행) |
| Performance optimization               | JavaScript, CSS, HTML, 이미지를 최소화하고 병합하여 페이지를 가볍게 유지합니다. (최적화된 프로젝트 버전을 `/dist`에 생성하려면 `gulp` 실행) |
| Code Linting               | JavaScript 코드 린팅은 [ESLint](http://eslint.org)를 사용하여 수행됩니다. 이는 JavaScript의 패턴을 식별하고 보고하는 플러그인 가능한 린터 도구입니다. Web Starter Kit은 Google JavaScript 스타일 가이드를 따르려는 [eslint-config-google](https://github.com/google/eslint-config-google)과 함께 ESLint를 사용합니다. |
| ES2015 via Babel 6.0                   | [Babel](https://babeljs.io/)을 사용한 선택적 ES2015 지원. ES2015 지원을 활성화하려면 [.babelrc](.babelrc) 파일에서 `"only": "gulpfile.babel.js",` 라인을 제거하세요. ES2015 소스 코드는 광범위한 브라우저 지원을 위해 자동으로 ES5로 트랜스파일됩니다. |
| Built-in HTTP Server                   | 개발 및 반복 작업 중에 사이트를 로컬에서 미리 볼 수 있는 내장 서버 |
| Live Browser Reloading                 | 확장 프로그램 없이도 수정 사항이 생길 때마다 브라우저를 실시간으로 새로 고칩니다. (`gulp serve`를 실행하고 파일을 편집하세요) |
| Cross-device Synchronization           | 프로젝트를 편집할 때 여러 기기 간에 클릭, 스크롤, 폼, 라이브 리로드를 동기화합니다. [BrowserSync](http://browsersync.io) 기반. (`gulp serve`를 실행하고 네트워크의 다른 기기에서 제공된 IP를 여세요) |
| Offline support                     | 내장된 [Service Worker](http://www.html5rocks.com/en/tutorials/service-worker/introduction/) [사전 캐싱](https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.js#L226) 덕분에, HTTPS 도메인에 `dist`를 배포하는 사이트는 오프라인 지원을 누릴 수 있습니다. 이는 [sw-precache](https://github.com/GoogleChrome/sw-precache/)를 통해 가능합니다. |
| PageSpeed Insights                     | 모바일 및 데스크톱에서 사이트 성능이 얼마나 잘 작동하는지 보여주는 웹 성능 측정항목 (`gulp pagespeed` 실행) |

## Quickstart

[Download](https://github.com/google/web-starter-kit/releases/latest) 키트를 다운로드하거나 이 리포지토리를 clone한 후 `app` 디렉터리에 포함된 항목들을 바탕으로 빌드하세요.

선택할 수 있는 두 가지 HTML 시작점이 있습니다:

- `index.html` - 기본 시작점으로, Material Design 레이아웃을 포함하고 있습니다.
- `basic.html` - 레이아웃은 없지만 최소한의 모바일 모범 사례를 포함하고 있습니다.

WSK를 실행할 준비가 되었는지 확인하려면 [installation docs](docs/install.md)를 반드시 살펴보세요.
시스템에서 WSK를 실행할 수 있음을 확인했다면, 시작하는 데 도움이 되는 [commands](docs/commands.md)를 확인해 보세요.

## Web Performance

Web Starter Kit은 기본적으로 고성능의 시작점을 제공하기 위해 노력합니다. 기본 템플릿의 평균 Web Page Test [scores](http://www.webpagetest.org/result/151201_VW_XYC/)는 [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)가 약 1100(1000이 이상적임)이며, Service Worker 프리캐싱 덕분에 재방문 Speed Index는 약 550을 기록합니다.

## Browser Support

현재 당사는 공식적으로 다음 브라우저의 최신 두 버전을 지원하는 것을 목표로 합니다:

* Chrome
* Edge
* Firefox
* Safari
* Opera
* Internet Explorer 9+

이는 Web Starter Kit을 위에 언급된 브라우저보다 오래된 버전에서 사용할 수 없다는 의미가 아니라, 우리의 초점이 위 브라우저들에서 레이아웃이 훌륭하게 작동하도록 보장하는 데 있다는 뜻입니다.

## Troubleshooting

설치 또는 도구 실행 중에 문제가 발생하는 경우 [Troubleshooting](https://github.com/google/web-starter-kit/wiki/Troubleshooting) 가이드를 확인한 후 [issue](https://github.com/google/web-starter-kit/issues)를 열어주세요. 어떻게 해결할 수 있을지 기꺼이 논의해 드리겠습니다.

## A Boilerplate-only Option

당사의 도구를 전혀 사용하고 싶지 않다면 프로젝트에서 다음 파일들을 삭제하세요: `package.json`, `gulpfile.babel.js`, `.travis.yml`. 이제 다른 빌드 시스템을 사용하거나 빌드 시스템을 전혀 사용하지 않고도 이 보일러플레이트를 안전하게 사용할 수 있습니다.

## Docs and Recipes

* [File Appendix](https://github.com/google/web-starter-kit/blob/master/docs/file-appendix.md) - 여기에 있는 각 파일들은 어떤 역할을 하나요?
* [Using Material Design Lite's Sass](https://github.com/google/web-starter-kit/blob/master/docs/mdl-sass.md) - MDL의 Sass를 WSK에서 작동시키는 방법
* [Deployment guides](https://github.com/google/web-starter-kit/blob/master/docs/deploy.md) - Firebase, Google App Engine 및 기타 서비스에서 사용 가능합니다.
* [Gulp recipes](https://github.com/gulpjs/gulp/tree/master/docs/recipes) - 공식 Gulp 레시피 디렉터리에는 프로젝트에 추가할 수 있는 다양한 워크플로 가이드의 포괄적인 목록이 포함되어 있습니다.

## Inspiration

Web Starter Kit은 [Mobile HTML5 Boilerplate](https://html5boilerplate.com/mobile/)와 Yeoman의 [generator-gulp-webapp](https://github.com/yeoman/generator-webapp)에서 영감을 받았으며, 개발 과정에서 두 프로젝트 기여자들의 의견을 수렴했습니다. [FAQs](https://github.com/google/web-starter-kit/wiki/FAQ)에서는 프로젝트에 대해 자주 묻는 질문들에 답변하고자 합니다.

## Contributing

기여, 질문, 의견은 언제나 환영하며 권장합니다. Web Starter Kit에 코드를 기여하려면 풀 리퀘스트를 제출하기 전에 [Contribution guide](CONTRIBUTING.md)를 참고해 주세요. [Website](https://developers.google.com/web/tools/starter-kit/) 관련 문제는 [Web Fundamentals](https://github.com/google/WebFundamentals/issues/new) 이슈 트래커에 등록해 주세요.

## License

web-starter-kit

web-starter-kit 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

web-starter-kit

web-starter-kit 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README