카테고리 없음
티스토리 블로그 디자인하기
티스토리 첫 스킨, ease
벨로그는 모든 게 잘 짜여진 아이폰 같은 느낌이라면, 티스토리는 안드로이드 같습니다. 원한다면 일반적인 홈페이지처럼 만들 수도 있고, 실제로 그렇게 운영 중인 기업형 블로그도 있어요. (삼성전자 반도체 블로그도 티스토리로 만들어졌다고 합니다.) 구글 검색을 통해 들어가게 된 대부분의 티스토리 블로그는 개성적이었고, 개중에는 눈을 뗄 수 없이 화려한 개발자의 블로그도 본 적이 있습니다. 노래도 나오고, 무지개색의 요소들이 찬란히 빛나는..
자유도가 높은 만큼 어떤 형태의 블로그를 제작할까 많은 고민을 했고, 개발 관련 글을 작성하여 대부분의 방문자가 빠르며 정확하게 정보를 얻어가야 하는 만큼 단순하고 직관적인 사용자 경험을 목표로 디자인하게 되었습니다.
ease를 소개합니다.
누구나 이해할 수 있어요
사용자와 상호작용할 수 있는 상단 영역와, 글과 목록이 보이는 하단 영역으로 나누어 블로그가 처음이라도 쉽게 이해할 수 있습니다.
본문에만 집중할 수 있는 디자인
아티클 레벨에서는 헤더를 제외한 모든 정보 요소를 제거하여 오직 본문에만 집중할 수 있어요.
카테고리, 목차와 같은 사용자에게 가장 중요한 정보에만 최소한의 강조색을 사용하여 가독성을 높였습니다.
(몰컴 지원) 다크모드
다크모드 토글 버튼을 사용하면 밝았던 화면이 단숨에 깜깜한 인터페이스로 전환됩니다.
매일 보는 모니터에 눈이 시큰한 평범한 개발자라면 다크모드로 전환해 보세요.
마치 흰 텍스트가 석유 위에서 둥둥 떠다니는 것 같은 다크모드 특유의 이질감을 느낀 적 있으신가요? ease는 구글 머티리얼 디자인에서 권장하는 ◼#121212 색상을 어두운 배경에 적용하여 이질감을 최소화했습니다.
기타 자잘한 변경점들
자랑스럽게 알려드릴 만한 점은 아니지만, 나름 공들인 포인트들에 대해서도 더 알려드릴게요.
누르면 순간이동 목차
벨로그에서는 기본 지원되던 기능이라, 적용하기 위해서 이리저리 알아보다 방법을 찾았습니다. (다른 블로그에도 적용하고 싶다면, Tocbot(Github) 페이지를 참고하세요.)
덕분에 스크롤 없이도 빠르게 정보를 찾을 수 있어요.
공감 대신 좋아요
티스토리에서 기본 제공되는 '공감' 버튼을 조금 더 누르고 싶어지는 '좋아요'로 변경했어요.
그리고 좋아요를 포함한 모든 아이콘 요소는 Google Material Icons를 적용하여 어떤 해상도에서도 선명하게 나타납니다.
쭉쭉 늘어나는 반응형 웹
반응형 설계를 통해 단순하고 직관적인 사용자 인터페이스가 모바일에서도 변함없이 이어집니다.
마치며
블로그 스킨은 처음 만들어보았습니다. 일반적인 웹 디자인 과정과 비슷하면서도, 다른 점이 많았어요.
아직 부족한 점이 많지만, 차차 개선해 나갈 수 있도록 하겠습니다.