사이트의 전체 HTML 코드를 몇 분, 아니 몇 초 만에 작성할 수 있다면 어떨까요? Emmet을 사용하면 충분히 가능합니다. Emmet은 HTML, XML 등 구조화된 코드 형식을 빠르게 개발할 수 있게 해주는 강력한 도구입니다.
Emmet은 다양한 인기 텍스트 에디터에서 사용할 수 있는 플러그인입니다. Emmet을 활용하면 간결하고 압축된 문법으로 페이지의 뼈대를 먼저 작성한 뒤, 이를 완전한 HTML 코드로 한 번에 확장할 수 있습니다. 마치 마법처럼 짧은 한 줄의 텍스트가 수백 줄의 코드로 펼쳐지며, 정적 페이지는 물론 사이트 전체 구조도 몇 분 안에 완성됩니다.
이 글에서는 Emmet을 사용해 완전한 정적 웹 페이지를 만드는 방법을 알아봅니다. 이 튜토리얼에서는 Emmet을 기본 지원하는 Visual Studio Code를 사용합니다. Sublime Text나 Atom 같은 다른 에디터에서도 Emmet을 사용할 수 있지만, 별도의 확장 프로그램을 설치해야 합니다.
1. 사이트 파일 만들기
먼저 Visual Studio Code를 실행합니다.
File → New File 메뉴를 선택해 새로운 빈 문서를 생성합니다.
이어서 File → Save As 메뉴로 파일을 저장하되, 확장자를 반드시 .html로 지정합니다.
2. 기본 구조 잡기
웹 페이지의 요소들은 그룹과 하위 그룹으로 체계적으로 구성됩니다. Emmet으로 코딩할 때는 항상 '각 그룹 안에 또 다른 그룹이 될 수 있는 요소들이 포함된다'는 점을 염두에 두어야 합니다.
참고: 기본적인 내용만 다루지만, 진행하기 전에 HTML 문법의 기초를 어느 정도 알고 있다면 훨씬 수월합니다.
가장 기본적인 최상위 수준에서 대부분의 사이트는 세 개의 그룹(섹션)으로 구성됩니다. 바로 헤더(header), 핵심 콘텐츠가 들어가는 메인(main), 그리고 푸터(footer)입니다. Emmet으로 이를 만들려면 다음과 같이 입력합니다.
#header+#mainsite+#footer
각 단어 앞의 #는 해당 그룹이 ID를 가진 div 요소임을 의미합니다. 줄 끝에서 Enter 키를 누르면 Emmet이 동작하며, 짧은 문장이 세 줄짜리 구조화된 HTML로 변환되는 것을 확인할 수 있습니다.
3. 헤더 구조 만들기
일반적인 사이트의 헤더에는 로고와 하나 이상의 메뉴가 포함됩니다. 이를 페이지에 추가하려면 이전 단계에서 확장된 HTML을 그대로 둔 상태에서 헤더 div 내부에 직접 입력하면 됩니다. 예를 들어 다음과 같이 작성합니다.
#logo+#menu_top+#menu_main
Enter 키를 눌러 확장하면 헤더 안에 로고용 div와 두 개의 메뉴용 div, 총 세 개의 요소가 추가됩니다.
4. Emmet에서 그룹핑 활용하기
Emmet에서는 괄호 ()를 사용해 요소들을 묶을 수 있습니다. 이를 활용하면 훨씬 복잡한 페이지 구조도 손쉽게 만들 수 있습니다. 지금까지 작성한 내용을 모두 되돌리고, 기본 코드인 #header+#mainsite+#footer만 남겨둡니다.
그다음 코드의 #header 부분을 아래와 같이 교체합니다.
(#header>.logo+.menu.top+.menu.main^)
Emmet에서는 > 문자로 한 단계 아래로 들어가고, ^ 문자로 한 단계 위로 올라갈 수 있습니다. 덕분에 특정 요소 안으로 진입해 다른 요소들을 추가한 뒤, 다시 상위 레벨로 돌아오는 흐름을 자연스럽게 표현할 수 있습니다.
결과 코드는 다음과 같습니다.
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
이 코드의 의미를 풀어보면 다음과 같습니다. "ID가 #header인 div(그룹)를 추가한다. 그 안에 .logo, .menu.top, .menu.main 클래스를 가진 세 개의 div를 넣는다. 한 단계 위로 나와 그룹 밖으로 빠져나간 뒤, 옆에 ID가 #mainsite와 #footer인 div 두 개를 더 추가한다."
5. 게시물(Post) 구조 만들기
일반적인 사이트의 게시물 하나에는 보통 다음과 같은 요소들이 포함됩니다.
- 제목
- 이미지
- 요약문(텍스트 단락)
원래라면 게시물 전문을 읽을 수 있는 링크나 카테고리·태그 링크도 함께 제공해야 하지만, 여기서는 설명의 편의를 위해 위 세 가지 요소만 사용하겠습니다.
추가할 코드는 다음과 같습니다.
(.post>h3{Post Title $}+img+p{Post Excerpt})*5
이 코드는 Emmet에게 ".post 클래스를 가진 div를 만들고, 그 안에 H3 제목, 이미지, 요약문 단락을 배치하라"고 지시합니다.
요소 뒤에 붙는 {TEXT}는 해당 요소의 내용을 정의합니다. 즉, {Post Title}은 각 H3 제목의 내용이 "Post Title"이라는 placeholder 텍스트가 되도록 지정하는 것입니다. 원하는 이름이나 임의의 문자열로 바꾸면, 코드가 확장될 때 게시물 제목의 내용으로 그대로 사용됩니다.
"Post Title" 옆의 $는 숫자 변수로, 괄호 밖의 *5와 함께 작동합니다. 괄호 뒤의 *5는 괄호 안의 내용을 다섯 번 반복하라는 의미이며, $는 반복될 때마다 해당 게시물의 순번으로 치환됩니다. 페이지에 원하는 게시물 개수만큼 이 숫자를 조절하면 됩니다.
이 코드를 실제 전체 코드에 추가하면 다음과 같은 형태가 됩니다.
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5)
6. 푸터 구조 만들기
푸터에는 두 개의 그룹, 즉 .design과 .copyright 클래스를 가진 두 개의 div를 추가해 보겠습니다.
코드는 다음과 같습니다.
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))
이 코드는 .design 클래스를 가진 div를 만들고, 그 안에 .designerslink 클래스를 가진 링크를 배치합니다. 그 옆에는 .copyright 클래스를 가진 두 번째 div가 추가되며, 그 안에는 "Copyright 2020 My Name"이라는 내용의 일반 텍스트 단락이 들어갑니다.
이를 전체 코드에 반영하면 최종적으로 다음과 같습니다.
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})))
이제 Enter 키만 누르면 사이트가 완성됩니다!
키 입력 한 번으로 지금까지 살펴본 모든 내용, 즉 극도로 압축된 문자열들이 완전한 페이지를 구성하는 수십 줄의 정상적인 HTML 문법으로 변신합니다.
Ctrl + S를 누르거나 File → Save 메뉴로 변경 사항을 저장합니다. 그런 다음 브라우저를 열고, File → Open 메뉴나 외부 파일 관리자를 통해 HTML 파일을 찾아 직접 열어 결과를 확인하세요.
마무리
지금까지 Emmet을 활용해 HTML 파일을 만드는 기본기를 익혔습니다. 물론 언제든 코드로 돌아가 수정하거나 새로운 요소를 추가해 확장할 수 있습니다.
이미 Emmet을 알고 계셨나요? 사이트 제작에 도움이 되는 다른 단축 팁이 있다면 댓글로 공유해 주세요.