노멀로그 반응형 스킨 적용, 예상 질문 10가지와 답변.

백년 만에 뵙는 느낌입니다. 반갑습니다. 지난주 수요일에 글을 올린 뒤 본의 아니게 잠수를 좀 하게 되었습니다. 잠수함을 타고 '해저 3만리'까지 내려가는 동안 스킨을 좀 수정했는데, 그것에 대한 예상 질문과 답변을 아래에 적어두도록 하겠습니다.

 

 

Q1. 왜 글은 안 올리고 스킨을 변경하고 있었는가?

 

역시나 치과치료 얘기를 또 해야 할 것 같은데, 치과치료를 받느라 고기를 못 먹으니 좀 우울해졌습니다. 저는 고기를 먹어야 힘이 솟는 육식남인데, 여하튼 그런 기분으로 글을 썼다간 독자 분들까지 우울하게 만들 것 같아 그냥 잠시 쉬며 스킨을 변경하고 있었습니다. 그 결과 스킨이 좀 우울한 모양으로 만들어지는 안타까운 일이 벌어지고 말았는데, 제가 뭘 더 어떻게 할 수 있는 일이 없어서 솔직히 좀 더 우울해졌습니다.

 

 

Q2. 예전 블로그 디자인에서 뻥튀기만 된 느낌이다. 내가 오해한 건가?

 

오해가 아니라, 사실입니다. 다양한 디자인을 시도하다가, 결국 가장 익숙한 디자인으로 돌아왔습니다. 이 스킨 바로 직전의 스킨은 열심히는 만들었는데, 아무래도 정이 안 가 이렇게 교체하게 되었습니다. 그 스킨으로 된 블로그에 들어오면 꼭 남의 공간에 들어온 느낌이라….

 

저도 여러 효과들을 적용해 휙휙 튀어나오고 스르륵 사라지게 만드는 거 싫어하진 않는데, 그럴 경우 대개 로딩이 느려지고 사용자가 받아야 할 데이터도 좀 더 많아집니다. 때문에 할 수 있는 선에서 가능한 단순하게 만들려고 했습니다.

 

 

Q3. 폰트가 엄청 커진 것 같다. 폰트는 왜 이렇게 크게 한 건가?

 

노안이 찾아오신 솔로부대 장성급 대원 분들을 생각해서 크게 했다는 건 훼이크고, 어쩌다 보니 그렇게 되었습니다. 참 많이 고민했으며 지금도 고민하고 있는 부분인데, '맑은고딕'이나 '나눔고딕'을 사용할 경우 저 정도 폰트 이하에서는 '진하게' 한 글자들이 뭉개져 보입니다. 그럼 '굴림'이나 '돋움'을 사용해야 하는데, 그럴 경우 또 블로그 본문 폭이 넓은 까닭에 데스크탑에서는 고개까지 돌려가며 읽어야 합니다.

 

아! 지금 생각해 보니 1024px 이상에서는 '굴림'에 '17px', 글자높이 27px 정도로 해도 될 것 같다는 생각이 듭니다. 그 이하 해상도인 모바일로 볼 때에는 '맑음, 또는 나눔고딕'에 '17px', 글자높이 28px로 해도 될 것 같고 말입니다. 독자 분들 생각은 어떠신지 궁금합니다. 혹 자주 이용하시는 커뮤니티나 사이트 중 '여긴 진짜 가독성 킹왕짱.'이라고 생각하시는 곳 있으시면 제게 살짝 알려주시길 부탁드립니다. 그리고 현재 사용하시는 기기로 노멀로그를 볼 때 글 읽기가 어떠신지도 댓글로 좀 남겨주셨으면 합니다. 부탁드립니다.

 

 

Q4. 익스플로러8 쓰고 있는데 디자인이 좀 이상하다. 수정할 예정인가?

 

사실 처음엔 익스플로러6, 7, 8을 고려하지 않고 만들다가, 아직 그 버전의 브라우저를 사용하시는 독자 분들이 계셔서 최대한 '덜 깨지도록' 만들었습니다. 익스플로러8 이하 버전으로 보신다면 상단바의 메뉴가 나타나지 않고 깨지기도 할 텐데, 그것까지는 해결할 방법이 없었습니다. 죄송하지만 그 부분은 사이드바에 있는 메뉴를 사용해 주셔야 할 것 같습니다.

 

