IT 비전공자 블로그 노트북 하나로 만든 첫 번째 반응형 블로그 디자인

IT 비전공자가 노트북 하나로 반응형 블로그를 완성한 실전 기록.
HTML 구조부터 CSS 미디어쿼리까지,
꾸준함으로 배운 웹디자인 성장 스토리.

 

서론 — “디자인은 개발자의 영역이 아니다”라고 믿었던 시절

키워드: IT 비전공자 블로그, 웹디자인 입문, 반응형 사이트, 자기 주도 학습

비전공자인 나는 오랫동안 ‘디자인은 전문가의 영역’이라고 생각했다.
노트북 하나로 코드를 입력한다고 해서 웹사이트의 레이아웃이 변한다는 사실조차 믿기 어려웠다.
하지만 블로그를 운영하면서 문제는 예상치 못한 곳에서 생겼다.
데스크톱에서는 멀쩡히 보이던 화면이 스마트폰에서는 완전히 깨져 보이는 것이었다.
텍스트가 겹치고, 이미지가 화면 밖으로 밀려났다.
그때 깨달았다.
“내가 지금 만들고 있는 건, 누군가가 다양한 기기에서 보는 진짜 웹사이트라는 걸.”

 

 

그날 이후 나는 ‘반응형 디자인’이라는 단어를 찾아보기 시작했다.
HTML과 CSS만으로도 화면을 유연하게 조정할 수 있다는 사실은 충격이었다.
그리고 비전공자인 나에게는 이것이 단순한 기술 공부가 아니라,
‘디지털 사고 방식’을 배우는 첫걸음이 되었다.

---

1. IT 비전공자 블로그 — 구조를 이해하며 시작한 반응형 웹의 기초

키워드: HTML 구조, 콘텐츠 블록, 웹페이지 설계, 코드 학습 루틴

처음 반응형 블로그를 만들겠다고 마음먹었을 때,
나는 ‘디자인’보다는 ‘구조’를 먼저 이해하기로 했다.
반응형 웹은 단순히 크기가 조절되는 화면이 아니라,
의도된 배치와 우선순위를 가진 콘텐츠 구조였다.

 

HTML을 배우며 <header>, <section>, <footer> 같은 태그를 알게 됐다.
그 전에는 단순히 <div>로 모든 것을 감쌌지만,
의미 있는 태그를 사용하자 구조가 눈에 들어왔다.
이제 코드는 단순한 텍스트가 아니라 ‘시각적 설계도’가 되었다.

 

나는 직접 손으로 HTML 트리를 그렸다.
상단 메뉴가 어떻게 연결되고, 본문과 사이드바가 어떤 관계를 맺는지를 도식화했다.
이 단순한 행위가 나에게 웹의 전체 구조를 한눈에 파악하는 능력을 길러줬다.
비전공자가 기술을 배울 때 가장 중요한 건, 코드를 베끼는 게 아니라
‘왜 이렇게 되어 있는가’를 질문하는 태도였다.

 

그렇게 하루하루 HTML을 다듬으며
‘코드를 읽는 눈’이 조금씩 자라났다.

---

2. IT 비전공자 블로그 — CSS로 화면을 디자인하다: 색상보다 중요한 배치

키워드: CSS 레이아웃, 플렉스박스, 그리드 시스템, 사용자 경험(UX)

HTML로 뼈대를 세웠다면, 이제 그 위에 옷을 입힐 차례였다.
처음 CSS를 공부할 때는 색상과 폰트에만 관심이 갔다.
하지만 블로그를 직접 꾸미면서 진짜 중요한 건 ‘배치(layout)’라는 걸 깨달았다.

 

내 블로그는 처음에 본문이 너무 넓고, 사이드바가 잘리지 않는 문제가 있었다.
이 문제를 해결하기 위해 나는 Flexbox와 Grid를 공부했다.
CSS 속성 하나하나가 어떻게 화면을 구성하는지를 실험했다.
예를 들어 display: flex;를 적용했을 때
요소들이 자동으로 정렬되는 걸 보며, “이게 바로 디자인의 논리구나”라고 느꼈다.

 

