joyeking/redesigned-portfolio

리디자인 스킬

작동 방식

기존 프로젝트에 적용할 때는 다음 순서를 따르세요:

1. 스캔 — 코드베이스를 읽습니다. 프레임워크, 스타일링 방법(Tailwind, 바닐라 CSS, styled-components 등), 현재 디자인 패턴을 식별합니다.
2. 진단 — 아래 감사 항목을 실행합니다. 발견된 모든 일반적인 패턴, 약점, 누락된 상태를 나열합니다.
3. 수정 — 기존 스택을 활용하여 타겟 업그레이드를 적용합니다. 처음부터 다시 작성하지 마세요. 있는 것을 개선하세요.

디자인 감사

타이포그래피

다음 문제를 확인하고 수정하세요:

• 브라우저 기본 글꼴 또는 모든 곳에 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% 미만으로 유지하세요. 강조 색상이 비명을 지르지 않고 중성색과 어우러지도록 채도를 낮추세요.
• 두 개 이상의 강조 색상. 하나를 선택하세요. 나머지는 제거하세요. 일관성이 다양성보다 낫습니다.
• 따뜻한 회색과 차가운 회색 혼합. 하나의 회색 계열을 고수하세요. 모든 회색에 일관된 색조(따뜻함 또는 차가움, 둘 다 아님)를 입히세요.
• 보라색/파랑 "AI 그라데이션" 미학. 이것은 가장 흔한 AI 디자인 지문입니다. 중성 베이스와 하나의 신중하게 선택된 강조 색상으로 교체하세요.
• 일반적인 box-shadow. 그림자를 배경 색조와 일치시키세요. 낮은 불투명도의 순수한 검정 대신 색상 그림자(예: 파란 배경에 진한 파란 그림자)를 사용하세요.
• 텍스처가 전혀 없는 플랫 디자인. 배경에 미세한 노이즈, 그레인, 또는 마이크로 패턴을 추가하세요. 순수한 플랫 벡터는 무미건조하게 느껴집니다.
• 완벽하게 균일한 그라데이션. 표준 선형 45도 페이드 대신 방사형 그라데이션, 노이즈 오버레이, 또는 메시 그라데이션으로 균일성을 깨세요.
• 일관되지 않은 조명 방향. 모든 그림자가 단일하고 일관된 광원을 암시하도록 검토하세요.
• 라이트 모드 페이지(또는 그 반대)에 무작위로 나타나는 다크 섹션. 전체적으로 밝은 페이지 중간에 단일 다크 백그라운드 섹션은 복사-붙여넣기 실수처럼 보입니다. 전체 다크 모드를 적용하거나 페이지 전체에 일관된 배경 톤을 유지하세요. 대비가 필요하다면, 크림 페이지 중간에 갑자기 #111로 점프하는 대신 동일한 팔레트의 약간 더 어두운 음영을 사용하세요.
• 시각적 깊이가 없는 비어 있고 평평한 섹션. 단순히 텍스트만 있는 섹션은 미완성으로 느껴집니다. 고품질 배경 이미지(블러 처리, 오버레이, 또는 마스킹), 미묘한 패턴, 또는 앰비언트 그라데이션을 추가하세요. 실제 에셋을 사용할 수 없을 때는 https://picsum.photos/seed/{name}/1920/1080와 같은 신뢰할 수 있는 플레이스홀더 소스를 사용하세요. 히어로 섹션, 기능 블록, 또는 CTA 뒤에 배경 이미지를 실험해 보세요. 낮은 불투명도의 미묘한 전체 너비 사진조차도 존재감을 더합니다.

레이아웃

