탕비수다 (4 Page)

이미지를 활용해 다양한 기능을 제공하는 반응형 스킨

확장 모드 업데이트 소식

개발이야기 · 2016.10.11 17:51

확장 모드 업데이트 소식

안녕하세요. 바쁜 일이 있었지만 틈틈이 짬을 내어 몇 번의 개선 작업을 진행했고 그동안 손대지 못했던 확장 모드를 완료했습니다. 기쁜 마음에 소식을 전합니다. 확장 모드라고 해서 “뭔가 큰 기능이 추가되었나 보네”라고 생각할 수 있는데요. 늘 그렇지만 막상 새로운 개선 버전을 내놓을 땐 여러 가지 복잡한 심정 탓에 마음이 편치 않습니다. 내부적으로 여러 정의가 변경되고 복잡한 작업이라 마이너 업데이트로 진행할까 싶었지만 눈으로 보면 또 그게 아니라 개선 작업 버전으로 표기했습니다. 그럼, 어떤 사항이 추가되거나 개선되었을까요? 썸네일 목록 배경색 그라데이션 추가 주 메뉴에 그라데이션 효과가 있는데요. 그와 같은 효과를 썸네일 목록에도 지정할 수 있습니다. 같거나 혹은 다른 그라데이션 효과를 조합해 감각적..

스킨을 제작하는 즐거움과 스킨을 사용하는 즐거움의 의미

개발이야기 · 2016.09.28 17:12

스킨을 제작하는 즐거움과 스킨을 사용하는 즐거움의 의미

내가 GNU 라이선스 스킨을 제작하는 이유에는 결코 어울릴 수 없다고 생각하는 두 가지 즐거움이 얽혀 있다. 하나는 그 모습 그대로 좋아해 줄 거라는 즐거움, 또 다른 하나는 자신에 맞게 수정해 뒤따라오는 즐거움이다. 이 두 가지 즐거움이 얽혀 맞물릴 때 즐김이 생긴다.즐거움은 고통이 없다. 오직 즐거움 그 자체이다. 나는 하얀 여백에 조금씩 채워나감을 즐긴다. 한 번에 모든 걸 채우기보다 한번 채우길 즐긴다. 그 한번은 늘 끝맺음이다. 한번 채우길 마치면 늘 공백이 생긴다. 그것이 시간의 공백이건 할 일의 공백이건 늘 어떤 형태의 공백이 생긴다. 중요한 것은 공백 후에야 비로소 또 다른 채움의 즐거움이 따라온다는 점이다.공백은 고통이 아니다. 모든 것은 그저 하나의 과정이다. 즐거움이 즐김으로 탈바꿈되..

접속 기기 구분 및 디스커스 댓글 플러그인 적용

개발이야기 · 2016.09.28 15:52

접속 기기 구분 및 디스커스 댓글 플러그인 적용

개발자 뉴스는 탕비수다 이마고를 개발하면서 겪은 일이나 여러 감정을 기록하기 위해 시작했습니다. 벌써 여덟 번째 이야기를 기록하고 있군요. 그동안 탕비수다 이마고를 구매한 사용자와의 지속적인 커뮤니케이션 덕분에 어느 정도 안정화 단계에 접어들어 크게 시간을 들여 작업할 일은 없었습니다. 다만, 두 가지 해결하지 못했던 문제가 있었는데요. 이번 업데이트를 통해 해결했습니다. 첫 번째는 접속한 기기를 구별하는 것입니다. 데스크탑과 모바일 구분인데요. 참 애를 먹었습니다. 여러 곳에서 이를 지원하는 플러그인이 존재하지만, 되도록 티스토리에서 제공하는 공통 모듈을 이용하고자 했습니다. 이런 의미에서 그동안 티스토리 모듈을 이용했는데 최근에 맥 기기에서 특정한 오류가 발견됨을 제보 받았습니다. 사실, 접속기기 구..

타일 그리드 시스템 적용

개발이야기 · 2016.09.28 15:50

타일 그리드 시스템 적용

