인터랙티브 파스텔 타이포그래피 계산기 & JSON 스튜디오 - SF Cosmic Pastel

인터랙티브 파스텔 타이포그래피 계산기 (SF Cosmic Pastel Typography Lab)는 몽환적이고 수려한 SF 코스믹 파스텔 스페이스 우주 테마와 유연한 모듈형 디자인 시스템이 결합된 타이포그래피 & 디자인 토큰 스튜디오 웹 애플리케이션입니다.

웹 디자이너, UI/UX 디자이너, 프론트엔드 개발자가 모바일 화면(320px)부터 울트라와이드 모니터(2560px)까지 끊김 없이 자연스럽게 비율이 조절되는 Fluid Typography를 수학적 clamp(min, preferred, max) 공식으로 자동 계산하고, W3C Design Tokens JSON, CSS Custom Properties (:root), Tailwind CSS Config, SCSS 변수로 원클릭 즉시 상호 변환할 수 있습니다.

🌟 주요 핵심 기능

• 🌌 SF 코스믹 파스텔 스페이스 디자인 시스템:
  • 네뷸라 글로우, 파스텔 핑크, 민트, 라벤더, 사이버 파스텔 블루 조화의 고품격 글래스모피즘 HUD 인터페이스를 제공합니다.
  • 마우스 및 터치 반응형 캔버스 입자 성운(Nebula Starfield) 백그라운드 효과를 탑재하여 몰입감을 증대시켰습니다.
• 📐 수학적 CSS clamp() Fluid Scale 자동 산출 Engine:
  • 최소/최대 뷰포트 너비(px)와 최소/최대 Base 폰트 크기를 설정하면 slope(기울기)와 yAxisIntersection(절편) 수식을 정밀 계산하여 CSS clamp() 코드를 생성합니다.
  • Golden Ratio (1.618), Perfect Fourth (1.333), Augmented Fourth (1.414), Major Third (1.250) 등 Modular Scale 비율에 맞춰 H1부터 Micro 캡션까지 한 번에 산출합니다.
• ⚡ JSON & 데이터 즉시 상호 변환 (Bi-Directional JSON Tokens):
  • 생성된 타이포그래피 스케일을 JSON Design Tokens, CSS :root, Tailwind CSS Config, SCSS로 즉시 전환 및 원클릭 복사할 수 있습니다.
  • 사용자가 가지고 있는 JSON 토큰 코드를 인풋 창에 붙여넣으면 즉시 실시간 라이브 파싱하여 계산기 슬라이더와 시범 렌더링에 즉각 적용됩니다.
• 👁️ 가독성 높은 구역 렌더링 & WCAG 접근성 검수 (High-Readability Render):
  • Hero Title 구역, 에디토리얼 아티클 본문 구역, Cosmic UI 성운 카드 컴포넌트 구역 등 가독성이 최우선 고려된 다양한 실시간 뷰포트를 제공합니다.
  • contenteditable 기능을 통해 시범 구역 내 글자를 클릭하여 사용자가 원하는 임의의 문구로 즉시 편집할 수 있습니다.
  • WCAG 2.1 명암비(Contrast Ratio) 및 AAA/AA 접근성 등급 평가기를 탑재하였습니다.
• 📱 모바일 최적화 뷰포트 & 하단 터치 네비게이션:
  • 모바일 디바이스 환경을 완벽히 고려한 하단 터치 탭 바(📐 Scale, ⚡ JSON, 👁️ Specimen, 🎨 Themes)를 탑재하였습니다.
  • Mobile(375px), Phablet(428px), Tablet(768px), Laptop(1024px), Desktop(1440px) 퀵 시뮬레이션 프리셋 지원.
• 🔊 Web Audio API 오디오 SFX & 사운드 토글:
  • 조절 슬라이더 및 버튼 클릭 시 잔잔한 우주 톤 오디오 효과음이 출력되며, 1-클릭 Audio Mute/Unmute 기능을 지원합니다.

🛠️ 사용 방법 (How to Use)

1. 뷰포트 및 베이스 크기 설정 (Scale Calc):
   • 좌측 컨트롤 패널의 📐 Scale Calc 탭에서 모바일 최소 너비(e.g., 375px), 데스크톱 최대 너비(e.g., 1440px) 및 Base Font Size를 설정하세요.
   • Modular Scale Ratio (Major 3rd, Perfect 4th, Golden Ratio 등) 칩을 눌러 스케일 확대 비중을 조절합니다.
2. 글꼴 조합 및 본문 메트릭스 조정:
   • 구글 폰트(Syne, Orbitron, Space Grotesk, Comfortaa, Noto Sans KR 등) 조합과 자간, 행간을 자유롭게 미세 튜닝하세요.
3. JSON & 디자인 토큰 변환 및 내보내기:
   • ⚡ JSON Data 탭으로 이동하여 생성된 JSON 디자인 토큰, CSS :root 변수, Tailwind 설정 코드 중 원하는 양식을 선택 후 📋 COPY 버튼을 눌러 프로젝트에 적용하세요.
   • 보유 중인 JSON 토큰이 있다면 편집창에 넣고 ⚡ Apply JSON Tokens to Engine을 클릭해 라이브 적용할 수 있습니다.
4. 가독성 구역 및 실시간 문구 편집:
   • 메인 대시보드 캔버스 내 문구를 직접 클릭하여 브랜드 텍스트를 입력하고, 상단 뷰포트 크기 프리셋 버튼(375px ~ Fullwidth)을 이용해 다양한 화면 폭에서의 반응형 폰트 변화를 확인하세요.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

앱을 열면 제공되는 기본 설정과 화면 안내를 확인할 수 있습니다. 먼저 예시 상태에서 주요 조작을 살펴본 뒤, 목적에 맞게 입력값이나 도구를 변경해 보세요.

별도 설치가 필요한가요?

이 앱은 웹 브라우저에서 실행하도록 구성되어 있습니다. 원활한 사용을 위해 최신 브라우저와 안정적인 인터넷 환경을 권장합니다.

결과가 예상과 다르게 보이면 무엇을 확인해야 하나요?

현재 선택한 설정, 입력값, 화면 크기, 브라우저 상태에 따라 결과가 달라질 수 있습니다. 초기화 또는 예시 설정으로 돌아간 뒤 값을 하나씩 바꿔 확인하면 원인을 파악하기 쉽습니다.