개발자 뉴스를 다시 시작하며

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

탕비수다 이마고 v4.1.0 업데이트 소식입니다. 공지사항은 커뮤니케이션 기능이 없기 때문에 중단했던 개발자 뉴스를 다시 시작하게 되었네요. 앞으로 간간히 이곳에 소식을 전하겠습니다.

두 번째 사이드바 인기글 지원

최근 티스토리 치환자 구조에 몇 가지 추가사항이 있었습니다. 사이드바에 인기글 모듈 지원이 추가되었고 무엇보다 스킨 옵션이 추가되었습니다. 현재 인기글은 새로 업데이트한 스킨에 적용된 상태이며 두 번째 사이드바에 노출되고 있습니다. 많은 분들이 해당 기능을 요구했었죠. 참 반가운 소식입니다.

두 번째 사이드바 인기글 지원

그 동안 내 블로그는 어떤 글이 인기가 많을까 싶었는데요. 이번 업데이트로 갈증 해소가 되지 않았나 싶습니다. 탕비수다 이마고 사이트에는 폰트와 파트너 관련 글을 많이 읽고 가셨나 보더군요. 조금 의외이긴 했습니다.

스킨 옵션 지원

워드프레스에서는 스킨 제작자가 스킨 활용에 필요한 특정 값을 사용자가 입력할 수 있게 제공하고 있습니다. 이런 부분은 상당히 중요한데요. 개발 언어를 잘 모르는 사용자도 쉽게 스킨을 제어하고 해당 값을 통해 스킨 제작자가 조금 더 많은 일을 할 수 있습니다.

스킨 옵션 지원

그동안 HTML을 통해 수집했던 설정 정보가 스킨 편집의 스킨 옵션을 통해 가능해졌습니다. 색상 지정이나 글 가로 너비 등 관련 설정을 쉽게 적용하고 즉시 확인이 가능해졌습니다.

크게 두 가지 사항을 이번 업데이트에 적용했습니다. 세세한 UI 개선도 있고요. 어떻게 보면 큰 업데이트후 초기 버전이라 다양한 환경에서 오동작이 발생할 수도 있을지 모릅니다. 최대한 여러 테스트를 통해 작업했으니 많은 분들이 이용해 보셨으면 좋겠네요.

‘탕비수다 이마고’ 다운로드

스킨 가이드(4.1.0 이상) 제작 필요성

이번 탕비수다 이마고 업데이트로 조금 사용에 변화가 생겼습니다. 크게는 앞서 말씀드렸던 스킨 옵션이 가장 큽니다. 기존 스킨 가이드 내용은 대부분 같지만 설정하는 부분만 달라졌어요.

관련해서 어떻게 소개를 해드려야 할지 고민하고 있습니다. 일단 배포하고 향후 이용하시는 분들의 피드백을 받고 방향을 정하려고 합니다. 많은 피드백 부탁드립니다.

이미지 맵

