update README files
This commit is contained in:
Jude Park
parent
235ea51fc4
commit
0e8d28f46f
106
README.md
106
README.md
|
|
@ -1,41 +1,68 @@
|
|||
# ONE스토어 반응형 이메일 서명
|
||||
## 왜 필요한가?
|
||||
> 
|
||||
> [이 사진은 주작 입니다. ]
|
||||
# Responsive HTML mail signatures
|
||||
### Let's punch email clients in the stomach!
|
||||
Responsive templates for mail signatures. <br/>
|
||||
|
||||
최근에 업체랑 이야기를 하다보니 위와 같은 말을 들었다.
|
||||
그래서 이유를 확인해보니 **이메일의 서명**이 이미지 파일을 사용하다보니 거의 모든 이메일이 첨부파일이 있는 것으로 분류가 되고 있었습니다.
|
||||
When you need some basic signatures that work on mobile.<br/>
|
||||
...and your colleagues need them too.<br/>
|
||||
...but you don't want to deal with tables and inline styles.
|
||||
|
||||
> 
|
||||
## Preview
|
||||
Here's how the samples look:
|
||||
|
||||
|
||||
|
||||
|
||||
## Motivation
|
||||
Let's make writing HTML emails & email signatures easier. We won't fix all email clients, but we can surely make the process of satisfying them a tad nicer. <br/>
|
||||
See a fairly comprehensive rant on the subject (and not only) [in this article](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be).
|
||||
|
||||
|
||||
## fadeit 의 이메일 템플릿 엔진 활용
|
||||
이미지를 파일을 tag로만 처리하면 해결되는 것이지만 조금 더 욕심을 내보려고 깃헙에서 fadeit 의 템플릿을 뽑아와서 수정을 했습니다.
|
||||
## What does it do
|
||||
- [x] config-based template generation
|
||||
- [x] allows generating multiple templates (for your colleagues too!)
|
||||
- [x] transforms linked (`<link>`) CSS into inline styles
|
||||
- [x] embeds local `img[src]` into the template (base64).*
|
||||
- [x] minifies the template
|
||||
- [x] media queries for mail clients that support them
|
||||
- [x] can build templates from multiple sources
|
||||
- [x] watches HTML/CSS files for changes and re-builds
|
||||
|
||||
- [원본 레파지토리 확인하기](https://github.com/fadeit/responsive-html-email-signature)
|
||||
|
||||
### 제공하는 것
|
||||
- NODE JS (gulp) 기반의 이메일 템플릿 빌드 엔진
|
||||
- 빌드 시, inline CSS HTML 파일을 자동 생성
|
||||
- 이미지 파일을 그냥 html 코드로 넣어버림 (base64)
|
||||
- media queries 지원 (메일 클라이언트 지원시)
|
||||
**Some mail clients don't support them, so an external URL might be a good idea.*
|
||||
|
||||
> Overview
|
||||
|
||||
## Getting started
|
||||
```
|
||||
$ npm install
|
||||
$ gulp
|
||||
```
|
||||
|
||||
Take a look at `src/fadeit/` for an example. Copy / Paste, rename it and change `src/fadeit/conf.js` to suite your needs. Run `gulp` to build the templates (into `/dist`). The gulp task will watch HTML & CSS files by default.
|
||||
|
||||
## Overview
|
||||
This diagram shows what happens to your templates.
|
||||
|
||||
|
||||
|
||||
### 샘플 파일 확인
|
||||
>
|
||||
|
||||
>**Some mail clients don't support them, so an external URL might be a good idea.*
|
||||
## CSS Support
|
||||
Remember, it's HTML mails, so you need to check a big-ass table to find out nothing's gonna work.
|
||||
See [this](https://www.campaignmonitor.com/css/). Still [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) is being used to convert whatever CSS you throw at it to inline styles.
|
||||
|
||||
|
||||
## 메일 클라이언트에 적용하는 법
|
||||
## TODO:
|
||||
- [ ] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo
|
||||
- [ ] preprocessor support (simplifies BEM)
|
||||
- [ ] use github pages to show live demos
|
||||
- [ ] check [gulp-inline-css](https://github.com/jonkemp/inline-css) for new features
|
||||
|
||||
### 아웃룩
|
||||
|
||||
### Apple Mail / OS X
|
||||
## Usage with different e-mail clients
|
||||
|
||||
### Thunderbird
|
||||
There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails.
|
||||
|
||||
|
||||
### Apple Mail / OS X (oh boy)
|
||||
|
||||
#### Solution 1
|
||||
- Open Mail.app and go to `Mail` -> `Preferences` -> `Signatures`
|
||||
|
|
@ -56,10 +83,39 @@ $ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/S
|
|||
You can also open the HTML files in `/dist` in a browser, CMD + A, CMD + C and then paste into the signature box. This won't copy the `<html>` part or the `<style>` part that includes media queries. Follow the guide if you want it.
|
||||
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
If solution #1 doesn't work, you can repeat the steps and lock the signature files before you open Mail.app again.
|
||||
Lock Files:
|
||||
```
|
||||
$ chflags uchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
If you want to do changes later, you have to unlock the files:
|
||||
```
|
||||
$ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
If you are using iCloud drive or having problems with it, you might also want to check [this article](http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/).
|
||||
|
||||
### Outlook 2010 Client for Windows
|
||||
|
||||
Unfortnately, Outlook 2010 client dosen't support HTML file import features for your email template. But you can add your own signatures by simple Copy and paste like **Solution 2** above.
|
||||
|
||||
- Open built html file on `/dist` folder and Ctrl A + C
|
||||
- Open Outlook 2010 and go to `File > Option > Mail > Signature`
|
||||
- Create new signature and paste copyed one
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
> **NB**: base 64 will not be shown on Outlook 2010 client. So, I recommend to use external url if you want to use images.
|
||||
|
||||
===================
|
||||
<br/>
|
||||
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
|
||||
|
||||
####Powered by fadeit
|
||||
See more at [fadeit.dk](http://fadeit.dk)
|
||||
####About fadeit
|
||||
We build awesome software, web and mobile applications.
|
||||
See more at [fadeit.dk](http://fadeit.dk)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
# 반응형 HTML 메일 서명
|
||||
### 이메일 클라이언트를 씹어먹자(?!)
|
||||
이메일 서명 전용 반응형 템플릿<br/>
|
||||
|
||||
> 모바일에서 잘 동작하는 기본 서명이 필요하신가요? <br/>
|
||||
> ... 그리고 직장동료들도 필요한가요? <br/>
|
||||
> ... 근데 지저분하게 테이블이랑 인라인 CSS를 만들기 싫은가요? <br/>
|
||||
|
||||
|
||||
## Preview
|
||||
본 템플릿의 기본 동작방식은 아래와 같습니다:
|
||||
|
||||
|
||||
|
||||
|
||||
## 만들게된 동기 (Motivation)
|
||||
이메일용 html은 일반적인 HTML과 달리 모든 코드를 in-line CSS로 만들어야 합니다. 그래서 이메일 템플릿이랑 서명을 만들기가 굉장히 어렵습니다. "이런 HTML 템플릿과 서명을 편하게 만들어보자!" 라는 생각에서 이 템플릿을 만들었습니다. 물론 모든 이메일 클라이언트의 이슈를 전부 다 고칠 수는 없지만, 이 템플릿을 활용해서 조금 더 쉽고 깔끔한 반응형 이메일을 만들어서 받는 사람 보내는 사람 모두가 만족하게 만들 수 있습니다!
|
||||
|
||||
이 [블로그 포스팅](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be)에서 fadeit 의 더 많은 이애기를 들어보세요.
|
||||
|
||||
|
||||
## 이 템플릿에서 무엇을 할 수 있나? (What does it do?)
|
||||
- [x] config-based template generation
|
||||
- [x] allows generating multiple templates (for your colleagues too!)
|
||||
- [x] transforms linked (`<link>`) CSS into inline styles
|
||||
- [x] embeds local `img[src]` into the template (base64).*
|
||||
- [x] minifies the template
|
||||
- [x] media queries for mail clients that support them
|
||||
- [x] can build templates from multiple sources
|
||||
- [x] watches HTML/CSS files for changes and re-builds
|
||||
|
||||
> *일부 이메일 클라이언트는 base64 기반의 이미지 표시 기능을 지원하지 않습니다. 외부 링크를 사용하는 것이 더 좋은 선택일 것 같아요.
|
||||
|
||||
|
||||
## 시작하기 (Getting started)
|
||||
```
|
||||
$ npm install
|
||||
$ gulp
|
||||
```
|
||||
|
||||
`src/fadeit/` 를 확인해보시면 멋진 2개의 이메일 템플릿 샘플이 있습니다. 폴더를 통째로 다른 이름으로 복사/붙여넣기 하시고 그 안에 있는 `src/fadeit/conf.js` 파일을 입맛대로 바꿔보세요. 다음으로는 `gulp`를 실행해서 여러분 만의 이메일 템플릿을 빌드하세요. gulp 의 task가 동작하면서 기본 html CSS 파일을 확인하고 새로운 html 파일을 `/dist`에 저장합니다.
|
||||
|
||||
## 살펴보기 (Overview)
|
||||
아래 순서도는 여러분이 만든 템플릿이 어떻게 빌드가 되는지를 보여줍니다.
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS 서포트 (CSS Support)
|
||||
|
||||
기억해둘 것은... 이것은 이메일용 HTML 을 만드는 것입니다. 그러니깐 이 프로젝트로 이메일을 빌드하는 여러분은 요즘은 잘 쓰지도 않는 멍청한 테이블 코드 덩어리를 확인하고 그 속에서 어떤 CSS가 동작하는지 안하는지를 알아봐야 할지도 모릅니다.(일단 이 [포스트](https://www.campaignmonitor.com/css/)를 참고하세요.) 아무튼 이런 과정을 통해서 여러분이 어떤 CSS 파일을 만들면, [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) 모듈을 통해서 인라인 CSS로 바뀌어서 여러분의 HTML 파일로 빌드됩니다.
|
||||
|
||||
|
||||
## 앞으로 할 일 (TODO):
|
||||
- [ ] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo
|
||||
- [ ] preprocessor support (simplifies BEM)
|
||||
- [ ] use github pages to show live demos
|
||||
- [ ] check [gulp-inline-css](https://github.com/jonkemp/inline-css) for new features
|
||||
|
||||
|
||||
## 다른 이메일 클라이언트에서 사용하는 법 (Usage with different e-mail clients)
|
||||
|
||||
### Thunderbird
|
||||
썬더버드 이메일 클라이언트에 html 서명을 자동으로 넣어주는 몇몇 플러그인이 있스빈다. 일단 우리는 [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) 를 추천합니다. 이 플러그인을 쓰면 새 이메일, 답장, 전달 등을 할 때마다 각각 다른 이메일 템플릿을 쓸 수 있습니다.
|
||||
|
||||
|
||||
### Apple Mail / OS X (꼭.. 써야 한다면?)
|
||||
|
||||
#### 방법 1
|
||||
- 이메일 앱을 열고 `Mail` -> `Preferences` -> `Signatures` 로 이동하세요.
|
||||
- 아무거나 새 이메일 서명을 만들세요. (나중에 찾기 편하게 placeholder 를 써두는 것이 좋습니다.)
|
||||
- 이메일을 닫으세요.
|
||||
- 터미널을 열고 TextEdit으로 서명 파일을 열어보세요. (iCloud drive를 사용하는 경우는 잘 작동하지 않는 경우가 있습니다. 아래 troubleshooting을 참고하세요. )
|
||||
|
||||
```
|
||||
$ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature
|
||||
```
|
||||
- 위에서 placeholder를 넣어둔 파일을 열어봅니다.
|
||||
- `<body>...</body>` 의 모든 html 코드를 여러분이 빌드한 `/dist/`의 html 파일로 교체 합니다. (`<body>`외에 다른 메타 정보는 수정하지 마세요!)
|
||||
- 메일앱을 다시 실행하고 새로 바뀐 서명을 확인해보세요 :)
|
||||
|
||||
> **주의**: 이미지 파일은 원래 `preference`의 미리보기 화면에서는 나오지 않습니다. 하지만 이메일을 만들고 발송하는 곳에서는 잘 보여지니깐 걱정마세요!
|
||||
|
||||
|
||||
#### 방법 2
|
||||
다른 방법으로는 `/dist` 에 빌드한 html 파일을 CMD + A, CMD + C 해서 설정에 이메일 서명 박스에 붙여넣기 해서 쓸 수도 있습니다. 하지만 이렇게 복붙을 하는 경우 파일의 `<html>` 이나 반응형 웹을 위한 미디어쿼리가 들어있는 `<style>` 부분을 복붙하는 것이 아니라 정상적으로 작동하지 않을 수 있습니다.
|
||||
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
만약 위의 방법 1이 정상적으로 작동하지 않는다면 파일을 수정 후 메일 앱을 열기전에 아래 방법으로 파일을 잠궈야 합니다.
|
||||
|
||||
Lock Files:
|
||||
```
|
||||
$ chflags uchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
나중에 파일을 수정할 생각이면 아래 방법으로 언락하세요 :
|
||||
```
|
||||
$ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
만약 iCloud drive 를 사용하는 경우에는 위와 같은 문제가 있을 수 있습니다. 아래 블로그 포스팅을 참고하시면 도움이 될 것 입니다. [아이클라우드 드라이브 문제 해결하기 (보기)](http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/).
|
||||
|
||||
|
||||
### 아웃룩 2010에서 사용하기 (Outlook 2010)
|
||||
|
||||
아웃룩에서는 html 파일을 넣는 방법을 제공하지 않습니다. (아...) 그래서 위의 **방법 2** 처럼 파일을 복사/붙여넣기 하는 방법으로 사용할 수 있습니다.
|
||||
|
||||
- `/dist` 에 빌드한 html 파일을 브라우저에서 열고, ctrl A + C 로 복사하세요.
|
||||
- Outlook 을 열고 `파일 > 옵션 > 메일 > 서명` 으로 들어가세요.
|
||||
- 새 서명을 만들고 아래 박스에 Ctrl + V 로 파일을 붙여넣기 하세요.
|
||||
|
||||
> base 64로 만든 이메일 파일은 잘 작동하지 않을 수 있습니다. 외부 링크를 활용하시기를 권장합니다.
|
||||
|
||||
|
||||
===================
|
||||
<br/>
|
||||
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
|
||||
|
||||
####About fadeit
|
||||
We build awesome software, web and mobile applications.
|
||||
See more at [fadeit.dk](http://fadeit.dk)
|
||||
108
README_origin.md
108
README_origin.md
|
|
@ -1,108 +0,0 @@
|
|||
# Responsive HTML mail signatures
|
||||
### Let's punch email clients in the stomach!
|
||||
Responsive templates for mail signatures. <br/>
|
||||
|
||||
When you need some basic signatures that work on mobile.<br/>
|
||||
...and your colleagues need them too.<br/>
|
||||
...but you don't want to deal with tables and inline styles.
|
||||
|
||||
## Preview
|
||||
Here's how the samples look:
|
||||
|
||||
|
||||
|
||||
|
||||
## Motivation
|
||||
Let's make writing HTML emails & email signatures easier. We won't fix all email clients, but we can surely make the process of satisfying them a tad nicer. <br/>
|
||||
See a fairly comprehensive rant on the subject (and not only) [in this article](http://fadeit.dk/blog/post/html-emails-and-email-signatures-how-hard-can-it-be).
|
||||
|
||||
|
||||
## What does it do
|
||||
- [x] config-based template generation
|
||||
- [x] allows generating multiple templates (for your colleagues too!)
|
||||
- [x] transforms linked (`<link>`) CSS into inline styles
|
||||
- [x] embeds local `img[src]` into the template (base64).*
|
||||
- [x] minifies the template
|
||||
- [x] media queries for mail clients that support them
|
||||
- [x] can build templates from multiple sources
|
||||
- [x] watches HTML/CSS files for changes and re-builds
|
||||
|
||||
|
||||
**Some mail clients don't support them, so an external URL might be a good idea.*
|
||||
|
||||
|
||||
## Getting started
|
||||
```
|
||||
$ npm install
|
||||
$ gulp
|
||||
```
|
||||
|
||||
Take a look at `src/fadeit/` for an example. Copy / Paste, rename it and change `src/fadeit/conf.js` to suite your needs. Run `gulp` to build the templates (into `/dist`). The gulp task will watch HTML & CSS files by default.
|
||||
|
||||
## Overview
|
||||
This diagram shows what happens to your templates.
|
||||
|
||||
|
||||
|
||||
## CSS Support
|
||||
Remember, it's HTML mails, so you need to check a big-ass table to find out nothing's gonna work.
|
||||
See [this](https://www.campaignmonitor.com/css/). Still [gulp-inline-css](https://www.npmjs.com/package/gulp-inline-css) is being used to convert whatever CSS you throw at it to inline styles.
|
||||
|
||||
|
||||
## TODO:
|
||||
- [ ] closing `inline-css` issue [#8](https://github.com/jonkemp/inline-css/issues/8#issuecomment-149025428) would greatly improve this repo
|
||||
- [ ] preprocessor support (simplifies BEM)
|
||||
- [ ] use github pages to show live demos
|
||||
- [ ] check [gulp-inline-css](https://github.com/jonkemp/inline-css) for new features
|
||||
|
||||
|
||||
## Usage with different e-mail clients
|
||||
|
||||
### Thunderbird
|
||||
There are several Thunderbird plugins which can automatically insert signatures when composing e-mails. We recommend [SmartTemplate4](https://addons.mozilla.org/en-us/thunderbird/addon/smarttemplate4) as one of the options. It can use different templates for new e-mails, replies and forwarded e-mails.
|
||||
|
||||
|
||||
### Apple Mail / OS X (oh boy)
|
||||
|
||||
#### Solution 1
|
||||
- Open Mail.app and go to `Mail` -> `Preferences` -> `Signatures`
|
||||
- Create a new signature and write some placeholder text (doesn't matter what it is, but you have to identify it later).
|
||||
- Close Mail.app.
|
||||
- Open terminal, then open the signature files using TextEdit (might be different for iCloud drive check the article below).
|
||||
```
|
||||
$ open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature
|
||||
```
|
||||
- Keep the file with the placeholder open, close the other ones.
|
||||
- Replace the `<body>...</body>` and it's contents with the template of your choice. *Don't remove the meta information at the top!*
|
||||
- Open Mail.app and compose a new mail. Select the signature from the list to test it out.
|
||||
|
||||
**NB**: Images won't appear in the signature preview, but will work fine when you compose a message.
|
||||
|
||||
|
||||
####Solution 2
|
||||
You can also open the HTML files in `/dist` in a browser, CMD + A, CMD + C and then paste into the signature box. This won't copy the `<html>` part or the `<style>` part that includes media queries. Follow the guide if you want it.
|
||||
|
||||
|
||||
#### Troubleshooting
|
||||
|
||||
If solution #1 doesn't work, you can repeat the steps and lock the signature files before you open Mail.app again.
|
||||
Lock Files:
|
||||
```
|
||||
$ chflags uchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
If you want to do changes later, you have to unlock the files:
|
||||
```
|
||||
$ chflags nouchg ~/Library/Mail/V3/MailData/Signatures/*.mailsignature
|
||||
```
|
||||
|
||||
If you are using iCloud drive or having problems with it, you might also want to check [this article](http://matt.coneybeare.me/how-to-make-an-html-signature-in-apple-mail-for-el-capitan-os-x-10-dot-11/).
|
||||
|
||||
|
||||
===================
|
||||
<br/>
|
||||
<a href="http:fadeit.dk"><img src="http://fadeit.dk/src/assets/img/brand/fadeit_logo_full.svg" alt="The fadeit logo" style="width:200px;"/></a><br/><br/>
|
||||
|
||||
####About fadeit
|
||||
We build awesome software, web and mobile applications.
|
||||
See more at [fadeit.dk](http://fadeit.dk)
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -14,7 +14,7 @@ module.exports = [
|
|||
contactMain: '<a href="tel:+821012345678"><span>+82-10-1234-5678</span></a> | ', // Wrap phone numbers like this to prevent iOS mail from making them blue.
|
||||
contactMail: 'devhelper@onestore.co.kr',
|
||||
contactSecondary: '성남시 분당구 판교역로 188 SK플래닛 건물 11층',
|
||||
logoUrl: 'http://cfile25.uf.tistory.com/image/23388A45570F0087013014', // 티스토리 블로그 활용
|
||||
logoUrl: 'assets/type01.png',
|
||||
logoAlt: 'Onestore logo',
|
||||
website: 'http://onesto.re/'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ module.exports = [
|
|||
contactMail: 'devhelper@onestore.co.kr',
|
||||
// slogan: '\"The 1st integrated Android App store in Korea\"',
|
||||
contactSecondary: '188, Pangyoyeok-ro, Bundang-gu, Seongnam-si, Gyeonggi-do, Korea',
|
||||
logoUrl: 'http://cfile9.uf.tistory.com/image/24337545570F008706369D', // 티스토리 블로그 활
|
||||
logoUrl: 'assets/type03.png',
|
||||
logoAlt: 'ONEstore. logo',
|
||||
website: 'http://onesto.re/'
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue