ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Letter - Enhanced 스킨 공개.[Ver 1.52]
    프로그래밍/Web 2018.10.23 00:30
    * 공지: Letter - Enhanced 버전 1.52를 공개합니다.
    * 공지: 새로운 버전이 나왔으므로 전 버전에 대한 지원은 끊깁니다.


    개발 중인 스킨의 기능을 간단히 알고 싶다면,

    2018/10/31 - [IT] - Letter - Enhanced Ver. 2 프리뷰.


    를 참고하세요.



    1. 제작 동기.

    티스토리에서 이번에 공개된 스킨 중 Letter 스킨이 마음에 들더라고요.


    처음엔 Poster 스킨을 써보려고 했는데 굵기가 다른 이상한 메뉴버튼과 못생긴 사이드바의 콜라보로 포기.. 글 내부 배치도 Letter가 더 낫드란.

    요개 젤 큰 이유였다.ㅋㅋ

    덕분에 슬슬 질려가던 #2에서 Letter로 스킨을 변경!!


    그런데 일부 폰트, 인용에 대한 불만과 수식기능, 코드 하이라이트 기능이 미지원 때문에 스킨을 수정하게 되었습니다.

    그 이름은 Letter - Enhanced!!


    혹시 필요하신 분들이 있을까봐 공유해봅니다.

    * 파일은 4번 문항에 있습니다. '파일 첨부'를 눌러 이동!!

    * 파이어폭스를 기준으로 변경했습니다.


    Letter - Enhanced는 기존 Letter 스킨의 심플함은 간직하면서 더 나은 느낌과 기능을 추구합니다.

    현대적이면서 적당히 클래식하여 종이보는 느낌 정도?


    디자인시 주로 참조하고 있는 서비스는 미디움, 브런치, 익스포저, 인스타페이퍼 등이 있습니다.

    기타: 지킬, 워드프레스, 텀블러, 실버백, 네어버 포스트, 티스토리 모바일 정도?

    특히 익스포저랑 인스타페이퍼가 넘나 취향저격.


    기술적인 것이나 각종 코드 스니펫의 경우 MDN, CSS-Tricks, W3Schools를 참고하고 있습니다.

    다 만들기는 넘 귀찮;;


    참고로 티스토리에서 구형 브라우저는 지원하지 않기로 했고 제 스킨 또한 앞으로도 지원하지 않을 예정입니다.

    이점 유의해주십시오.


    2. 주요 변경점.

    2.1 폰트 변경.

    Lato와 맑은고딕 기반에서 Noto Sans(본고딕)으로 옮겼습니다.

    개인적으로 산돌 고딕 Neo1을 좋아하지만 상용폰트라 사용은 못하고..

    Noto Sans를 사용했습니다.


    비교해보죠.


    Lato.

    Bright vixens jump; dozy fowl quack.


    맑은고딕

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    Noto Sans.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    가독성이 좋아집니다.ㅎㅎ


    2.2 폰트 렌더링 옵션.[Ver. 1.5 Bugfix]

    제가 만든 유저 스타일에서 적용했던 폰트 렌더링 + Calibre(이북리더)에서 사용하는 설정 일부를 적용했습니다.

    https://black7375.tumblr.com/post/178792994180/readable-font-more-pretty


    차례대로 적용 전, 후 사진.

    살짝 두꺼워진듯한 느낌이 납니다.



    코드.

    body, input
    {
        -webkit-text-stroke-width: 0.02px !important;
        -webkit-font-smoothing: antialiased !important;
        text-shadow: 0px 0px 0.001px #ACACAC !important;
        text-align:justify;
        text-justify:inter-cluster;
        text-rendering: optimizeLegibility;
    }


    Ver. 1.5: 일부 !important를 제거하였습니다.


    2.3 인용구.

    원래 이런 느낌이었던 인용구를

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.

    이렇게 바꾸었습니다.

    동틀 녘 햇빛 포개짐.

    Bright vixens jump; dozy fowl quack.


    Simple and Nice Blockquote Styling을 참고했습니다.

    아무래도 인용은 명조(세리프)가 좋죠?


    2.4 수식.

    Mathjax를 사용하여 '$$'사이에 LaTeX 수식이 있으면 바꾸어주도록 했습니다.

    * "AMSmath.js", "AMSsymbols.js", "color.js", "mhchem.js"을 추가기능으로 설정했습니다.


    예1.

    $$ \LaTeX \\ is\, a\, document\, preparation\, system \\ $$ $$ \begin{align} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{align} $$

    $$ \LaTeX \\ is\, a\, document\, preparation\, system \\ $$ $$ \begin{align} E &= mc^2 \\ m &= \frac{m_0}{\sqrt{1-\frac{v^2}{c^2}}} \end{align} $$ 


    예2.

    $$\ce{C6H5-CHO}
    \ce{$A$ ->[\ce{+H2O}] $B$}
    \ce{SO4^2- + Ba^2+ -> BaSO4 v}$$

    $$\ce{C6H5-CHO}
    \ce{$A$ ->[\ce{+H2O}] $B$}
    \ce{SO4^2- + Ba^2+ -> BaSO4 v}$$



    예3.

    인라인 기능도 제공합니다. '$'으로 쌍으로 감싸면

    글 중간에 $f:X \rightarrow Y$처럼 적용.


    2.5 코드 하이라이트.[Ver. 1.5 Add]

    위에서 본것처럼 코드들의 하이라이트를 제공합니다.


    사용법은

    <pre><code class="언어이름">
    코드..
    </code></pre>.

    문단안에서도 'code'태그를 사용하면 인라인 코드inline code를 입력할 수 있습니다.


    언어이름은 Highlight.js를 참고.

    따로 적지 않으면 자동으로 적용됩니다.


    Ver 1.5:

    긴 코드는 자동 줄바꿈이 아니라 가로 스크롤바로 볼 수 있게 바뀌었습니다.(수식 참고)


    한줄로 이어진 코드가 예전엔 이렇게 나왔었죠.


    2.6 메뉴 버튼 이동.[Ver 1.5 Add @베누시안]

    티스토리 공지를 보다가 좋은 기능을 발견해서 추가하게 되었습니다.


    메뉴의 'X' 버튼의 위치를 다음과 같이 바꾸게 됩니다.(전후)





    3. 기타 변경점.

    자잘한 변경 사항들입니다.

    - 아티클 이미지 보기 옵션 수정(width: 100%; max-width: 100%;  height: auto !important;).

    - 마우스로 글 드래그시 청녹색(#007878)을 띄게함.[아쿠아 스킨과 어울리게!!]

    - 메타 컬러 지정.(#EB531F 티스토리 상징인 주황색)

    - 로봇 지정("noindex, nofollow" $\rightarrow$ "ALL")[처음 발견시 수정했었는데 지금은 "ALL"을 기본으로 수정이 되었다고 합니다.]

    - index.xml 정보 수정[Ver. 1.5]

    - skin.html을 2018.10.24 기준으로 업데이트[Ver. 1.5]

    - 중복된 코드 제거(.category_list .list_horizontal .thumbnail_post)[Ver. 1.5]

    - 본문에서 표를 자동으로 가운데 정렬.[Ver. 1.5]

    - 댓글 잘림 현상 해결(.category_content_area .list_reply li)[Ver. 1.5 @베누시안]

    - CREDITS 파일 추가(컨트리뷰터들 표시)[Ver. 1.5]

    - LICENSE 파일 추가(MIT)[Ver. 1.5]

    - 일부 버그 픽스(.area_menu .btn_menu)[Ver. 1.52]

    4. 파일 첨부.

    Ver. 1.0

    Letter - Enhanced(2018-10-23).zip

    라이센스: MIT(원래 Letter 라이센스와 같습니다.)


    Ver. 1.52

    Letter - Enhanced(2018-10-24).zip


    따로 수정하고 싶으신 분들은 깃허브에서 포크하시면 됩니다.

    좋은 기능이나 버그 패치를 만들어 풀리퀘스트(Pull Request)해주시면 아주 좋아하고, CREDIT 목록에 넣어드립니다.

    베타 버전(?) 또한 사용해볼 수 있어요.

    black7375/Letter-Enhanced

    Tistory's Letter Skin + Font setting, Pretty Blockquote, Math & Code highlighting - black7375/Letter-Enhanced

    수정이 필요한 것이 있으면 댓글로 알려주세요~

    검토 후 적용을 고려해보겠습니다.


    5. 스킨 적용하기.

    5.1 다운 받고 압축풀기.

    첨부되어 있는 파일이나 깃허브에서 파일을 받아 압축을 풉니다.



    5.2 스킨 등록하기.

    블로그 관리의 '꾸미기-스킨 변경' 메뉴에서 '스킨 등록'을 누릅니다.


    '추가' 버튼을 누른 뒤



    폴더를 제외하고 모두 선택합니다.


    한번 더 '추가'를 눌러 이미지 폴더 내부의 것들을 모두 업로드 합니다.



    '저장' 버튼을 누릅니다.



    적당한 이름을 지어줍니다.


    5.3 스킨 적용하기.

    블로그 관리의 '꾸미기-스킨 변경' 메뉴에서 '스킨 목록'을 고른뒤 저장해 놓았던 스킨을 클릭합니다.


    그러면 팝업과 함께 '적용'이 나오는데 버튼을 누르면 됩니다.


    5.6 추가 사항.

    아참.

    Letter - Enhanced 스킨은 모바일에서도 볼 수 있어요.

    모바일에서 Letter - Enhanced를 사용하려면 다음과 같이 하면 됩니다.


    블로그 관리의 '모바일'에 들어가 티스토리 모바일웹 자동연결을 '사용하지 않습니다.'로 바꾸어 주고 변경 사항을 적용하면 됩니다.



    앞으로도 이쁜 스킨들을 티스토리에서 만나볼 수 있다면 좋겠네요.


    -끝-


    댓글 44

    • 프로필사진

      죄송한데 새로나온 스킨의 좋은 점이 뭔가요? ^^ 초보가 보기엔 그냥 과거 스킨과 별로 다른 게 없는 거 같은데... 속도가 빨라졌나요? 보안이 좋아졌나요? 흠... 보이는 것만 보이는 초보라... 글을 내리면 사이드바 메뉴가 사라지고...가로폭이 너무 넓고,,,

      2018.10.23 18:40 신고
      • 프로필사진

        저는 안쓰지만 커버 기능으로 홈화면을 이쁘게 꾸밀 수 있고 색깔 테마(Letter 기준. 아쿠아, 블루, 퍼플, 블랙 제공)가 장점이네요.

        비교적 최근에 만들어진 브런치나 미디엄 같은 블로그 서비스들처럼 심플함과 모바일 호환성(반응형)에 초점을 맞추어져 나온것 같습니다!!

        2018.10.23 18:45 신고
      • 프로필사진

        근데 님이 쓰신 댓글의 뒷부분이 짤리네요... 이런....뭔가 아직 미완성인데 운영자들은 완성본으로 배포한 듯 한데

        2018.10.23 18:48 신고
      • 프로필사진

        헉 그런가요?!!
        모바일 앱으로 댓글 다는 중이라 몰랐네요.
        밤에 해당부분을 수정해보도록 하겠습니다. 제가 수정한 부분에서 문제가 있을수도 있어서..

        좋은 정보 감사합니다!!

        2018.10.23 18:51 신고
      • 프로필사진

        지금 PC에서 Letter 스킨 원본으로 확인해본 결과 댓글 잘림이 생기네요.

        티스토리 측에서 잘못만든 거 같은데 건의해보겠습니다!!

        2018.10.23 19:06 신고
      • 프로필사진

        흠.... 이룬,,,,

        2018.10.23 19:35 신고
      • 프로필사진

        일단 댓글 깨지는 것은 베누시안님 덕분에 수정 했네요.

        2018.10.24 17:03 신고
    • 프로필사진

      어마어마하네요... 이걸 다 이해못하는 제 머리로 열심히 읽었습니다 ㄷㄷㄷ
      스킨을 바꿀까 고민하고 있는데 이런글 덕분에... 모르면 가만히 있다가 조용히 바꿔야겠다... 라는 생각이 듭니다 ㄷㄷㄷㄷ

      2018.10.24 05:35 신고
      • 프로필사진

        저 같은 경우는 스킨을 변형하는 경우고, 사용하시는 분은 그냥 쓰시면 되요.ㅎㅎ

        쉽게 스킨을 바꾸실 수 있도록 스킨 적용법을 본문에 추가하도록 하겠습니다.

        2018.10.24 15:24 신고
      • 프로필사진

        저는 아무래도 사진 위주로 쓰다보니
        화면이 넓은게 좋아서 화면 조정하는 방법을 고민하고 있었는데요
        티스토리에서 간단한 몇가지는 변경가능 하도록 팁을 좀 남겨줬음 하는 바램이 생기더라구요
        스킨적용법 올라오면 열심히 보겠습니다 감사합니다^^

        2018.10.24 15:28 신고
      • 프로필사진

        스킨 적용 가이드 작성했습니다 ㅎㅎ
        적용해보시고 오류 사항 같은게 있으면 말해주세요~

        최대한 빨리 고쳐보도록 하겠습니다.

        2018.10.24 17:02 신고
    • 프로필사진

      기존의 기본 스킨보다 더 깔끔하고 좋아보이네요. ㅎㅎ

      2018.10.24 19:36 신고
    • 프로필사진

      좋은 스킨 감사드립니다. 한가지 수정해야 할 부분이 보이는데, 컴퓨터 구글 기준으로 우상단 메뉴중 로그아웃 버튼이 밀려서 한줄 밑으로 내려가는 현상이 발견되네요. 사진첨부가 안되는듯 하여 댓글로 남겨봅니다. :)

      2018.10.24 22:13 신고
      • 프로필사진

        글 맨 마지막에 오류이슈용을 추가했습니다.
        보다시피 제 것에선 정상적으로 보이는데 imgur 같은 곳에 스크린샷을 올려서 확인 할 수 있을까요?

        어떻게 나오는지 궁금합니다!!

        2018.10.24 22:20 신고
      • 프로필사진

        깃헙 리포지토리에 이슈로 올려보도록 하겠습니다. :)

        2018.10.24 22:45 신고
      • 프로필사진

        https://imgur.com/a/UlE6ek9
        이슈 서브밋할때 사진이 안올라가는군요.. imgur링크 남겨드립니다.

        2018.10.24 22:49 신고
      • 프로필사진

        크롬 브라우저이신거죠?
        크롬 켜서 확인해보겠습니다.

        깃허브 이슈에 사진 올리는 것은
        드래그앤드롭 하면 되더라고요.
        저도 처음에 어떻게 올리는지 몰라서 헤맨 기억이 납니다.

        2018.10.24 22:53 신고
      • 프로필사진

        이거 상당히 골때리는 버그네요.
        제 크롬 브라우저에서는 로그아웃 줄바꿈현상이 재현이 안되고, 관련글 더보기에서 한 글자가 내려가는 현상이 발견되네요.

        파폭에선 안생겼던 버근데..
        이번 버그는 브라우저나 환경마다 달라서 조금씩 값을 조정해보긴 할텐데 빠르게 고치기는 힘들거 같아요ㅜㅜㅜ

        2018.10.24 22:58 신고
      • 프로필사진

        사실 큰 불편은 없어서 빠른 버그픽스를 요하지는 않습니다..ㅎㅎ 여유롭게 하셔도 좋을 것 같습니다.

        2018.10.25 19:13 신고
    • 프로필사진

      이 스킨에 여러 문제가 있어서(컬러 스크립트 정렬 문제 등) 적용을 포기했었는데 능력자님 덕분에 적용 했습니다
      너무 감사합니다.

      한가지 질문이 있습니다 ㅠㅠ
      혹시 가로 화면 폭을 기본 800 > 1000 으로 넓히려면 많이 수정 해야 할지요 ^^

      2018.10.25 20:01 신고
      • 프로필사진

        컬러스크립트랑 호환이 안됐나요?
        이번 스킨 여기저기 문제가 많군요.

        가로폭 넓히는건 그리 어려운 문제는 아닙니다.

        css설정중
        .inner_index에서 max-width 값을 1000px로 설정하면 되요.
        저도 900px정도로 적용해봐야겠네요.

        2018.10.25 20:48 신고
    • 프로필사진

      아직 새 스킨으로 옮겨가지 않고 있는데 벌써 튜닝까지 하시다니...@_@
      나중에 Letter 스킨으로 결정하면 수정하신 것들 참고해봐야 겠네요.

      2018.10.31 10:29 신고
      • 프로필사진

        예전에 커스텀 해서 쓰던 스킨에서 코드를 가지고 온 덕분에 빨리 적용했네요. ㅎㅎ

        제 깃허브 보시면 변경 내용을 쉽게 적용할 수 있을 거에요.

        2018.10.31 21:17 신고
    • 프로필사진

      비밀댓글입니다

      2018.11.04 17:24
    • 프로필사진

      비밀댓글입니다

      2018.11.06 02:20
      • 프로필사진

        테스트 글에서 버그 목록 확인했고, 댓글 남겨놨습니닷~

        간단히 확인하실려면
        https://imgur.com/a/3gRaezO
        봐주세요.

        좋은 제보 감사합니다!!

        2018.11.06 02:35 신고
      • 프로필사진

        확인해보니 제가 잘못된 코드를 넣었더라고요. 수정했습니다.
        다음버전에선 수정된 상태로 나올거에요.

        다시 한번 말하지만 버그 제보 감사합니다.ㅎㅎ

        2018.11.06 03:08 신고
    • 프로필사진

      비밀댓글입니다

      2018.11.06 18:56
    • 프로필사진

      안녕하세요! 저는 코알못 깃알못이라 정성스럽게 써주신 글을 완전히 이해하지는 못했습니다..
      깃허브로 질문하는것두.. 몰라요.. ㅜㅠ 죄송해요

      블랙님이 업데이트 해주신 부분 그대로 갖다 써도 될것같은데 너무 궁금해서 찾다 찾다 못찾아서 답답해서 ㅠㅠ 여쭤봐요.

      질문 1.
      기본 폰트를 저도 Lato, 맑은 고딕 에서 다른폰트로 바꾸고 싶은데
      CSS 맨위에
      @import url(웹폰트주소); 하고 font-family:기본폰트여러개; 되어있던 부분도 같이 바꿨는데 적용이 안되네요 이렇게 바꾸는거 아닌가요 ㅠㅠ?

      질문 2. 글 쓰다가 드래그 한 부분 색이 기본 파란색에서 다른색으로 바꾸고 싶은데 (블랙님 블로그읽으면서 댓글남기다 발견했어요 ㅎㅎ..) 어디를 고쳐야 하는건가요?
      레터 스킨에서 컬러부분 보이는건 다 바꾼것 같은데 코드를 추가해야 하는걸까요?

      알려주시면 감사하겠습니다!

      2018.11.15 21:07 신고
      • 프로필사진

        둘다 CSS를 수정하거나 추가하면 되는 사항입니다.

        1. 네 맞습니다.
        제 기준으로는
        @import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,700,900|Noto+Serif+KR:600&subset=korean');

        font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", Dotum, '돋움', "Nanum Gothic", 'Lato', Helvetica, sans-serif;
        처럼 되어 있습니다.

        2.
        ::selection {
        color: #EAEAEA;
        background: #007878; /* WebKit/Blink Browsers */
        }
        이런식으로 하시면 됩니다.

        2018.11.16 08:59 신고
    • 프로필사진

      인스타 링크는 어떻게 거나요 ?? 자꾸 안걸어지던데 css에서 수정해야하는 건가요?

      2018.11.19 17:07 신고
      • 프로필사진

        스킨편집에 들어가면 '스킨 옵션'이라는 것이 존재합니다.
        그 때 인스타그램 링크라 되어 있는 것에 자신의 인스타그램 주소를 적으면 됩니다.

        지금 실험용으로
        https://www.instagram.com/nasa/
        를 걸어놨는데 잘 되네요.

        혹시 1.52버전 버그라면 12월중에 나올 2.0버전에선 고쳐졌을 겁니다.

        2018.11.19 17:16 신고
      • 프로필사진

        앗 이제 되네요 아깐 잘안디서 ㅎㅎ! 감사합니다.

        2018.11.19 18:42 신고
    • 프로필사진

      안녕하세요! 스킨 감사히 잘 쓰고 있습니다.
      코드 조금 뜯어보면서 공부 좀 하려고 하는데 너무 어렵네요 이런 걸 다 어떻게 하셨대.. ㅠㅠ
      혹시 블로그 하단 ABOUT ME 쪽에 프로필 사진을 띄우려면 어떻게 해야 하는지 아시나요/?
      그리고 혹시 되신다면 스킨 제작 강의같은 것도 만드실 생각 있나요!! +_+

      2018.11.25 19:46 신고
    • 프로필사진

      비밀댓글입니다

      2018.11.27 10:01
    • 프로필사진

      문의드립니다.
      http://windmath.tistory.com/39?category=975155
      하단 부분에 보 면 카테고리의 다른 글이 뜨는데요
      이게 표 선이 그대로 나타나고
      아래 태그 글자가 깨지더라고요 ㅠㅠ 해결방법이 있을까요?

      2018.12.08 22:48 신고
    • 프로필사진

      Letter스킨쓰고 있어서 수정본 검색해서 들어왔어요.
      코드는 잘 모르지만 수정본 적용해서 쓰고 있습니다. 감사합니다 ㅎ

      2019.04.25 12:54 신고
Designed by black7375.