정규표현식 실시간 테스트 & 캡처 시각화 스튜디오 (Regex Visualizer)

빛나는 신비로운 은하수와 투명한 글래스 패널 위에서 펼쳐지는 정규표현식 분석!
정규표현식 실시간 테스트 & 캡처 시각화 스튜디오 (Regex Visualizer)는 몽환적인 세미 글래스모피즘(Semi-Glassmorphism) 디자인 시스템과 고성능 정규표현식 파싱 및 HTML5 Canvas AST 노드 렌더러가 결합된 차세대 개발자 & 에디터 유틸리티 툴입니다.

복잡하고 난해했던 정규표현식 패턴을 흐름도(AST Flow Node) 캔버스로 즉시 시각화해주며, 실시간 하이라이팅 및 캡처 그룹 분해, 드래그 앤 드롭 텍스트 로딩, 그리고 추출된 매칭 데이터를 JSON, CSV, JavaScript, Python, PHP, Go 코드로 단 한 번의 클릭으로 자동 변환해 줍니다.

🎨 주요 특징 (Key Features)

• 🌌 몽환적인 투명 세미 글래스모피즘 테마 (Semi-Glassmorphism UI):
  • 깊이감 있는 우주 다크 배경(Backdrop-blur: 20px)과 네온 바이올렛/시안 가이드 라인
  • 실시간 별빛 파티클 캔버스 배경과 유연하게 반응하는 미래지향적 인터페이스
• 🌐 실시간 캔버스 AST 노드 다이어그램 (Regex Syntax Tree):
  • 정규표현식 구문을 자동 분석하여 Start ➔ Capture Group ➔ Tokens / Charsets ➔ Quantifier ➔ End 로 연결되는 대화형 노드 흐름도 렌더링
  • 캔버스 마우스/터치 드래그 이동(Pan), 스크롤/버튼 확대 축소(Zoom 25%~300%), 고화질 PNG 캔버스 스냅샷 다운로드 기능
• 🔍 실시간 매칭 & 캡처 그룹 하이라이터 (Live Matcher & Capture Visualizer):
  • 입력하는 즉시 그룹 0(전체 매치), 그룹 1, 그룹 2 및 이름 있는 캡처 그룹($<name>)에 색상별 고유 네온 하이라이팅 적용
  • .txt, .json, .log, .csv 등 로컬 파일을 텍스트 영역으로 드래그 앤 드롭(Drag & Drop)하여 즉시 로드
  • 매칭(Match) 모드와 실시간 문자열 치환(Replace) 모드 전환 지원
• ⚡ 데이터 & 코드 즉시 변환 스튜디오 (Instant Data Converter):
  • JSON 데이터: 매칭 위치, 캡처 그룹, Named Group 정보가 포함된 구조화된 JSON 배열 실시간 생성
  • CSV 데이터: 엑셀 및 데이터 분석용 CSV 표 형식 변환 및 다운로드
  • 다국어 코드 추출: JavaScript (matchAll), Python (re.finditer), PHP (preg_match_all), Go 코드 자동 생성 및 즉시 복사
• 📚 대화형 치트시트 & 프리셋 라이브러리:
  • 이메일, URL, 전화번호, 날짜, HEX 색상, IPv4, HTML 태그, 서버 로그 등 다채로운 실무 프리셋 원클릭 로드
  • 문자 클래스, 수량자, 앵커, 그룹 토큰 클릭 시 정규식 입력창 위치에 직관적 자동 삽입

🕹️ 사용 방법 (How to Use)

1. 패턴 입력 또는 프리셋 선택: 우측 상단 드롭다운에서 이메일, URL, HTML 태그 등 프리셋을 고르거나 상단 정규식 입력창에 패턴을 직접 작성합니다. (g, i, m, s, u, y 플래그 선택 가능)
2. 캔버스 다이어그램 확인: 상단 캔버스 영역에서 입력한 정규표현식의 노드 흐름도를 확인하고 마우스 드래그 및 줌 제어로 구문을 한눈에 파악하세요.
3. 테스트 데이터 로드: 테스트 텍스트 박스에 검증하고 싶은 문자열을 입력하거나 로컬 텍스트 파일을 드래그 앤 드롭 합니다.
4. 캡처 분석 & 코드 변환: 하단 캡처 그룹 분해 카드와 변환 탭(JSON / CSV / JS / Python)에서 결과 데이터를 복사하거나 파일로 다운로드합니다.

자주 묻는 질문 (FAQ)

어떻게 시작하나요?

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

별도 설치가 필요한가요?

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

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

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