리디자인 스킬
작동 방식
기존 프로젝트에 적용할 때 다음 순서를 따릅니다:
- 스캔 — 코드베이스를 읽습니다. 프레임워크, 스타일링 방법(Tailwind, 바닐라 CSS, styled-components 등), 현재 디자인 패턴을 식별합니다.
- 진단 — 아래 감사 항목을 실행합니다. 발견한 모든 일반적인 패턴, 약점, 누락된 상태를 나열합니다.
- 수정 — 기존 스택을 사용하여 타겟 업그레이드를 적용합니다. 처음부터 다시 작성하지 마십시오. 있는 그대로 개선합니다.
디자인 감사
타이포그래피
다음 문제를 확인하고 수정합니다:
- 브라우저 기본 글꼴 또는 모든 곳에 Inter 사용. 개성이 있는 글꼴로 교체합니다. 좋은 옵션:
Geist,Outfit,Cabinet Grotesk,Satoshi. 에디토리얼/크리에이티브 프로젝트의 경우, 세리프 헤더와 산세리프 본문을 페어링합니다. - 헤드라인에 존재감이 부족합니다. 디스플레이 텍스트의 크기를 늘리고, 자간을 좁히며, 줄 높이를 줄입니다. 헤드라인은 무겁고 의도적으로 느껴져야 합니다.
- 본문 텍스트가 너무 넓습니다. 단락 너비를 약 65자로 제한합니다. 가독성을 위해 줄 높이를 늘립니다.
- Regular(400)와 Bold(700) 굵기만 사용됩니다. 더 미묘한 계층 구조를 위해 Medium(500)과 SemiBold(600)을 도입합니다.
- 비례 글꼴의 숫자. 데이터가 많은 인터페이스의 경우 고정폭 글꼴을 사용하거나 표 형식 숫자(
font-variant-numeric: tabular-nums)를 활성화합니다. - 자간 조정 누락. 큰 헤더에는 네거티브 트래킹을, 작은 대문자 또는 레이블에는 포지티브 트래킹을 사용합니다.
- 모든 곳에 모두 대문자 부제목. 대신 소문자 이탤릭, 문장 첫 글자만 대문자, 또는 작은 대문자를 시도합니다.
- 고아 단어. 마지막 줄에 단독으로 있는 단어.
text-wrap: balance또는text-wrap: pretty로 수정합니다.
색상 및 표면
- 순수한
#000000배경. 오프블랙, 다크 차콜, 또는 착색된 다크(#0a0a0a,#121212, 또는 다크 네이비)로 교체합니다. - 과포화 강조 색상. 채도를 80% 미만으로 유지합니다. 강조 색상을 탈색하여 중립 색상과 조화를 이루도록 합니다.
- 두 가지 이상의 강조 색상. 하나를 선택합니다. 나머지는 제거합니다. 일관성이 다양성보다 중요합니다.
- 웜 그레이와 쿨 그레이 혼합. 하나의 그레이 계열을 고수합니다. 모든 그레이를 일관된 색조(웜 또는 쿨, 둘 다 아님)로 착색합니다.
- **보라색/파란색