에루샤
erusya
Back-end Developer
Web Geek/Otaku
에루샤 프로필 이미지
로그
에루라보

블로그 작업노트 25: 모바일 사용성 개선 및 추가 기능

오랜만의 작업노트이다.
요즘 로스트 소드를 재미있게 플레이하면서 게임에 대한 공략이나 내 클리어 경험을 공유하는걸로 여러분들이 찾아와주고 블로그도 좀 활성화 되다보니 사실 대놓고 이제 레이아웃을 크게 바꾼다던지 그런건 좀 하기가 힘들어졌다.

그도그럴게 예전엔 어차피 들어오는 사람이 한두자리수였으니 내가 홈피 공사를해도 피해볼 사람이 현실적으로 적어서 레이아웃도 막 라이브 상태에서 뜯어고치고 그랬는데, 이제는 하루에 세자리 방문수에 구글 애널리틱스 실시간 조회에서도 많은 분들이 이용해주시고 있어서 라이브에서 고치는건 민폐라고 생각하기 때문이다.

그래서 바꿀게 있으면 미리 적어놓다가 추가 페이지 작업할때 테스트 충분히 하고 라이브에 적용하는 식으로 처리를 하고 있다.

오늘은 그 과정중에 모바일 사용성을 좀더 낮게하며 애드센스 관련 사이즈 문제도 고쳐보는 작업을 진행했다.


모바일 상단 헤더 레이아웃 변경
모바일에서 광고를 기존에 200px로 잡고 사용하고있었는데, 이 사이즈 광고가 별로없는지 잘 뜨지않는 문제가 있었다.
그래서 광고 높이를 250px로 바꾸니 광고는 더 잘뜨는데, 이러니까 페이지에 딱 들어왔을때 본문내용이 아래로 너무 밀린다는 문제가 있었다.

그래서 모바일의 경우 상단 헤더 박스를 줄이는대신 스크롤이 발생해도 상단에 딱 붙도록 재설계 했다.

본문 이미지첫 방문시 헤더와 광고 비율
본문 이미지스크롤 내리면서 글 볼때 헤더 구도

실질적으로 광고 높이가 50px 늘어났고 기존에 200px였던 헤더를 72px까지 줄였으니 전체적인 높이는 약 80px 정도 더 줄어든 느낌이다.
한눈에 봤을때도 덜 답답해보이고 광고도 더 잘뜨니 괜찮은것 같다.


추가 기능 페이지 작업

그리고 그간 블로그에 뭐 더 붙일거 없나 알아보다가 내가 이용하는 여러 툴사이트들의 기능을 내가 간단히 만들어서 쓰면 좋겠다 싶어서 기존의 짤 편집기와 더불어 BASE64 해독기, JSON 뷰어 기능을 만들어 사이트에 추가해뒀다.

본문 이미지

해당 페이지는 헤더의 메뉴를 눌러서 접근할수있고, 페이지 타이틀의 메뉴를 이용해서도 접근할 수 있다.
특히 유틸리티 페이지가 많아지면서 이를 직관적으로 보게하고싶은 생각이들었고 어떤 메뉴구조를 사용할까 고민하다가 아래처럼 작동하는 타이틀 메뉴를 구성했다.


겁나 사소한 UI 인터렉션이지만 이런거 만들고 노는게 개인 웹사이트의 재미가 아닐까 싶다.


블로그 근황

본문 이미지구글 애널리틱스 2월 통계

이 글을 쓰는 지금에도 많은 분들이 찾아와 주시고, 애널리틱스도 이제 이정도 방문자는 이상징후라고 찍어주지 않을정도로 순항중이다.

내가 뭐 엄청난 수익형 사이트를 바라는것도 아니었고, 그냥 내가 일하다가, 취미활동하다가 뭔가를 기록하고싶고 남기고싶을때 나만의 '장소'가 있었으면 좋겠다로 시작한 사이트로 시작한거라서 내 글을 봐주시는 분들이 있다는거 자체가 너무 감사할 따름이다.

물론 예전엔 AWS IP 대여비용이 없어서 정말 한달에 5천원도 안되는돈으로 이런 서비스를 운용할 수 있었는데, 비용정책 변경으로 한달에 만원 2만원이 나가는 입장에서 서버 유지비라도 좀 벌렸으면 좋겠다라는 마인드로 광고를 달긴했는데, 이런 비용문제가 없다라면 지금이라도 들어내고 싶은게 광고다.

아직 현재 방문자수에대한 트래픽으로는 크게 문제가 없긴한데 말이다.

그래도 역시 글은 누가 읽어줘야 그 빛을 발휘한다고 생각하기 때문에 사이트에 들어와주신 분들에 대해서는 항상 감사할따름이고, 댓글까지 남겨주시는 분들에겐 너무 고마운 마음까지 든다!
앞으로도 블로그 생활이 잘 이어졌으면 좋겠다.

#블로그
0 개의 댓글
에루라보 콜렉션의 다른 글
×