내 블로그 겸 포트폴리오를 직접 디자인하며 주의한 것, 알게된 것

블로그의 디자인을 대폭 수정했다. 수정하기 전엔 이렇게 생겼었다.

디자인에 뭔가 부족한 게 있는 것같고, 애매해서 생각해보니 블로그 대문(첫 화면)에 글씨가 너무 많았다.
문제는 최근 작성한 글 목록 부분이었다.

어떻게 수정하지 고민을 많이 했고 awwward 수상작들과 여러 사이트들을 보면서 영감을 (ㅋㅋㅋ) 느끼려고 애썼다.

그러고보니 내가 원하는 페이지는 노션으로 만든 듯한 깔끔한 페이지였다. 그래서 뚝딱뚝딱 수정을 해보았고.. 바뀐 모습은 이렇다.

디자인하며 중점적으로 생각한 부분

데스크탑과 모바일로 접속했을 때 느낌이 너무 다르지 않게 하기

나는 웹에서 좌우 여백을 많이 주는 페이지를 좋아한다. 그렇게 하려면 웹-앱의 생김새를 비슷하게 해야했다. 둘의 간격이 커지면 미디어쿼리로 처리하는 부분, 신경써야하는 부분이 늘어나 개발할 때 힘들다.

이러려면 웹에서 봤을 때도 좌우 패딩을 안 주고, 세로로 봤을 때 좌우 여백이 없이 일자로 깔끔하게 내려가는 것이 중요했다. 또 모바일에서 볼 때 폰트가 너무 작으면 이 느낌이 덜 했다. 그래서 max-width로 데스크탑에서 봤을 때에도 모바일과 봤을때 차이가 없도록 하고, 앱에서는 거슬릴 지 않는 정도의 좌우 마진만 주었다.

간결하고 깔끔하게

그래서 메인 배경 색을 하얀색으로 잡았다. 원래는 메인의 Recent Posts 섹션에서 카테고리 별 최근글을 보여주었다. 근데 그렇게 하다보니 카테고리명도 나와야하고 또 내가 한동안 쓰지 않은 카테고리의 글이 나오길래 과감하게 카테고리를 지우고 모든 카테고리의 최근글을 표시하도록 했다.

블로그를 직접 디자인해 만들면서 최근 글 영역의 디자인을 가장 많이 고민했다. 카드 형식으로 할지, 글의 도입부를 살짝 보여줄지, 가벼운 요약(description)을 보여줄지 등.. 근데 첫 화면에 글이 너무 많으면 처음 내 블로그에 들어온 사람이 부담을 느낄 것 같아 제목만 띄우기로 했다.

테마는 거미 / 남색

사용자가 보게 될 첫 화면에 책 저지대의 구절을 넣고 싶었다. 빼고 기술적인 내용을 적을까 생각도 했지만, '지금까지는' 내가 추구하는 삶을 잘 보여주는 글귀라 남겨두었다.