IT 비전공자 블로그 템플릿을 복사하지 않고 직접 꾸며본 내 첫 테마 제작기

비전공자가 템플릿 없이 직접 만든 첫 블로그 테마 제작기.
HTML·CSS를 배우며 완성한 나만의 디자인과
실패를 성장으로 바꾼 비전공자의 진짜 이야기.

 

서론 : ‘내 손으로 만든 블로그’라는 말의 무게

키워드: 블로그 테마, HTML, CSS, 자기 주도 학습, 창의적 시도

비전공자인 내가 처음 블로그를 만들었을 때,
솔직히 디자인은 전혀 신경 쓸 수 없었다.
다른 사람의 템플릿을 복사해서 쓰면 깔끔해 보였고,
코드를 이해하지 못해도 당장은 문제없었다.
하지만 시간이 지날수록 마음 한구석이 불편했다.
“이건 내 블로그지만, 진짜 내 블로그는 아닌 것 같아.”

 

 

그 생각이 들자, 나는 단순히 콘텐츠를 쓰는 블로거가 아니라
‘내 공간을 직접 만드는 사람’이 되고 싶었다.
비전공자에게 테마 제작은 언뜻 불가능해 보이는 일이었지만,
결국 호기심 하나로 시작했다.
HTML을 해석하고, CSS를 고치고,
색상 하나를 바꾸는 데 한나절이 걸리던 시절이었다.
하지만 그 시행착오 속에서 나는 진짜 디지털 감각을 익히고 있었다.

 

이 글은 완성된 결과물보다,
그 과정을 통해 배운 ‘비전공자의 성장 기록’이다.
누군가에게는 사소해 보일 수 있지만,
나에게는 세상에서 가장 큰 도전이었다.

---

1. IT 비전공자 블로그 — 템플릿 대신 코드와 마주하기

키워드: HTML 구조, CSS 기초, 코드 분석, 웹 디자인 이해

처음 블로그 테마를 직접 만들어보겠다고 결심했을 때,
가장 두려웠던 건 “어디서부터 시작해야 할지 모른다”는 사실이었다.
인터넷을 검색해보면 “HTML과 CSS만 알면 돼요”라고 쉽게 말하지만,
막상 코드를 열어보면 알 수 없는 문장들로 가득했다.

 

그래서 나는 가장 단순한 방법을 택했다.
기존 템플릿의 코드를 하나하나 뜯어보며
“이 문장이 어떤 역할을 하는지” 직접 주석을 달았다.

 

<div>가 콘텐츠의 구역을 나누고, <header>가 제목을 표시하며, <link>가 CSS를 불러온다는 사실을 알게 된 순간,

웹이 단순한 화면이 아니라 ‘구조로 이루어진 언어’라는 걸 깨달았다.

 

코드를 수정해보며 배운 점은 명확했다.
디자인은 감각이 아니라 구조 이해에서 시작된다.
색깔을 바꾸는 것도, 글자 크기를 조정하는 것도 결국 규칙의 문제였다.
비전공자인 나도 그 규칙을 차근차근 이해하자
코드의 흐름이 점점 눈에 보이기 시작했다.
이건 단순한 기술 습득이 아니라 “내 공간을 읽는 능력”이었다.

---

2. IT 비전공자 블로그 — 색상, 폰트, 여백을 통해 나만의 디자인을 만들다

키워드: 디자인 감각, CSS 속성, 폰트 설정, 컬러 시스템

두 번째 단계는 ‘내 취향’을 반영하는 일이었다.
다른 사람의 템플릿은 깔끔하지만,
어딘가 나와는 맞지 않았다.
그래서 나는 내 블로그를 하나의 디지털 자기 표현물로 만들고자 했다.

 