• 모든 것이 중앙 정렬되고 대칭적임. 오프셋 마진, 혼합 가로 세로 비율, 또는 중앙 콘텐츠 위에 왼쪽 정렬 헤더로 대칭을 깨세요.
• 세 개의 동일한 카드 열을 기능 행으로 사용. 이것은 가장 일반적인 AI 레이아웃입니다. 2열 지그재그, 비대칭 그리드, 가로 스크롤, 또는 메이슨리 레이아웃으로 교체하세요.
• 전체 화면 섹션에 height: 100vh 사용. 모바일 브라우저(iOS Safari 뷰포트 버그)에서 레이아웃 점프를 방지하기 위해 min-height: 100dvh로 교체하세요.
• 복잡한 플렉스박스 백분율 계산. 안정적인 다중 열 구조를 위해 CSS 그리드로 교체하세요.
• 최대 너비 컨테이너 없음. 자동 마진이 있는 컨테이너 제약 조건(약 1200-1440px)을 추가하여 와이드 스크린에서 콘텐츠가 가장자리까지 늘어나지 않도록 하세요.
• 플렉스박스로 강제된 동일한 높이의 카드. 콘텐츠 길이가 다양할 때는 가변 높이를 허용하거나 메이슨리 레이아웃을 사용하세요.
• 모든 것에 균일한 border-radius. 반경을 다양화하세요: 내부 요소는 더 좁게, 컨테이너는 더 부드럽게.
• 겹침이나 깊이 없음. 요소가 서로 나란히 평평하게 배치됩니다. 네거티브 마진을 사용하여 레이어링과 시각적 깊이를 만드세요.
• 대칭적인 수직 패딩. 위쪽과 아래쪽 패딩이 항상 동일합니다. 광학적으로 조정하세요 — 아래쪽 패딩은 종종 약간 더 커야 합니다.
• 대시보드에 항상 왼쪽 사이드바가 있음. 대신 상단 탐색, 플로팅 명령 메뉴, 또는 접을 수 있는 패널을 시도해 보세요.
• 공백 부족. 간격을 두 배로 늘리세요. 디자인이 숨 쉴 수 있게 하세요. 조밀한 레이아웃은 데이터 대시보드에는 적합하지만 마케팅 페이지에는 적합하지 않습니다.
• 카드 그룹에서 버튼이 하단에 정렬되지 않음. 카드의 콘텐츠 길이가 다를 때 CTA가 임의의 높이에 위치합니다. 각 카드 하단에 버튼을 고정하여 위의 콘텐츠와 관계없이 깔끔한 수평선을 형성하세요.
• 기능 목록이 서로 다른 수직 위치에서 시작함. 가격표 또는 비교 카드에서 기능 목록은 모든 열에서 동일한 Y 위치에서 시작해야 합니다. 목록 위에 일관된 간격을 사용하거나 고정 높이 제목/가격 블록을 사용하세요.
• 나란히 있는 요소의 일관되지 않은 수직 리듬. 카드, 열, 또는 패널을 나란히 배치할 때 모든 항목에서 공유 요소(제목, 설명, 가격, 버튼)를 정렬하세요. 기준선이 정렬되지 않으면 레이아웃이 깨져 보입니다.
• 수학적으로는 맞지만 광학적으로 잘못 보이는 정렬. 수학적으로 중앙을 맞추는 것이 항상 눈에 중앙으로 보이는 것은 아닙니다. 텍스트 옆의 아이콘, 원 안의 재생 버튼, 또는 버튼 안의 텍스트는 종종 1-2px의 광학적 조정이 필요합니다.

상호작용 및 상태

