1. Ezilog 커스텀 블로그를 시작하며
안녕하세요. 꿈을 키워나가고 있는 프론트엔드 개발자입니다.
기획부터 디자인, 개발, 그리고 운영까지 모든 과정을 직접 만들어가고 있는 개인 블로그입니다.
티스토리나 Velog 같은 기존 플랫폼을 두고 개인 블로그를 만들게 된 이유는 여러 가지가 있지만, 가장 큰 이유들을 정리해 보면 명확합니다. 우선 블로그의 디자인과 기능을 내가 원하는 대로 자유롭게 커스터마이징하고 싶었고, 하나의 서비스처럼 개인 도메인을 가진 공간을 만들어보고 싶다는 욕심이 생겼습니다. 단순히 글을 기록하는 공간을 넘어, 제 손으로 직접 설계하고 발전시킬 수 있는 환경을 원했습니다.
또한 개인 블로그를 직접 구축하는 과정 자체가 저에게는 하나의 공부이자 성장의 기회였습니다. 실제 서비스를 만든다는 관점에서 기술적인 선택을 고민하고, 문제를 해결해 나가며 배우는 경험은 어떤 플랫폼을 사용하는 것보다 값지다고 느꼈습니다.
블로그 이름은 왜 Ezilog인가요? 블로그 이름을 정하면서 가장 중요하게 생각했던 것은 다른 사이트와 겹치지 않으면서도, 블로그의 성격이 자연스럽게 드러나는 이름이었습니다. 여러 고민 끝에 easy와 *blog(log)*를 조합해 Ezilog라는 이름을 선택하게 되었습니다.
‘easy’에는 부담 없이 접근할 수 있는 글을 쓰고 싶다는 의미를 담았고, ‘log’에는 배운 것과 고민한 것들을 기록해 나가겠다는 의도를 담았습니다. 나중에 제 글을 통해 누군가가 공부할 수 있고, 필요할 때 언제든 쉽게 찾아올 수 있는 공간이 되기를 바라는 마음도 함께 담겨 있습니다. Ezilog는 그렇게, 저의 기록과 성장을 차곡차곡 쌓아가는 공간이 될 예정입니다.
기술 아티클이나 회고를 작성할 때 일기 쓰듯이 작성하고 있어서 존댓말이 아닌 편한 말투인점 양해 부탁드립니다!!
2. 블로그 둘러보기
사실 성공한 UI는 설명이 필요없어야 잘 만들어졌다고 하죠? 제 바람으론 필요가 없었으면 좋겠지만, 보기 좋게 한번 정리해보겠습니다. 글을 작성하는 지금은 스크롤, 각종 테그들을 테스트하는 포스트들만 많이 만들어두었는데, 운영 시점엔 깔끔히 없어질 예정입니다.
“어떻게 만들면 깔끔한 디자인을 만들 수 있을까?”를 고민하면서 정말 많은 블로그 디자인들을 참고했고, “내가 개발하기 편한 방법보단 어떻게 만들면 사용자들이 찾아보고 싶은 글을 쾌적하게 사용할 수 있을까?”를 생각하며 설계했습니다.
1. Header 메뉴
제목이나 이모지로도 기능이 짐작되도록 만들었습니다. 블로그에서 가장 깊게 고민한 부분은 UX였고, 성능 측면에서도 신경썼지만 무엇보다 글은 잘썼는데, 글을 못찾으면 어떻게하지? 라는 질문을 해결해야했습니다. 그래서 제 블로그는 3가지 방법으로 글을 검색해보실 수 있습니다.
우선 스키마 설계상 하나의 포스트는 하나의 제목과 하나의 카테고리를 갖고, 여러 테그를 갖고 있습니다.
- 카테고리 바를 클릭하면 카테고리 메뉴가 나오고 카테고리는 2-depth로 구현되어있습니다. 부모 카테고리는 하위 자식 카테고리의 모든 포스트를 갖고있습니다.
- 분류가 아닌 제목으로 포스트를 찾고 싶으시면 검색바에 검색하시면 됩니다. CSR로 구현되어 페이지 새로고침 없이 실시간 입력에 따라 검색영역에 반영됩니다.
- Tags메뉴를 클릭하시면 테그가 포함한 포스트의 수와 함께 전체 테그가 표시됩니다.
검색은 위의 이미지처럼 수행가능하며, 네비게이션 메뉴로 ‘Home’이나 ‘로고’를 클릭하면 블로그 홈으로, ‘Archive’를 클릭하면 전체 포스트가 표시됩니다. ‘Latest’ 는 제가 작성한 최신 포스트를 순서대로 보실 수 있습니다. 가장 오른쪽의 태양, 달 모양 이모지를 클릭하시면 다크모드로 전환하실 수 있습니다.
2. 포스트 상세 페이지
위 이미지는 포스트 상세 페이지입니다. 현재 레이아웃이 아직 만족스럽지 않아, 전반적인 구조를 개선하는 방향으로 수정을 고려하고 있습니다.
상단 영역에는 포스트의 제목과 해당 글과 연결된 태그들이 표시됩니다. 태그를 클릭하면 해당 태그로 필터링된 글 목록 페이지로 이동할 수 있으며, 홈으로 이동하는 버튼과 글 작성일도 함께 노출됩니다. 블로그 내부에서는 제목을 h1 태그로 사용하고, 본문 내 가장 큰 제목은 h2, h2 내부의 소주제는 h3 태그로 구조화하고 있습니다.
이러한 제목 구조는 사이드바에 반영되어, 현재 읽고 있는 위치에 해당하는 제목을 강조 표시해 줍니다. 또한 사이드바에서 원하는 주제를 클릭하면 본문의 해당 위치로 바로 이동할 수 있도록 구현했습니다.
글을 읽는 데 편의를 주기 위한 기능도 추가했습니다. 하단 메뉴의 왼쪽 아이콘을 클릭하면 현재 보고 있는 글의 URL을 복사할 수 있으며, 화살표 아이콘을 통해 글의 최상단으로 빠르게 이동할 수 있습니다. 댓글 아이콘은 페이지 하단의 댓글 영역으로 이동시키고, 가장 오른쪽의 달 모양 아이콘을 통해 웹 테마를 변경할 수 있도록 구성했습니다.
글의 하단 메뉴입니다. 해당 글을 모두 읽으신 방문자분께 이전글과 다음글을 추천하는 라우팅 기능을 제공해주고, 최하단에는 댓글 영역이 존재하게 구현했습니다. github로그인을 하시면 댓글을 남기실 수 있는데 댓글을 남겨주시면 최대한 답해보도록 노력하겠습니다.
읽어주셔서 감사합니다!!