기존에 사용하던 테마는 automattic에서 제공하는 Underscores starter theme을 이용해서 제가 직접 만들어서 사용했는데, 포트폴리오 사이트를 kalium 테마를 구입해서 만들고나서 보니 생각보다 괜찮더군요. 그래서 묵혀두었던 enfold 테마도 좀 개선되었겠지 싶은 생각이 들었습니다. enfold 테마를 다시 공부해보고 싶어서 변경해봤습니다. 그런데 이거 참 시간들여서 한참 만졌는데도 후회가 될 정도로 엉망이네요.

이게 제가 잘못해서 설정을 못하고 있나 싶어서 한참 끙끙매던 부분인데, 반응형 테마로 적용했을때 햄버거 메뉴가 뜨지 않는 오류가 있습니다.  왜 이런 상황이 발생하는가 봤더니 ul을 감싸고 있는 div 태그를 display:none으로 놓고 햄버거 메뉴는 그나마 ul 하위의 li에서 뜨게끔 해놨더군요.

div > ul > li 이런 구조로 되어있는 상황에서 div에 display:none을 걸어놓으면 당연히 그 하위 태그들은 전부 노출되지 않죠. 도대체 왜 이런 구조로 짰는지 알 수가 없습니다만, enfold와 같은 손쉬운 제작을 표방하는 테마들은 이런식으로 크고 작은 문제들이 있는것 같습니다. enfold mobile menu not working으로 검색해보면 정말 수두룩하게 나올 정도라 문제가 심각해보이는데도 좀처럼 해결되지 않고 있는 상황입니다.

어찌됐건 조만간 테마를 다시 만들도록 하고, 일단은 하루종일 끙끙대며 세팅을 했으니 당분간은 enfold 테마로 블로그를 운영해야겠습니다. 덕분에 모바일에서는 메뉴를 구경할 수 없음을 참고하세요 ㅋㅋㅋㅋ 이거 참 심각하네

포트폴리오 사이트를 전부터 오픈하려고 벼르고 별렀습니다. ‘중이 제 머리 못 깎는다’는 말처럼 자기 사이트를 만드는데 시간을 투자한다는게 참 쉽지 않더군요. 그래서 그냥 유료테마를 구입해서 커스터마이징 하기로 했습니다. 일단은 오픈부터 하고 봐야지 싶어서 말이죠. AWS 프리티어 기간이 3달정도 남긴 했는데, 기간이 임박해서 이전하다보면 왠지 또 뭔가 꼬일거 같다는 생각에 어제 다급하게 라이트세일 호스팅으로 옮겨탔습니다. 아직 한국 리전은 없고 가장 가까운 도쿄 리전으로 진행했는데 속도면에서 처진다는 느낌은 없어서 만족합니다.

다만 세팅할때 삽질을 많이 했습니다 ㅎㅎ  https://swiftcoding.org – 이 블로그 주인장분에게 무척 고마울 정도로 소상하게 많은 정보를 올려놓으셨더군요. 세팅하는데 참 큰 도움이 됐습니다. 삽질의 순간이 많긴 했지만, 그래도 어떻게 꾸역꾸역 해내고보니 새벽 늦은 시간이 되더군요. 결국 오후에 되서야 서버세팅과 SSL 세팅까지 마무리 지을 수 있었어요.

 

그런데 참 유료테마들도 아쉬운 구석이 많긴 하네요. 비주얼 컴포저 같은 사이트 빌더를 사용하면 일단 겉보기에 기능을 추가하는건 무척 쉽습니다만, 이래저래 손 봐줘야할 부분이 무척 많다는걸 느낍니다. 게다가 쓸데없이 태그의 계층이 깊게 파고 들어가 속도면에서 손실이 생기는 점도 있죠. 그래도 나름 SASS를 지원하는 테마더군요. 조금씩 시간들여서 커스터마이징 하면 어느정도 쓸만해질것 같아요.

