JthCast

경험하고 싶거나 배우고 싶은 기술들을 마음껏 사용하기 위해 만든 개인 블로그

개요

JthCast는 제 이름 정태훈의 이니셜 jth와 보내다의 뜻을 가진 cast를 합쳐 만든 말로, 글과 포트폴리오를 제공하기 위한 개인 블로그 프로젝트입니다. 일반적인 플랫폼에서 제공하는 블로그 서비스 대신 직접 만듦으로써, 사용자에게 원하는 UI와 UX를 제공할 수 있습니다. 또한 특정 기술을 선택 사용하여 더 빠른 속도와 새로운 기능을 선보일 수 있습니다.

JthCast 둘러보기

방식

과한 구성요소들을 모두 배제한 미니멀 디자인으로 데스크톱 환경뿐 아니라 태블릿, 모바일 환경에서도 편하게 사용할 수 있습니다. 미니멀 디자인의 단점인 밋밋함을 포인트 색상과 애니메이션, 캐주얼한 이미지로 풀어내려 노력했습니다. 사용자의 사용 방식을 강압적으로 제어하는 것이 아닌, 넛지효과를 활용하여 자연스럽게 유도하도록 구성하였습니다.

로고

JthCast는 IT에 대한 포스트가 주된 콘텐츠인 블로그입니다. 이에 Code와 Cast의 C, 코드 꺾은 괄호와 방송을 뜻하는 안테나에서 영감을 받아 만들었습니다. 미니멀 디자인을 유지하기 위해 로고 또한 디테일 없이 단순한 심벌로 표현하였으며, 전체적인 디자인과 꼭짓점 부분을 약간 둥글게 만들어 캐주얼함을 더했습니다. 색상은 오렌지색(#F6A54C)과 밝은 남색(#614CF6)으로 브랜드 색상과 통일하였습니다.

구축 환경

  • Typescript
  • React
  • Gatsby.js
  • SCSS

JthCast Github 둘러보기

Gatsby를 선택한 이유

블로그는 글이 노출될 수 있는 환경이 매우 중요합니다. CRA로 처음 블로그를 만들었을 때 SEO에 대한 부분과 초기 로딩 시간, 동적 로딩과 같은 기능을 직접 구현하기에는 너무 많은 작업이 필요함을 깨달았고, 이러한 문제를 쉽게 해결하기 위해 Gatsby와 같은 프레임워크가 있음을 알게 되었습니다.

Gatsby를 활용하여 SEO에 최적화된 정적 사이트를 쉽고 간편하게 만들 수 있었습니다.

다크 모드

모바일에서 어두운 테마를 지원하고, 모바일에서의 웹 사용이 늘어남에 따라 사용자들은 웹에서도 다크 모드를 원하기 시작했습니다. 이러한 요구에 따라 많은 웹 서비스들이 다크 모드를 지원하기 시작했습니다.

국제화

인터넷은 전 세계가 하나로 묶여있습니다. 검색 엔진이 발달함에 따라 다양한 국가에서 유입이 이루어지기도 하며, 하나의 제품을 여러 국가에서 서비스하기도 합니다. 이를 위해 다국어 및 국제화를 지원하는 서비스들이 많아졌습니다.

웹 표준

정보화 사회로 빠르게 발전함에 따라 장애인, 노인, 저시력자 등 정보취약계층의 인터넷 사용률 또한 높아졌습니다. 웹 표준을 지킴으로써 접근성을 높여 이러한 분들이 더 쉽게 웹페이지를 이용할 수 있습니다.