• 버튼에 호버 상태 없음. 호버 시 배경 이동, 약간의 스케일, 또는 트랜슬레이트를 추가하세요.
• 활성/누름 피드백 없음. 누를 때 미묘한 scale(0.98) 또는 translateY(1px)를 추가하여 물리적 클릭을 시뮬레이션하세요.
• 지속 시간이 0인 즉각적인 전환. 모든 상호작용 요소에 부드러운 전환(200-300ms)을 추가하세요.
• 포커스 링 누락. 키보드 탐색을 위한 가시적인 포커스 표시기를 확인하세요. 이것은 선택이 아닌 접근성 요구 사항입니다.
• 로딩 상태 없음. 일반적인 원형 스피너를 레이아웃 모양과 일치하는 스켈레톤 로더로 교체하세요.
• 빈 상태 없음. 아무것도 표시하지 않는 빈 대시보드는 놓친 기회입니다. 구성된 "시작하기" 뷰를 디자인하세요.
• 오류 상태 없음. 양식에 대해 명확하고 인라인 오류 메시지를 추가하세요. window.alert()를 사용하지 마세요.
• 죽은 링크. #로 연결되는 버튼. 실제 대상으로 연결하거나 시각적으로 비활성화하세요.
• 탐색에서 현재 페이지 표시 없음. 활성 탐색 링크를 다르게 스타일링하여 사용자가 현재 위치를 알 수 있게 하세요.
• 스크롤 점프. 앵커 클릭이 즉시 이동합니다. scroll-behavior: smooth를 추가하세요.
• top, left, width, height를 사용하는 애니메이션. GPU 가속 부드러운 애니메이션을 위해 transform과 opacity로 전환하세요.

콘텐츠

• "John Doe" 또는 "Jane Smith"와 같은 일반적인 이름. 다양하고 현실적인 이름을 사용하세요.
• 99.99%, 50%, $100.00와 같은 가짜 둥근 숫자. 유기적이고 지저분한 데이터를 사용하세요: 47.2%, $99.00, +1 (312) 847-1928.
• "Acme Corp", "Nexus", "SmartFlow"와 같은 플레이스홀더 회사 이름. 상황에 맞고 신뢰할 수 있는 브랜드 이름을 고안하세요.
• AI 카피라이팅 클리셰. "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry" 또는 "In the world of..."를 절대 사용하지 마세요. 평범하고 구체적인 언어를 작성하세요.
• 성공 메시지의 느낌표. 제거하세요. 자신감 있게, 시끄럽지 않게.
• "Oops!" 오류 메시지. 직접적으로 말하세요: "연결에 실패했습니다. 다시 시도해 주세요."
• 수동태. 능동태를 사용하세요: "Mistakes were made" 대신 "We couldn't save your changes"라고 작성하세요.
• 모든 블로그 게시물 날짜가 동일함. 날짜를 무작위로 지정하여 실제처럼 보이게 하세요.
• 여러 사용자에 대해 동일한 아바타 이미지. 각 개인마다 고유한 에셋을 사용하세요.
• Lorem Ipsum. 절대 라틴어 플레이스홀더 텍스트를 사용하지 마세요. 실제 초안 카피를 작성하세요.
• 모든 헤더에 Title Case 사용. 대신 문장 첫 글자 대문자(Sentence case)를 사용하세요.

구성 요소 패턴

• 일반적인 카드 모양(테두리 + 그림자 + 흰색 배경). 테두리를 제거하거나, 배경색만 사용하거나, 간격만 사용하세요. 카드는 계층 구조를 전달할 때만 존재해야 합니다.
• 항상 하나의 채워진 버튼 + 하나의 고스트 버튼. 시각적 소음을 줄이기 위해 텍스트 링크 또는 3차 스타일을 추가하세요.
• 알약 모양의 "New" 및 "Beta" 배지. 사각형 배지, 플래그 또는 일반 텍스트 레이블을 시도해 보세요.
• 아코디언 FAQ 섹션. 나란히 있는 목록, 검색 가능한 도움말 또는 인라인 점진적 공개를 사용하세요.
• 점이 있는 3장 카드 캐러셀 사용후기. 메이슨리 벽, 내장된 소셜 게시물 또는 단일 회전 인용문으로 교체하세요.
• 3개의 타워가 있는 가격표. 추가 높이뿐만 아니라 색상과 강조로 추천 등급을 강조하세요.
• 모든 것에 모달. 간단한 작업에는 팝업 대신 인라인 편집, 슬라이드 오버 패널 또는 확장 가능한 섹션을 사용하세요.
• 아바타 원형만 독점적으로. 덜 일반적인 모양을 위해 스퀴클 또는 둥근 사각형을 시도해 보세요.
• 라이트/다크 토글이 항상 해/달 스위치. 드롭다운, 시스템 기본 설정 감지 또는 설정에 통합을 사용하세요.
• 4열로 구성된 푸터 링크 농장. 단순화하세요. 주요 탐색 경로와 법적으로 필요한 링크에 집중하세요.

