블로그 가독성 개선: 네오브루탈리즘(Neo-brutalism) 테마 적용

기존의 블로그 디자인은 깔끔하긴 했지만, 기술적인 내용을 길게 적다 보면 다소 가독성이 떨어지고 밋밋하다는 느낌을 지울 수가 없었습니다. 그래서 이번에 블로그 테마를 완전히 갈아엎었습니다.

블로그에도 네오브루탈리즘(Neo-brutalism) 을 적용했습니다.

네오브루탈리즘 테마의 주요 변경 사항

강렬한 비주얼과 확고한 대비를 통해 글을 읽는 재미와 가독성을 동시에 끌어올리는 데 집중했습니다.

1. 강렬한 8px 블랙 보더와 그림자 블로그 포스트 전체를 감싸는 컨테이너에 8px 두께의 굵은 검은색 테두리를 두르고, 블러(Blur)가 전혀 들어가지 않은 딱딱한 형태의 그림자(Hard shadow)를 배치했습니다. 화면 한가운데 거대한 카드가 놓여 있는 듯한 ‘쌈박한’ 첫인상을 연출했습니다.

2. 코드 및 기술 용어 강조 (Inline Code) 기존에는 본문 중간에 섞여 있는 git clone, .env 같은 인라인 코드가 눈에 잘 띄지 않았습니다. 이제는 인라인 코드가 검은색 배경에 흰색 글씨, 그리고 각진 테두리를 가지도록 스타일을 변경하여 기술적인 내용이 한눈에 들어오도록 개선했습니다.

3. 인터랙티브 요소와 옐로우 액센트 모든 링크와 강조 표시에 네오브루탈리즘 특유의 원색(Yellow) 액센트를 주었습니다. 특히 링크나 버튼에 마우스를 올리면 입체적인 그림자가 사라지면서 실제로 버튼이 꾹 눌리는 듯한 재미있는 효과를 추가했습니다. 직접 스튜디오진 메인페이지 링크를 클릭해 보세요!

4. 형광펜 강조 표시 (<mark>) 마크다운(Markdown) 문서 내에서 특정 문장을 형광펜을 그은 것처럼 강조하고 싶을 때 사용할 수 있도록 <mark> 태그 스타일을 추가했습니다. 바로 이렇게 말이죠!

5. 넓고 시원한 레이아웃 기존 Tailwind Typography의 prose 클래스가 강제하던 65ch의 너비 제한을 과감히 풀었습니다. 본문 박스가 브라우저 화면의 80% 너비를 꽉 채우도록 넓혀서, 리스트나 코드가 많은 기술 블로그에 적합한 시원시원한 레이아웃을 구성했습니다.

디자인은 덜어내는 것이 아니라 강조하는 것

때로는 미니멀리즘보다 이렇게 강렬하고 개성 있는 디자인이 콘텐츠에 대한 몰입도를 높여준다고 생각합니다. 굵은 테두리와 쨍한 색감이 글을 돋보이게 만들어 주니, 앞으로 더 즐겁게 블로그 글을 작성할 수 있을 것 같네요!

@theme {
  /* 네오 브루탈리즘 핵심: 딱딱한 그림자 커스텀 */
  --shadow-neo: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  --shadow-neo-sm: 2px 2px 0px 0px rgba(0, 0, 0, 1);
  --shadow-neo-lg: 8px 8px 0px 0px rgba(0, 0, 0, 1);

  /* 굵은 테두리 두께 커스텀 */
  --border-width-3: 3px;
  --border-width-8: 8px;
}

@layer components {
  /* Blog Article Prose Customization for Neo-brutalism */
  .prose-neo {
    @apply max-w-none prose-headings:font-black prose-p:font-medium transition-all;
    
    /* Links (인터랙티브 3D 섀도우) */
    @apply prose-a:text-black prose-a:font-bold prose-a:bg-yellow-300 prose-a:px-1 prose-a:border-2 prose-a:border-black prose-a:shadow-neo-sm hover:prose-a:translate-x-0.5 hover:prose-a:translate-y-0.5 hover:prose-a:shadow-none prose-a:no-underline;
    
    /* Inline code base */
    @apply prose-code:px-1.5 prose-code:py-0.5 prose-code:font-bold prose-code:border prose-code:border-black prose-code:rounded-none;

    /* Blockquote */
    @apply prose-blockquote:bg-blue-600 prose-blockquote:text-white prose-blockquote:border-4 prose-blockquote:border-black prose-blockquote:shadow-neo prose-blockquote:px-6 prose-blockquote:py-4 prose-blockquote:font-bold prose-blockquote:not-italic;

    /* Images & Pre (Code blocks) */
    @apply prose-img:border-4 prose-img:border-black prose-img:shadow-neo prose-img:rounded-none;
    @apply prose-pre:border-4 prose-pre:border-black prose-pre:shadow-neo prose-pre:rounded-none prose-pre:bg-gray-900;
    
    /* Table & Hr */
    @apply prose-table:border-4 prose-table:border-black prose-th:border-b-4 prose-th:border-black prose-td:border-b-2 prose-td:border-black;
    @apply prose-hr:border-t-4 prose-hr:border-black;

    /* Highlight mark tag */
    mark {
      @apply bg-yellow-300 text-black px-1 font-bold rounded-sm border-2 border-black shadow-neo-sm;
    }
  }

  /* Tailwind 기본 백틱 제거 */
  .prose-neo code::before,
  .prose-neo code::after {
    content: none !important;
  }
  
  /* 인라인 코드는 어디서든 검은 배경 + 흰 글씨 유지 */
  .prose-neo :not(pre) > code {
    background-color: black !important;
    color: white !important;
  }
}