Engineering
Prompt Engineering
AI Design Prompt Gist
Aceternity UI — Concrete Design Brief for Figma

원본 Gist

Aceternity UI — Figma를 위한 구체적인 디자인 브리프

디자이너가 Figma에서 Aceternity의 미니멀하고 현대적인 미학을 일관되게 준수하고 구현하기 위한 실행 가능한 가이드라인입니다.

1. 기하학 & 레이아웃 (Geometry & Layout)

  • 그리드 시스템:
    • 기본 그리드: 12-컬럼 반응형 그리드
    • 거터 너비: 24px (데스크톱), 16px (태블릿), 12px (모바일)
    • 마진: 최소 24px (데스크톱), 16px (태블릿), 12px (모바일)의 적응형 마진
  • 정렬 & 균형:
    • 대칭 정렬 선호
    • 가독성 향상을 위한 넉넉한 공백
    • 일관된 수직 리듬과 수평 정렬

2. 타이포그래피 (Typography)

  • 주요 서체:
    • Inter (Google Fonts)
    • 대체 서체: Geist 또는 유사한 기하학적 산세리프
  • 글꼴 두께 & 크기:
    • 제목: Bold (600–700), 크기: 32px, 24px, 20px
    • 본문 텍스트: Regular (400), 크기: 16px
    • 캡션/라벨: Medium (500), 크기: 12–14px
  • 줄 간격 & 문자 간격:
    • 줄 간격: 본문 텍스트 140–160%, 제목 120–130%
    • 문자 간격: 본문은 기본(0%), 대문자 라벨은 약간의 트래킹(+0.5–1%)

3. 색상 팔레트 (Color Palette)

  • 주요 색상:
    • White: #FFFFFF
    • Black: #0A0A0A
    • 중립 회색: #F9FAFB, #E5E7EB, #9CA3AF, #374151
  • 보조 (강조) 색상:
    • 차분한 파란색: #3B82F6
    • 부드러운 녹색: #10B981
    • 미묘한 보라색: #8B5CF6
  • 3차 (알림/하이라이트):
    • 빨간색 (오류): #EF4444
    • 호박색 (경고): #F59E0B
  • 대비 & 접근성:
    • 최소 대비 비율: 4.5:1 (WCAG AA 준수)
    • Figma에서 대비 검사 플러그인(예: Stark) 사용

4. 배경 (Backgrounds)

  • 텍스처 & 그라데이션:
    • 미묘한 선형 그라데이션 (불투명도 10–20%)
    • 글래스모피즘 효과: 배경 블러 (10–20px), 투명도 (불투명도 60–80%)
  • 레이어링 & 깊이:
    • 미묘한 그림자를 통한 입체감:
      • 낮은 입체감: 0px 1px 3px rgba(0,0,0,0.05)
      • 중간 입체감: 0px 4px 6px rgba(0,0,0,0.08)
    • 시각적 계층을 만들기 위한 요소 중첩

5. 모서리 반지름 (Corner Radius)

  • 표준 반지름 스케일:
    • 작은 컴포넌트 (버튼, 입력창): 6px
    • 중간 컴포넌트 (카드, 모달): 8–12px
    • 큰 컴포넌트 (패널, 컨테이너): 12–16px
  • 심리적 영향:
    • 둥근 모서리는 친근함, 사용 용이성, 접근성을 전달

6. 간격 시스템 (Spacing System)

  • 기본 단위: 4px 증분
    • 일반적인 간격 값: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px
  • 반응형 동작:
    • 적응형 간격: 작은 화면에서 간격을 비례적으로 줄임
    • 일관된 수직 리듬과 수평 정렬 유지

7. 상호작용 요소 (Interactive Elements)

  • 호버 & 활성 상태:
    • 호버: 약간의 입체감 증가, 미묘한 색상 변화 (불투명도 또는 밝기 ±10%)
    • 활성: 약간 축소 (95–98%), 즉각적인 시각적 피드백
  • 마이크로 인터랙션 & 애니메이션:
    • 지속 시간: 150–300ms
    • 이징: Ease-in-out (cubic-bezier: 0.4, 0, 0.2, 1)
    • 예시: 버튼 누름, 토글, 로딩 스피너, 전환

8. 디자인 철학 (Design Philosophy)

  • 미니멀 & 모던:
    • 명확성, 단순성, 기능성 우선
    • 불필요한 장식 요소나 시각적 혼란 회피
  • 경쟁사와의 차별점:
    • Material Design보다 덜 규범적이고, Tailwind UI보다 더 미묘하고 세련됨
    • 시각적 우아함, 시대를 초월함, 인지 부하 감소 강조

Figma 구현 체크리스트:

  • 12-컬럼 반응형 그리드 설정
  • 타이포그래피 스타일 정의 (제목, 본문, 캡션)
  • 접근성 검사를 포함한 색상 스타일 생성
  • 간격 및 모서리 반지름 스케일 설정
  • 명확한 호버/활성 상태를 가진 상호작용 컴포넌트 디자인
  • 미묘한 그림자 및 배경 블러 효과 구현
  • 마이크로 인터랙션 및 애니메이션 명확하게 문서화

참고 자료 & 영감:

Figma device bezelsComprehensive Aceternity UI Design Brief