아이콘

• Lucide 또는 Feather 아이콘만 독점적으로 사용. 이것들은 AI의 "기본" 아이콘 선택입니다. 차별화를 위해 Phosphor, Heroicons 또는 사용자 정의 세트를 사용하세요.
• "런칭"에 로켓선, "보안"에 방패. 덜 명확한 아이콘(번개, 지문, 스파크, 금고)으로 클리셰 은유를 교체하세요.
• 아이콘 간 일관되지 않은 선 두께. 모든 아이콘을 검토하고 하나의 선 두께로 표준화하세요.
• 파비콘 누락. 항상 브랜드 파비콘을 포함하세요.
• 재고 "다양한 팀" 사진. 실제 팀 사진, 자연스러운 샷, 또는 일관된 일러스트레이션 스타일을 어색한 재고 이미지 대신 사용하세요.

코드 품질

• Div 수프. 시맨틱 HTML을 사용하세요: <nav>, <main>, <article>, <aside>, <section>.
• 인라인 스타일이 CSS 클래스와 혼합됨. 모든 스타일링을 프로젝트의 스타일링 시스템으로 이동하세요.
• 하드코딩된 픽셀 너비. 유연한 레이아웃을 위해 상대적 단위(%, rem, em, max-width)를 사용하세요.
• 이미지에 alt 텍스트 누락. 스크린 리더를 위해 이미지 콘텐츠를 설명하세요. 의미 있는 이미지에 alt="" 또는 alt="image"를 남기지 마세요.
• 9999와 같은 임의의 z-index 값. 테마/변수에 깔끔한 z-index 척도를 설정하세요.
• 주석 처리된 죽은 코드. 배송 전에 모든 디버그 아티팩트를 제거하세요.
• 가져오기 환각. 모든 가져오기가 실제로 package.json 또는 프로젝트 종속성에 존재하는지 확인하세요.
• 메타 태그 누락. 적절한 <title>, description, og:image 및 소셜 공유 메타 태그를 추가하세요.

전략적 누락 항목 (AI가 일반적으로 잊는 것)

• 법적 링크 없음. 푸터에 개인정보 보호정책 및 서비스 약관 링크를 추가하세요.
• "뒤로" 탐색 없음. 사용자 흐름의 막다른 골목. 모든 페이지에는 돌아갈 방법이 필요합니다.
• 사용자 정의 404 페이지 없음. 도움이 되는 브랜드 "페이지를 찾을 수 없음" 경험을 디자인하세요.
• 양식 유효성 검사 없음. 이메일, 필수 필드 및 형식 검사를 위한 클라이언트 측 유효성 검사를 추가하세요.
• "콘텐츠로 건너뛰기" 링크 없음. 키보드 사용자에게 필수적입니다. 숨겨진 건너뛰기 링크를 추가하세요.
• 쿠키 동의 없음. 관할권에서 요구하는 경우, 규정을 준수하는 동의 배너를 추가하세요.

업그레이드 기법

프로젝트를 업그레이드할 때, 일반적인 패턴을 교체하기 위해 다음의 영향력 높은 기법을 활용하세요:

타이포그래피 업그레이드