CSS를 배우며 가장 먼저 다룬 건 색상이었다.
처음엔 단순히 파란색, 검정색처럼 색 이름만 입력했지만,
이후에는 색상 코드(#hex)를 조합해
‘나만의 블루 톤’을 만들었다.
폰트는 기본 글꼴 대신 구글 폰트를 불러와
가독성과 개성을 모두 챙겼다.

 

그리고 나는 여백의 중요성을 배웠다.
여백은 단순한 빈 공간이 아니라
콘텐츠를 ‘숨 쉬게’ 하는 요소였다.
margin과 padding 값을 조정하면서
‘눈이 편한 레이아웃’이 어떤 느낌인지 감각적으로 익혔다.

 

이 과정을 통해 알게 된 건,
비전공자라도 “디자인 감각은 배움으로 키울 수 있다”는 사실이었다.
완벽한 코드를 몰라도, 수정과 관찰을 반복하면
자신만의 블로그 분위기를 완성할 수 있었다.

---

3. IT 비전공자 블로그 — 반응형 구조를 직접 구현하며 진짜 웹을 배우다

키워드: 반응형 디자인, 미디어쿼리, 화면 최적화, 사용자 경험

세 번째 도전은 반응형 블로그였다.
컴퓨터 화면에서는 잘 보이던 블로그가
휴대폰에서는 줄이 겹치거나 이미지가 깨지는 일이 많았다.
처음엔 “이건 내가 건드릴 부분이 아니야”라고 생각했다.
하지만 어느 날 문득,
“내가 만든 공간이라면, 어떤 기기에서도 잘 보여야 하지 않을까?”
라는 생각이 들었다.

 

그래서 나는 CSS의 미디어쿼리(Media Query)를 공부했다.
화면 크기에 따라 레이아웃이 자동으로 조정되는 구조를 이해하는 데 며칠이 걸렸다.
처음엔 수치가 헷갈리고, 코드가 꼬여 화면이 엉망이 되기도 했다.
하지만 한 줄씩 고쳐가며,
휴대폰에서도 완벽히 맞춰진 화면을 처음 봤을 때의 뿌듯함은 이루 말할 수 없었다.

 

그 경험을 통해 깨달았다.

 

“반응형 웹은 단순히 기술이 아니라, 사용자에 대한 배려다.”

 

비전공자인 내가 사용자 경험(UX)을 고민하게 된 순간이었다.
그때부터 나는 코드를 ‘문제 해결의 도구’로 보기 시작했다.

---

4. IT 비전공자 블로그 — 실패를 기록하고 개선하는 습관

키워드: 자기 주도 학습, 시행착오, 코드 디버깅, 성장 루틴

테마 제작 과정에서 가장 중요한 건 완성이 아니었다.
오히려 실패를 기록하는 태도였다.
코드가 깨지고, 배경이 사라지고, 메뉴가 사라지는 일은 수도 없이 반복됐다.
하지만 그때마다 오류 메시지를 복사해 검색하고,
해결 과정을 블로그에 직접 기록했다.

 

그 기록이 쌓이자, 나는 단순한 학습자가 아니라
‘스스로 문제를 해결하는 사람’이 되어 있었다.
비전공자에게 가장 큰 장벽은 지식이 아니라,
문제가 생겼을 때 ‘직접 고쳐보는 용기’였다.
그 용기를 매일 블로그에서 훈련할 수 있었다.

 

이 과정을 통해 나는 깨달았다.
코드를 아는 사람보다 코드를 이해하려는 사람이 더 오래 성장한다는 것을.
매일 조금씩 시도한 결과,
나는 어느새 다른 사람에게 테마 구조를 설명할 수 있는 단계에 도달했다.
배움은 속도가 아니라 방향의 문제였다.

---

결론 : 내 테마, 내 이야기, 내 성장의 기록

키워드: 개인 브랜딩, 웹 디자인 성장, 블로그 정체성, 자기 표현

처음엔 단순히 템플릿을 바꾸는 게 목표였다.
하지만 지금 돌이켜보면,
그건 단순한 ‘디자인 작업’이 아니라
나 자신을 만들어가는 과정이었다.

 

비전공자인 내가 직접 만든 테마는 완벽하지 않다.
가끔은 레이아웃이 틀어지고, 버튼이 어긋난다.
하지만 그 안에는 배움의 흔적과 진심이 담겨 있다.
남의 코드를 복사해 붙이는 대신,
내 손으로 코드를 수정하며 쌓은 시간은
결국 내 자신감을 키워주는 자산이 되었다.

 

블로그는 단순한 플랫폼이 아니다.
그건 내가 배우고 성장한 과정을 보여주는 하나의 자기 표현물이다.
비전공자라도, 꾸준히 시도하고 개선하면
누구나 자신만의 웹 공간을 만들어낼 수 있다.