Notepad4에 적용된 TinyEmmet v1.1 간단 사용법
들어가기에 앞서…
기존 Notepad4에 구현했던 Zen-coding을 전면 개조해서 TinyEmmet을 만들었다.
기존 Zen-coding은 JS로 만들어진 소스의 흐름을 거의 그대로 따라가며 옮겼었지만, 이번 TinyEmmet은 구조를 완전히 뒤엎고 현대화된 코딩 방식을 적용했다.
특히 이번 TinyEmmet v1.1 버전에서는 단순한 단일 속성 축약을 넘어, 하나의 에밋(Zen Code) 인터페이스 안에서 언어 문맥에 따라 출력을 완전히 다르게 유도하는 크로스 파이프라이닝 기능을 탑재했다.
이제 HTML 모드에서는 구조적 마크업을, CSS 모드에서는 SASS 중첩 스타일시트 뼈대를 동시에 뽑아낼 수 있다.
이 기능은 Notepad4 r6196부터 적용된다.
이 과정에서 사용자 인터페이스(UI)도 대폭 수정했다.
단순히 다이얼로그만 띄우던 레거시 방식에 추가하여, 입력 맥락을 스스로 분석해 다이얼로그 없이 그 자리에서 즉각 변환하는 기능도 지원한다.
단축키는 Ctrl + Alt + Shift + Z이다.
TinyEmmet 간단 사용법 (기본 매뉴얼)
사용법은 직관적이다.
에디터에서 에밋(Zen Code) 축약식을 타이핑한 뒤, 단축키 Ctrl + Alt + Shift + Z를 누르면 끝이다.
또는, 그냥 단축키를 눌러 다이얼로그를 띄워 축약식을 타이핑해도 된다.
1. 기본 전개 흐름
- HTML 이나 CSS 파일에서 원하는 축약식을 입력함. (예:
ul>li*3또는w100p+h50) - 축약식 바로 뒤에 커서를 두고 단축키를 누르거나 메뉴에서 기능 선택.
- 구문이 명확하면 다이얼로그 없이 그 자리에서 마크업이 자동으로 전개됨.
- 구문이 불명확한 경우에는 구문을 입력 대화창에 띄움.
2. 빈 상태에서 대화창 호출
- 커서 왼쪽에 아무런 글자도 없는 상태(빈 줄 또는 공백 뒤)에서 단축키를 누르면, 각 언어 문맥에 맞게 미리 등록해 둔 기본 예제 코드가 채워진 입력 대화창이 표시됨.
샘플 코드를 보며 실시간 프리뷰 작동 방식을 쉽게 파악할 수 있음.
새로 장착된 SASS 중첩이나 복합 괄호 연산의 실시간 프리뷰 작동 방식을 쉽게 파악할 수 있음.
3. 스마트 대화창 활용
- 만약 구문이 복잡하거나 정밀한 속성을 덧붙이고 싶다면 대화창을 활용하면 됨.
- 코어가 오타나 비표준 기호를 감지하면 자동으로 에디터 상의 해당 토큰 영역을 선택해 주면서 대화창을 띄움.
- UI 보강: CSS나 XML 모드로 대화창이 열릴 때는 무의미한 프로파일 선택 라디오 버튼(HTML5/XHTML)이 자동으로 비활성화되도록 마감 처리를 하여 조작 혼선을 줄임.
v1.1 버전 주요 업데이트 내역 (New)
이번 1.1 판올림의 핵심은 문법적 예외 없는 내구성과 디테일한 포맷팅 품질 향상에 있다.
① CSS 모드 SASS 중첩 기능 지원
- CSS 문맥에서
>계층 연산자나 괄호 그룹, 형제 연산자(+)가 포함된 식을 전개하면, SASS/LESS 형태의 중괄호 중첩 구조 뼈대를 자동으로 빌드함.
(예:nav>ul>li입력 시 단계별로 인덴트가 적용된 블록 생성)*
② 중첩 없는 일반 CSS 선언에서의 괄호 및 곱셈(*) 전처리 탑재
- 표준 에밋 스펙의 한계를 넘어, 중괄호 중첩이 없는 CSS에서도 괄호와 곱셈 연산이 작동하도록 전처리 레이어를 설계함.
(예:@f+@m+(w100p+h50)*2를 넘기면 해당 부분만 반복 전개됨)*
③ 디테일한 컬러코드 공백 주입 및 프리픽스 보정
bxsh0-4-10#ccc와 같이 수치 뒤에 컬러코드가 붙을 때, 헥스코드 앞 공백이 누락되어 문법이 깨지던 버그를 해결함.- 수치 값이 붙지 않는 단독 약어(
trf,us,trs)를 확장할 때도-ms-레거시 호환성을 포함한 크로스 브라우징 벤더 프리픽스가 추가되도록 수정함.
자동 인식 및 상세 작동 조건
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 / XML | 커서만 두고 실행 | 명확하고 올바른 에밋 코드일 때 | 대화창 없이 즉시 마크업 구조로 변환 |
| CSS / SCSS | 커서만 두고 실행 | > 계층 연산자가 포함된 구조식일 때 |
[v1.1] 대화창 없이 중괄호 중첩 트리 생성 |
| CSS / SCSS | 커서만 두고 실행 | 프리픽스 / 골뱅이(@) 지시어 / 복합 괄호 속성식일 때 |
[v1.1] 공백 및 단위 보정 후 선언문 즉시 변환 |
| HTML / CSS / XML | 커서만 두고 실행 | 오타나 부분 변환 맥락이 섞여 있을 때 | 토큰을 자동 블록 지정 후 대화창 팝업 |
| HTML / CSS / XML | 커서만 두고 실행 | 없음 (빈 라인 또는 공백 뒤) | 기본 예제 코드를 채운 채 대화창 팝업 |
| HTML / CSS / XML | 텍스트를 블록 지정했을 때 | 모든 경우 | 선택 영역을 채운 채 무조건 대화창 팝업 |
| C++, 파이썬 등 타 언어 | 모든 상태 | 모든 경우 | 텍스트를 자동 추출해 무조건 대화창 팝업 |
