Shadcn 스타일로 리팩토링

이 문서는 Figma의 현재 디자인을 다크 모드에서 "Shadcn 스타일"처럼 보이도록 리팩토링하는 작업을 설명합니다.

원본 Gist

Figma 사용: 모든 작업은 Figma에서 수행됩니다.
디자인 분석: 먼저 Figma의 현재 디자인을 분석합니다. 구성, 색상 구성표, 글꼴, 레이아웃, 미학, 간격, 모양의 기하학 등을 검토합니다.
Shadcn 스타일 적용: 전체적인 미학은 Shadcn 스타일에서 영감을 받아야 합니다. 이 스타일을 다운로드하여 적용할 수 있습니다. 현대적인 디자인 원칙을 사용하여 미학적으로 만족스러운 결과물을 만들어야 합니다. 정렬과 간격이 중요하며, 모든 요소가 자연스럽고 잘 배치되어야 합니다.

Shadcn UI는 현대적이고 깨끗하며 미니멀한 디자인 철학으로 인정받고 있으며, 유연성, 접근성 및 개발자 제어를 강조합니다. 다음은 Shadcn UI를 정의하는 핵심 원칙 및 미적 가이드라인입니다.

미니멀리즘과 깔끔한 디자인: "적을수록 좋다"는 접근 방식을 채택하여 세련되고 정돈된 인터페이스에 중점을 둡니다.
전략적인 그림자 및 깊이 사용: 그림자를 의도적으로 사용하여 사용자를 압도하지 않으면서 깊이를 만들고 시각적 계층을 설정합니다.
아름다운 기본값과 일관성: 신중하게 선택된 기본 스타일과 함께 제공되어 즉시 통일되고 전문적인 모습을 보장합니다.
접근성: 모든 구성 요소는 장애가 있는 사용자를 포함하여 광범위한 사용자가 사용할 수 있도록 구축되었습니다.
사용자 정의 및 유연성: 각 구성 요소에 대해 개방적이고 수정 가능한 소스 코드를 제공하여 개발자가 특정 요구에 맞게 구성 요소를 복사, 조정 및 확장할 수 있도록 권장합니다.
구성 및 모듈성: 구성 요소는 예측 가능하고 통합하기 쉬운 공유되고 구성 가능한 인터페이스로 설계되었습니다.
적응형 및 반응형 디자인: 다양한 화면 크기와 해상도에 원활하게 적응하도록 구축되었습니다.
유동적인 애니메이션: 사용자 경험을 향상시키기 위해 신중하게 사용됩니다.
비즈니스 지향적이고 전문적: 전반적인 미학은 비즈니스 및 내부 도구에 맞춰져 심각한 응용 시나리오에서 명확성, 전문성 및 유용성을 우선시합니다.

Shadcn UI의 미적 원칙은 현대적인 미니멀리즘, 접근성 및 개발자 권한 부여에 뿌리를 두고 있어 아름다움과 유연성을 모두 요구하는 프로젝트에 널리 사용됩니다.