그리고 나중에는 다시 underscore나 understrap으로 만들어서 써야지 싶습니다. 지금 운영하는 이 블로그 스킨도 막상 급하게 만들어서 쓰다보니 이래저래 손 봐야할 곳들도 많네요.

블로그 리뉴얼

블로그 디자인을 리뉴얼했습니다. 포트폴리오 사이트는 “만든다 만든다”하면서 차일피일 미뤄두고 있습니다. 뭐든지 마음을 먹고 실행에 옮기는데에는 망설임이 많기 마련인데, 가장 큰 문제는 항상 시간에 쫓긴다는것이겠죠. 나름의 우선순위를 정하고 일을 하다보니 미뤄지는 것들이 종종 발생합니다.

여튼 블로그는 가장 많이, 자주 쓰는 공간인데 기본적으로 주어지는 테마를 갖고 쓰다보니 항상 아쉬움이 있었습니다. 이번 기회에 손을 대고 만들기 시작했는데, 대략 6일정도 걸렸네요. 아직 전부 완성된 상태는 아니고, 편의를 제공하는 부분에서 미흡한 부분들이 있습니다. 차근차근 또 작업해서 추가해나가야겠네요.

역시나 이렇게 하나하나 만들다보면 공부하게 되는 것들도 많은 것 같습니다. 이번에는 워드프레스 함수에 대해서도 좀 삽질하면서 공부해보고, 매번 SASS를 사용하기 위해 환경설정을 새로 하는 부담을 덜기 위해서 편리한 프로그램도 찾아서 사용해봤습니다.


스카우트 앱이라고 하는 어플리케이션입니다. 사용방법도 간단하고, sass를 편리하게 쓸 수 있도록 도와주는 susy나 compass와 같은 프레임워크 연동도 손쉽게 해낼 수 있어서 복잡한 환경설정을 하지않아도 바로 사용할 수 있어서 편리합니다. 소스가 수정될때마다 감지해서 자동으로 브라우저를 새로고침해주는 livereload라는 어플리케이션도 있는데, 이건 현재 제대로 동작하지 않는것인지 제가 설정을 잘못한건지 정상작동이 되지 않길래 패스했습니다.

gulp에서 browser sync를 활용하면 되긴합니다만, 브라우저 싱크도 쓰다보면 뭔가 좀 꼬이거나 속도면에서 성에 차지 않는 구석들이 있더군요… 컴이 후져서 그런가


워드프레스 제작사인 Automattic에서 제공하는 스타트테마입니다. 스타트테마는 별도의 자식테마를 만들지 않고, 바로 수정해서 사용하도록 되어있다고 합니다. 지난번에는 underscores 테마에 bootstrap을 입힌 understrap 테마를 사용해봤는데, 확실히 만드는 시간은 단축되는데 부트스트랩을 따로 또 공부해야하는 부담이 있습니다.

반응형 사이트를 만드는데 있어서 편리함을 갖고자 부트스트랩을 사용했었는데, sass 프레임워크 중 레이아웃을 손쉽게 잡아주는 susy를 알고나니 차라리 html에 직접 클래스를 삽입해서 레이아웃을 조절하는 부트스트랩보다는 css 내에서 컨트롤할 수 있는 susy쪽이 낫다는 생각이 들었습니다. breakpoint와 함께쓰면 반응형으로 만들기 편리하다고는 합니다만, 또 공부해야할 것들이 늘어나니, 그냥 한번 써봤던 compass와 susy를 곁들여서 만들었습니다.


이렇게 만들고 나니 여기저기 부족하고 눈에 걸리는 부분들도 많이 생기지만, 만족할때까지 붙잡고 늘어지면 평생 끝나지 않을것 같아서 일단 여기서 1차적으로 마무리 했습니다. 사용하는데 편리하도록 몇가지 기능들도 추가할 예정이긴한데, 확실히 이미지 로딩이 많아지면서 속도가 쳐지는 부분들도 있네요. 최적화에 대한 고민도 같이 해봐야할 것 같다는 생각이 듭니다.

