[Steem Markdown Design Tool 2편] 자기가 원하는 이미지를 마음껏 추가하고 두고두고 편하게 쓰자...!!(안쓰고는 못 배김!! 대문 쓰는 분들 필수!!)

View this thread on: d.buzz | hive.blog | peakd.com | ecency.com
·@happyberrysboy·
0.000 HBD
[Steem Markdown Design Tool 2편] 자기가 원하는 이미지를 마음껏 추가하고 두고두고 편하게 쓰자...!!(안쓰고는 못 배김!! 대문 쓰는 분들 필수!!)
안녕하세요, 해피베리보이입니다...!!!

어제 글의 호응이 좋아서 하루만에 기능 업그레이드로 돌아 왔습니다..!!!
어제 완전 열코딩을 했더랬죠..!!!

그래서 추가된 기능은 바로바로......

<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
# 이제 본인이 자주 사용하시는 이미지를 추가/삭제 할 수 있습니다. !! 빠밤!! (이모지, 쌍따옴표가 없는 HTML, GIF 도 사용가능)
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>
<br>

먼저 크롬앱을 설치 하는 방법은 1편에서도 보실 수 있지만, 한번 더 동일내용 붙여 넣겠습니다.
[Steem Markdown Design Tool 1편](https://steemit.com/kr/@happyberrysboy/steem-markdown-design-tool-1)

##### (이미 설치 하신 분들은 자동으로 업그레이드 되어 있어요..^^)

<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>


<center><h3>설치방법</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.pngBEST</center><br>

1. 크롬이어야 합니다.!! 또는 웨일브라우저도 가능합니다.(크롬 기반 브라우저는 가능)
2. https://chrome.google.com/webstore/search/steem%20markdown?hl=ko  << 크롬 웹스토어 클릭(위험한 곳 아녀요!!) **[현재 버전은 1.1.3 입니다.]**
![image.png](https://ipfs.busy.org/ipfs/Qmd47HnpKtAKnt1BgTG3E1Qe534AkgkuiSECQxJNjtqTau)
3. "CHROME에 추가"를 클릭!! 하여 설치합니다.(저는 이미 설치가 되어 있어 평가하기가 보이지만, 설치 이전에는 파란색 버튼이 보입니다.)
4. 설치가 끝나면 우측 상단에 아이콘이 나타납니다. 일단 설치는 완료 되었습니다.
![image.png](https://ipfs.busy.org/ipfs/QmTi99Y6bgWFZJapeqSYVMxNjBA5vCfcskeqpABZo2XdeC)

<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>

<center><h3>본인 자료 추가/삭제 사용법</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.pngBEST</center><br>


1. 먼저 등록하고 싶은 이미지(GIF, 이모지, HTML 등)의 주소를 복사합니다.(웹브라우저에서 떠도는 이미지들은 아래 그림처럼 이미지 위에서 **마우스 우클릭**을 하고 **이미지 주소 복사**를 하시면 사용가능합니다.)
![image.png](https://ipfs.busy.org/ipfs/QmZNkSx8A79UwmnrxcEqEm92kTsUB2SdB2qDudag8oNUuA)

2. 크롬 우측 상단에 설치된 **Steem Markdown Design Tool**을 클릭합니다.
![image.png](https://ipfs.busy.org/ipfs/QmatVXmcKtp71vRNzfZevC9uM1nQtHW8ubtZwLnMAdRHXx)
3. 조금 전 복사한 이미지 주소를 **Input Your Src** 부분에 붙여 넣고 우측 **Add** 버튼을 클릭합니다.
![image.png](https://ipfs.busy.org/ipfs/Qmf8dyncypkBaQdmdX9gdyZrgBwnvDLNypSMMzuPKz4QWm)
4. Add를 누른 후에 바로 창이 닫히는데, 다시 열어 보시면 조금전 등록한 이미지가 추가 된 것을 보실 수 있습니다.
![image.png](https://ipfs.busy.org/ipfs/Qmdg2RDKYhuvHXajgV96PX6xE7u7xWvU5oTaXsi22Pp2Vx)
5. 이미지 외에 GIF/쌍따옴표가 없는 HTML(쌍따옴표 있는 경우는 조금 더 개발 된 후에 적용가능)/이모지 등도 입력이 가능합니다.
![image.png](https://ipfs.busy.org/ipfs/QmSdr6bidoPvPNZRxZXGMUJpwvFzCsNA679S9nKD9NrJyi)



<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>

<center><h3>글 작성 시 사용법</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.pngBEST</center><br>

1. 글을 작성하러 가봅니다...!! 현재 지원하는 사이트는 **steemit.com, steemkr.com, busy.org** 세개입니다. 추가로 본인이 쓰시는 특정 사이트가 있으시다 하시는 분은 댓글남겨주세요.
2. 크롬 우측 상단에 설치된 **Steem Markdown Design Tool**을 클릭합니다. 
3. 추가 하시고 싶은 이미지 우측의 **Add**를 클릭하시면 글작성란에 해당 내용이 추가가 됩니다.(엔터한번 쳐주셔야 아래쪽에 Preview 적용되요 ㅠㅠ)
![image.png](https://ipfs.busy.org/ipfs/QmVCvz4HACBtbuGEtM5DigdMyFC7QPVRMzYD7VCXJwu6jY)

<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>

<center><h3>앞으로의 개발 계획</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.pngBEST</center><br>

1. 본인이 자주 쓰는 이미지 메뉴얼로 등록 및 사용(완료)
2. 쌍따옴표 HTML 도 추가 및 사용 할 수 있도록 개발
3. 등록된 이미지 순서 변경 기능 추가
4. 백업 및 재로드 기능 추가
5. 기타 요청 들어오는 내용들 ^^

<center><h3>추가기능설명 및 참고사항</h3>https://steemitimages.com/80x0/https://cdn.steemitimages.com/DQmeBM8uYHoA6vNfhKWffgTb2GsuB4iBZwWWV4hESwi4gTg/border_05.pngBEST</center><br>
1. **Input Your Src 우측 Init** 버튼을 클릭하면 크롬앱을 설치한 최초 상태로 돌아 갑니다.(구분선만 등록된 상태)
2. 이미지들 우측에 **Del**은 직감적인 이미지 삭제기능이 맞습니다..!!
3. 브라우저에 이미지 데이터를 저장합니다.
4. 브라우저를 새로 설치 하는 경우 초기화 됩니다.
5. 추후 저장하고 불러오기 기능 추가 할 예정입니다.


<br>
https://steemitimages.com/DQmWMwkX7hHM6cgtdgzbBWyDonN7jPfLzwdj6sH7xfRJnU5/%EA%B5%AC%EB%B6%84%EC%84%A0_%EB%B3%84.png
<br>

아직 다양한 스크립트를 테스트 해보진 못해서 버그가 있을 순 있습니다.
버그로 인하여 기능이 정상적으로 작동하지 않으면 **Init** 기능으로 초기화 후 다시 사용하시면 됩니다.
다양한 버그 내용들을 공유해주시면 앞으로의 개발에 많은 도움이 될 것 같습니다.

##### 항상 글을 쓰실 때 대문을 사용하시는 분들이나, 자주 사용하시는 이미지가 있는 분들에겐 제 생각엔 아주 편한 기능이 되지 않을까 생각이 됩니다.

##### 아무쪼록 많은 분들에게 도움이 되길 바라며... 맛있는 것 많이 드시고 진짜 매우 즐거운 주말 되시길 바랍니다..!!

![](http://cfile9.uf.tistory.com/image/213A6A3459367C0F0E5A98)

글쓰다가 찾은 웃길 짤..
![](https://t1.daumcdn.net/cfile/tistory/210C7C4758EC792A0C)
👍 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,