그나저나 익스플로러8 이하 버전을 사용하시면 웹서핑 자체가 답답하실 텐데, 개인적인 철학이나 신념으로 인해 고집하고 계신 게 아니라면 이 기회에 브라우저 업데이트를 하시길 권합니다. 친절한 남자답게 아래에 링크해 두도록 하겠습니다.

 

[익스플로러 11 업데이트 링크 ▼]

http://windows.microsoft.com/ko-kr/internet-explorer/download-ie

 

[구글 크롬 업데이트 링크 ▼]

https://www.google.com/intl/ko/chrome/browser/features.html

 

저는 글 작성은 익스플로러11로, 웹서핑은 크롬으로 하고 있습니다. 글 작성도 크롬으로 하고 싶은데, 크롬에서는 글자를 쓸 때마다 밑줄이 생겨서 부담스럽습니다. 혹시 이거 없애는 방법 아시는 분은 한 수 가르쳐 주시길 부탁드립니다.

 

 

Q5. 모바일에서 글이나 사진 확대가 안 된다. 뭔가 잘못된 거 아닌가?

 

그러니까 그게, 확대가 되도록 만들려면 제가 짧은 문장 하나만 지우면 됩니다. 그런데 그럴 경우, 계속 따라다니는 상단바가 같이 확대되는 문제가 발생합니다. 다른 제작자 분이 만드신 '반응형 기반의 고정된 상단바를 사용하는 스킨'을 전부 살펴봤는데, 거기서도 같은 문제가 발생하고 있었습니다.

 

더불어 모바일에서 댓글을 쓰려고 할 경우, 상단바가 갑자기 사라지거나 어중간하게 고정되어 버리는 문제도 있습니다. 노멀로그는 글 위주의 블로그라 확대해서 볼 일이 거의 없기에, 일단 이대로 둘 예정입니다. 상단바를 고정시켜 두면서 본문만 확대할 수 있는 방법을 찾으면 바로 수정하도록 하겠습니다.

 

 

Q6. 어디가 어떻게 바뀐 것인가?

 

데스크탑 사용 중이시면 브라우저 사이즈를 한 번 줄여 보시기 바랍니다. 브라우저의 크기에 맞춰 내부의 글도 같이 줄어드는 걸 보실 수 있으실 겁니다. 이전 스킨의 경우 "회사에서 몰래 볼 때 크기를 줄이면, 좌우로도 스크롤 해가며 읽어야 해서 불편하다."는 의견이 있었습니다. 그래서 이제 마음 놓고 줄여서 보시라고 반응형으로 바꾸었습니다.

 

또, 상단바가 계속 따라다니는 까닭에 언제든 다른 메뉴로 이동하실 수 있습니다. 전에는 글을 읽다가 한참 올라가서 찾아 클릭해야 했는데, 이제는 보시던 창에서 그대로 바꾸실 수 있습니다. 모바일에서도 우측 상단의 버튼을 누르시면 메뉴가 펼쳐집니다.

 

댓글을 작성하실 때 입력창을 눌러보시면, 입력창 테두리에 파란 불이 들어옵니다. 전 개인적으로 이거 완전 예뻐서 마음에 드는데, 독자 분들은 어떻게 생각하실지 모르겠습니다. 그리고 댓글 역시 '답글'의 경우는 댓글 박스 안에 들어가도록 만들었습니다. 어느 댓글에 달린 답글인지 구별하기가, 전보다 편하실 것입니다.

 

그 외에 검색창을 '구글검색'에서 '내부검색'으로 바꿨습니다. 한 눈에 더 많은 글을 찾으실 수 있도록 바꾼 것인데, 지금 검색해 보니 '구글검색'이 더 나은 것 같다는 생각이 들기도 합니다. 구글검색은 내부의 글까지도 일부 보여줬는데, 이건 제목만 보여주는 까닭에 무슨 내용인지를 클릭해서 봐야 하는 것 같습니다. 이 부분에 대해선 의견(이렇게 둘 것인지, 아니면 구글검색으로 다시 바꿀 것인지) 주시면 반영해서 바꾸도록 하겠습니다. 키워드에 대한 댓글도 검색이 가능하게 만들 수 있긴 한데, 딱히 필요 없으시다면 그냥 두도록 하겠습니다.

 

 

Q7. 부트스트랩을 사용한 것 같은데 부트스트랩을 사용한 특별한 이유가 있는가?

 

다양한 기능들이 많은 것 같아서 부트스트랩을 선택했는데, 막상 만들고 보니 적용할 만한 것이 별로 없는 것 같습니다. 이럴 줄 알았으면 그냥 마크다운 문법이나 좀 익혀둘 걸 잘못했다는 생각도 듭니다. 제가 사용하려고 했던 기능은

 

