[Zendesk 고도화] 리퀴드 마크업 활용하기 #2
#2 HTML의 기초 문법 이해하기
지난 시간에 마크업 언어의 탄생 배경과 리퀴드 마크업(Liquid markup)을 왜 사용하는지에 대해 이야기를 나눠 보았습니다.
이번 시간에는 HTML 문법에 대해 가볍게 이야기해보려고 합니다.
리퀴드 마크업(Liquid markup) 이야기를 하기 전에 HTML에 대한 이야기를 하는 이유는 리퀴드 언어가 대게 HTML과 함께 쓰이기 때문입니다. 만약 누군가가 작성한 코드를 살펴보고 수정이 필요한 경우라고 가정할 때, 어디까지가 HTML이고, 어디까지가 리퀴드 문법인지 이해하지 못하면 흐름을 파악하기가 매우 어려울 수 있습니다.
하지만 HTML의 많은 내용을 다루지는 않을 것입니다.
우리에게 필요한 것은 HTML로 문서를 작성하는 것이 아니라, HTML의 구조만 파악하면 되기 때문입니다.
만약 HTML에 이미 익숙하시다면 이번 챕터는 스킵하셔도 좋습니다.
아마 HTML을 다뤄보신 분이라면 '태그'라는 단어는 익숙한 용어일 수도 있습니다.
문자의 크기나 색상, 내용 등의 변화를 주기 위해 마크업 언어를 사용하고, 약속된 형태를 바탕으로 문자를 표시한다고 이야기했는데요. 마크업 언어는 콘텐츠 내용과 텍스트에 부여하려는 명령이 구분되어야 하기 때문에 사람들끼리 특정한 형태로 명령을 부여하는 약속을 만들어 쓰기로 정합니다.
그 약속을 우리는 '태그'라고 부릅니다.
이번 시간에는 HTML의 기본 태그에 대해 이야기해 보도록 하겠습니다.
지난 시간에 만들었던 문서를 다시 보면서 이야기를 시작해 보겠습니다.
우리가 인쇄물로 만들어야 할 콘텐츠는 아래와 같았습니다.
그리고 이 내용을 마크업 언어로 출력하면 아래와 비슷한 형태일 것이라고 했습니다.
<진하게 시작> 1단계. 하루 고객 문의가 30건 이하라면? <진하게 끝>
<밑줄 시작><밑줄 색상: 파란색 시작>"제품의 개선점을 발견하기 위해 대표도, 개발자도, 마케터도 고객 문의를 공유하세요." <밑줄 끝><밑줄 색상:파란색 끝>
<문단 시작>1단계에서 모두가 고객 문의를 모니터링하고 프로덕트의 장점과 단점을 찾아가는 것이 중요합니다. 이 때는 CS 전담팀을 두기보다는 누구나 CS 메인 콜이 될 수 있어요. 창업한 지 몇 년이 지나도 대표가 직접 CS를 잡고 계시는 경우도 있어요. 개발 중심 회사는 개발자들이 직접 고객 응대를 하며 제품의 로드맵을 잡아가고요. 마케터가 고객과 대화 중 건진 카피로 효율이 떡상하는 마케팅 메시지를 건지기도 합니다.<문단 끝>
위 문법은 여러분의 이해를 돕기 위해 HTML의 문법을 한글로 작성을 해본 것인데요.
첫 번째 문장을 실제 HTML 태그로 옮겨보면 아래와 같습니다.
<B>1단계. 하루 고객 문의가 30건 이하라면?</B>
위 내용이 어떤 의미인지 설명드리면 HTML 태그의 맥락을 이해하실 수 있겠네요.
2. <XXX> 로 시작하면 반드시 </XXX >로 끝나야 합니다.
< XXX>와 같이 / 가 없는 태그를 여는 태그, </XXX>와 같이 /가 붙은 태그를 닫는 태그라고 합니다.
여는 태그와 닫는 태그로 HTML 태그는 반드시 한 쌍으로 이루어져야 합니다.
위 태그에서도 <B>로 시작하여 </B> 로 끝난 것을 알 수 있습니다. 만약 여는 태그나 닫는 태그를 누락한다면 '진하게' 명령이 적용되지 않고 일반 텍스트로 표시될 것입니다.
1. HTML 태그는 반드시 < > 괄호 안에 내용을 넣어야 합니다.
위 코드는 크게 두 부분으로 나눌 수 있는데요.
여는 / 닫는 태그와 -> 태그
여는 / 닫는 태그 사이에 있는 내용들입니다. -> 콘텐츠
여는 태그와 닫는 태그 안에 있는 내용들은 화면에 출력되지 않고 그 사이에 있는 텍스를 어떻게 처리할지에 대해 명령만 제공합니다.
콘텐츠는 태그의 영향을 받아 화면에 출력됩니다.
태그 안에 'B'라고 입력되어 있는 항목은 BOLD 즉 '진하게'를 의미합니다.
네 맞습니다. 가운데의 텍스트를 진하게 표시하라는 의미겠죠.
웹브라우저(크롬, 엣지, 익스플로러 등)에서 일어나는 모든 콘텐츠는 HTML 형태로 공유되고 있습니다.
심지어 지금 여러분이 보고 계신 이 글도 브런치 서버에서 HTML 형태로 여러분의 PC로 전달되고, 웹브라우저는 HTML 태그를 읽어 여러분이 보기 좋게 글자들을 화면에 표시해 준 것이죠.
그럼 이 글이 어떤 HTML로 구성되었는지 한번 알아볼까요?
윈도우 PC에서 크롬을 사용한다는 가정으로 F12키를 눌러보시거나, 마우스 오른쪽 클릭 후 "검사"라는 항목을 클릭해 보시기 바랍니다.
오른쪽에 창이 표시될 텐데요.
이 창을 개발자 도구라고 합니다.
( 모든 웹브라우저는 개발자도구를 지원합니다.
다른 브라우저를 쓰는 분들은 구글링을 해보시면 개발자 도구 여는 법을 쉽게 확인할 수 있습니다.)
개발자 도구에서 #1 항목인 'Elements'을 클릭하게 되면 현재 여러분이 보고 있는 웹페이지가 HTML로 어떻게 구성되었는지 알 수 있습니다.
여기에 #2를 누르면 하위 태그들을 볼 수 있죠.
이렇게 보기에는 형태가 아주 복잡해 보이지만 조금만 자세히 들여다보면 아까 말씀드린 것과 같이 여는 태그 <xxx> 와 닫는 태그 </xxx> 가 있고 그 사이에 콘텐츠 내용이 들어 같다는 것을 알 수 있습니다.
이제 HTML이 조금 눈에 들어오시나요?
어떤 태그를 사용할 수 있는지 상세히 설명하지 않고 대충 <xxx> 라고만 뭉뚱그려서 설명드렸었는데요.
만약 HTML에 관심이 생겨서 조금 더 깊게 공부해보고 싶으시다면 아래의 영상을 추천드릴게요.
위 링크에 강의 총 44편인데요.
우리는 웹 개발자가 아니기 때문에 모두 들을 필요는 없습니다.
젠데스크 고도화를 위해 가장 기본적인 요소만 파악한다면
1~5강(하이퍼 텍스트와 속성)까지 정도만 듣고 이해해 주셔도 좋고,
젠데스크 고도화를 위해 HTML을 능숙하게 사용하고 싶으시다면
1~31강(의미론적 태그)까지 듣는 것을 추천드립니다.
리퀴드 마크업이 아니라 HTML에 대한 이야기가 길어져서 조금 당황하셨을 수도 있는데요.
젠데스크 고도화에 HTML이 아주 중요하고 필수적인 요소라고 말씀드리기는 어렵지만,
일단 HTML을 알고 리퀴드 마크업에 접근하는 것과 그렇지 않은 것에서는 크게 차이가 날 것 같습니다.
하지만 또 반대로 리퀴드 마크업을 이해하는데 HTML이 필수적인 요소도 아니기 때문에 조금 제쳐두었다가 리퀴드 마크업을 공부하시면서 필요할 때마다 천천히 접근하셔도 좋습니다.
부담감 없이 읽는 것만으로도 개발 기초 지식과 젠데스크 기본 지식이 조금씩 쌓이는 것이 우리의 목표이니까요.
오늘도 성공하셨습니다.
감사합니다.
