꿈꾸는 개발자, Front-end Developer

Trust that the dots will connect in your future.

#CSS #Dev #EJS #HTML #Hexo #JavaScript #dev #jQuery #smallTalk #번역 #삽질 #신세계 #이론 #정보처리기사

블로그 디자인 변경 :)


늦은 밤.

불을 끄고 모니터 빛에 의지하여 작업을 하다 보면 눈이 부셔 눈이 쉽게 피로해지곤 합니다.

이내 모니터 밝기를 조절해보지만, 피로해진 눈은 쉽게 나아지지 않고 “얼른 감겨줘!”를 연신 외칩니다.

매번 밝기를 조절하는 것도 능사가 아니고 아예 낮춰 지내기도 무리가 있기에,

제 블로그 디자인은 어두운 배경색이었습니다.

Flat Design..? maybe not…

나름 웹페이지 로딩 속도를 고려한다고 이미지를 최대한 줄이고 색 조화와 타이포, 레이아웃만으로 디자인해 본 것입니다.

F..Flat Design…이라고 하더군요. not Fdesign! :P

처음 완성한 날은 “괜찮네!!”라며 세상을 다 가진듯 하였지만, 이런 만족감은 언제나 하루를 넘기지 못합니다.

지금 다시 보니… 그냥 허전하군요. ㅠ.ㅜ


CSS 배운 것들을 써 먹을 겸, 기분 전환도 할 겸, 블로그 디자인을 바꿔보았습니다.

눈이 부시던 것은 방안 불을 켜면 해결된다는 큰 깨달음(?)과

무엇보다 저처럼 어두운 곳에서 화면을 보시는 다른 사용자가 얼마나 많을까? 라는 물음 때문입니다.

대부분의 다른 사용자들은 조명이 밝은 환경에서 웹을 이용할 것이고,

사용 환경이 다른 만큼, 다른 사용자 경험을 하게 될 것입니다.


더군다나 어두운 배경에 디자인할 때는 제약 사항들이 꽤 있습니다.

이미지의 경계가 분명하게 드러나기 때문에 이미지 배경색도 신경 써야 하고,

이는 다른 웹페이지에서 사진을 쉽게 공유해 올 수 없음을 의미합니다.

이와 같은 이유로 배경을 밝게 하기로 하고 다음과 같이 디자인을 변경하였습니다.

좀 더 깔끔해진 것 같기도 합니다.

무엇보다 화면이 밝고 채도가 높은 색감들이 있어서 그런지 ‘환~한’ 느낌이 있네요 :)


2017년 하반기 대세는 M자 탈모 디자인 아니겠습니까?!




덧붙여 몇 가지 블로그 기능이게 전부인을 소개합니다.

상단 메뉴가 고정되었습니다.

스크롤을 내리면 중앙 로고 부분 색깔이 바뀌며, 이를 클릭하면 페이지 가장 윗 부분으로 이동합니다.

아, 모바일에서는 중앙 로고가 보이지 않습니다. 어깨가 너무 좁아요


‘블로그 검색’이 상단 메뉴로 이동하였습니다.

클릭하면 새 창이 열리며 제목, 내용, 태그 검색이 가능합니다.


몇 가지 바꾸지도 않았는데 온 종일을 쏟아부은 작업이었습니다.

개발하다보면 시간이 훌쩍 갑니다.

이것이 매력이기도 하고 때로는 무서운 부분이기도 하더군요.

Anyway,

스크롤을 내렸을 때 색이 바뀌는 등의 효과는 JavaScript를 이용한 것이며, 다음 포스팅에서는 이에 대한 기록을 남겨보려 합니다.

이번 글은 여기까지 입니다.

읽어주셔서 고맙습니다.

:)

#dev