StaticGen

정적 HTML 생성툴 모음 사이트 소개

관련 자료

https://www.staticgen.com/

https://www.staticgen.com/hugo

가장 인기가 있는 정적 파일 생성 툴로서 많은 테마와 지원을 받고 있다. 이 툴을 이용해 생성된 HTML을 github 사이트에서 호스팅을 받아 홈페이지를 서비스할 수 있다.

electron-vue를 이용한 데스크탑앱 만들기

관련 자료

https://github.com/SimulatedGREG/electron-vue

https://simulatedgreg.gitbooks.io/electron-vue/content/ko/

vue로 구축 된 electron 애플리케이션을 만들기 위한 보일러 플레이트 저장소를 소개한다. Electron은 javascript로 크로스 플랫폼을 지원하는 데스크탑앱을 만들도록 지원하는 프레임워크이다. HTML과 javascript만 있으면 시작할 수 있으나 기초공사부터 다시 하면 너무나 많은 작업을 해줘야 한다. 이때 Electron-Vue의 보일러플레이트 사용하면 기초 작업 없이 바로 데스크탑앱을 개발 할 수 있다.

Things you'll find in this boilerplate...

• Basic project structure with a single package.json setup
• Detailed documentation
• Project scaffolding using vue-cli
• Ready to use Vue plugins (axios, vue-electron, vue-router, vuex)*
• Installed vue-devtools and devtron tools for development
• Ability to easily package your electron app using electron-packager or electron-builder*
• appveyor.yml and .travis.yml configurations for automated deployments with electron-builder*
• Ability to produce web output for browsers
• Handy NPM scripts
• Use of webpack and vue-loader with Hot Module Replacement
• Process restarting when working in main process
• HTML/CSS/JS pre-processor support with vue-loader
• ES6 with stage-0 by default
• Use of babili to remove the need of transpiling completely down to ES5
• ESLint (with support for standard and airbnb-base)*
• Unit Testing (with Karma + Mocha)*
• End-to-end Testing (with Spectron + Mocha)*

Cli를 통해 시작하기

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

Text Shadows를 쉽게 만들어 보자 - Trendy CSS, mixfont

관련 자료

https://www.mixfont.com/generate

( https://www.mixfont.com/shadows )

글자 폰트와 그림자를 통해 세련된 페이지를 만들 수 있는 라이브러리이다. 

아래 그림들은 이 라이브러리를 이용해 만든 글자를 캡처해 보았다.

그리고 하이라이트 마지막으로 이 사이트에서 Generate(html, css, text)된 페이지를 만들어 주기 때문에 생각 없이 웹 페이지를 만들때 참고하여 빠르게 만들어 볼 수 있게 지원하고 있다.

https://www.mixfont.com/generate

위 링크를 타고 들어가면 바로 자동 생성된 페이지로 변환이 된다.

색상 찾기 - 어울리는 색상을 찾아보자

관련 자료

쉽고 간단하게 색상을 찾아주는 웹사이트이다. 색상을 고르기 어려울 때 이곳에서 마우스를 위아래로 움직이면서 색상을 고를 수 있게 되어 있다.

RWDB - Responsive Web Design dB Web awards

관련 자료

웹을 완성도 있게 개발하기 위해서 디자인과 UI/UX를 완숙하게 보여주는데 필요한 라이브러리(javascript 포함)를 공유하는 사이트다.

RWDB는?

모바일 퍼스트

2009년 이후 스마트폰과 태블릿이 확산되며 모바일 퍼스트가 웹사이트 제작이 핵심이 되었고, 새로운 기기의 해상도를 지원해야 하는 이슈가 발생하고 있습니다. 이러한 문제를 해결하기 위해 하나의 소스로 다양한 디바이스를 한번에 지원(One Source Multi Use )하는 반응형웹에 대한 관심이 증가하기 시작하였습니다.

반응형웹

반응형웹은 모바일부터 데스크탑까지 한 가지의 소스로 다양한 종류의 기기에 최적화된 화면을 보여 주는 웹 기술입니다. N-Screen 시대에 맞추어 화면이 자동으로 재배치되며, 모바일과 PC홈페이지를 하나로 운영할 수 있어 편리한 장점을 가지고 있습니다. 더불어, 하나의 URL을 갖고 있어 검색과 노출에 유리하다는 장점을 가지고 있습니다. 모바일, 타블렛PC, 데스크탑을 동시에 지원하는 반응형웹은 새로운 이슈에 가장 빠르고 정확하게 대응할 수 있는 주요 해결 방안이 되었습니다.

RWDB 는 국내 환경의 개선과 우리의 동료들 모두에게 긍정적인 경험을 제공하기 를 좋아합니다.

이러한 반응형 웹 디자인은 다양한 디바이스를 지원하고자 하는 기업의 핵심 해결방안이 되었고 성공사례도 다수 확인되었지만 다수의 국내 기업은 여전히 반응형 웹을 적용하는데 어려움을 겪고 있는 것이 엄연한 현실입니다. 반응형웹을 이미 많이 사용하고 있는 외국을 비롯하여, 국내정서에 맞게 반응형웹을 제작한 회사들을 소개하여 점차 One Source Multi Use의 세상이 되길 바랍니다.

웹 리소스를 공유하는 사이트다

https://www.stockjo.com/

링크된 사이트를 타고 들어가다 보면 오디오, 비디오, 아이콘 등등 웹을 화려하게 할 수 있는 여러가지 리소스를 확인할 수 있다.

디자이너 여기 다 있음

아래 배너를 보고 들어가 보게 된 사이트다.

디자인을 의뢰할 때 이곳을 이용하면 좋을거 같다.

Python Tools for Visual Studio

( Visual Studio에서 Python 개발하기 )