여러모로 공부할게 많네요 ‘ㅁ’

우분투

최근 우분투에서 sudo 명령어를 입력하다보면 간혹 저렇게 unable to resolve host ubuntu 라는 메세지가 뜹니다. 왜 그런걸까 이유를 모르다가 찜찜해서 검색해보니 제가 최근에 HP sleekbook 15pc 어쩌고 뭐 이런 긴 이름으로 PC 이름이 설정되어있길래  간단하게 ubuntu로 바꿔놨더니 문제가 발생하는 거였습니다. 실행은 됩니다만, 매번 저런 메세지를 본다는게 좀 껄끄럽죠.

문제는 PC 이름을 바꿔줄때 명시해줘야할 부분이 아래의 두 군데라는 것입니다.

  • /etc/hostname
  • /etc/hosts

현재 상황에서 hostname은 제가 이미 ubuntu로 바꿔놓은 상태이기 때문에, hosts 부분만 바꿔주면 됩니다. 결국 현재 상황을 보면, 호스트 이름은 바뀌었는데, 호스트가 등록되어있지 않으니 에러 메세지가 자꾸 나왔던 셈입니다.

sudo nano /etc/hosts 명령어로 nano 편집기로 들어가서 내용을 살펴보니, 127.0.1.1 부분에 아직 바뀌지 않은 HP sleekbook 15 어쩌고 하는 옛날 이름으로 지정되어있길래 아래와 같이 ubuntu로 수정해주었습니다.

파일을 저장해주고 나서  아래 명령어를 입력해서 서비스를 재시작 시켜주면 완료됩니다.

본 내용은 http://zzaps.tistory.com/283 의 포스팅을 참고하였습니다.

 HTTPS 보안 프로토콜로 바꾸고 나니 이래저래 네이버와 충돌이 많습니다.

네이버 블로그

일단 네이버는 제가 운영하는 블로그에서 발행하는 RSS 피드 조차 인식하지 못합니다. 기존에 이용하던 이웃커넥트 서비스가 갑자기 http에서 https라고 한글자 추가됐는데 정상적인 블로그가 아니라고 퇴짜를 놓습니다.

네이버 웹마스터 도구에 RSS 피드를 제출했는데도, 제출되지 않았다고 뜹니다. 뭐 이건 네이버에서 처리하는데 시일이 좀 걸릴지도 모르니 일주일 정도는 지켜봐야겠죠.

더더욱  불만스러운건 네이버 블로그에 따로 저의 포스팅 업데이트 내용을 올리려고 블로그에 글을 붙여넣으면 제  워드프레스 블로그 링크를 인식하지 못한다는겁니다. 도대체 이게 무슨 이유인가 싶어 이래저래 검색을 해봤죠.

마침 저와 같은 문제를 겪고 계신 분이 있더군요.

이 분은 AlphaSSL을 이용하고 계시는 상황에서 겪는 현상이고, 저는 letsencrypt 인증서를 이용하는 상황이라 인증서는 다르지만, 일단 네이버에서 SSL 보안 인증된 사이트들에 대해서 외면하고 있다는 것이 좀 황당합니다. 허술하면 받아주고, 깐깐하면 돌려보내는게 말이 되나 싶기도 하고…

여튼 다행히도 위의 분이 해결책도 찾아서 남겨주셨습니다.

다행히도 이 포스팅에서 소개해주신 인증방법으로 교체한 다음에는 네이버 블로그에서도 정상적으로 링크를 인식합니다. 덕분에 골치 썪는 문제를 해결 할 수 있어서 무척 고맙습니다.

다음 주말 쯤 RSS 피드만 정상 적용되는지 살펴보고 기다려보면 대략적인 문제는 해결 될 것 같습니다