타일 그리드 시스템을 매번 고민했고 이제야 개발 버전을 탕 비수다 블로그에 적용했습니다. 타일 그리드 시스템은 Javascript 플러그인인 Masonry 라이브러리로 작동합니다. 아, 타일 그리드 시스템이 무엇인지 먼저 설명이 필요하겠군요.탕비수다 이마고 스킨의 초기 모토는 ‘글보다 사진에 집중’할 수 있는 환경을 제공함에 있습니다. 처음 마음먹은 대로 지금까지 글보다 사진에 더욱 심열을 기울이고 있습니다. 물론, 텍스트도 좀 더 가독성 있게 변경하고는 있습니다. 타일 그리드 시스템은 원래 글에 적용할 생각이었습니다. ‘글에 첨부한 모든 이미지를 불러와 한 곳에서 모아 볼 수 있으면 좋지 않을까?’ 정말 그렇지 않을까요? 아직 처음 생각을 실현하진 못했지만 대신 인덱스 페이지에 해당 기능을 추가했습니다..

한글 웹폰트 사용자 정의를 고민하며

개발이야기 · 2016.09.28 15:38

한글 웹폰트 사용자 정의를 고민하며

의외로 가이드 작업이 오래 걸리지 않았습니다. 꼼꼼히 작성하지 않은 탓일까요? 아니면, 꼼꼼히 작성했던 지난 작업의 결과일까요? 후자였으면 좋겠군요. 어쨌든, 예상했던 기간보다 가이드 작업이 단축되어 다른 기능을 조금 더 살필 수 있는 여유가 생겼습니다. 웹폰트 변경, 초보자에겐 쉽지 않은 작업이죠. 한번 해보면 그리 어렵지 않은데 개념을 이해하지 못한 상태에서 누군가 이렇게 하라는 방법으로만 하다 보니 응용이 쉽지 않습니다. 늘 일에는 장단점이 있기 마련입니다. 탕비수다 이마고는 웹폰트 로딩을 위해 Google WebFont Loader를 사용합니다. 영문 웹폰트는 ‘Lato’를 사용하고 있으며 한글 웹폰트는 ‘나눔고딕’을 사용합니다. 영문 웹폰트의 경우 변경을 요청하는 경우는 드물고 주로 한글 웹폰트..

웹폰트에 대해서

지원 · 2016.09.28 14:37

웹폰트에 대해서

스킨에서 대표 웹폰트를 변경하는 방법은 스킨 가이드, 웹폰트를 살펴보세요. 대표 웹폰트 변경 방법을 숙지했다면, 이제 새로운 웹폰트를 추가할 준비가 된 셈입니다. 한글 웹폰트를 제공하고 있는 서비스 가운데 대표적인 서비스는 Google Fonts이며 Early Access가 이에 해당됩니다. 따라서 Early Access에서 제공되지만 스킨에 추가되지 않은 웹폰트를 스킨에 추가해 대표 웹폰트로 설정하는 방법을 알아볼까 합니다. 구글 웹폰트 로더 스킨의 웹폰트는 Google WebFont Loader로 작동합니다. 아래는 Google WebFont Loader 정의로 HTML에서 확인할 수 있습니다. 스킨은 영문 웹폰트는 Lato를 기본으로 하며 한글 웹폰트는 노토산스를 기본으로 하고 있습니다. 우리가 주..

사진의 카메라 및 촬영 정보(Exif; EXchangable Image File format)에 대해서

지원 · 2016.09.28 14:34

사진의 카메라 및 촬영 정보(Exif; EXchangable Image File format)에 대해서

흔히 사진 촬영의 메타정보라고 하는 Exif는 사진에 대한 정보를 포함하는 메타데이터가 추가된 이미지 파일 포맷입니다. 스킨에서 해당 기능을 좀 다뤘으면 하는 문의가 있었습니다. 티스토리 플러그인 티스토리에도 관련 플러그인이 존재합니다. '블로그관리 > 플러그인' 설정에서 사진 정보(EXIF) 출력이 이에 해당됩니다. 아쉬운 점은 각 정보에 대한 구분 값이 없어 다양한 가공이 불가능하다는 점입니다. 정보가 있는 순서대로 나열될 뿐 해당 값이 어떤 정보를 의미하는지 알 수 없습니다.고민 끝에 스킨에서는 티스토리에서 제공하는 플러그인을 사용하기로 했습니다. 아무래도 한 번 더 이미지를 호출하는 방식은 로딩을 지연하는 원인이 될 수 있기 때문입니다. 해당 기능은 따로 스킨 설정이 필요 없습니다. 티스토리 관리..

티스토리툴바