Skip to content

[ui] 마크다운 콘텐츠 가독성 및 스타일 시스템 개선 #173

@krsy0411

Description

@krsy0411

현재 문제

마크다운 콘텐츠의 가독성이 낮고, 일관된 스타일 시스템이 부족합니다:

  • 코드 블록의 배경색과 여백이 불충분함
  • 링크 색상이 일관되지 않음 (visited 링크가 보라색으로 변경됨)
  • 요소 간 간격(spacing)이 일관되지 않음
  • 다크 모드 지원이 부족함

해결 목표

CSS 변수 시스템 구축:

  • spacing, code, link 색상을 CSS 변수로 관리
  • 다크 모드 자동 전환 지원

코드 블록 개선:

  • GitHub 스타일 배경색 및 테두리 적용
  • 인라인 코드와 코드 블록 명확히 구분
  • 가독성을 위한 여백 및 패딩 증가

링크 스타일 통일:

  • 모든 링크에 일관된 파란색 적용
  • visited 링크도 동일한 색상 유지

Vertical spacing 시스템:

  • 제목과 콘텐츠 간격 최적화 (proximity principle)
  • 문단 간격 증가 (8px → 16px)
  • line-height 증가 (1.6 → 1.7)

기대 결과

  • 문서 가독성이 크게 향상됩니다
  • GitHub 스타일과 유사한 일관된 디자인이 적용됩니다
  • 다크 모드에서도 자연스럽게 동작합니다
  • 유지보수 가능한 CSS 변수 시스템이 구축됩니다

Metadata

Metadata

Assignees

No one assigned

    Labels

    uiUI 작업 관련

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions