코딩의 마지막 단계는 결국 '내가 직접 무언가를 만들어보는 것'입니다. 그동안 head와 body의 구조, 시맨틱 태그의 의미, 그리고 모바일 대응을 위한 반응형 기초까지 배웠습니다. 이제 이 조각들을 모아 하나의 완벽한 자기소개 페이지를 구성해 봅시다. 구글 봇은 깔끔하게 정리된 구조의 페이지를 선호하며, 이는 여러분의 블로그가 '전문성 있는 정보처'로 인정받는 데 큰 기여를 합니다.
단계별 자기소개 페이지 설계
자기소개 페이지는 크게 세 부분으로 나눕니다. 상단(header)에는 나의 정체성을 나타내는 제목을, 본문(main)에는 내가 누구인지와 어떤 정보를 다루는지, 하단(footer)에는 연락처나 저작권 정보를 배치합니다.
상단(Header): 가장 중요한 핵심 주제를 배치합니다.
본문(Main): 독자가 궁금해하는 '나'에 대한 이야기와 내가 제공하는 가치를 담습니다. section 태그를 사용하여 주제별로 묶어주는 것이 핵심입니다.
하단(Footer): 사이트의 신뢰도를 높여주는 저작권 정보와 SNS 링크를 넣습니다.
실전! 나만의 자기소개 페이지 완성 코드
아래 코드를 복사해서 메모장에 붙여넣고 파일 이름을 'index.html'로 저장해 보세요. 브라우저로 열면 여러분만의 깔끔한 소개 페이지가 나타날 것입니다.
<main>
<section>
<h2>저에 대해 소개합니다</h2>
<p>안녕하세요. 저는 복잡한 정보를 쉽고 명확하게 정리하는 것을 즐기는 콘텐츠 제작자입니다. 이 블로그를 통해 저의 학습 과정과 노하우를 공유하고 있습니다.</p>
</section>
<section>
<h2>제가 다루는 주제</h2>
<ul>
<li>웹 개발 기초와 실습 가이드</li>
<li>효율적인 디지털 도구 활용법</li>
<li>일상에서 발견한 소소한 문제 해결사</li>
</ul>
</section>
</main>
<footer>
<p>Copyright 2026. OOO All rights reserved.</p>
<p>문의: email@example.com</p>
</footer>
실제 적용 시 주의사항
코드를 작성할 때 가장 주의해야 할 점은 '제목 태그의 위계'입니다. h1은 페이지당 단 하나만 써야 하며, 그다음 중요한 제목은 h2, 그다음은 h3 순으로 사용하세요. 구글 검색 엔진은 이 위계를 보고 글의 전체적인 논리 구조를 파악합니다.
또한, 본문에 적는 내용은 최대한 진솔하게 작성하세요. "나는 최고의 전문가다"라고 과장하는 것보다, "나는 현재 이런 것을 배우고 있고, 이런 시행착오를 겪으며 정리하고 있다"는 식의 경험 중심 글쓰기가 훨씬 높은 신뢰도(Trust)를 줍니다. 심사관(봇) 또한 꾸준히 자신의 경험을 기록하는 사이트를 높게 평가합니다.
18편의 여정을 마치며
이제 여러분은 단순한 방문자가 아니라, 웹의 구조를 이해하고 직접 문서를 만들어낼 수 있는 '제작자'가 되었습니다. HTML은 그저 도구일 뿐입니다. 가장 중요한 것은 이 도구를 사용해 방문자에게 어떤 가치를 전달할 것인가입니다. 오늘 만든 자기소개 페이지를 블로그의 첫 화면으로 설정해 보세요. 분명 방문자들의 시선이 달라질 것입니다.
핵심 요약
자기소개 페이지는 헤더, 메인, 푸터의 구조로 정갈하게 배치하는 것이 사용자에게 신뢰감을 줍니다.
제목 태그(h1~h3)의 위계를 지키는 것은 SEO(검색 엔진 최적화)의 핵심 원칙입니다.
전문가인 척하는 글보다는, 내가 겪은 과정과 성장을 기록하는 경험 중심의 글쓰기가 유리합니다.
웹 개발 기초 시리즈가 모두 끝났습니다! 그동안 정말 고생 많으셨습니다. 다음 시간에는 여러분이 블로그 운영을 하면서 실질적으로 적용할 수 있는 '검색 엔진이 좋아하는 글쓰기 기법'에 대한 새로운 니치 시리즈로 찾아오겠습니다.