또한, 글의 가독성을 높이기 위해 line-height, letter-spacing 같은 세부 속성도 조정했다.
결국 디자인이란 감각이 아니라 이유 있는 선택의 연속이었다.
비전공자인 나에게 CSS는 단순한 꾸밈이 아니라 ‘사용자 경험(UX)을 설계하는 언어’였다.

---

3. IT 비전공자 블로그 — 모바일 환경의 벽을 넘기 위한 미디어쿼리의 발견

키워드: 반응형 웹, 미디어쿼리, 모바일 최적화, 다양한 디바이스 대응

문제는 모바일 화면이었다.
PC에서는 완벽하던 블로그가 스마트폰에서는 엉망이 되었다.
텍스트가 잘리고, 버튼이 너무 작아 누르기도 어려웠다.
그때 처음 만난 개념이 CSS 미디어쿼리(media query)였다.

 

처음엔 @media (max-width: 768px) 같은 코드가 이해되지 않았다.
하지만 한 줄씩 실험해보며 깨달았다.
이건 기기의 화면 크기에 따라 다른 CSS를 적용하는 규칙이었다.
즉, 내 블로그는 스스로 상황을 인식하고 반응할 수 있게 된 것이다.

 

나는 모바일, 태블릿, PC 화면을 각각 나누어 디자인을 조정했다.
폰트 크기, 이미지 비율, 여백 간격—all of them—하나씩 실험했다.
결과적으로 내 블로그는 어떤 기기에서도 깔끔하게 보이는 형태로 바뀌었다.

 

무엇보다 중요한 건 이 과정에서 “디자인은 디바이스의 제약 속에서 완성된다”는 교훈을 얻은 것이다.
비전공자에게 반응형 디자인은 단순히 기술이 아니라,
‘사용자를 상상하는 능력’을 길러주는 과정이었다.

---

4. IT 비전공자 블로그 — 노트북 하나로 완성한 ‘나만의 디자인 철학’

키워드: 자기 주도 학습, 웹디자인 감각, 블로그 브랜딩, 꾸준한 성장

나는 비싼 장비나 복잡한 툴을 사용하지 않았다.
단지 노트북 하나와 메모장, 그리고 매일의 꾸준함만 있었다.
새로운 코드를 배울 때마다 블로그에 기록했고,
에러를 해결하면 그 과정 자체를 콘텐츠로 만들었다.
결국 학습의 흔적이 쌓이면서 블로그는 내 기술 성장의 기록장이 되었다.

 

반응형 디자인을 완성한 순간, 나는 스스로에게 놀랐다.
“이게 정말 내가 만든 건가?”
처음엔 단순히 화면을 맞추는 게 목표였지만,
결국 나는 ‘사용자 중심의 사고방식’을 갖춘 디지털 창작자로 성장해 있었다.

 

무엇보다 이 경험은 나에게 브랜딩의 힘을 가르쳐줬다.
코드의 완성도보다 중요한 건,
내 블로그가 나의 태도를 보여준다는 사실이었다.
꾸준히 배우고 실험하며 성장한 흔적은 어떤 포트폴리오보다 강력했다.

---

결론 — 반응형 블로그는 기술이 아니라 태도의 결과였다

키워드: 비전공자 성장, 반응형 웹 완성, 지속적 학습, 웹개발 입문

비전공자가 반응형 블로그를 만드는 일은 결코 쉬운 도전이 아니었다.
하지만 매일 조금씩 배우고 기록하면서,
나는 어느새 ‘기술을 설명할 수 있는 사람’으로 변해 있었다.
HTML은 구조를, CSS는 감각을, 미디어쿼리는 사고방식을 가르쳐줬다.

 

결국 반응형 디자인이란 기술의 문제가 아니라 태도의 결과였다.
화려한 코드를 작성하지 않아도,
내 손으로 만든 공간에서 사용자의 경험을 설계할 수 있었다.
그리고 그 과정에서 나는 비전공자라는 한계를 넘었다.