2년만에 테마를 새로 만들었습니다

§

일단 color scheme 은

Ibiza 의 night scene 에서 따왔습니다.


Ibiza 섬은 엷은 푸른색과 핑크색을 자연적으로 볼수 있는데, 그런 이유 때문인지, 이 섬은 파란색과 pink/purple 색을 primary color 로 삼습니다.

디자인은 Todd Motto 같은 고수들의 블로그 형태 (사이드바 없는) 를 따르고자 했으나, 양심상 고수도 아닌 제가 사이드바를 없애면 사람들을 기만하는 것 같아서, 사이드바를 (toggle) 처리 해 버렸습니다. (혹시라도 누가 고수도 아닌게 왜 건방지게 sidebar 없앴냐고 하면 없앤거 아니라고 말 하려구요. ㅋㅋㅋ)

최대한 간단하게 만들고자 했는데, 이것 저것 만들어 보고 싶은것들을 조금 만들어 넣었더니 다시 지저분해져버린.. 흠냐…

hackYa 레이아웃이 지겹다. 좀 다른 모습으로 만들었으면 좋았을걸 이라고 생각 하시는 분들이 계실텐데, 지겹기는 제가 더 지겹습니다. 지금 7년째 현재 레이아웃 형태를 고수하고 있는 상태거든요.

여기에 최근 구글뉴스 까지 제 테마와 거의 동일한 모습으로 바뀐 상태라…

구글뉴스를 사용하는 저는 정말 지겹습니다.

그런데 이런 형태의 레이아웃이 SEO 나, retention, 수익관점에서는 가장 이상적인 모습이라 별다른 선택의 여지가 없습니다.

네, 어떤 디자인적인 creativity 보다는 실익을 택한… ㅋㅋㅋㅋ

이 테마는 php 중심의 traditional 한 워드프레스 테마로는 제가 만드는 마지막 테마 입니다. 사실 이번에 Rest API 로 테마를 만들까 하다가, 아직은 제 실력이 역부족일 것 같아서 하지 않았습니다. 스크립팅 실력도 문제지만, 아직 Rest API 의 documentation 이 많이 부족하고, 세부적인 control 을 좀더 개선해야 하는 상태로 보였습니다. 이 테마를 바꿀때즈음이면 php 중심이 아닌 javascript 중심의, 어쩌면 php 한줄 사용하지 않는 headless CMS 형태의 테마를 만들게 될 것 같습니다.

그래서 시원섭섭합니다.

이번에 튜토리얼 진행하면서 일주일에 한시간 정도도 투자하지 않고 튜토리얼 진행하는 동안 금방 테마가 만들어지는걸 보며, 아, 이제 이짓거리는 그만해야 겠구나 하는 생각이 들었습니다.

어떤일이든, 내가 편한일을 하고 있다면, 아무런 발전이 없는 일을 하고 있다고 저는 생각합니다. 고생스럽고 힘든일을 하고 있다면, 나의 스킬이, 내공이 쌓이고 있다고 저는 믿는 관계로…

이제 Rest API 로 작업을 하고 공부를 하며 또 즐거운 개삽질을 시작하게 된 것 같습니다.

SPA 는 여러번 만들어 봤는데, 이제는 워드프레스를 back-end 로 삼는 진짜 full-stack 의 application 을 만들려고 합니다. 상당히 재미있을 것 같습니다.

사실 Rest API 아니었으면 저는 워드프레스를 그냥 버리고 다른 길 가려고 했었는데, 이 Rest API 가 워드프레스와의 인연을 다시 늘려준 것 같습니다.

I Took A Pill In Ibiza

시적인 표현으로 많은 인기를 누렸던 이 노래가사는 (Mike Posner 가 원래 시인이기도 합니다.) 돌아온 탕자의 얘기와 많이 닮아 있습니다. 젊은 시절 제 모습이 떠오르는 것 같기도 합니다. ㅠㅠㅠㅠ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리:

Ω