• 가변 폰트 애니메이션. 살아있는 텍스트를 위해 스크롤이나 호버 시 무게나 너비를 보간하세요.
• 외곽선에서 채움 전환. 텍스트는 스트로크 외곽선으로 시작하여 스크롤 진입 또는 상호작용 시 색상으로 채워집니다.
• 텍스트 마스크 공개. 큰 타이포그래피가 뒤에 있는 비디오 또는 애니메이션 이미지의 창 역할을 합니다.

레이아웃 업그레이드

• 깨진 그리드 / 비대칭. 의도적으로 열 구조를 무시하는 요소 — 겹치기, 화면 밖으로 흘러나오기, 계산된 무작위성으로 오프셋.
• 공백 최대화. 단일 요소에 초점을 강제하기 위한 네거티브 공간의 적극적인 사용.
• 패럴랙스 카드 스택. 스크롤 동안 서로 위에 고정되고 물리적으로 쌓이는 섹션.
• 분할 화면 스크롤. 화면의 두 절반이 반대 방향으로 슬라이딩.

모션 업그레이드

• 관성이 있는 부드러운 스크롤. 더 무겁고 영화 같은 느낌을 위해 브라우저 기본값에서 스크롤을 분리하세요.
• 지연된 항목. 요소가 약간의 지연으로 계단식으로 나타나며 Y축 트랜슬레이트와 불투명도 페이드를 결합합니다. 모든 것을 한 번에 마운트하지 마세요.
• 스프링 물리학. 모든 상호작용 요소에 자연스럽고 무게감 있는 느낌을 위해 선형 이징 대신 스프링 기반 모션을 사용하세요.
• 스크롤 기반 공개. 스크롤 진행에 연결된 확장 마스크, 와이프 또는 SVG 경로 드로잉을 통해 들어오는 콘텐츠.

표면 업그레이드

• 진정한 글래스모피즘. backdrop-filter: blur를 넘어서세요. 가장자리 굴절을 시뮬레이션하기 위해 1px 내부 테두리와 미묘한 내부 그림자를 추가하세요.
• 스포트라이트 테두리. 커서 아래에서 동적으로 밝아지는 카드 테두리.
• 그레인 및 노이즈 오버레이. 디지털 평탄함을 깨기 위해 미묘한 노이즈가 있는 고정된 pointer-events-none 오버레이.
• 색상이 입혀진 그림자. 일반적인 검정 대신 배경의 색조를 전달하는 그림자.

수정 우선순위

최소한의 위험으로 최대의 시각적 효과를 위해 다음 순서로 변경 사항을 적용하세요:

1. 글꼴 교체 — 가장 큰 즉각적인 개선, 가장 낮은 위험
2. 색상 팔레트 정리 — 충돌하거나 과포화된 색상 제거
3. 호버 및 활성 상태 — 최소한의 노력으로 상당한 상호작용 개선
4. 여백과 간격 — 즉시 더 전문적인 느낌
5. 상태 추가 — 로딩, 빈 상태, 오류 상태
6. 배경 질감 — 그레인, 패턴, 또는 부드러운 그라데이션
7. 대칭 깨기 — 레이아웃에 성격 부여
8. 모션 추가 — 미묘한 전환과 스크롤 효과

작업 후

변경 사항이 작동하는지 확인하세요:

• 점진적으로 커밋 — 각 수정 범주를 별도로 커밋하여 필요한 경우 되돌리기 쉽게 만드세요.
• 변경 사항 테스트 — 업그레이드 후에도 모든 링크, 버튼 및 양식이 작동하는지 확인하세요.
• 모든 뷰포트 확인 — 주요 중단점에서 레이아웃을 검사하세요.
• 사이트를 정말로 테스트하는 사람에게 보여주세요. 스스로에게만 보여주지 마세요. 피드백은 필수입니다.
• 돌아가서 읽으세요. 변경 사항이 여전히 당신처럼 느껴지나요, 아니면 템플릿처럼 느껴지나요? 당신의 성격을 유지하고 단순히 일반적인 것을 제거하세요.