📑 목차
비전공자가 코드를 이해하며 바뀐 글쓰기 방식.
HTML·CSS·자바스크립트를 배우며
논리적 구조와 표현력을 동시에 키운 성장 기록.
서론 — 코드와 글쓰기, 전혀 다른 세계가 이어지던 순간
키워드: HTML, 구조 이해, 글쓰기 변화, 자기 주도 학습
비전공자인 내가 처음 블로그를 시작했을 때,
‘코드’라는 단어는 내게 너무 멀게 느껴졌다.
나는 글을 쓰는 사람이었고, 기술은 그저 글을 올리기 위한 배경 정도라고 생각했다.
하지만 어느 날, 블로그 편집창에서 HTML을 무심코 들여다보다
“이 구조가 글의 흐름과 닮아 있다”는 사실을 깨달았다.

그 순간부터 모든 게 달라졌다.
코드를 단순히 디자인을 조정하는 언어가 아니라
생각을 구조화하는 언어로 보기 시작했다.
문단이 태그처럼 구분되고, 제목이 헤더처럼 계층화되며,
정보가 링크처럼 서로 연결되어 있었다.
이 깨달음은 단순히 블로그 꾸미기를 넘어,
‘글쓰기 방식’을 완전히 바꾸어 놓았다.
HTML을 이해하기 시작한 순간,
나는 ‘보여지는 글’을 쓰던 사람이 아니라
‘구조를 설계하는 글’을 쓰는 사람으로 변했다.
1. IT 비전공자 블로그 — HTML 구조가 글의 뼈대를 바꿨다
키워드: HTML 구조, 콘텐츠 설계, 정보 계층화, 글쓰기 기획
처음 HTML을 배웠을 때, <h1>과 <h2>의 차이를 이해하지 못했다.
둘 다 제목이라 생각했지만, 실제로는 정보의 우선순위를 구분하는 중요한 요소였다.
그걸 알고 나서 내 글을 다시 읽어보니,
내가 쓴 문장들은 구조가 없었다.
중요한 문장과 부연 설명이 섞여 있었고,
독자는 어디에 집중해야 할지 알기 어려웠다.
그래서 글을 쓸 때마다 HTML의 구조를 빌렸다.
제목은 <h1>, 주요 소주제는 <h2>, 세부 설명은 <p>처럼 정리했다.
이 단순한 구조화 습관이
글 전체의 가독성을 완전히 바꾸어 놓았다.
코드는 디자인을 위한 것이 아니라, 논리의 틀을 만드는 도구였다.
비전공자에게 HTML은 단순히 기술이 아니라
생각을 시각적으로 표현하게 해주는 언어다.
글을 ‘써 내려가는’ 것이 아니라 ‘조립하는’ 감각이 생기면서,
내 블로그의 콘텐츠 품질이 눈에 띄게 높아졌다.
2. IT 비전공자 블로그 — CSS를 배우며 글의 ‘톤앤매너’를 이해하다
키워드: CSS, 시각적 일관성, 블로그 디자인, 독자 경험
HTML이 글의 구조를 만들어준다면,
CSS는 글의 분위기를 결정하는 언어였다.
CSS 속성을 하나씩 배우면서
나는 비로소 ‘글이 보이는 방식’에 집중하기 시작했다.
예전엔 글을 쓰면 그게 끝이었다.
하지만 CSS를 알게 된 후부터는
줄 간격, 글자 크기, 색상 대비 같은 요소들이
독자의 몰입도를 바꾸는 것을 직접 체감했다.
어떤 글은 폰트가 주는 안정감 덕분에 더 신뢰감을 주었고,
어떤 글은 배경색 덕분에 읽기 쉽게 느껴졌다.
비전공자인 나는 그때 깨달았다.
디자인은 미적 감각이 아니라 정보 전달의 기술이라는 것을.
CSS를 조정하며 글의 리듬을 설계하고,
본문에 강조를 줄 때 <strong> 태그보다
적절한 여백을 넣는 것이 더 효과적이라는 걸 배웠다.
이 경험은 단순한 코딩 연습이 아니었다.
글쓰기 자체에 대한 감각을 세밀하게 만들어주는 훈련이었다.
3. IT 비전공자 블로그 — 자바스크립트를 통해 ‘움직이는 글’을 배우다
키워드: 자바스크립트, 상호작용, 동적 콘텐츠, 사용자 중심 글쓰기
HTML과 CSS로 블로그의 구조와 디자인을 어느 정도 다듬고 나자,
나는 자연스럽게 자바스크립트(JavaScript) 에 관심을 가지게 되었다.
정적인 페이지를 만드는 것만으로는 부족하다고 느꼈다.
내가 원하는 건 ‘단순한 정보 제공’이 아니라,
독자가 체감할 수 있는 경험을 만들어내는 글쓰기였다.
자바스크립트를 처음 배울 때,
나는 정말 사소한 기능 하나를 구현하는 데 며칠을 쏟아부었다.
예를 들어, ‘버튼 클릭 시 문단이 열리고 닫히는 기능’을 만드는 일조차
처음엔 너무 복잡하게 느껴졌다.
변수를 선언하는 문법 하나도 생소했고,
오타 하나로 페이지 전체가 깨지는 일도 자주 있었다.
하지만 신기하게도, 작은 기능 하나가 성공했을 때의 성취감은
코드 몇 줄 이상이었다.
특히 그 상호작용이 독자의 시선을 붙잡는 힘이 있다는 걸 깨달았다.
글의 중간에 펼쳐지는 이미지나,
클릭 시 추가 설명이 나타나는 문단은
단순히 장식이 아니라 ‘집중력 유지 장치’였다.
독자는 이제 더 이상 수동적으로 텍스트를 소비하지 않았다.
스크롤을 내리고, 클릭하며, 반응하는 과정을 통해
글 속 이야기에 ‘참여’하게 되었다.
그때부터 나는 글을 쓰는 방식을 완전히 다르게 보기 시작했다.
단락을 나열하고 설명을 늘어놓는 대신,
“이 정보를 어떤 순서와 방식으로 보여줘야 독자가 자연스럽게 이해할까?”
를 먼저 고민했다.
이건 단순한 글쓰기의 기술이 아니라,
사용자 중심 글쓰기(User-centered writing) 의 시작이었다.
자바스크립트는 나에게 단순히 웹 기술이 아니었다.
그건 글과 독자 사이의 ‘대화’를 가능하게 해주는 언어였다.
이전에는 글이 일방적인 전달이었다면,
이제는 독자와 상호작용하는 동적 콘텐츠(dynamic content) 로 발전했다.
나는 코드로 감정을 표현하고, 기능으로 이해를 돕는 방법을 배웠다.
비전공자인 내가 느낀 자바스크립트의 매력은 ‘움직임’ 그 자체였다.
코드 몇 줄로 페이지가 반응하는 순간,
그건 단순한 프로그래밍이 아니라 창작이었다.
결국 자바스크립트는 내게 ‘사용자 중심 글쓰기’의 감각을 가르쳐준 언어였다.
나는 단순히 글을 쓰는 사람이 아니라,
‘경험을 설계하는 창작자’로 성장하는 중이었다.
4. IT 비전공자 블로그 — 코드로 배우는 논리, 글로 배우는 사고
키워드: 논리적 사고, 글쓰기 습관, 코드 사고, 학습 루틴
코드를 이해하기 시작하면서
내 사고방식도 점점 논리적으로 바뀌었다.
과거의 나는 문장을 감정에 따라 썼지만,
이제는 목적에 따라 구조를 세운다.
예를 들어, 글을 쓰기 전에는
‘이 정보의 입력(Input)은 무엇이고, 결과(Output)은 무엇인가’를 먼저 정의한다.
그건 프로그래밍의 사고방식이자,
글을 더 명확하게 전달하기 위한 설계 과정이었다.
또한, 오류를 만날 때마다 해결 방법을 기록하는 습관이 생겼다.
그건 마치 버그를 디버깅하듯
문장의 불필요한 중복을 제거하고,
핵심 메시지를 정제하는 과정이었다.
비전공자인 내가 코드를 배우며 얻은 가장 큰 변화는
‘글을 더 논리적으로 쓸 수 있게 된 것’이었다.
코드는 내 글쓰기의 스승이었다.
결론 — 코드가 바꾼 건 디자인이 아니라 ‘사고방식’이었다
키워드: 글쓰기 혁신, 사고의 구조화, 학습 성장, 창의적 표현
비전공자인 내가 코드를 이해하기 시작한 뒤,
내 블로그는 단순한 기록 공간에서
‘사고의 구조를 시각화하는 플랫폼’으로 바뀌었다.
HTML은 글의 뼈대를 세워주었고,
CSS는 표현의 감각을 길러주었으며,
자바스크립트는 사용자와의 소통을 가르쳐주었다.
결국 코드를 배운다는 건 단순히 기술을 익히는 게 아니었다.
그건 생각을 더 명확하게 정리하고 표현하는 방법을 배우는 일이었다.
글쓰기는 이제 감정의 언어가 아니라,
정보를 설계하고 경험을 디자인하는 일로 발전했다.
비전공자인 나에게 코드는
글을 더 잘 쓰게 만들어준 또 하나의 문법이었다.
그리고 그 문법 덕분에, 나는
‘읽히는 글’을 넘어서 ‘작동하는 글’을 쓸 수 있게 되었다.
'IT 비전공자 블로그' 카테고리의 다른 글
| IT 비전공자 블로그 구글 검색 노출을 바꾼 단 한 줄의 코드 (0) | 2025.11.01 |
|---|---|
| IT 비전공자 블로그 비전공자가 직접 느낀 블로그 트래픽의 비밀 (0) | 2025.11.01 |
| IT 비전공자 블로그 템플릿을 복사하지 않고 직접 꾸며본 내 첫 테마 제작기 (0) | 2025.10.31 |
| IT 비전공자 블로그 속도가 느릴 때 비전공자가 할 수 있는 최소한의 최적화 (0) | 2025.10.31 |
| IT 비전공자 블로그 노트북 하나로 만든 첫 번째 반응형 블로그 디자인 (0) | 2025.10.31 |