비개발자 직장인을 위한 HTML에 대한 이해 - 영역 구분, 깔끔한 서식, 목차

요즘 AI에 대해 공부하다보면 "html'이라는 말이 자꾸 등장합니다. "html"이라는 단어만 들어도 왠지 복잡한 프로그래밍과 관련한 것 같아부담부터 느껴집니다. AI에 대해서 배우는 건 재밌지만 자꾸 이런 전문적인(?) 용어들이 나오면 멈칫하게 되더라구요. 그런데 막상 알고 보면 어렵지않은 부분들이 있습니다. html 역시 직장인이 사용하는 범위에서 배울 수 있어요! 개발자가 아닌 일반 직장인이 실무에서 HTML을 활용할 때는 복잡한 코딩 지식이나 문법 암기가 거의 필요하지 않습니다.

쉽게 정의하자면, 직장인에게 HTML은 '글이나 정보에 어떤 모양과 역할을 줄지 표시해 주는 표식'입니다. 조금 더 직관적으로 비유하자면, 문서에 깔끔한 옷을 입히거나 생성형 AI에게 명확한 안내 포스트잇을 붙여주는 작업 도구에 가깝습니다.

사실 거창하게 html이라고 했지만, 이 글을 다 읽고 나면 이미 html을 사용하고 계셨던 분들도 있을 듯 합니다. (물론 아니어도 정말 쉽게 이해할 수 있으실겁니다!) 그만큼 html이 곳곳에서 활용되고 있기때문에 우리가 이것을 알고 사용하느냐 모르고 사용하느냐는 차이가 크다고 생각합니다. 

특히 생성형 AI를 업무에 적극적으로 도입하는 최근에는 HTML을 오직 개발자의 전유물로만 생각할 필요가 없습니다. 기본적인 개념 몇 가지만 이해해 두면 AI에게 업무를 지시할 때 결과물의 품질과 정확도를 획기적으로 올릴 수 있습니다. 직장인이 실제 오피스 업무에서 바로 적용할 수 있는 실용적인 HTML 활용법 3가지를 정리해 드립니다.

 

1. AI에게 일을 시킬 때 붙이는 '포스트잇' (영역 구분 태그)

생성형 AI를 업무에 사용할 때 한 번쯤 겪어보는 대표적인 불편함이 있습니다. 긴 회의록 원문을 제공하며 "여기서 핵심 내용만 요약해 줘"라고 요청했는데, AI가 참고자료에 들어 있는 문장 자체를 지시사항으로 오해하거나 엉뚱한 맥락을 중심 내용으로 착각해 답하는 경우입니다.
이러한 현상이 발생하는 이유는 AI에게 제공된 텍스트 안에서 '어디까지가 참고 데이터이고, 어디서부터가 내가 내린 지시인지' 경계가 모호하기 때문입니다. 이럴 때 매우 유용한 것이 바로 영역을 구분해 주는 태그 형태의 표식입니다.

<참고자료>
오늘 부서 회의에서 논의된 프로젝트 일정 및 전달사항...
</참고자료>

<지시사항>
위 회의록을 읽고 이번 주에 진행해야 할 핵심 실행 과제 3가지만 요약해 줘.
</지시사항>

<제약조건>
전문 용어는 쉬운 표현으로 바꾸고, 결과는 번호 목록으로 작성해 줘.
</제약조건>

이 방법의 가장 큰 장점은 정해진 HTML 규격 문법을 굳이 외울 필요가 없다는 점입니다. 중요한 핵심은 꺾쇠괄호 안에 <참고자료>, <지시사항>, <제약조건>처럼 내가 알아보기 쉬운 직관적인 이름을 붙여 영역의 시작과 끝(/)을 나누는 것입니다.

AI와 대화할 때 긴 텍스트를 통째로 던지는 것보다 이렇게 역할과 영역을 구체적으로 나누어주면, AI는 "여기는 참고할 자료이고, 여기는 내가 수행해야 할 명령이구나"라고 정확히 인식합니다. 어려운 코딩이 아닌, AI가 읽기 편하게 붙여주는 '디지털 포스트잇'으로 생각하면 쉽게 접근할 수 있습니다.

 

2. 메일과 문서를 깔끔한 서식으로 정리하는 '튼튼한 상자' (<table> 태그)

직장 생활을 하다 보면 비즈니스 이메일이나 보고서에 표를 깔끔하게 넣어 전달하는 일이 생각보다 까다롭습니다. 작성자의 화면에서는 정돈되어 보였던 표가 수신자의 아웃룩(Outlook)이나 모바일 화면에서는 줄 바꿈이 밀리거나 서식이 깨져서 보이는 경우가 종종 발생합니다.

 

이럴 때 유용하게 활용할 수 있는 구조가 바로 HTML의 <table> 태그입니다. <table>은 텍스트와 데이터를 행과 열이 정해진 표 구조로 묶어주는 역할을 합니다.

 

