에메트 문법, 번거로움 없이 즉시 처리하는 방법

에메트 문법, 번거로움 없이 즉시 처리하는 방법

 

---

목차

• 에메트 문법, 왜 사용해야 할까요?
• 에메트 설치 및 기본 설정
• 자주 사용하는 에메트 문법
• 에메트와 함께하는 효율적인 웹 개발 워크플로우
• 에메트 사용 시 유의할 점

---

에메트 문법, 왜 사용해야 할까요?

웹 개발을 하다 보면 HTML과 CSS 코드를 작성하는 데 상당한 시간을 할애하게 됩니다. 특히 반복적이고 정형화된 구조를 가진 코드를 일일이 타이핑하는 것은 비효율적이고 지루한 작업이죠. 이럴 때 에메트(Emmet)는 개발자의 생산성을 혁신적으로 향상시켜주는 강력한 도구가 됩니다. 에메트는 약어(Abbreviation)를 사용하여 복잡한 HTML 구조나 CSS 속성을 빠르고 간결하게 생성할 수 있도록 도와줍니다. 마치 마법 지팡이처럼 짧은 몇 글자로 긴 코드를 만들어내는 것이죠.

예를 들어, div>ul>li*3이라고 입력한 후 Tab 키를 누르면 < div >< ul >< li >< /li >< li >< /li >< li >< /li >< /ul >< /div >와 같은 복잡한 HTML 구조가 순식간에 생성됩니다. CSS에서도 m10이라고 입력하면 margin: 10px;가 완성되고, p10-20은 padding: 10px 20px;로 변환됩니다. 이러한 자동 완성 기능은 개발자가 코드 작성에 드는 시간을 절약하고, 오타를 줄여주며, 더 중요한 로직 구현에 집중할 수 있도록 돕습니다. 또한, 일관된 코딩 스타일을 유지하는 데도 기여하여 협업 시 발생할 수 있는 문제를 줄여줍니다. 에메트는 단순한 자동 완성 도구를 넘어, 웹 개발 워크플로우를 근본적으로 변화시키는 핵심적인 생산성 도구라고 할 수 있습니다.

---

에메트 설치 및 기본 설정

대부분의 현대적인 코드 에디터는 에메트를 기본적으로 지원하거나 플러그인 형태로 쉽게 설치할 수 있도록 제공합니다. 가장 널리 사용되는 에디터별 설치 및 설정 방법을 알아보겠습니다.

VS Code (Visual Studio Code)

VS Code는 에메트를 기본적으로 내장하고 있어 별도의 설치 과정 없이 바로 사용할 수 있습니다. HTML, CSS, SCSS, Less 등의 파일에서 .html이나 .css 확장자를 가진 파일에서 에메트 약어를 입력하고 Tab 키를 누르면 자동 완성이 활성화됩니다.
만약 자동 완성이 제대로 작동하지 않는다면, 파일(File) > 기본 설정(Preferences) > 설정(Settings) (또는 Ctrl+,)으로 이동하여 검색창에 emmet을 입력합니다. Emmet: Trigger Expansion On Tab 옵션이 체크되어 있는지 확인하고, 필요하다면 Emmet: Show Expanded Abbreviation 옵션도 활성화하여 약어 입력 시 미리보기를 확인할 수 있도록 설정하는 것이 좋습니다. 또한, JSX 파일에서 에메트 사용을 원한다면 emmet.includeLanguages 설정에 "javascript": "javascriptreact"를 추가해야 합니다.

Sublime Text

Sublime Text는 Emmet 패키지를 설치해야 합니다. Ctrl+Shift+P (또는 Cmd+Shift+P)를 눌러 Command Palette를 열고 Package Control: Install Package를 선택한 후, 검색창에 Emmet을 입력하여 설치합니다. 설치가 완료되면 Sublime Text를 재시작하는 것이 좋습니다. 기본적으로 Tab 키를 사용하여 약어를 확장하며, 필요에 따라 Preferences > Package Settings > Emmet > Settings - User에서 추가적인 설정을 할 수 있습니다.

Atom