롤랑존

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

    '개발이야기' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 58개 입니다.

      • 1. SNS공유 버튼 사라짐.
        2. 첫페이지 블로그 이름이 어정쩡한 위치에 있습니다. 아마 가로 900px 설정의 제일 왼쪽으로 정렬된 것 같은데, 첫 페이지에서 위치가 어정쩡해 모양이 좋지 않습니다. 그리고 모바일 화면에서는 최상단에 블로그 이름이 또 나오는데, 중복으로 보여 보기 좋지 않습니다.
        3. 이전, 다음글 이미지 적용이 없어졌나요?
        4. 스킨설정에서 메인-캡션정렬 드롭다운 메뉴가 '아래'만 두 개가 나옵니다.
        5. 글 축소너비, 어울림너비, 글 효과는 뭘까요?
        6. 예전에 상단 스티키 메뉴에서 마우스 오버 했을 때, 제일 상단 카테고리만 보여줘서 업데이트 안되는 블로그로 보인다고 말씀드린 적이 있는데, 개선이 어려울까요?

        뭐든 찾는데로 계속 올려보겠습니다.

      • 빠른 피드백 고맙습니다. 순차적으로 의견을 드려 볼께요.

        1. 공유 기능은 삭제했습니다. 사실 카카오톡 때문에 만든 기능인데요. 최근에 모바일 및 웹에서 모두 공유가 가능해져서 중복된다는 생각에 제외했습니다.

        2. 메인 타이틀은 마지막까지 고민이 좀 있었습니다. 관련 수정이 좀 있어야겠어요.

        3. 이전다음글 이미지는 이번에 제외되었습니다. 사실 해당 기능이 공식 지원하지 않는 기능이라 일단 제외했는데요. 좀 추이를 지켜볼 생각입니다.

        4. 관련 사항은 표기 오류이군요. 기능은 달리 작동하겠지만 패치해야겠어요. ㅜㅜ

        5. 어울림이나 관련 기능은 스킨 가이드를 살펴보세요. 주로 글보다 조금 넓은 이미지를 표현할 때 이용합니다.

        6. 음, 기억이 납니다. 다만 역시나 대답은 동일하네요. 목록을 읽을 때 그렇게 불러오거든요. 각 하위 카테고리를 뒤질 수 있지만 문제는 어떤게 최신 글인지 알 수 없습니다. 이건 참 저도 아쉬운 부분입니다.

      • 6.번 문제에 대해 아무것도 모르는 자의 질문 하나 더 던집니다.

        하위 카테고리를 뒤지지 말고, 현재 마우스 오버된 카테고리만 뒤져도 최신으로 정렬되지 않나요?

        현재 롤랑존님 페이지도 '제품, 문서, 도구 ...' 이 카테고리를 새글 순서대로 보여주고 있으니까요.
        굳이 하위 카테고리를 뒤지지 않아도 될 것 같은데, 어떤가요?

      • 아 제가 착각을 했나 보군요. 예를 들면 여행이라는 카테고리가 있고 그 아래 국내와 국외 카테고리가 있을 때 국외 글만 계속 업데이트되면 여행 카테고리가 업데이트되지 않는 것 같이 보인단 말씀이시죠?

        그런데 첫 카테고리 그러니까 국내 카테고리가 먼저 보이니 어쩔 수 없을 것 같아요.

      • 현재로선 여행>국내여행 이렇게 카테고리가 있다면, 국내여행을 참고하고 첫번째 카테고리인 '여행'을 보여줄 수 없다는 말씀이시지요?

      • 결론적으로 여행 카테고리에 마우스를 올리면 먼저 여행 카테고리의 모든 하위 글들을 보여주고, 이후에 좌측 하위 카테고리를 선택하면 그에 맞는 글들을 보여주자는 말씀이시군요?

        초기엔 상위 카테고리 그후엔 선택된 카테고리 노출?

      • 네. 맞습니다.

      • 이해했습니다. 한 번 고민해보겠습니다. ^^

      • 인기글등... 그 동안 아쉬웠던 기능들은 미리 추가 해서 사용하고 있던터라 문제는 없는데... 개발자님에게 부탁드릴거라면 사이드바1(오른쪽), 사이드바2(하단), 동시에 노출시 화면 크기가 작아질때 사이드바1 이 사이드바2 밑으로 내려가는 방법도 같이 구현해주었으면 하거나 아니면 어디를 수정해야 사이드바1이 하단으로 내려갈수 있는지 궁금합니다 ^^;.

        이번 티스토리 업데이가 반갑지가 않는 이유는 이런 식의 UI 타입으로 변경 될수록 세부설정 변경하지 못하겠끔 막는 경우가 많아서... 지금 생색내는 기능들이 이전에는 기본적으로 제공하던 것들이라... 그리고 전체적인 스킨 디자인은 4.0.6버전의 더 좋지 않았나싶네요 😅

        덕분에 많이 배웠습니다. 감사합니다.

      • 사이드바의 이동은 기술적으로 불가능하지는 않습니다. 다만 어울림이 문제인데요. 잘 아시겠지만 탕비수다 이마고는 다양한 기능을 제공하고 있기 때문에 장점도 있지만 단점도 분명 존재합니다.

        이런 점에서 관련 기능을 넣지 않았어요. 누군가는 그렇게 하고 싶지만 그걸 원하지 않는 사람도 있거든요. 탕비수다 이마고 스킨은 되도록 원 페이지 방식을 지향하고 있습니다. 양해 부탁 드려요.

      • 제가 사용하는 탕비 스킨은 tang-bisuda-imago-4.0-r5 입니다.

        혹시,
        기술적으로 가능하도고 하시니..., 어디를 수정? 혹은 추가해야하는지 대략적인 위치만이라도 알려주시면 안될까요?

        현재까지 섹션으로 구분하여도 밑으로 내려가지를 않아서..., 상당히 궁금하네요 ^^;

        시간되시면 새로운 스킨도 상당히 좋지만..., 전, 지금 사용하는 버전에 애착이 많이가서요 ^^;

      • 자바 스크립트로 제어하는 부분이라 사실 알려 드리기가 쉽지 않습니다.

        거의 개발을 해야 되거든요.

      • 그래서 그런가 보네요 @@
        스킨, 스타일 아무리 봐도 사이드바 1에 대한 옵션을 수정할 부분을 아무리 찾아도 안보여서 ...,

        스크립트로 구성하는 거라면 차라리 쉽겠네요 ^^
        시간은 걸리겠지만, 구현은 가능하겠네요

        이번 버전의 스킨도 보고 있는데...,
        함부로 업데이트를 할수가 없겠네요 ^^; ㅋㅋ;
        대략적으로 티스토리 설정페이지 안에서 수정되도록 되어 있어 제가 지금 사용하고 있는 것들을 다 넣으려면 새로 스킨을 만드는 수준이 될것 같아 이번 업데이트는 다른 여러분들이 안정화로 접어들 쯤 손을 대 봐야겟습니다 ^^;

        그래도 시원하게 답변해주셔서 감사합니다.

      • 감사합니다. 개인적으로는 이전 버전보다 더 마음에 드네요. 테스트해보고 문제가 있다면 피드백하겠습니다.

        그리고 한 가지 질문이 있는데, 이전 스킨에서 사이드바 사용을 할 경우 https://imgur.com/a/9PS5Flv 와 같이 반응형 출력에 문제가 생기는 경우가 있던데, 이게 익스플로러에서 간혹 비정상적으로 출력되고 브라우저를 닫았다 다시 열면 정상적으로 출력되기도 하고 크롬에서는 정상적으로 출력되기도 해서 문제가 무엇인지를 파악하기가 어려운데요. 혹시 짐작 가는 부분이 있으신가요? 관련해서는 본문 크기를 728, 사이드바를 300 픽셀로 조절한 상태입니다.

      • 안녕하세요. 관련 버그는 확인한 상태이고 어떡해 대처할지 고심 중입니다. 애드센스를 사용시 발생하는 문제로 생각하고 있습니다.

        현재는 스킨옵션을 통해 너비를 입력 받았는데요. 향후 관련 문제를 해결하기 위해 스킨옵션 없이 css를 통해 고정 조치할 생각도 있습니다.

      • 아, 그렇군요. 에드센스에서 data-full-width-responsive 옵션을 사용할 때도 그렇고 사이드바를 사용하면 약간 호환성 문제가 있네요.
        추후 애드센스 관련한 버그에 대한 해법이 정리되면 공지해주시면 좋겠습니다. 감사합니다.

      • 요즘 애드센스 설정을 보지 않았는데요. 뭔가 애드센스 작동시 글 html의 너비를 재조정하는 의심이 들더군요. 설마 그러지는 않겠지만 좀더 살펴봐야 겠습니다.

      • 요즘 애드센스 full width 설정하면 뭔가 좀 이상한 현상이 있어요.
        반응형에서도, 모바일 페이지에서도 광고 모양이 틀어진다거나.
        암튼 영향이 있는듯....

      • full width 설정에 뭔가 있나 보네요. 일단 가로 너비를 스크립트가 아닌 css에 직접 설정할 수 있도록 조치 중입니다.

      • 모바일에서 화면 확대가 안되네요.

      • 모바일에서는 원래 화면 확대는 없었습니다. 만약 되었다면 뭔가 달리 작동한 경우 같아요.

      • 그것은 잘모르겠는데요. 예전 버젼에서는 손가락으로 확대를하면 화면이 확대가 되었습니다.
        지금은 해보시면 알겠지만, 그 기능이 없어져서 확대가 안됩니다.

      • 죄송하지만 그런 기능을 막아놓았었습니다. 초창기 버전부터 그랬거든요. 그래서 이상하다고 생각하고 있습니다.

      • 개발자님 수고가 많습니다.
        작가활동을 향후 온으로 확대할 목적으로 이마고 스킨을 구매하여, 아직까지는 티스토리 환경 기반구축 단계에 머물러 있습니다.
        4.1.0 버전을 내려받아 테스트 블로그에서 적용해 보고 있는데 설정이 편리한 점도 있긴 하지만,
        개인적으로는 이전 버전에 익숙해져서인지 기존의 4.0.6 버전이 더 맘에 드는 것 같습니다.
        그럼에도 불구하고 트렌드에 부응하는 더 좋은 환경 구축을 위해서는 지속 발전시켜 주실 상위버전으로의 업그레이드는 필수적일 수 밖에 없음을 공감합니다.

        건의합니다.

        1) 브런치 추천작가들과 같이 부제목을 달 수 있도록 기능을 추가하여 티스토리 내에서도 선구적으로 차별화시키면 좋겠습니다.
        2) 브런치 작가들처럼 글을 쓸 때마다 사용되는 각기 다른 이미지가 상단 타이틀 배경이미지로 구현되도록 기능을 더해주시면 좋겠습니다.

        컴을 잘 다루시는 분들은 어렵지 않게 스크립트를 달아서 설정하기도 하겠지만, 저와 같은 사람은 엄두도 못냅니다.
        그래서 글쓰기에만 전념하려는 유저들의 입장에서는 라이선스 버전 구매를 선호할 수밖에 없다는 점을 헤아려 반영해주시면 좋겠습니다.

        수고하세요.

      • 안녕하세요.

        아쉽게도 부제목에 대한 건은 스킨 제작자 입장에서 구현할 수 없는 부분입니다. 스킨 제작은 티스토리 플렛폼에서 지원하는 경우에 한해 다양한 포멧을 제공할 뿐 없는 기능을 추가할 수는 없어요.

        대표이미지를 활용하는 기능은 여러 요청이 있어 검토 중이나 조금 회의적입니다. 브런치의 경우 대표이미지를 배경으로 지정할지 아닐지를 각 글마다 선택할 수 있으나 앞서 설명드렸던 것처럼 해당 기능을 티스토리가 지원하지 않고 있습니다.

        모두 좋은 기능이지만 이런 이유로 개발을 진행하지 못하고 있습니다.

      • 그렇군요. 티스토리 플렛폼에서 지원하지 않는 기능은 불가능하군요.
        대표이미지를 활용한 배경이미지 구현 방안은 전향적으로 검토해주시기를요.
        글이라는 게 그 자체만으로는 완성도를 높이는 노력이 중요하지만, 포스팅할 때에는 감성 이미지를 입히는 작업 또한 중요한 요소라고 생각합니다.
        이마고 스킨이 이미지를 활용한 콘텐츠 작업용으로 자리매김하고 있다고 봅니다. 거듭 감성스킨으로 발전하길 기대합니다.
        감사합니다.

      • 업뎃 된 스킨 잘 받아서 적용했습니다. 그런데... 최근글에는 전에는 출력되지 않던 썸네일이 나오고 있고 인기글도 마찬가지구요... 썸네일 출력을 없앨 수 있을까요? 사이즈까지는 줄여봤는데... 님 하단에는 예쁘게 나오는데 제꺼는 왜 흉하게 나오는지... ㅠㅠ

        글고 최근글이나 댓글 아래 구분선? 점선?이 나오는데 인기글에는 출력이 안 돼고 있어요. 이건 어디를 수정해야 하는지요...

        하튼... 감사합니다~~~~~

      • 업데이트를 어떤 방식으로 하셨는지요? 뭔가 예전 흔적이 그대로 남아 있는 것 같아서요.

        사이드바에 노출되는 썸네일은 기본으로 출력되고 있어요. 없애려면 직접 html이나 css를 수정하셔야 해요.

      • 예전 스킨 파일 다 지우고 다시 업로드 했어요. 어설프데 덧 씌우는것 보다는 안전한 것 같아서요. ^^

      • css 내용이 예전 버전 같아서요. 음, 정말 이상하네요.

        스킨 등록이 아니고 파일 업로드요?

      • 아하하~~~ ㅠㅠ 스킨등록을 사용했어야햇군요. ㅠㅠ 감사합니다~ ㅠㅠ

      • 비밀댓글입니다

      • tangbisuda.tistory.com/50

        어제 문의후 잠시 블로그를 모니터링 했는데요. 제대로 스킨등록이 안된 것 같아요. 다른 이유인지 모르겠지만 위 주소대로 한번 다시 등록해보세요.

      • 희안하네요. ㅠㅠ 먼저 문의 드리고 스킨등록 메뉴 사용해서 했었고, 1시간 잘 돌아가다가 급 출력이 안 되더니 오늘 다시 등록해서 사용하니 잘 되네요. 아하하~ 뭔가 제가 미스했나본데 뭘까요? ^^ 문의 잘 받아주셔서 감사합니다~~~

      • 스킨등록시 잘 될 때가 있고 그렇지 않을 때도 있더군요. 해결하셨다니 다행입니다.

      • 비밀댓글입니다

      • 현재 사용하고 있는 버전을 알 수 있을까요? 문의가 꽤 있어서 일일히 다 기억을 못 하고 있습니다.

        이미지를 상대적으로 크게 보이는 효과인 것 같은데요. 데스크탑이건 모바일이건 동일하게 본문이 좁게 보입니다.

        오래 전에는 어떨지 모르겠는데요. 최근에는 모두 동일하게 표현되고 있어요.

      • 비밀댓글입니다

      • 그렇다면 본문 이미지를 넓게 쓰셨을 때 모바일 데스크탑 모두 동일하게 표현될텐데요. 물론 그 간격은 조금 다르겠지만요. 이 문의는 맞는지요?

      • 비밀댓글입니다

      • 네 내용 파악을 위해 모바일과 데스크탑 화면을 캡처해서 메일로 문의 주시면 이해하는데 큰 도움이 될 것 같습니다.

        photobit@tistory.com

      • 비밀댓글입니다

      • 비밀댓글입니다

      • 아 애드센스가 문제였군요. 사이드바 이용시 애드센스를 이용하면 불규칙적으로 본문과 사이드바가 뒤틀리는 현상이 있었습니다.

        관련해서는 문제가 해결되었는데요. 새롭게 나온 스킨 옵션이 적용된 버전입니다. 다만 트위터에 소식을 전했지만 이런저런 버그가 발견되어 배포를 중단한 상태입니다.

        조금 기다리셔야 할 것 같아요. 아참 사이드바에는 직접 애드센스를 html로 넣으신건지요?

      • 비밀댓글입니다

    *

    *