블로그 개발기 2 (디자인 편)
프론트엔드를 꿈꾸는 세일즈포스 개발자의 블로그 개발기 - 화면 디자인 및 개발
키 포인트
환경을 구축했으니 이제 본격적으로 디자인을 할 시간이다. 프론트엔드 개발자를 지향하는데 디자인을 안 할 수는 없으니 말이다.
이번에 내가 블로그를 개발하면서 가장 중요하게 둔 키포인트는 총 3가지다.
- UI/UX
- 모바일 호환성
- 재활용성
여태 프론트엔드 개발을 해보면서 느낀 개인적으로 가장 중요한 3가지다.
어떻게 이를 달성하기 위해 개발할 건지 브레이크 다운 해보자.
UI/UX
-
포스트 홈페이지
메인 홈페이지를 포스트 목록이 전부 보이는 화면으로 한다.
굳이 추가적인 클릭 없이 즉시 포스트를 최신 순으로 확인할 수 있도록 하여 사용자 경험을 높인다.
-
카드
각 포스트를 카드 형태로 디자인하여 그리드 형식으로 사용자에게 보여준다.
시각적으로 단순 글씨만 적혀있는 목록보다 사용자에게 좋은 인상을 심어준다.
-
태그
홈페이지에 태그 목록을 추가한다.
각 태그를 선택하면 그에 맞는 목록으로 즉시 업데이트되서 사용자가 필요로하는 정보를 빠르게 보여줄 수 있도록 한다.
-
자기소개
개인 블로그로서 개인 이력서 페이지를 작성하여 다른 탭에서 이를 확인할 수 있도록 한다.
모바일 호환성
요즘 지하철, 버스를 타서 주위를 둘러봐라. 모든 사람들이 휴대폰을 보고 있다. 회사도, 집에서도 모두 휴대폰을 보고 있다. 이런 세상에서 모바일의 호환성을 신경쓰지 않는다는 것은 사용자를 신경쓰지 않는다는 것이고 이는 프론트엔드 개발자로서는 실격이나 다름없다고 생각한다. 그래서 최대한 모바일 환경에서도 부드럽고 적절한 화면이 나올 수 있도록 최대한 신경쓰도록 노력했다.
재활용성
항상 프론트엔드 개발을 진행하면서 여기저기서 비슷하게 사용되거나 똑같은 코드가 반복되는 경우가 굉장히 빈번히 발생한다. 나 또한 그런 경험을 많이 했었으며 개발이 다 끝난 후에 컴포넌트를 재활용 했었으면 코드의 길이, 유지 보수 등에 훨씬 도움이 되었을 텐데 라는 생각을 많이 했었다. 그래서 이번에는 개발을 진행함에 있어서 아토믹(Atomic) 디자인 급의 컴포넌트는 아니더라도 컨테이너 컴포넌트 정도로는 만들어 보려고 노력했다.
디자인 레퍼런스
어떻게 개발할 것인지 대략적인 방향을 정했으니 이제 어떻게 디자인 할 것인지에 대해 고민해보자.
현재 화면 상태는 처참하다. 당연히 아무런 스타일링을 하지 않았으니 흔히 말하는 ‘백엔드 개발자가 개발한 프론트엔드 화면’ 의 상태이다.
백엔드 개발자가 개발한 프론트엔드”
저런 화면은 보기 좀 역하니 빠르게 진행해보자.
우선 직접적인 스타일링에 들어가기에 여러 개인 블로그에 대한 레퍼런스를 조사했다. 내가 디자이너도 아니고 이런쪽으로 디자인을 처음부터 짜는 것은 비효율적일 뿐더러 디자이너 분이나 그에 준하는 다른 개발자 분들의 발 끝에도 못따라 갈 것이다. 그러니 최대한 빠르게 개발 가능하면서 깔끔한 디자인으로 하겠다는 목표를 두고 레퍼런스를 조사한 결과 덕업일치 개발자님의 블로그를 발견하였다. 깔끔하고, 색도 다양하지 않으면서 반응형 디자인, 댓글, 검색 기능 등등 다양한 기능이 맛깔나게 어우러진 블로그였다. 나는 우선 시간이 얼마 없으니 중요 기능들만 빠르게 만드는 식으로 키포인트 요소들만 참고해서 개발하기로 했다.
“덕업일치 개발자님의 블로그 메인 화면”
“덕업일치 개발자님의 블로그 포스트 화면”
개인적으로는 정말 마음에 드는 블로그 디자인이었다. 내가 좋아하는 카드 형식의 포스트로 구성되어 있으면서 군더더기 없이 깔끔해보였다. (아님 말고..) 그래서 난 해당 디자인과 비슷하게 개발하기로 마음 먹었다.
“사실상 거의 베꼈지만 말입니다… 덕업일치 개발자님 짱이에요!”
레퍼런스도 확보했겠다 현재 나의 디자인을 확인해보자.
“초기 포스트 화면”
정말 처참하다. 이걸 이제 디자인을 넣는 마법을 부려보자.
개발 시작
“마법을 부린 후”
솔직히 꽤나 오래 걸렸다. 포스트 페이지 디자인만 잡는데 하루 정도 소요했고, 메인 화면, 사이드 메뉴, 헤더 등등 이것저것 하는데 우여곡절이 많았다. 다 기록하고 싶었지만, 개발하는데 급급해서 정작 기록할 사진이나 이런걸 하나도 저장해 놓지 못했다. 그래도 대략적으로 정리해보겠다.
글씨체(네이버의 나눔스퀘어네오)도 추가하고, 여백, 글씨 크기, 아이콘, 태그 호버 등 최대한 깔끔하게 보일 수 있도록 노력했다. 처음에는 글씨체를 추가하지 않고 개발을 진행했었기 때문에 문제가 없다가 글씨체를 추가하니 아무래도 크기나 글씨 색깔 등에 따라 잘 보이지 않는 등 많은 문제가 생겼었다. 특히, 아래 사진과 같이 코드 관련 글을 작성할 때, 색깔과 배경색이 너무 안맞는 경우가 발생해서 다시 일일히 조정해줬다. 물론, 이후에 문제가 발생해서 색상 조정에 대해서도 대대적으로 수정이 이뤄졌다… 이건 다음 편인 “*다크 모드 편”*에서 다루도록 하겠다.
“수정한 후 모습”
가장 간단할 것 같은 포스트 페이지를 끝내고, 메인 화면으로 넘어왔더니 할게 산더미였다. 헤더부터 푸터, 메인 로고부터 태그 메뉴, 카드 컴포넌트 등등 전부 개발하는데 3일 정도 걸린 것 같다. 이걸 이후에 리팩토링하고, 자잘한 디자인 수정하고 하다보니 일주일이 순식간에 사라졌다. 그래도 다 개발하고 나니 나름 뿌듯했다.
“내 메인 화면”
우선 그리드 형태의 메인 포스트 리스트가 잘 동작하는지 확인하기 위해서 같은 포스트를 복사해서 총 3개가 보일 수 있도록 해놨다. 사이드 메뉴도 모바일에서도 동작할 수 있도록 다이나믹하게 제작하였고, 에니메이션도 추가해서 부드럽게 열고 닫을 수 있도록 디자인 했다. 그리고 포스트의 태그들을 감지해서 현존하는 태그들의 목록을 동적으로 받아와서 태그 메뉴에 반영될 수 있도록 개발하였다. 즉, 포스트에 새로운 태그를 추가해서 글을 작성하면 메뉴에도 자동으로 추가되기 때문에, 태그를 추가할 떄 따로 코드를 수정할 필요가 없게 개발하였다.
“블로그 글 쓸 때마다 개발하긴 귀찮잖아..?”
“사이드 메뉴 화면”
로고와 아이콘은 최적화를 위해서 전부 svg 파일로 변환해서 사용하였고, 카드 이미지의 경우에도 public/thumbnails 경로에 svg 혹은 png 파일로 저장하여 활용했다.
마무리
나름 오래 공들여서 개발한 끝에 볼만한 사이트가 된 것 같아서 개인적으로 만족스럽다. 이렇게 해서 개발이 얼추 마무리 됐다고 생각하는 순간… 엄청난 문제점을 발견해버리고 말았다.
기본적으로 페이지가 웹의 다크 모드 여부를 따라가도록 설정이 되어있는데, 내가 이걸 따로 설정을 안해놔서 다크 모드에서는 그냥 개박살나고 있는 모습이다…
다음 편에는 이 다크모드 설정을 적용하면서 전체적인 css 쪽 리펙토링 글인 "블로그 개발기 (다크 모드 편)"으로 찾아오겠다.
댓글