Atom 에디터 역시 emmet 패키지를 설치해야 합니다. File > Settings > Install로 이동하여 emmet을 검색하여 설치합니다. 설치 후에는 별다른 설정 없이 바로 사용할 수 있습니다.

기타 에디터

WebStorm, IntelliJ IDEA와 같은 JetBrains 계열의 IDE는 에메트를 강력하게 지원하며, 대부분 기본적으로 활성화되어 있습니다. Coda, Dreamweaver 등 다른 에디터들도 에메트 플러그인을 지원하는 경우가 많으니, 사용하시는 에디터의 공식 문서를 참고하여 설치 및 설정을 진행하시면 됩니다.

에메트를 효율적으로 사용하기 위해서는 자신이 사용하는 에디터의 설정과 단축키를 숙지하는 것이 중요합니다. 특히 Tab 키 외에 다른 단축키를 사용해야 하는 경우도 있으니, 에디터별 에메트 공식 문서를 한 번쯤 읽어보는 것을 권장합니다.

---

자주 사용하는 에메트 문법

에메트의 강력함은 다양한 약어 문법에 있습니다. 몇 가지 핵심적인 문법 규칙을 익히면 HTML과 CSS 코딩 속도를 비약적으로 높일 수 있습니다.

HTML 약어

• 자식(>): 자식 요소를 생성합니다. div>ul>li는 <div><ul><li></li></ul></div>를 생성합니다.
• 형제(+): 형제 요소를 생성합니다. div+p+blockquote는 <div></div><p></p><blockquote></blockquote>를 생성합니다.
• 반복(*): 요소를 여러 번 반복합니다. ul>li*5는 <ul><li></li><li></li><li></li><li></li><li></li></ul>를 생성합니다.
• 그룹화(()): 복잡한 구조를 그룹화합니다. div>(header>ul>li*2)+footer는 <div><header><ul><li></li><li></li></ul></header><footer></footer></div>를 생성합니다.
• ID(#): ID를 지정합니다. div#header는 <div id="header"></div>를 생성합니다.
• 클래스(.): 클래스를 지정합니다. p.text.highlight는 <p class="text highlight"></p>를 생성합니다.
• 속성([]): 사용자 정의 속성을 지정합니다. a[href="https://example.com" target="_blank"]는 <a href="https://example.com" target="_blank"></a>를 생성합니다.
• 텍스트({}): 요소 내부에 텍스트를 추가합니다. h1{Hello, Emmet!}은 <h1>Hello, Emmet!</h1>을 생성합니다.
• 넘버링($): 반복되는 요소에 순차적인 번호를 부여합니다. li.item$*3은 <li class="item1"></li><li class="item2"></li><li class="item3"></li>을 생성합니다. $@N을 사용하여 시작 번호를 지정할 수도 있습니다 (예: li.item$@3*3은 item3부터 시작).
• 상위 요소 (^): 현재 수준에서 상위 요소로 이동합니다. div>ul>li^a는 <div><ul><li></li></ul><a href=""></a></div>를 생성합니다. 이는 복잡한 중첩 구조에서 특히 유용합니다.

CSS 약어

CSS에서도 에메트는 매우 강력합니다. 대부분의 CSS 속성은 약어로 표현할 수 있으며, 값까지 함께 지정할 수 있습니다.

• 기본 속성: 속성명의 첫 글자나 약어를 사용합니다.
  • m -> margin: ;
  • p -> padding: ;
  • w -> width: ;
  • h -> height: ;
  • d -> display: ;
  • pos -> position: ;
  • bgc -> background-color: ;
  • c -> color: ;
  • ff -> font-family: ;
  • fz -> font-size: ;
• 값 지정: 약어 뒤에 값을 바로 입력합니다.
  • m10 -> margin: 10px;
  • p10-20 -> padding: 10px 20px;
  • w100p -> width: 100%; (p는 %를 의미)
  • h50vh -> height: 50vh; (vh는 vh 단위를 의미)
  • d:f -> display: flex;
  • bgc#eee -> background-color: #eee;
• 단위 지정: px, em, rem, %, vh, vw 등 다양한 단위를 약어로 표현할 수 있습니다.
  • m10e -> margin: 10em;
  • fz16r -> font-size: 16rem;
• 벤더 프리픽스: x를 사용하여 벤더 프리픽스를 자동으로 추가할 수 있습니다.
  • pos:f -> position: flex; (이런 방식은 거의 사용되지 않지만, -webkit-transform과 같은 경우에 유용합니다.)
  • trf -> transform: ; (VS Code의 에메트는 기본적으로 벤더 프리픽스를 잘 처리해줍니다.)
  • bs -> box-sizing: border-box; (접두사가 자동으로 붙는 경우가 많습니다.)

이 외에도 에메트 공식 문서를 참고하면 더 많은 약어와 활용법을 찾아볼 수 있습니다. 처음부터 모든 약어를 외울 필요는 없지만, 자주 사용하는 것들부터 익숙해지면 코딩 속도가 훨씬 빨라질 것입니다.

---

에메트와 함께하는 효율적인 웹 개발 워크플로우

에메트는 단순히 코드를 빠르게 생성하는 것을 넘어, 전체 웹 개발 워크플로우를 더욱 효율적으로 만들어줍니다.

HTML 구조 설계의 가속화

새로운 웹 페이지나 컴포넌트를 만들 때, 가장 먼저 하는 일은 HTML 구조를 잡는 것입니다. 에메트를 사용하면 이 과정을 비약적으로 단축할 수 있습니다. 예를 들어, 흔히 사용되는 반응형 웹 페이지의 기본 구조를 생각해보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

이 모든 코드를 일일이 타이핑하는 대신, VS Code에서 ! (또는 html:5)를 입력하고 Tab 키를 누르면 위 HTML 기본 구조가 자동으로 생성됩니다. 이어서, 헤더, 메인 콘텐츠, 푸터로 구성된 레이아웃을 빠르게 만들고 싶다면 다음과 같은 에메트 약어를 사용할 수 있습니다.
header+main>section*2>article.card*3^footer
이 짧은 약어는 다음과 같은 HTML 구조를 생성합니다.

<header></header>
<main>
    <section>
        <article class="card"></article>
        <article class="card"></article>
        <article class="card"></article>
    </section>
    <section>
        <article class="card"></article>
        <article class="card"></article>
        <article class="card"></article>
    </section>
</main>
<footer></footer>

이렇게 단 몇 초 만에 복잡한 HTML 구조를 완성할 수 있으므로, 초기 설계 단계에서부터 시간을 크게 절약할 수 있습니다.

CSS 스타일링의 생산성 향상

HTML 구조를 완성한 후에는 CSS를 사용하여 스타일을 입히게 됩니다. 에메트는 CSS 작업에서도 빛을 발합니다. 예를 들어, box-sizing: border-box;를 적용하고 싶다면 bsb만 입력하면 됩니다. display: flex;와 관련된 속성들을 빠르게 적용하고 싶다면 df (display: flex;), jcsa (justify-content: space-around;), aic (align-items: center;) 등 직관적인 약어를 사용할 수 있습니다.

특정 크기의 마진과 패딩을 주고 싶을 때는 m10 (margin: 10px;), p20-30 (padding: 20px 30px;)과 같이 간단하게 입력합니다. 폰트 크기, 색상, 배경색 등 자주 사용하는 CSS 속성들을 에메트 약어로 외워두면 스타일시트를 작성하는 속도가 획기적으로 빨라집니다. 또한, w100p (width: 100%;), h50vh (height: 50vh;)와 같이 단위까지 함께 지정할 수 있어 더욱 편리합니다. 이처럼 에메트를 활용하면 CSS 작성 과정에서 발생하는 반복적인 타이핑을 줄이고, 오타 발생률을 낮춰 디버깅 시간을 단축할 수 있습니다.

코드 스니펫 활용 및 확장

에메트의 강력한 기능 중 하나는 코드 스니펫과의 시너지입니다. 자주 사용하는 복잡한 HTML 또는 CSS 패턴이 있다면, 이를 에메트 약어로 정의하여 재사용할 수 있습니다. 예를 들어, 특정 형태의 버튼이나 카드 컴포넌트를 자주 만든다면, 이를 에메트 약어로 등록해두고 필요할 때마다 호출하여 사용할 수 있습니다. 많은 에디터들이 사용자 정의 스니펫 기능을 제공하며, 여기에 에메트 문법을 활용하면 더욱 강력한 커스텀 스니펫을 만들 수 있습니다.

또한, 에메트는 HTML이나 CSS 파일뿐만 아니라 JSX, TSX, Vue 템플릿, Svelte 템플릿 등 다양한 프레임워크와 라이브러리의 템플릿 파일에서도 작동합니다. 이로 인해 리액트, 뷰, 앵귤러 등의 SPA(Single Page Application) 개발 시에도 에메트를 활용하여 컴포넌트 마크업을 빠르게 작성할 수 있습니다. 이는 프레임워크 개발의 생산성 향상에도 크게 기여합니다.

---

에메트 사용 시 유의할 점

에메트는 매우 강력한 도구이지만, 몇 가지 유의할 점을 알고 사용하면 더욱 효과적으로 활용할 수 있습니다.

약어의 정확성

에메트 약어는 정해진 규칙에 따라 작동합니다. 약어가 정확하지 않거나 오타가 있으면 제대로 확장되지 않을 수 있습니다. 예를 들어, div 대신 dv를 입력하면 작동하지 않을 수 있습니다. 자주 사용하는 약어는 정확하게 익히고, 새로운 약어를 사용할 때는 잠시 에메트 공식 문서를 참고하는 것이 좋습니다.

너무 복잡한 약어는 피하기

에메트는 복잡한 구조를 한 번에 생성할 수 있도록 도와주지만, 지나치게 복잡한 약어는 오히려 가독성을 해치고 실수를 유발할 수 있습니다. 예를 들어, 20줄 이상의 HTML 코드를 단 하나의 에메트 약어로 만들려고 시도하는 것은 좋은 방법이 아닐 수 있습니다. 긴 약어는 기억하기 어렵고, 중간에 오류가 발생했을 때 디버깅하기도 어렵습니다. 적절한 수준에서 약어를 활용하고, 너무 복잡한 구조는 여러 개의 약어로 나누어 생성하는 것이 효율적입니다.

자동 완성 설정 확인

에메트가 제대로 작동하지 않는다면, 가장 먼저 코드 에디터의 자동 완성 설정이 올바르게 되어 있는지 확인해야 합니다. 특히 VS Code의 경우, Emmet: Trigger Expansion On Tab 옵션이 활성화되어 있는지, 그리고 .html이나 .css 파일 외 다른 파일에서 사용하고 싶다면 emmet.includeLanguages 설정이 올바르게 되어 있는지 확인해야 합니다. 간혹 에디터 업데이트나 플러그인 충돌로 인해 설정이 변경될 수도 있으므로, 문제가 발생하면 설정을 다시 확인하는 습관을 들이는 것이 좋습니다.

맥락에 맞는 사용

에메트는 HTML과 CSS에 특화된 도구입니다. JavaScript 코드나 기타 언어에서는 에메트 약어가 제대로 작동하지 않거나 예상치 못한 결과를 초래할 수 있습니다. 각 언어의 문맥에 맞게 에메트를 활용하고, 다른 언어에서는 해당 언어에 특화된 코드 스니펫이나 자동 완성 기능을 사용하는 것이 바람직합니다.

꾸준한 연습

에메트는 결국 '손에 익어야' 빛을 발하는 도구입니다. 처음에는 약어를 찾아보고 입력하는 것이 번거롭게 느껴질 수 있지만, 꾸준히 사용하고 연습하다 보면 자연스럽게 약어가 몸에 배게 됩니다. 작은 프로젝트나 연습용 페이지를 만들 때 에메트를 적극적으로 활용하여 약어에 익숙해지는 시간을 갖는 것이 중요합니다. 몇 주간 꾸준히 사용하면 에메트 없이는 개발하기 어렵다는 것을 느끼게 될 것입니다.

에메트를 올바르게 이해하고 위 유의사항들을 지킨다면, 웹 개발 작업의 효율성을 극대화하고 더욱 즐겁게 코딩할 수 있을 것입니다.