큐레이션 · 오픈 · 무료

Suno

간단한 텍스트 프롬프트를 AI를 사용하여 완성된 곡으로 만듭니다.

01

디자인 DNA

마법처럼 몰입감 있는 인터페이스를 통해 텍스트를 음악으로 변환하는 디지털 스튜디오입니다.

02

컬러

고대비 따뜻한 화이트와 생동감 있는 그라데이션 강조가 적용된 시네마틱 다크 모드입니다.

03

타이포그래피

geometric-sans

• display64px · 500

04

여백

4px 기본 단위

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(247, 244, 239, 0.1)

0 25px 50px -12px rgba(0,0,0,0.25) · 0 10px 15px -3px rgba(0,0,0,0.1) · -5.37px 0px 40px 0px rgba(255,176,3,0.07) · 5.37px 0px 40px 0px rgba(254,60,125,0.07)

06

레이아웃

부유하는 카드와 중앙 프롬프트 입력이 있는 히어로 중심 레이아웃입니다.

07

모션과 인터랙션

부드러운 색상 전환 · hover 시 미세한 트랜스폼 스케일 · 히어로 텍스트를 위한 타자기 효과

버튼과 카드에 미세한 스케일 및 색상 전환 효과. · 트랜스폼 리셋을 통한 즉각적인 시각적 피드백.

08

컴포넌트

• button 그라데이션 배경 또는 미세한 테두리가 적용된 알약 형태입니다.
• card 미세한 글래스모피즘 또는 드롭 섀도우가 적용된 둥근 모서리입니다.
• chip 최소한의 스타일링이 적용된 작고 둥근 알약 형태입니다.
• input 통합된 액션 버튼이 있는 크고 둥근 입력 필드입니다.
• hero 부유하는 미디어 카드와 함께 시네마틱하고 흐릿한 그라데이션 배경 위에 중앙 정렬된 텍스트입니다.

09

보이스와 금지 목록

• 톤 개인 음악 프로듀서처럼 초대적이고 창의적인 어조.
• 헤드라인 크고 대화적이며 설명적인 프롬프트 스타일.
• CTA 직접적이고 행동 지향적인 스타일 (예: '만들기', 'Suno에 무료로 참여하기').

• 밝은 배경을 사용하지 마세요 — 스크린샷은 깊은 다크(#101012)를 베이스로 보여줍니다.
• 날카로운 모서리를 사용하지 마세요 — 스크린샷은 대부분의 요소에 둥근 모서리(최대 999px)를 보여줍니다.
• 히어로에 복잡한 그리드를 사용하지 마세요 — 스크린샷은 중앙 정렬된 단일 열 레이아웃을 보여줍니다.
• 여러 개의 화려한 강조색을 사용하지 마세요 — 스크린샷은 '만들기' 버튼에 단일 기본 그라데이션(오렌지/핑크)을 보여줍니다.
• 작고 비좁은 타이포그래피를 사용하지 마세요 — 스크린샷은 좁은 자간의 크고 볼드한 디스플레이 텍스트를 보여줍니다.
• 모든 곳에 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 카드와 특정 인터랙티브 요소에만 섀도우를 보여줍니다.
• 피하기: 기술 전문 용어
• 피하기: 공격적인 마케팅 언어
• 피하기: 지나치게 격식 있는 어조

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko