기록
eruLabo
블로그 작업노트 12: UI 개선 작업
103 views as of December 17, 2024.
이번 개선작업은 이전에 만든 콜렉션 리스트와 블로그의 이전/다음글을 개선하는데 주 목적을 두었다.
기존에 광고를 달면서 콜렉션 기능을 아래와 같이 추가했었다.
블로그 디자인 리뉴얼 및 광고 적용 완료 | eruLabo - eruLabo
분명히 시작은 광고 달기였는데, 광고의 형태(디자인)이 내 블로그와 너무 맞지않는 형태라 어쩔수없이 며칠동안 이것저것 시도하면서 블로그 디자인을 바꿔보았다. 기존의 블로그는 박스 디자인 형식으로 외곽선에...
https://erulabo.com/189
뭐 콜렉션 자체의 기능은 충분히 한다고 생각했지만, 텍스트로만 이루어진 리스트다보니 직접 클릭해보지 않는한 어떤 글인지 감은 잘 안오긴한다.
이럴경우에 제일 무난한게 카드 리스트로 바꾸는건데, 카드리스트는 조금만 보이는 양이 많아져도 너무 화면 영역을 차지해버린다.
그래서 리스트 느낌나는 카드 레이아웃이 없나해서 찾아보다가 괜찮은 디자인을 발견해서 내 방식으로 아래와 같이 꾸며보았다.
카드 리스트 느낌을 내되 마우스 커서를 가져대대면 이미지 부분이 좀더 확장되는? 느낌의 애니메이션을 적용했다.
생각보다 괜찮은 느낌이라 맘에든다.
그리고 같은 카테고리의 다른글도 이전엔 그냥 버튼으로 이전글/다음글만 보였는데, 이부분도 카드 리스트방식으로 이전글 2개, 다음글 1개를 띄우는 카드 구조로 변경했다.
해당 카드도 애니메이션을 넣어서 커서를 가져다대면 본문내용이 조금 보이게 처리해놨다.
일단 아랫부분이 단순 텍스트에서 이미지를 가진 영역으로 바뀌었기때문에 비슷한 위치에있는 광고를 전부 빼서 페이지 레이아웃을 확장시켰다.
일단 현재 상황에선 꽤나 맘에드는 결과다.
더불어 현재 광고는 본문상단에 1개, 사이드바에 1개, 푸터에 1개로 3개가 포진되는데, 본문상단은 카카오 애드핏을 사용중이라 광고가 로딩안될일이없어서 레이아웃상 문제는없고, 푸터또한 페이지 맨 아래 위치하기때문에 로딩이 안되도 크게 레이아웃상 문제가 없다.
문제는 사이드바인데, 사이드바에 300x600 사이즈 광고를 사용하고있어서 이부분 로딩이 안되면 사이드바가 생각보다 매우 허전해 보인다.
그래서 해당 부분의 광고 로드가 안되던지, 아니면 광고를 사용하지 않는 광고 검열 페이지인 경우 아래와 같이 섬네일이있는 최신글의 카드블록이 보이게 처리해놓았다.
이러면 생각보다 사이드바 레이아웃이 크게 바뀌지않아 비슷한 유저경험을 제공할 수 있을거같다.
아, 그리고 마지막으로 메인 화면에 점보 카드 UI를 추가했다.
가장 최신글에 한해서는 섬네일 내용을 좀 크게 보여주는 느낌으로다가 만들어보고 싶어서 해봤는데, 모바일에선 딱좋은데 피시에선 너무큰거같아서 좀더 고민을 해봐야하는 부분같다.
일단 생각으로는 피시에선 점보카드를 2개해놓고 가로로 나열할까 생각하는데, CSS에서 그게 될란지는 모르겠다.
이번 작업노트는 여기까지, 끝!
#블로그 #콜렉션 #UI
eruLabo 콜렉션의 다른 글
기록 카테고리의 다른 글
꿀팁 잘 얻어갑니다~
지금은 사이드바에 광고가 안떠도 보여줄 포스트카드가 있으니까 광고 체크 코드도 2초 -> 0.3초로 줄이긴했죠.