무료 디자인·CSS 도구

종횡비 계산기 레이아웃 가로·세로 크기를 가장 간단한 비율(1920×1080 → 16:9)로 줄이고, 같은 비율로 바꿀 크기, 비율이 정확히 맞는 정수 크기, aspect-ratio와 padding-top 대체 CSS를 계산합니다. 디자인 컬러 토큰 생성기 색상 색 이름과 HEX 목록을 CSS·SCSS 변수, W3C 디자인 토큰 JSON, Tailwind 색 설정으로 바꾸고, 원하면 색마다 50~900 열 단계를 만들어 줍니다. CSS Grid 생성기 레이아웃 자동 맞춤(auto-fit)·자동 채움(auto-fill)·고정 열 방식으로 CSS Grid 코드를 만들고, 360~1280px 컨테이너에서 각각 몇 열이 되고 열 하나가 몇 px인지 계산합니다. Flexbox 생성기 레이아웃 flex-direction·flex-wrap·justify-content·align-items·gap과 항목 크기 방식을 고르면 미리보기와 함께 기본값을 뺀 Flexbox CSS를 만들고, 주축·교차축 방향을 풀어 설명합니다. CSS clamp 생성기 CSS 작은 화면과 큰 화면에서 원하는 크기를 정하면 그 사이를 직선으로 잇는 clamp() 값을 rem과 vw로 만들고, 360~1920px 화면별 실제 크기와 확대 접근성(WCAG 1.4.4) 위험을 알려 줍니다. 터치 타깃 크기 체크 접근성·상태 버튼의 가로·세로 크기와 옆 버튼과의 간격으로 WCAG 2.5.8(24px)·2.5.5(44px)·애플 HIG·머티리얼 터치 기준을 한 번에 판정하고, 누르는 영역만 넓히는 CSS까지 만듭니다. Focus Ring 생성기 접근성·상태 키보드 포커스 링의 색·두께·간격을 정해 :focus-visible 코드를 만들고, 밝은 배경과 어두운 배경에서 3:1 대비를 확인합니다. 어느 배경에서나 보이는 두 겹 링도 만들 수 있습니다. UI 상태 색상 팔레트 생성기 색상 기본 브랜드 색 하나로 hover·active·선택(연한 배경)·비활성 색과 3:1을 넘는 포커스 링 색을 만들고, 상태마다 글자 대비를 확인해 성공·경고·위험·정보 색과 함께 CSS 변수로 내보냅니다. CSS Filter 미리보기 CSS 흐림·밝기·대비·채도·흑백·세피아·색조 회전·반전·불투명도 9가지 CSS 필터와 프리셋 7종을 조절해 원본과 나란히 비교하고, filter 코드와 PNG 이미지로 내보냅니다. SVG 구분선 생성기 디자인 물결·언덕·기울기·삼각형·톱니 모양 섹션 구분선을 만들어 인라인 SVG 마크업, 배치용 CSS, 배경 이미지용 data URI CSS 세 가지로 복사합니다. 좌우·위아래 뒤집기도 됩니다. 간격 토큰 스케일 생성기 레이아웃 기준 단위(예: 4px)와 증가 방식(실무형·등차·등비)으로 여백 토큰을 만들고, 숫자·배수·티셔츠 이름과 px·rem 단위를 골라 CSS 변수·디자인 토큰 JSON·Tailwind 설정으로 내보냅니다. 타이포그래피 스케일 생성기 CSS 본문 글자 크기와 배율(1.067~1.618)로 제목·본문·캡션 크기 단계를 만들고, 단계별 권장 줄높이와 360~1280px 화면 폭에 따라 변하는 clamp() 값까지 CSS 변수로 출력합니다. Media Query 생성기 레이아웃 최소·최대 너비와 방향, 다크 모드, 마우스·터치, 움직임 줄이기 조건을 조합해 @media 규칙을 만들고, 지금 열린 브라우저 창이 그 조건에 맞는지 matchMedia로 바로 확인합니다. Container Query 생성기 레이아웃 부모 요소를 컨테이너로 지정하는 container 선언과 @container 규칙을 함께 만들고, 미리보기 너비 슬라이더로 조건이 맞을 때 카드가 가로 배치로 바뀌는 모습을 확인합니다. CSS Easing 생성기 CSS cubic-bezier 네 값을 ease·easeOutCubic·easeOutBack 등 12가지 프리셋이나 직접 입력으로 정하고, 곡선 그래프와 linear 비교 재생으로 움직임을 확인한 뒤 transition 코드로 복사합니다. CSS 애니메이션 생성기 CSS 나타나기·슬라이드·확대·튀어나오기·흔들기·맥박·회전 9가지 효과나 직접 적은 시작·끝 CSS로 @keyframes를 만들고, 시간·지연·이징·반복·채우기 방식과 움직임 줄이기 대응 코드까지 붙여 미리보기로 재생합니다. Z-index Scale 생성기 레이아웃 드롭다운·헤더·모달·토스트처럼 쌓이는 UI 레이어 순서를 적으면 시작값과 간격으로 z-index 토큰을 만들어 CSS 변수·SCSS 맵·JSON·Tailwind 설정으로 내보내고, 쌓임 순서를 그림으로 보여 줍니다. CSS Transform 생성기 레이아웃 이동·회전·배율·기울이기와 기준점(transform-origin), 함수 순서를 조절해 transform CSS를 만들고, 같은 결과를 내는 matrix() 값과 개별 속성(translate·rotate·scale) 표기도 함께 보여 줍니다. CSS 스크롤바 생성기 CSS 표준 scrollbar-color·scrollbar-width와 사파리용 ::-webkit-scrollbar 규칙을 @supports로 나눠 함께 만들고, 실제 스크롤 상자에 적용해 미리 보며 손잡이와 트랙 대비도 확인합니다. Skeleton Loader 생성기 접근성·상태 로딩 중 내용 자리에 보여 줄 스켈레톤을 빛이 지나가는 효과나 깜빡임으로 만들고, 줄 수·프로필 원·이미지 영역과 aria-busy가 들어간 HTML 예시, 움직임 줄이기 대응 CSS까지 제공합니다. CSS 로딩 스피너 접근성·상태 원형 테두리·두 줄 원·튀는 점 3개·막대 파형 네 가지 로딩 스피너를 크기·두께·색·속도로 만들고, role="status"와 숨김 문구가 들어간 HTML, 움직임 줄이기 대응 CSS를 함께 제공합니다. CSS Clip-path 생성기 CSS 삼각형·육각형·별·화살표·말풍선·티켓 등 15가지 도형으로 clip-path를 만들고, 꼭짓점 좌표를 직접 고쳐 바로 반영하며, 내 이미지를 올려 잘린 모습을 미리 봅니다. CSS Mask Fade 생성기 CSS 요소의 오른쪽·왼쪽·좌우·아래·위·위아래 가장자리나 전체 테두리(비네팅)를 부드럽게 사라지게 하는 mask-image CSS를 px나 % 길이로 만들고, 태그 목록·긴 글·이미지에 적용해 미리 봅니다. SVG 최적화기 디자인 SVG 코드나 파일에서 주석·메타데이터·편집기 속성·참조되지 않는 id·빈 그룹을 지우고 좌표를 반올림해 용량을 줄이며, 원본과 결과를 그림으로 비교하고 CSS 배경용 data URI도 만듭니다. CSS 변수 테마 생성기 CSS 주 색·강조 색·회색 색조·모서리로 라이트와 다크 테마 CSS 변수를 함께 만들고, 시스템 설정과 data-theme 전환 방식을 고르며, 두 테마의 본문·보조·버튼 글자 대비를 확인합니다. rem·px 변환기 레이아웃 px와 rem 값을 한 줄씩 서로 바꾸고, CSS를 통째로 붙여 넣으면 안의 px를 모두 rem으로 바꿉니다. 변환한 rem이 브라우저 글꼴 설정 14·16·18·20px에서 실제 몇 px로 보이는지 표로 보여 줍니다. Viewport 단위 계산기 레이아웃 아이폰·갤럭시·아이패드·노트북 화면 크기와 주소창 높이를 기준으로 vw·vh·svh·lvh·dvh·vmin·vmax를 px로, px를 뷰포트 단위로 바꾸고, 모바일 100vh 문제와 vw 글자 크기 주의점을 알려 줍니다. 색상 코드 변환 색상 HEX·rgb()·hsl()·hwb()·oklch()·색 이름 등 어떤 CSS 색이든 넣으면 HEX(투명도 포함)·RGB·HSL·HWB·OKLCH·CMYK·안드로이드 ARGB로 한 번에 바꾸고, 배경색과의 대비도 계산합니다. 컬러 믹서 색상 두 색을 원하는 비율로 섞어 중간색과 A→B 7단계 팔레트를 만들고, 섞는 방식을 OKLab·sRGB·선형 RGB 중에서 골라 비교하며, 계산한 HEX와 CSS color-mix() 코드를 함께 줍니다. 색상 팔레트 생성기 색상 기준 색 하나로 유사색·보색·분할 보색·3각·4각·단색 명도 조합의 3~8색 팔레트를 OKLCH 색 공간에서 고르게 만들고, 색마다 글자 대비를 표시해 CSS 변수·JSON·Tailwind로 내보냅니다. CSS 그라데이션 생성기 색상 선형·원형 그라데이션을 2~3개 색 정지점과 각도로 만들고, Sunset·Ocean·Mint 같은 프리셋과 무작위 생성으로 빠르게 시작해 background CSS로 복사합니다. 컨트라스트 대비 확인기 접근성·상태 글자색과 배경색의 WCAG 대비 비율을 계산해 AA·AAA·큰 글자·아이콘 기준 통과 여부를 보여 주고, 기준에 못 미치면 색조는 두고 밝기만 바꾼 통과 색을 추천합니다. 접근성 색상 대비 팔레트 색상 기준 브랜드 색 하나로 밝은 톤 2단계, 연한 배경, 어두운 톤 2단계를 만들고, 각 색에서 흰 글자와 검정 글자 중 더 잘 읽히는 쪽과 그 대비값을 함께 보여 줍니다. CSS 박스 섀도우 생성기 CSS 그림자를 최대 5겹까지 겹쳐 X·Y 위치, 흐림, 퍼짐, 색, 불투명도, 안쪽(inset) 여부를 겹마다 조절하고, 은은하게·카드·떠 있는 패널·안쪽·색 테두리 링 프리셋과 밝은·어두운 배경 미리보기를 제공합니다. CSS 버튼 스타일러 CSS 버튼 색·모서리·여백·그림자·굵기를 조절해 CSS를 만들고, hover·focus-visible·disabled 상태와 글자 대비, 터치 크기 점검까지 한 번에 제공합니다. CSS 테두리 반경 생성기 CSS 네 모서리 반경을 한꺼번에 또는 따로 조절해 border-radius를 만들고, 값이 겹치면 1~3개 값의 가장 짧은 축약형으로 정리하며 각 모서리 값을 주석으로 풀어 줍니다. Tailwind 컬러 칩 확인기 색상 Tailwind CSS 기본 팔레트 22개 색상군의 50~950 단계 칩을 모두 보여 주고, HEX·클래스·v4 변수 중 고른 형식으로 복사하며 입력한 색과 가장 가까운 Tailwind 색을 찾아 줍니다. 시스템 폰트 스택 생성기 CSS 운영체제 기본 글꼴을 쓰는 font-family 스택 4종(산세리프·세리프·모노·라운디드)을 한글 글꼴까지 넣어 만들고, 지금 기기에서 실제로 어떤 글꼴이 잡히는지 확인해 줍니다. CSS Shape·말풍선 꼬리 생성기 CSS 말풍선 박스와 꼬리를 CSS border 삼각형으로 만듭니다. 색·꼬리 위치 6곳·꼬리 크기·모서리 둥글기를 고르면 ::after 가상 요소 코드까지 바로 나옵니다. Glass UI CSS 효과 생성기 CSS backdrop-filter 유리 질감 카드 CSS를 만들고, 미리보기 배경 위 흰 글자 대비와 미지원 브라우저용 @supports 대체 배경, 투명도 줄이기 설정 대응 코드까지 함께 줍니다. 네온·글로우 CSS 효과 생성기 CSS 글자나 박스에 네온사인처럼 번지는 빛을 text-shadow·box-shadow 네 겹으로 만듭니다. 색과 발광 강도(1~6)를 고르면 미리보기와 CSS가 함께 바뀝니다. 패턴 배경 생성기 디자인 점·줄무늬·격자·체크무늬 배경을 이미지 없이 CSS 그라데이션만으로 만듭니다. 무늬 색·바탕색·간격·굵기를 조절하면 미리보기와 background 코드가 함께 바뀝니다. 프리미엄 그라데이션 프리셋 색상 골드·실버·브론즈·VIP 다크 등 배지·가격표·프로모션용 그라데이션 견본 8종을 카드로 보여 주고, 누르면 대체 단색 배경과 어울리는 글자색까지 CSS로 복사합니다. 이미지 컬러 픽커 색상 사진이나 화면 캡처에서 많이 쓰인 대표 색을 최대 6개까지 비율과 함께 뽑고, 원하는 지점을 클릭해 그 픽셀의 정확한 HEX·RGB 값을 집어 옵니다. 이미지 플레이스홀더 생성기 디자인 원하는 너비·높이·색·문구로 더미 이미지를 만들어 PNG 파일로 받거나 data URI로 바로 복사합니다. 긴 한글 문구도 이미지 폭에 맞춰 글자 크기를 줄여 줍니다. 웹사이트 스크린샷 목업 시뮬레이터 디자인 스크린샷을 브라우저 창이나 스마트폰 프레임에 넣어 배경 여백·그림자가 있는 목업 PNG로 만듭니다. 고해상도 캡처는 프레임도 비율에 맞춰 키우고, 아주 큰 이미지는 5000px로 줄입니다. UI 그림자 토큰 프리셋 생성기 CSS 가까운 윤곽 그림자와 넓게 퍼지는 공기감 그림자를 겹친 2~6단계 box-shadow 토큰(xs~2xl)을 그림자 색과 진하기로 만들고, 밝은·어두운 배경에서 카드로 미리 봅니다. 그라데이션 텍스트 CSS 생성기 색상 2~3색 그라데이션 글자를 각도·크기·굵기와 함께 만들고, 지원하지 않는 브라우저용 단색과 고대비 모드 대응, 선택형 흐르는 애니메이션까지 넣은 CSS로 내보내며 색마다 배경 대비를 확인합니다. 아이콘 배경 안전여백 생성기 디자인 UI 아이콘 버튼의 상자 크기·여백·모서리를 계산하고, PWA 마스커블 아이콘(안전 영역 80%)과 안드로이드 적응형 아이콘(108dp 중 66dp)의 안전 영역 안에 로고를 얼마나 크게 둘지 미리 보며 정리합니다. CSS 선택자 명시도 계산기 CSS CSS 선택자의 명시도(ID·클래스·태그)를 Selectors Level 4 규칙대로 계산하고, :is()·:where()·:not()·:has()를 반영해 여러 선택자 중 어느 규칙이 이기는지 알려 줍니다. CSS Grid 영역 생성기 레이아웃 행마다 영역 이름을 적으면 grid-template-areas CSS, 좁은 화면용 한 줄 배치, HTML 뼈대를 만들고, 직사각형이 아닌 영역처럼 브라우저가 무시할 오류를 미리 잡습니다. 황금비 계산기 디자인 기준 길이를 황금비(1:1.618)로 나눈 큰 쪽·작은 쪽과, 위아래로 이어지는 황금비 스케일을 px와 rem으로 계산해 레이아웃·여백·글자 크기 비율에 쓸 수 있게 합니다. 줄높이 계산기 디자인 글자 크기와 줄높이 배율로 실제 줄 높이(px)와 위아래 여백, 4px 격자에 맞춘 값을 계산하고 본문·제목에 알맞은 줄 간격인지 판단합니다. 한글 본문 권장 범위도 알려 줍니다. CSS 중단점 생성기 CSS 중단점 이름과 너비로 모바일 우선(min-width), 데스크톱 우선(max-width, .02px 보정), 구간 지정(범위 문법) 미디어 쿼리와 CSS 변수를 한 번에 만듭니다. CSS 변수명 생성기 CSS Primary Button Background 같은 토큰 이름을 일관된 CSS 변수(--tb-primary-button-background)와 SCSS·JavaScript 이름으로 바꾸고, 바꾼 뒤 겹치는 이름을 찾아 줍니다. 디자인 토큰 JSON 생성기 디자인 '이름 | 값 | 유형' 목록을 W3C 디자인 토큰(DTCG) 형식의 중첩 JSON과 CSS 변수로 바꿉니다. {color.primary} 참조를 var()로 이어 주고, 색·크기·시간 값 형식을 검사합니다. CSS 단위 변환기 CSS px·rem·em·vw·vh·vmin·pt·mm 등 CSS 단위를 root 글자 크기와 화면 크기 기준으로 서로 바꾸고, rem의 접근성 장점과 em·mm 계산의 전제를 함께 설명합니다. 접근 가능한 이름 계산기 접근성·상태 HTML의 버튼·링크·입력칸·이미지가 화면 낭독기에 어떤 이름으로 읽히는지 계산하고, 이름 없는 요소, 모호한 링크 문구, 보이는 글자와 다른 aria-label을 찾아 줍니다. 폼 레이블 접근성 검사기 디자인 HTML 양식의 입력칸마다 레이블이 제대로 연결됐는지 검사합니다. placeholder만 있는 칸, 대상 없는 label for, 묶음 제목 없는 라디오, autocomplete 누락을 찾아 줍니다. ARIA 속성 검사기 디자인 HTML의 role과 aria-* 속성을 WAI-ARIA 1.2 기준으로 검사합니다. 오타 난 역할·속성, 잘못된 값, 빠진 필수 상태, 없는 id 참조, aria-hidden 안의 포커스 요소를 찾습니다. 키보드 포커스 순서 분석기 접근성·상태 HTML에서 Tab 키로 이동하는 순서를 계산해 보여 주고, 양수 tabindex, 이름 없는 포커스 요소, aria-hidden 안의 포커스, 클릭만 되고 키보드로 못 가는 요소를 찾습니다. SVG 접근성 검사기 디자인 인라인 SVG가 의미 있는 그림인지 장식인지에 맞게 이름(title·aria-label)과 role="img", aria-hidden을 갖췄는지 검사하고, 이름 없는 아이콘 버튼을 찾아 줍니다. HTML 표 접근성 검사기 디자인 HTML 표에 caption, th 머리글, scope, headers 연결이 제대로 됐는지 검사하고, 머리글 없는 데이터 표, 빈 th, 병합 칸이 많은 복잡한 표, 배치용 표의 잘못된 마크업을 찾습니다. 페이지 Landmark 구조 검사기 디자인 페이지의 header·nav·main·aside·footer 같은 랜드마크 구조를 찾아 main이 하나인지, 여러 nav에 구분되는 이름이 있는지, 어느 랜드마크에도 속하지 않은 내용이 있는지 검사합니다. 건너뛰기 링크 검사기 디자인 페이지 맨 앞의 '본문 바로가기' 링크가 있는지, 첫 번째로 포커스되는지, 이동할 대상 id가 실제로 있는지, display:none으로 숨겨 쓸 수 없게 되지 않았는지 검사합니다. 이미지 ALT 적용률 검사기 디자인 HTML의 이미지 alt 적용률을 세고, alt가 없는 그림, 파일 이름 같은 alt, 링크 안 그림의 빈 alt, '이미지' 같은 군더더기, 너무 긴 alt와 반복된 alt를 찾아 줍니다. 색각 이상 시뮬레이터 색상 입력한 색이 적색맹·녹색맹·청색맹·전색맹으로 보면 어떻게 바뀌는지 보여 주고, 서로 구분하기 어려워지는 색 쌍을 CIEDE2000 색차로 찾아 줍니다. APCA 명암 대비 계산기 접근성·상태 글자색과 배경색의 APCA 명암 대비(Lc)를 계산해 본문·제목·아이콘 중 어디에 쓸 수 있는지 판단하고, WCAG 2 명암비와 등급도 함께 보여 줍니다. Reduced Motion 애니메이션 검사기 CSS CSS의 animation·transition·부드러운 스크롤·패럴랙스를 찾아 prefers-reduced-motion(동작 줄이기) 대응이 있는지 검사하고, 빠진 경우 넣을 수 있는 기본 규칙을 제안합니다. 콘텐츠 읽기 순서 분석기 디자인 HTML의 제목(h1~h6) 구조와 소스 읽기 순서를 보여 주고, h1 누락·중복, 건너뛴 제목 단계, 빈 제목, 양수 tabindex, 화면 순서를 바꾸는 인라인 스타일을 찾아 줍니다. 오디오 자르기 디자인 오디오 파일에서 원하는 구간만 잘라 WAV로 저장합니다. 시작·끝을 초나 1:23 형식으로 적고, 자른 경계의 딱 소리를 막는 짧은 페이드를 넣습니다. 오디오 합치기 디자인 오디오 파일 여러 개를 고른 순서대로 이어 붙여 하나의 WAV로 만듭니다. 모노와 스테레오가 섞여도 맞춰 주고, 이어 붙인 결과를 바로 들어 볼 수 있습니다. WAV 헤더 검사기 디자인 WAV 파일의 형식(PCM·float), 채널·샘플레이트·비트 수, 재생 시간, 태그(LIST·BWF)를 읽고, 헤더 크기와 byteRate가 맞지 않는 손상 흔적을 찾아 줍니다. 오디오 재생시간·용량 계산기 디자인 재생 시간·샘플레이트·비트 수·채널 수로 WAV 파일 크기와 비트레이트를 계산하고, 같은 길이를 MP3·AAC 비트레이트별로 저장했을 때의 용량도 함께 추정합니다. 오디오 볼륨 정규화기 디자인 오디오 음량을 피크(target_db) 기준이나 듣는 크기 LUFS(lufs=-14) 기준으로 맞춥니다. 피크가 −1dBFS를 넘지 않게 제한하고, 전후 피크와 라우드니스를 보여 줍니다. 오디오 페이드 인·아웃 디자인 오디오 시작에 서서히 커지는 페이드 인, 끝에 서서히 작아지는 페이드 아웃을 초 단위로 넣습니다. 한쪽만 0으로 둘 수 있고 직선·부드러운 곡선을 고릅니다. 오디오 무음 구간 탐지기 디자인 오디오에서 정한 크기(dBFS)보다 작은 소리가 일정 시간 이상 이어지는 무음 구간을 찾아 시작·끝 시각과 전체 무음 비율을 알려 줍니다. 오디오 파형 뷰어 디자인 오디오 파일의 파형을 채널별로 그려 PNG로 보여 줍니다. 시간 눈금이 붙어 소리 있는 위치를 찾기 쉽고, 0dBFS에 닿아 찌그러진 부분은 빨간색으로 표시합니다. 오디오 스펙트럼 분석기 디자인 오디오 전체 구간을 여러 번 나눠 평균 낸 주파수 스펙트럼을 그리고, 두드러진 주파수와 음 이름, 저음·중음·고음 에너지 비율을 알려 줍니다. 브라우저 음성 녹음기 디자인 브라우저에서 마이크로 최대 5분까지 녹음하고 바로 들어 본 뒤 WebM·OGG·M4A로 저장합니다. 녹음 중 경과 시간이 표시되고 '지금 멈추기'로 끝낼 수 있습니다. ID3 태그 편집기 디자인 MP3의 ID3 태그(제목·아티스트·앨범·연도·장르·트랙 번호)를 보고 고친 사본을 만듭니다. 앨범 아트와 원래 글자 인코딩, 오디오는 그대로 두고 옛 ID3v1 태그를 정리합니다. BPM 탭 계산기 디자인 '탭' 버튼을 박자에 맞춰 누르면 곡의 BPM을 계산합니다. 튀는 간격은 빼고 평균을 내며, 빠르기말(Allegro 등)과 절반·두 배 BPM도 함께 보여 줍니다. 온라인 메트로놈 디자인 BPM과 강박 간격을 정해 '▶ 실시간 재생'으로 메트로놈 소리를 계속 듣거나, 정한 박 수만큼의 클릭 트랙을 WAV로 만들어 저장합니다. 톤·노이즈 생성기 디자인 정한 주파수의 사인·사각·톱니·삼각파나 화이트·핑크 노이즈를 만들어 들어 보고 WAV로 저장합니다. 주파수의 음 이름을 함께 보여 주고 청력 보호 한도를 둡니다. 스테레오 채널 분석기 디자인 스테레오 오디오의 좌우 피크·RMS, 균형, 위상 상관계수, Mid/Side 비율을 재고, 모노로 들을 때 소리가 사라지는 위상 문제나 사실상 모노인 파일을 찾아 줍니다. 오디오 Peak·RMS 측정기 디자인 오디오의 피크·RMS(dBFS), 크레스트 팩터, DC 오프셋, 찌그러진 샘플 수와 ITU-R BS.1770 통합 라우드니스(LUFS)를 재고 플랫폼 권장 음량과 비교해 줍니다. 자막 시간 이동·동기화기 디자인 SRT·VTT 자막 전체를 밀리초·초 단위로 당기거나 늦추고, 속도 배율이나 프레임 레이트(25→23.976 등) 차이까지 맞춥니다. 0초 이전으로 당겨진 자막과 겹침도 알려 줍니다. 영상 메타데이터 검사기 디자인 영상 파일의 재생 시간·화면 크기·비트레이트와 MP4·MOV 구조 속 코덱·회전·촬영 기기·촬영 위치(GPS)를 읽어, 올리기 전에 위치 정보 노출을 점검합니다. 영상 타임코드 계산기 디자인 프레임 수와 SMPTE 타임코드(드롭 프레임 포함)를 양방향으로 바꾸고 실제 경과 시간을 계산합니다. 29.97fps를 논드롭으로 셀 때 생기는 시간 오차도 알려 줍니다. 영상 썸네일 추출기 디자인 영상의 시작 시각부터 끝까지 고르게 장면 1~12개를 뽑아 한 장의 PNG 모음 이미지로 만듭니다. 각 장면에 시각이 표시돼 썸네일 후보를 고르기 쉽습니다. Web App Manifest 생성기 디자인 앱 이름·짧은 이름·시작 URL·범위·표시 방식·색·아이콘으로 manifest.webmanifest JSON과 head 태그를 만들고, 192·512 아이콘, start_url 범위, 표시 방식 같은 설치 가능 조건을 점검합니다.