20 Comments

  • Gene.w. says:

    응원 합니다. ^^

    항상 핵야님 글 보면서 뭘 공부해 볼까 탐색 합니다.
    html / CSS 약간 해서 이제 마크다운으로 쓰는게 조금 편해 졌네요.
    앞으로도 좋은 정보 많이 나눠 주세요 🙂

    • Matthew says:

      헐ㅋ. 마크다운 쓰시는게 편하시다구요? 저는 마크다운 이랑 친해지기 힘들던데… ㅎㅎㅎ

      html 과 markdown 은 서로 연관성이 별로 없어서, 개발자들도 편하게 마크다운 작성하는 사람이 많이 없습니다.

      저는 무조건 컨닝페이퍼 봐야 합니다. ㅋㅋㅋ

      https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

      • Gene.w. says:

        저는 마케터다 보니..
        이것 저것 캠페인 진행할 때 필요한 페이지를 개발자 분들이 만들어 주시는걸 곤란해 하셔서.. 커버하기 위해 공부를 시작하다보니 언어에 대한 이해보다 마크업으로 웹문서 만들고 얕은 CSS 지식으로 서식 적용하는 것만 몇년했네요. (사실 언어 공부는 어떻게 해야될지 영 감이 안와서..)

        마크업으로 만들어서 드리면 그 이후 작업들은 금방해 주시더라구요.

        사실 편해졌다는게 핵야님 생각에서의 정도와 다를 수 있겠다는 생각도 드네요.

        • Matthew says:

          Ghost 라는, 워드프레스에서 일하던 직원이 나와서 런칭한 headless 블로그 솔루션이 있는데, 이 Ghost 가 마크다운을 사용해서 블로그 글을 작성해야 합니다.

          글을 쓰면서 미세한 컨트롤를 하기가 까다로워서, 이 Ghost 가 폭망한…. Ghost 직원들도 자기 회사 블로그를 사용하지 않는… ㅋㅋㅋ 사용자들 대부분 마크다운과 친숙해지기에 어려움을 느끼는거죠.

          어떻게 보면 마크다운은 html 을 css 로 꾸미는것과 정반대 개념이라, 제 경우 그래서 더 불편하게 느껴지는 부분도 있는 것 같습니다.

  • Word says:

    드디어 사이트를 리뉴얼하셨네요.

    축하합니다.ㅎㅎ

    앞으로도 좋은 정보 많이 올려주시길 바랍니다.

    P.S.
    검색하면 검색 결과가 한 화면 아래에 표시됩니다.
    그리고 IE 11에서 이 사이트를 열면 완전히 다른 색상으로 표시됩니다.ㅎㅎ

    • Matthew says:

      ㅋㅋㅋ

      이 문제 입니다.

      https://jakearchibald.com/2016/link-in-body/

      랭커님의 요청으로 최첨단 progressive css 로딩기법을 활용해 보고자 한건데, 아직 시기상조네요.

      이 기법은 브라우져들이 제대로 지원을 해줄때까지 몇년더 기다려야 할 것 같습니다.

    • Matthew says:

      오… css 를 두번 declare 해주니까 IE 11 에서도 제대로 잡히네요. HTTP/2 에서는 css 를 하나로 합치는게 아니라 조각조각 여러개로 나눠주는게 속도가 더 빨라지거든요.

      그래서 sidebar.css, foooter.css, 이런식으로 css 를 나눈 후, 각 css 를 progressively 로딩되게 하는 기법을 테스트 해본 것 입니다.

      잘 되면 이 기법을 공유하려고 했는데, 아직은 experimental (실험적) 성격이 강해서 몇년은 지나야 유용한, 실질적인 기법으로 활용될 수 있을 것 같습니다.

      • Word says:

        아직은 실험적 단계에 있는가 보네요.

        hackya 사이트를 로드할 때 순간적이지만 깨진 사이트 화면이 잠시(순간적으로) 표시되었다가 정상적인 사이트가 표시됩니다. 인터넷 속도가 느린 경우에는 눈에 거슬릴 수도 있을 것 같습니다.

        https://uploads.disquscdn.com/images/993f96550eb5c3ebddd1474c297cbf1cac2249026cf30384ceb883dedd371404.png

        • Matthew says:

          critical css 적용을 안하고 optimizing 시도를 해보고 있는건데, 아직은 모든 브라우져에서 정상적으로/ stable 하게 로딩되는 방법이 존재하지 않는 듯 합니다.

          critical css 생성을 하지 않으려는 이유는, 이게 할때는 아무생각없이 하는데, 나중에 유지보수가 매우 까다로워집니다.

          현재 각 브라우져 마다 서로 css rendering 하는 방식과 룰이 달라서…. 모든 브라우져에서 non-blocking 한 css 로딩이 불가능 한듯 보입니다.

          이번 튜토리얼에 참여하셨던 분들에게 이걸 선물로 해드리려고 시간투자를 해봤는데, 만족할 만한 해결책을 찾지 못해 많이 아쉽습니다. ㅠㅠㅠㅠ

          그냥 다시 critical css 써야 할듯요. ㅋㅋㅋㅋ critical css 는 벌써 2년전에 해본거라, 이번에는 다른 기법으로 optimizing 하는 방법을 찾아내려고 한건데, 세상에는 맘데로 되지 않는 것들도 있는거겠죠? ㅎㅎㅎ

  • 랭커(ranker) says:

    홈페이지 새 단장하신거 저도 축하드려요.

    음… 제 심미안적 기준으로는 색상이 조금 맘에 안들지만… 새 옷으로 갈아 입은 듯 해서 식상하지 않고 좋은 것 같습니다. ㅎㅎ

    • Matthew says:

      색상이 많이 과한 것 같다는 생각은 저도 하는 중. 본문에 있는 Ibiza 야경사진이 예뻐서 그 색상을 그대로 따다가 테마에 색상을 입힌건데, 좀 tone down 해야 겠다는 생각이 들고 있습니다.

      사람이 나이가 들면 화려한걸 좋아하게 된다네요. 켁. ㅋㅋㅋ

  • 오길호 says:

    리뉴얼 멋집니다 ^^

    저는 테마를 만들 엄두를 못내고 있네요.
    그저 themeforest 에서 가볍고 깔끔한 테마가 나오기를 항상 지켜보고만 있는 ㅠ

    • Matthew says:

      Kilho 님이 front-end 까지 잘하시면, 다른 개발자들 다 나가 죽어야죠. 그리고 이름을 Kilho 가 아닌 Killer 로 바꾸셔야 할듯. ㅋㅋㅋ

      하긴 잘생기신데다가 프로그래밍까지 잘하셔셔 돈까지 잘 버시는 것 부터가 완전 넌센스이긴 합니다. Kilho 님을 보면 세상은 공평하지 않다는 것을 잘 알 수 있습니다.

      http://kilho.net/archives/various/1651

      http://kilho.net/archives/wordpress/1586

      이거 두개 저는 쓸일이 없지만 완전 대박이라, 글을 하나 쓰려고 하고 있습니다.

      조선일보 IT 잡지에서 워드프레스 관련 글을 하나 써달라고 해서 그 글도 쓰고 있는데, Kilho 님 해킹점검 프로그램도 언급을 할 생각입니다.

  • 행인 says:

    예전에는 글 윗부분 다시 보려고 마우스 스크롤 올리면 상단 메뉴가 툭 하고 튀어 나오면서 포커스가 흔들리는게 불편했었는데 이제는 스크롤 올려도 상단 메뉴가 부드럽게 내려오면서 포커스가 유지되네요. 아주 좋습니다.

  • Estoque says:

    I Took A Pill In Ibiza 이 노래 어디서 많이 들었다 했더니 제가 운동용으로 만들어 놓은 플레이 리스트에 있는 음악이군요 ㅋㅋ

    요즘 이런 형광 톤이 유행을 하더라고요 ㅎㅎ 개인적으로 화사해서 좋은 것 같습니다.

    css 초창기 시절에도 고대비가 유행하다가 점차 물이 빠지더니 다시 고대비로 돌아가는 것을 보면 디자인도 반복되는게 아닌가 라는 생각을 해봅니다 ㅋㅋㅋ

    • Matthew says:

      유행을 따를려고 한건 아니고, 제 성격이 원래 “고대비” (무슨뜻인지 몰라서 구글링 해봤습니다 ㅋㅋㅋ) 를 좋아합니다.

      특히 visual 보다는 음악쪽에서 high contrast (높낮은 음원대가 확실하게 갈리고 강렬한) 를 즐겨 듣는 것 같습니다.

      그렇다고 클래식 음악을 싫어하는 건 아닌데, 클래식 음악은 웅장한 오케스트라 보다는 피아노, 기타, 아니면 바이올린 독주 처럼 하나의 악기가 내는 소리가 확실하게 들리는 음악을 좋아합니다. 이것도 역시 high contrast 되는 sound 인거죠.

      이런식의 클래식을 좋아하는…. ㅋㅋㅋ

      https://youtu.be/7gphiFVVtUI?t=55s

      제 와이프 왈. 노래가 너무 길어서 지루한 것 같다.

      대마초 한대 빨고 들어보면 쥑일 것 같지 않아? 라고 했더니 바로 등짝스매싱으로 응징. ㅋㅋㅋㅋ

      (아, 대마초는 젊었을때 피워봤고, 결혼하고 나서는 와이프가 싫어해서 한번도 피워본적 이 없습니다.)

  • Happist says:

    음 우선 축하드립니다.
    1. 다만 IE에서 이미지들이 나타나지 않습니다. 일시적인 현상인지 모르겠네요
    2. 네이버에서 만든 웨일에서는 잘 보입니다.
    3. 크롬에서도 이미지 로딩이 조금 늦긴한데 다 잘 보입니다.
    4. 잘 쓰지는 않지만 Edge에서는 아주 빠르게 뜨네요.
    속도는 Edge > 웨일 > 크롬순으로 ㅎㅎㅎ
    제가 IE를 잘못 설정했는지는 모르지만 계속 이미지가 안뜨네요. (IE 11입니다.)
    참고하시라고요

    • Matthew says:

      알려주셔서 감사합니다. 제가 사용하는 lazyload script 이 IE 에서 제대로 작동을 하지 않는 문제 였습니다. console 에 에러도 안뜨는데 그냥 작동을 하지 않는. ㅋㅋㅋ

      javascript 에서 오류가 나면 브라우져에서 이걸 알려줘야하는데, IE 는 그게 뭐야? 이러는 경우가 간혹 있습니다. IE 에서는 이미지가 lazy 로딩 되지 않도록 조치했습니다. 나중에 시간나면 어떤 크로스브라우징 문제인지 확인해봐야 할텐데. 과연.. ㅋㅋㅋ

  • TakingLAB says:

    깔끔하고 속도도 빠릅니다 🙂
    테마 만드시는 분들 보면 정말 존경스럽습니다.
    저도 열심히 공부하여 저만의 테마를 만들어봐야겠네요.

Leave a Reply

Your email address will not be published. Required fields are marked *