AI를 활용한 표 작성 프롬프트 예시
직장인이 이 표 태그의 코드를 직접 타이핑하여 작성할 필요는 전혀 없습니다. 생성형 AI에게 다음과 같이 지시문만 정확히 작성해 주면 됩니다.

프롬프트 지시문 예시:
"아래 전달하는 업무 현황 내용을 비즈니스 이메일에 사용할 수 있도록 깔끔한 HTML Table 형식으로 변환해 줘. 아웃룩과 모바일 기기에서도 가독성이 뛰어나도록 구성해 줘."

물론 각 이메일 서비스나 클라이언트 프로그램마다 HTML을 해석하는 기준이 조금씩 다르기 때문에, 모든 환경에서 '100% 절대 깨지지 않는다'고 보장할 수는 없습니다. 하지만 단순 텍스트나 탭 구분선으로 전달하는 것보다 일정, 비용, 담당자, 업무 진행률 등 행과 열 조화가 필요한 정보를 훨씬 안정적이고 깔끔하게 전달할 수 있습니다.

 

직접 코딩을 하는 것이 목적이 아니라, AI에게 필요한 HTML 구조를 요청하고 생성된 서식을 활용하여 문서 가독성을 높이는 것이 핵심입니다.

 

3. 콘텐츠의 논리적 구조를 잡아주는 '목차' (H 태그)

HTML은 AI 프롬프트 작성뿐만 아니라 사내 위키, 블로그, 웹 문서 등의 콘텐츠를 작성할 때도 매우 유용합니다. 특히 웹상에 글을 올릴 때는 <h1>, <h2>, <h3>와 같은 제목 태그(Header Tags)의 개념을 알아두면 큰 도움이 됩니다.

 

제목 태그는 쉽게 말해 문서의 '계층화된 목차' 구조와 같습니다.

• <h1>: 문서 전체를 대표하는 가장 큰 제목 (보통 하나의 문서에 1개 사용)
• <h2>: 주요 소제목 (큰 단락 구분)
• <h3>: 소제목 내부의 세부 항목 (세부 단락 구분)

시각적 글자 크기 변경과 제목 태그의 차이

여기서 주의해야 할 점은 단순히 글자 크기를 키우고 굵게(Bold) 만드는 것과 제목 태그를 적용하는 것은 본질적으로 다르다는 사실입니다. 글자 크기를 조절하는 것은 사람이 눈으로 보기에 좋게 만드는 디자인 작업이지만, H 태그는 문서 자체의 논리적 구조와 뼈대를 지정하는 작업입니다.

한글 파일에서 자주 적용했던 <제목>, <소제목>, <본문>, <바탕글> 같은 개념이지만 보다 공용화된 시스템, AI가 읽기 쉬운 시스템이라고 생각할 수 있습니다! 

예를들어, 검색엔진의 크롤링 로봇은 문서를 읽어들일 때 이러한 구조 정보를 참고하여 글의 중심 주제를 파악합니다. 실제로 콘텐츠를 작성할 때 제목과 소제목을 논리적 계층 구조에 맞게 배치하면 글의 전달력이 높아집니다. 제목과 소제목을 잘 설정하는 건 모든 문서의 기본이라 다들 잘 하고 계시겠지만, 이 H태그까지 알아둔다면 점차 유용하게 쓰일 일이 많을 거예요

 

결론: 직장인에게 HTML이란?

개발자가 바라보는 HTML과 직장인이 실무에서 활용하는 HTML의 관점은 완전히 달라도 무방합니다.

• 개발자의 HTML: 웹사이트의 전체적인 틀과 기능을 구축하는 프로그래밍 언어
• 직장인의 HTML: 정보의 구조와 모양을 깔끔하게 정리하고, AI와 정밀하게 소통하도록 돕는 포장지

<참고자료>와 <지시사항>을 나누어 AI에게 정확한 맥락 포스트잇을 붙여주고, <table>을 활용해 데이터를 보기 편한 표로 정리하며, <h1>, <h2>, <h3>를 이용해 작성 중인 문서의 논리적 뼈대를 잡는 것. 이 정도의 직관적인 감각만 가져도 실무 생산성은 이전과 비교할 수 없을 정도로 높아집니다.

 

HTML을 기초부터 공부해서 코딩 전문가가 될 필요는 없습니다. 지금의 디지털 환경에서 중요한 것은 "내가 직접 코드를 짜는 것"보다 "AI에게 내가 원하는 형태의 구조와 코드를 정확하게 요청할 줄 아는 능력"입니다. HTML을 막연히 어렵게 느끼기보다, AI와의 업무 소통을 돕고 문서의 가독성을 정돈해 주는 든든한 업무 도구로 가볍게 활용해보세요!