[교회 오빠 VS 절 오빠, 사람들의 선택은?]

 

할렐루야

80% Complete (warning)

마하반야

60% Complete

 

위와 같은 기능, 또는

 

좋은 동생 많아지면 거지꼴을 못 면한다.

노멀로그 매뉴얼 중에서

 

위와 같은 기능, 또는

 

"오빤 내가 왜 화났는지 몰라?"

 

위와 같은 기능들인데, 저걸 먼저 작성한 다음에 HTML로 수정하는 게 더 어려운 것 같습니다. 티스토리 에디터로 글을 작성하고 나면 티스토리 자체적으로 붙는 태그들이 있기 때문에…. 그래서 다른 방법을 찾을지, 아니면 원하는 스타일 시트를 설정해둔 뒤 글을 쓸 때마다 적용을 할지, 아니면 마크다운으로 글 작성을 시작할지, 고민 중입니다.

 

 

Q8. 티스토리에서 respond.js 못 쓰는 걸로 아는데 어떻게 해결했는가?

 

안 그래도 그걸 몰라서 한 30시간쯤 헤맨 것 같습니다. 외국 사이트를 보면 전부 다 무리 없이 된다고 하는데, 아무리 해도 안 되는 겁니다. 별 방법을 다 써보던 중, 티스토리에서는 크로스 도메인 문제가 생겨서 적용이 안 된다는 글을 읽게 되었습니다. 전 제가 잘못한 줄 알고 스킨을 세 번이나 처음부터 다시 만들었는데 말입니다!

 

respond.js가 안 될 경우, 해결책은 두 가지가 있는 걸로 알고 있습니다. 하나는 그 내용을 전부 한 파일에 몰아넣어 버리는 거고, 다른 하나는 구버전 브라우저를 위한 css를 따로 만들어 적용하는 겁니다. 전자는 로딩속도가 어마어마하게 늦어질 수 있다고 해서 전 후자를 택했습니다. 그래서 익스플로러8 이하 버전에서는 반응형으로 동작하지 않고 고정되어 있습니다. 레이아웃 자체도 '모바일 우선'이 아니라 '데스크탑 우선'으로 만든 뒤, 모바일에서도 잘 보이도록 수정하였습니다. 익스플로러 구버전들이 제작자들의 수명을 단축시키는 것 같습니다.

 

 

Q9. 스킨 수정이 거의 불가능 한 것처럼 말하는 것 같은데, 그럼 건의해도 바꿀 수 있는 게 없는 것 아닌가?

 

아픈 곳을 파고드는 예리한 질문입니다. 그래도 어느 정도는 수정이 가능하지 않을까 생각합니다. 지금 카톡과 댓글로 독자 분들께서 의견을 주시는 중인데, 첫 화면에서 하나의 글이 아닌 여러 개의 목록이 떴으면 좋겠다고 하셔서 티에디션을 적용해 볼 생각입니다. 이건 이미 적용한 분들의 사례가 있으니, 열심히 들여다보며 따라해 보겠습니다.

 

그리고 사용하시는 브라우저나 모바일에서 블로그가 깨져 보일 경우, 말씀해 주시면 수정하도록 하겠습니다. 알려주실 때는 '사용하시는 브라우저명과 버전, 또는 모바일 기기 이름'을 알려주시면 됩니다. 다양한 기기에서 어떻게 보이는지를 이미 체크하긴 했지만, 혹 그래도 빠진 기기가 있을 수 있으니 말씀해 주시길 부탁드립니다. 폰트 역시 앞서 말씀드린 것처럼 가독성이 더 좋은 쪽으로 바꿀 생각이 있습니다. 그러니 이 부분에 대해서도 의견을 꼭 좀 주시길 부탁드립니다.

 

 

Q10. 내 사연 언제 매뉴얼로 발행해 줄 것인가?

 

지금 읽으러 갑니다.

 

 

오래 기다리시게 만들어 죄송합니다. 내일(화요일)부터는 이전처럼 매뉴얼 정상발행 하도록 하겠습니다. 그럼 다들 즐거운 월요일 보내시길!

 

 

 

 

 

카카오스토리에서 받아보는 노멀로그 새 글! "여기"를 눌러주세요.

 새 글을 편하게 받아보실 수 있습니다. 

 

 

▼ 공감 버튼 클릭은 제게 큰 힘이 됩니다. 감사합니다. ^^