터치 타깃 크기 체크
브라우저 처리버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다.
도구 실행입력 후 결과 확인
터치 타깃 크기 체크 샘플 실행
브라우저 처리
버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다.
샘플 결과
터치 타깃 크기 체크 샘플 결과 입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.
자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.
터치 타깃 크기 체크 사용 안내
버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다. 미리보기와 생성된 코드를 함께 확인해 실제 화면에 적용하기 전 값을 조정할 수 있습니다. 버튼의 가로·세로 크기를 입력해 모바일 터치 타깃 기준에 맞는지 확인합니다.
터치 타깃 크기 체크에서는 개발 중 입력 형식과 변환·검사 결과를 작은 샘플로 대조할 때 적합합니다.
사용 방법
- 도구 화면에 필요한 입력값이나 텍스트를 넣습니다.
- 계산, 생성, 변환 버튼을 눌러 결과를 확인합니다.
- 터치 타깃 크기 체크 화면에서 필요한 입력값이나 파일을 선택합니다.
- 조건과 선택 옵션을 확인한 뒤 실행 버튼을 누릅니다.
이럴 때 사용하세요
- 터치 타깃 크기 체크로 UI에 적용하기 전 시각 값을 빠르게 미리보기
- 터치 타깃 크기 체크 결과를 Focus Ring 생성기 작업 전후에 비교하며 디자인 시스템에 넣을 토큰이나 CSS를 정리하기
- 터치 타깃 크기 체크 결과를 확인한 뒤 Focus Ring 생성기 또는 CSS 버튼 스타일러에서 다음 작업을 이어갈 수 있습니다.
문제가 생겼을 때
터치 타깃 크기 체크: 미리보기와 실제 화면이 다름
부모 요소 크기, 상속 스타일과 선택자 우선순위를 확인하세요.
터치 타깃 크기 체크: 입력 형식을 인식하지 못하거나 오류 위치가 달라 보임
터치 타깃 크기 체크에서 가장 작은 샘플부터 괄호, 따옴표, 구분자와 인코딩을 순서대로 확인하세요.
활용 팁
- 터치 타깃 크기 체크 사용 시 운영 비밀값을 제거하고 괄호, 따옴표, 구분자와 문자 인코딩을 확인하세요.
- 터치 타깃 크기 체크 결과가 도구 설명과 맞는지 원본 입력과 나란히 비교하세요.
- 터치 타깃 크기 체크에서 조건 하나만 바꿔 이전 결과와 비교하면 차이가 생긴 원인을 찾기 쉽습니다.