Notepad4에 적용된 TinyEmmet 간단 사용법
들어가기에 앞서…
기존 Notepad4에 구현했던 Zen-coding을 전면 개조해서 TinyEmmet을 만들었다.
기존 Zen-coding은 JS로 만들어진 소스의 흐름을 거의 그대로 따라가며 옮겼었지만, 이번 TinyEmmet은 구조를 완전히 뒤엎고 현대화된 코딩 방식을 적용했다.
이 기능은 Notepad4 r6196부터 적용된다.
이 과정에서 사용자 인터페이스(UI)도 대폭 수정했다.
단순히 다이얼로그만 띄우던 레거시 방식에 추가하여, 입력 맥락을 스스로 분석해 다이얼로그 없이 그 자리에서 즉각 변환하는 기능도 지원한다.
단축키는 Ctrl + Alt + Shift + Z이다.
TinyEmmet 간단 사용법 (기본 매뉴얼)
사용법은 직관적이다.
에디터에서 에밋(Zen Code) 축약식을 타이핑한 뒤, 단축키 Ctrl + Alt + Shift + Z를 누르면 끝이다.
또는, 그냥 단축키를 눌러 다이얼로그를 띄워 축약식을 타이핑해도 된다.
1. 기본 전개 흐름
- HTML 이나 CSS 파일에서 원하는 축약식을 입력함. (예:
ul>li*3또는w100p+h50) - 축약식 바로 뒤에 커서를 두고 단축키를 누르거나 메뉴에서 기능 선택.
- 구문이 명확하면 다이얼로그 없이 그 자리에서 마크업이 자동으로 전개됨.
- 구문이 불명확한 경우에는 구문을 입력 대화창에 띄움.
2. 빈 상태에서 대화창 호출
- 커서 왼쪽에 아무런 글자도 없는 상태(빈 줄 또는 공백 뒤)에서 단축키를 누르면, 각 언어 문맥에 맞게 미리 등록해 둔 기본 예제 코드가 채워진 입력 대화창이 표시됨.
샘플 코드를 보며 실시간 프리뷰 작동 방식을 쉽게 파악할 수 있음.
3. 스마트 대화창 활용
- 만약 구문이 복잡하거나 정밀한 속성을 덧붙이고 싶다면 대화창을 활용하면 됨.
- 코어가 오타나 비표준 기호를 감지하면 자동으로 에디터 상의 해당 토큰 영역을 선택해 주면서 대화창을 띄움.
- UI 보강: CSS나 XML 모드로 대화창이 열릴 때는 무의미한 프로파일 선택 라디오 버튼(HTML5/XHTML)이 자동으로 비활성화되도록 마감 처리를 하여 조작 혼선을 줄임.
자동 인식 및 상세 작동 조건
TinyEmmet 엔진은 단축키가 눌렸을 때 현재 파일의 종류, 단축키 조합, 커서 주변의 텍스트 상태를 종합적으로 판정하여 [즉시 변환]과 [대화창 팝업] 분기를 판단해서 결정한다.
1. 편집 중인 파일의 종류에 따라
- 웹 문서 파일 (HTML, PHP, CSS, XML):
아래의 세부 조건들을 까다롭게 따져서 즉시 변환할지 대화창으로 안전하게 넘길지 결정함. - 기타 소스 파일 (C++, Python, 일반 텍스트 등):
작성 중인 기존 코드가 파괴되는 것을 원천 차단하기 위해 즉시 변환을 불허하고 항상 대화창을 띄움.
이 때 커서 앞에 있던 문자열을 대화창 입력칸에 자동으로 채워주는 맥락 보존 기능이 작동함.
2. 에디터 작업 상황별 세부 조건 (웹 문서 기준)
① 글자를 블록으로 선택(지정)하고 실행했을 때
- 동작: 구문의 무결성 여부와 상관없이 무조건 선택 영역을 품고 입력 대화창을 표시함.
- 목적: 축약식을 먼저 선택한 뒤 단축키를 누르면 정밀 편집 모드로 진입하겠다는 의사표시 인식함.
② 선택 영역 없이 커서만 두고 실행했을 때 (가장 일반적인 상황)
- 바로 변환:
커서 왼쪽 문자열을 역추적하여 문법 구조가 정당하고 명확한 축약식일 때 다이얼로그 없이 그 자리에서 즉시 전개함.
(예:div,ul>li*3, CSS의@f등) - 대화창 팝업:
예약어가 아닌 단어이거나, 문법은 성립하나 비표준 기호가 섞여 있어 부분 변환(Fallback) 및 오타 확률이 높다고 판단될 때.
(예:apple, CSS의w100,h200등)
이때는 오작동 의심 구역을 에디터가 자동으로 블록 지정해 준 뒤 대화창을 띄움.
[소소한 팁] Undo(Ctrl + Z)와의 자연스러운 연동 시너지
즉시 변환된 결과물이 마음에 들지 않을 때 되돌리기 단축키인Ctrl + Z를 누르면, 원래 타이핑했던 에밋 축약식 단어로 복구되면서 해당 영역이 블록 선택 상태로 남는다.
이 상태에서 에밋 단축키를 한 번 더 누르면 위의 ‘① 블록 지정 시 무조건 대화창 팝업’ 규칙이 적용되면서 대화창 편집 모드로 전환된다.
한눈에 보는 에밋 작동 규칙 요약
| 파일 종류 (렉서) | 에디터 작업 상태 | 커서 앞(또는 블록) 텍스트의 성격 | 최종 동작 결과 |
|---|---|---|---|
| HTML / PHP / CSS / XML | 커서만 두고 실행 | 명확하고 올바른 에밋 코드 및 At-Rule 일 때 | 대화창 없이 그 자리에서 바로 변환 |
| HTML / PHP / CSS / XML | 커서만 두고 실행 | 오타나 부분 변환 맥락이 섞여 있을 때 | 토큰을 자동 블록 지정 후 대화창 팝업 |
| HTML / PHP / CSS / XML | 커서만 두고 실행 | 없음 (빈 라인 또는 공백 뒤) | 기본 예제 코드를 채운 채 대화창 팝업 |
| HTML / PHP / CSS / XML | 텍스트를 블록 지정했을 때 | 모든 경우 | 선택 영역을 채운 채 무조건 대화창 팝업 |
| C++, 파이썬 등 타 언어 | 모든 상태 | 모든 경우 | 텍스트를 자동 추출해 무조건 대화창 팝업 |
