1%20ChatGPT%20Image.jpg)
블로그스팟(Blogger)을 처음 사용하면서 가장 답답했던 기능이 하나 있었습니다.
바로 '글목록'이 없다는 점입니다.
네이버로 블로그를 시작했던 저에게는 글목록이 너무 당연한 기능이었습니다. 방문자는 원하는 글을 쉽게 찾아볼 수 있고, 운영자도 작성한 글을 한눈에 관리할 수 있기 때문입니다.
그런데 블로그스팟을 시작하고 보니 제가 원하던 형태의 글목록은 기본으로 제공되지 않았습니다.
검색을 해도 원하는 방식은 쉽게 찾을 수 없었습니다.
그래서 결국 직접 만들어 보기로 했습니다.
HTML은 거의 모르는 수준이었지만 검색도 하고, ChatGPT와 Gemini 같은 AI에도 계속 질문하면서 하나씩 수정한 끝에 네이버 블로그처럼 글목록을 열고 닫을 수 있는 기능을 구현하는 데 성공했습니다.
이번 글은 그 과정에서 겪었던 시행착오와 경험을 정리한 후기입니다.
실제로 적용한 HTML과 자바스크립트 코드는 2편에서 처음부터 차근차근 공유하겠습니다.
이 글에서 다루는 내용
이번 글에서는 다음 내용을 순서대로 소개합니다.
- 블로그스팟에서 글목록이 아쉬웠던 이유
- 무료 스킨을 설치했다가 겪은 예상 밖의 문제
- HTML을 거의 모르는 상태에서 글목록 버튼을 만든 과정
- 여러 번 수정하며 원하는 형태로 완성한 이야기
- 이번 경험을 통해 느낀 AI 활용법과 초보자의 도전
코드를 바로 찾는 분이라면 다음 편이 더 도움이 될 수 있습니다.
반대로 "컴맹도 정말 만들 수 있을까?"가 궁금한 분이라면 제 경험이 조금은 용기가 되었으면 좋겠습니다.
블로그스팟을 시작하며 가장 먼저 느낀 아쉬움
자유도는 높지만 초보자에게는 쉽지 않았습니다
저는 최근 블로그스팟(Blogger)에서 건강 정보를 다루는 블로그를 운영하기 시작했습니다.
블로그스팟의 가장 큰 장점은 자유도입니다.
테마의 HTML과 CSS를 직접 수정할 수 있고, 필요하다면 자바스크립트까지 추가해 원하는 기능을 구현할 수 있습니다.
국내 블로그 서비스에서는 하기 어려운 기능도 직접 만들 수 있다는 점은 분명 큰 장점입니다.
하지만 컴퓨터에 익숙하지 않은 사람에게는 이야기가 조금 달라집니다.
저처럼 HTML이라는 단어만 들어도 긴장하는 사람에게는 이런 자유도가 오히려 높은 진입장벽처럼 느껴졌습니다.
처음에는 "이걸 내가 정말 할 수 있을까?"라는 생각부터 들었습니다.
네이버 블로그를 오래 사용했다면 더 크게 느껴지는 차이
가장 먼저 불편했던 것은 역시 글목록이었습니다.
네이버 블로그에서는 글을 읽다가 목록을 펼쳐 다른 글로 이동하는 일이 너무 자연스럽습니다.
관심 있는 카테고리의 글을 이어서 읽기도 쉽고, 예전에 작성한 글을 다시 찾는 것도 어렵지 않습니다.
하지만 블로그스팟에서는 제가 원하던 방식의 글목록을 찾을 수 없었습니다.
처음에는 제가 기능을 못 찾는 줄 알았습니다.
설정을 몇 번이나 살펴봤지만 원하는 기능은 보이지 않았습니다.
그제야 "원래 없는 기능이구나."라는 사실을 알게 됐습니다.
단순히 불편한 것이 아니라 운영에도 영향을 줬습니다
글목록이 없으니 방문자도 이전 글을 찾기 어려웠고, 저 역시 작성한 글을 관리하기가 불편했습니다.
특히 건강 정보를 주제로 운영하는 블로그는 비슷한 주제의 글을 함께 읽는 경우가 많습니다.
예를 들어 영양제 글을 읽은 방문자가 같은 카테고리의 다른 글도 자연스럽게 이어서 볼 수 있어야 하는데, 원하는 글을 찾는 과정이 번거롭게 느껴졌습니다.
이 부분은 방문자의 편의성뿐 아니라 블로그를 운영하는 입장에서도 아쉬움이 컸습니다.
그래서 생각했습니다.
"없으면 내가 한번 만들어 보자."
그때까지만 해도 그 결정이 이렇게 긴 여정이 될 줄은 몰랐습니다.
무료 블로그스팟 스킨을 설치했다가 크게 후회했습니다
처음에는 이것만 설치하면 끝날 줄 알았습니다
글목록을 해결할 방법을 찾던 중 무료 스킨을 알게 됐습니다.
제가 듣고 있던 온라인 강의에서 수강생에게 제공하는 스킨이었고, 기능도 많고 디자인도 화려해 보였습니다.
별다른 고민 없이 바로 적용했습니다.
처음 며칠은 만족했습니다.
기본 테마보다 훨씬 보기 좋았고, 여러 기능도 추가되어 있어서 "괜찮은데?"라는 생각이 들었습니다.
하지만 시간이 지날수록 마음이 조금씩 불편해졌습니다.
저는 원래 단순하고 담백한 디자인을 좋아하는 편입니다.
그런데 이 스킨은 기능이 많다 보니 화면이 조금 복잡하게 느껴졌습니다.
결정적인 문제는 팝업 광고였습니다
얼마 지나지 않아서 더 큰 문제가 눈에 보이기 시작했습니다.
블로그에 접속할 때마다 팝업 광고가 뜨는 것이었습니다.
처음에는 제가 설정을 잘못한 줄 알았습니다.
하지만 확인해 보니 제가 설치한 광고가 아니었습니다.
무료로 제공받은 스킨 안에 광고 관련 코드가 포함되어 있었던 것입니다.
제가 수익을 얻는 광고도 아니었고, 방문자 입장에서도 불편할 정도로 자주 나타났습니다.
결국 더 이상 사용할 수 없겠다는 판단이 들었습니다.
스킨을 삭제하면 끝날 줄 알았습니다
그래서 스킨을 제거했습니다.
그런데 예상과 달리 광고는 계속 나타났습니다.
"분명 원래 테마로 되돌렸는데 왜 계속 뜨지?"
처음에는 이해가 되지 않았습니다.
광고와 관련된 코드가 여러 곳에 남아 있었던 모양입니다.
하나를 지우면 다른 곳에서 나타났고, 또 수정하면 다른 부분에서 문제가 생겼습니다.
그때는 HTML을 거의 모르던 시절이라 무엇을 삭제해야 하는지도 알 수 없었습니다.
정말 하나씩 검색하고, 확인하고, 다시 수정하는 과정을 반복할 수밖에 없었습니다.
돌이켜 보면 글목록을 만드는 것보다 원래 상태로 복구하는 과정이 더 힘들었던 것 같습니다.
다행히 천신만고 끝에 불필요한 광고 코드를 모두 정리했고, 블로그를 다시 깔끔한 기본 상태로 되돌릴 수 있었습니다.
결국 제가 원했던 것은 화려한 기능이 아니었습니다
필요한 것은 단 하나였습니다
복구를 마친 뒤 다시 블로그를 살펴봤습니다.
그때 문득 이런 생각이 들었습니다.
"내가 원했던 건 이렇게 많은 기능이 아니었는데."
사실 저는 화려한 효과나 복잡한 디자인에는 큰 관심이 없었습니다.
그저 방문자가 원하는 글을 쉽게 찾을 수 있는 깔끔한 글목록 하나면 충분했습니다.
그래서 목표를 아주 단순하게 정했습니다.
네이버 블로그처럼 '글목록 열기 · 닫기' 버튼을 만들어 보자.
이 목표를 정하고 다시 처음부터 검색을 시작했습니다.
검색도 해보고, AI에게도 계속 질문했습니다.
처음에는 무슨 말인지 이해되지 않는 답변도 많았습니다.
AI 답변에 모르는 용어가 나오면 검색엔진과 씨름하며 알아내고, 하나씩 질문을 바꿔 가며 조금씩 앞으로 나아갔습니다.
HTML을 거의 몰라도 첫 번째 성공은 할 수 있었습니다
1차 성공, 글목록 버튼이 화면에 나타났습니다
검색 엔진 그리고 AI와 씨름을 이어가던 어느 날 AI가 알려준 코드를 HTML 편집기에 조심스럽게 붙여 넣었습니다.
저장 버튼을 누르는 순간에도 솔직히 반신반의했습니다.
'설마 이게 정말 될까?'
새로고침을 했습니다.
그리고 화면을 보는 순간 저도 모르게 웃음이 나왔습니다.
드디어 블로그 화면에 '글목록 열기 · 닫기' 버튼이 나타난 것입니다.
기능 하나가 추가됐을 뿐인데 그날의 기분은 아직도 선명하게 기억납니다.
혼자 방에서 "됐다!"를 몇 번이나 외쳤는지 모릅니다.
HTML을 거의 모르던 제가 직접 코드를 넣어 원하는 기능을 만들었다는 사실이 너무 신기했습니다.
하지만 그 기쁨은 오래가지 않았습니다.
버튼을 계속 바라보고 있으니 또 다른 문제들이 하나둘씩 눈에 들어오기 시작했습니다.
진짜 작업은 바로 그때부터였습니다.
성공인 줄 알았는데, 진짜 작업은 그때부터였습니다
글목록 버튼이 생긴 것만으로도 정말 기뻤습니다.
하지만 블로그를 몇 번 열어보고 직접 사용해 보니 아쉬운 점이 하나둘씩 눈에 들어오기 시작했습니다.
기능은 분명 작동했습니다.
그런데 제가 머릿속으로 그렸던 모습과는 조금 달랐습니다.
'여기까지 왔는데 조금만 더 다듬어 볼까?'
그 생각이 결국 다섯 번의 수정으로 이어졌습니다.
2차 수정｜버튼 크기와 위치를 자연스럽게 바꾸기
기능보다 먼저 눈에 들어온 건 어색한 디자인이었습니다
가장 먼저 눈에 띈 것은 버튼의 크기였습니다.
생각보다 너무 컸고, 헤더와도 거의 붙어 있어서 전체 화면이 답답해 보였습니다.
기능은 잘 작동했지만 처음 방문한 사람이 보면 "뭔가 어색하다."는 느낌을 받을 것 같았습니다.
그래서 이번에는 디자인을 조금 손보기로 했습니다.
AI에게는 이전처럼 막연하게 질문하지 않았습니다.
이번에는 훨씬 구체적으로 설명했습니다.
버튼은 그대로 두고 크기만 조금 줄이고 싶습니다.
헤더와의 간격도 조금 띄우고 싶습니다.
그러자 이전보다 훨씬 원하는 답에 가까운 코드를 받을 수 있었습니다.
그 코드를 그대로 적용해 보니 버튼 크기도 자연스럽게 줄었고, 여백도 보기 좋게 정리됐습니다.
그때 처음으로 깨달았습니다.
AI에게 좋은 답을 얻으려면 무엇을 원하는지 구체적으로 설명하는 것이 정말 중요하다는 사실을 말입니다.
3차 수정｜페이지당 글 개수도 원하는 만큼 바꿨습니다
하나 해결하니 욕심이 생기기 시작했습니다
처음에는 버튼만 만들어도 만족했습니다.
그런데 하나씩 해결하다 보니 욕심이 생겼습니다.
글목록에 표시되는 글의 개수도 제가 원하는 숫자로 바꾸고 싶었습니다.
기본 설정은 제 블로그와는 조금 맞지 않는다고 느꼈습니다.
건강 정보를 다루는 블로그 특성상 한 화면에서 조금 더 많은 글을 보여주는 편이 방문자에게도 편할 것 같았습니다.
그래서 관련 코드를 다시 찾아보기 시작했습니다.
예전 같았으면 어디를 수정해야 하는지조차 몰랐을 텐데, 몇 번 코드를 만져 본 뒤라 그런지 이전보다 조금은 덜 막막했습니다.
AI에게도 이번에는 훨씬 정확하게 질문할 수 있었습니다.
글목록 기능은 그대로 두고, 페이지당 표시되는 글 개수만 변경하고 싶습니다.
덕분에 원하는 부분만 수정할 수 있었고, 글 개수도 제가 원하는 대로 바꿀 수 있었습니다.
작은 변화였지만 블로그를 실제로 사용할 때 만족도는 훨씬 높아졌습니다.
가장 만족스러웠던 수정은 따로 있었습니다
4차 수정｜선택한 라벨이 계속 유지되도록 만들기
여기까지 오니 거의 완성됐다고 생각했습니다.
그런데 실제로 글을 읽다 보니 예상하지 못했던 문제가 하나 나타났습니다.
예를 들어 '건강식품' 라벨을 선택한 뒤 글목록에서 글 하나를 클릭하면 해당 글은 정상적으로 열렸습니다.
문제는 그다음이었습니다.
읽고 나서 다시 목록을 열어 보면 방금 선택했던 라벨이 사라져 있었습니다.
결국 다시 처음부터 원하는 라벨을 찾아야 했습니다.
방문자 입장에서는 같은 주제의 글을 계속 읽기가 불편한 구조였습니다.
처음에는 그냥 참고 사용할까도 생각했습니다.
하지만 사용할수록 이 부분이 계속 마음에 걸렸습니다.
그래서 결국 또다시 수정에 들어갔습니다.
이번에는 이전보다 훨씬 어려웠습니다.
HTML만 수정해서 해결되는 문제가 아니었습니다.
자바스크립트까지 함께 수정해야 했기 때문입니다.
솔직히 그때는 자바스크립트가 무엇인지도 제대로 몰랐습니다.
그래도 포기하지 않았습니다.
이번에도 문제를 최대한 자세하게 설명했습니다.
예전처럼 "안 됩니다."라고만 말하지 않았습니다.
대신 이렇게 설명했습니다.
특정 라벨을 선택한 뒤 글을 클릭하면 라벨이 초기화된다.
다른 라벨을 선택하기 전까지는 현재 선택한 라벨이 계속 유지됐으면 좋겠다.
그러자 이전보다 훨씬 정확한 방향의 답을 받을 수 있었습니다.
몇 번의 수정 끝에 드디어 원하는 대로 작동했습니다.
이제는 방문자가 같은 주제의 글을 연속해서 읽어도 선택했던 라벨이 그대로 유지됐습니다.
이 순간이야말로 이번 프로젝트에서 가장 만족스러웠던 순간 중 하나였습니다.
마지막은 디자인 욕심이었습니다
5차 수정｜버튼 색상도 내 블로그에 맞게 변경
기능은 모두 완성됐습니다.
그런데 여기까지 오니 또 하나 욕심이 생겼습니다.
기본으로 적용된 검은색 버튼보다 제 블로그 분위기에 어울리는 파란색 버튼이 더 잘 어울릴 것 같았습니다.
이번 수정은 생각보다 간단했습니다.
색상 코드만 바꾸면 끝이었습니다.
앞에서 여러 번 시행착오를 겪었던 덕분인지 이번에는 겁도 나지 않았습니다.
원하는 색으로 바꾸고 저장한 뒤 다시 화면을 열었습니다.
생각했던 것보다 훨씬 자연스럽게 잘 어울렸습니다.
버튼 하나의 색상만 바뀌었을 뿐인데 블로그 전체 분위기가 한층 정돈된 느낌이었습니다.
그날은 완성된 화면을 한참 동안 눌러 보며 혼자 웃었습니다.
글목록 버튼을 눌러 보고,
라벨도 선택해 보고,
다른 글도 열어 보고,
다시 목록으로 돌아와 보고.
몇 번을 반복해도 모두 제가 원하는 방식으로 작동했습니다.
최종 완성된 화면을 보면서 그 순간만큼은 얼마나 뿌듯했는지 모릅니다. 너무 흥분되서 하마터면 소리지를 뻔 했습니다. 혼자 방 안을 이리저리 돌아다니며 좋아했습니다.
'오늘은 시원한 맥주 한 잔 정도는 스스로에게 선물해도 괜찮겠다.'
정말 그런 생각이 들었습니다.
이번 작업을 하며 얻은 가장 큰 수확
처음에는 단순히 글목록 하나를 추가하려고 시작했습니다.
그런데 작업을 계속하다 보니 버튼 크기를 바꾸고, 글 개수를 수정하고, 라벨 유지 기능을 추가하고, 마지막에는 버튼 디자인까지 손보게 됐습니다.
돌이켜 보면 글목록을 만든 것보다 문제를 하나씩 해결해 나가는 과정 자체가 더 큰 공부였습니다.
특히 이번 경험을 통해 초보자가 HTML을 수정할 때 도움이 되었던 방법이 몇 가지 있었습니다.
1. 수정하기 전에는 반드시 원본을 백업했습니다
예상하지 못한 문제가 생기면 언제든 이전 상태로 돌아갈 수 있도록 수정하기 전 원본 코드를 따로 저장해 두었습니다.
무료 스킨을 사용했다가 크게 고생한 뒤에는 이 습관이 얼마나 중요한지 더욱 실감했습니다.
2. 한 번에 하나씩만 수정했습니다
처음에는 여러 부분을 동시에 고치려고 했습니다.
그런데 문제가 생기면 어디에서 잘못됐는지 찾기가 너무 어려웠습니다.
그 이후부터는 버튼 크기 하나, 여백 하나, 색상 하나처럼 항상 한 가지만 수정한 뒤 저장하고 확인하는 방식으로 바꿨습니다.
시간은 조금 더 걸렸지만 결과적으로 훨씬 빠르게 해결할 수 있었습니다.
3. AI에게는 결과보다 상황을 먼저 설명했습니다
이번 작업에서 가장 크게 달라진 점이 바로 이것입니다.
예전에는
"~가 안 된다. ···"
이런 식으로 애매하고 다소 모호하게 질문했습니다.
하지만 나중에는
무엇을 했는지
어떤 문제가 생겼는지
어떻게 작동하길 원하는지
이 세 가지를 함께 설명하기 시작했습니다.
그러자 AI가 제 상황을 훨씬 정확하게 이해했고, 원하는 답을 받을 확률도 눈에 띄게 높아졌습니다..
50대 초보 블로거가 이번 프로젝트를 통해 배운 것
글목록 하나를 만들기까지 생각보다 많은 시간이 걸렸습니다.
중간에 여러 번 막혔고, 처음부터 다시 시작한 적도 있었습니다.
그래도 지금 돌이켜보면 가장 큰 수확은 글목록 기능 자체가 아니라 문제를 해결하는 방법을 배웠다는 것입니다.
AI는 만능이 아니라 '좋은 질문'을 기다리는 도구였습니다
이번 경험으로 프롬프트의 중요성을 실감했습니다
이번 작업을 하면서 AI를 정말 많이 활용했습니다.
처음에는 AI에게 질문만 하면 바로 원하는 답을 얻을 수 있을 거라고 생각했습니다.
하지만 실제로는 그렇지 않았습니다.
막연하게 질문하면 막연한 답이 돌아왔고, 문제를 구체적으로 설명하면 훨씬 도움이 되는 답을 받을 수 있었습니다.
예를 들어 처음에는 이렇게 질문했습니다.
"글목록이 이상하다. 어떻게 해야 되는 지 알려줘."
당연히 원하는 답을 얻기 어려웠습니다.
반면 나중에는 이렇게 질문했습니다.
"특정 라벨을 선택한 뒤 글을 클릭하면 선택한 라벨이 해제된다. 다른 라벨을 선택하기 전까지 현재 라벨이 유지되도록 수정하고 싶다."
질문이 구체적이자 답도 훨씬 정확해졌습니다.
그때 깨달았습니다.
AI가 특별해서라기보다 제가 무엇을 원하는지 제대로 설명하지 못하고 있었다는 사실을 말입니다.
이번 일을 계기로 문제를 작은 단위로 나누고, 현재 상황을 정확하게 설명하는 습관이 생겼습니다.
앞으로 새로운 기능을 추가하거나 블로그를 개선할 때도 이 경험이 큰 도움이 될 것 같습니다.
나이는 새로운 도전을 포기할 이유가 아니었습니다
저는 50대 후반, 60을 바라보는 나이입니다.
예전에는 HTML이라는 단어만 봐도 겁부터 났습니다.
괜히 잘못 건드렸다가 블로그가 망가질 것 같았기 때문입니다.
하지만 막상 하나씩 부딪혀 보니 생각보다 해결할 수 있는 문제가 많았습니다.
물론 쉬웠다는 이야기는 아닙니다. 컴맹에 가까운 저였기에 고생을 많이 했습니다.
검색도 정말 많이 했고, 같은 코드를 여러 번 수정하기도 했습니다.
그래도 한 단계씩 해결하다 보니 결국 제가 원했던 모습까지 만들 수 있었습니다.
이번 일을 겪으며 다시 한번 느꼈습니다.
새로운 기술을 배우는 데 나이는 큰 문제가 아니었습니다.
오히려 시도해 보려는 마음이 더 중요했습니다.
처음에는 어려워 보여도 한 걸음씩 앞으로 나아가다 보면 어느 순간 분명 이런 생각이 듭니다.
"내가 이걸 정말 해냈네?"
저도 그 순간을 경험했습니다.
블로그스팟을 처음 시작하는 분께 드리고 싶은 말
블로그스팟은 처음 접하면 조금 낯설게 느껴질 수 있습니다.
국내 블로그 서비스처럼 버튼 하나만 누르면 원하는 기능이 생기는 경우는 많지 않습니다.
대신 원하는 기능을 직접 만들어 갈 수 있다는 장점이 있습니다.
물론 HTML이나 CSS를 처음부터 모두 이해할 필요는 없습니다.
저 역시 그렇게 시작하지 않았습니다.
처음에는 한 줄도 이해하지 못했습니다.
그저 문제가 생기면 원인을 찾아보고, 하나만 수정한 뒤 결과를 확인하는 일을 반복했을 뿐입니다.
그 과정을 계속하다 보니 조금씩 익숙해졌습니다.
만약 지금 블로그스팟이 너무 어렵게 느껴진다면 조급해하지 않으셨으면 좋겠습니다.
처음부터 완벽하게 하려 하기보다 하나씩 해결해 나가는 과정 자체가 가장 좋은 공부가 될 수 있습니다.
마무리
처음에는 글목록 하나만 만들면 끝날 줄 알았습니다.
하지만 작업을 하다 보니 버튼 크기를 바꾸고, 페이지당 글 개수를 수정하고, 선택한 라벨이 유지되도록 개선하고, 마지막에는 버튼 색상까지 바꾸게 됐습니다.
처음 계획했던 것보다 훨씬 긴 여정이었지만, 그만큼 얻은 것도 많았습니다.
특히 HTML을 거의 모르던 제가 원하는 기능을 직접 구현했다는 사실은 지금도 꽤 큰 자신감으로 남아 있습니다.
혹시 지금 이 글을 읽고 계신 분도 저처럼 블로그스팟의 글목록 때문에 답답함을 느끼고 계셨다면, "컴맹인 저 사람도 해냈으니 나도 한번 해볼 수 있겠다."라는 생각만 가져도 충분합니다.
처음 한 걸음이 가장 어렵지, 그다음부터는 조금씩 길이 보이기 시작합니다.
다음 글에서는 실제 적용 방법을 공유합니다
여기까지가 제가 블로그스팟에 네이버 스타일 글목록을 만들게 된 과정입니다.
다음 글에서는 실제로 적용한 HTML과 JavaScript 전체 코드, 코드 삽입 위치, 버튼 크기와 색상 변경 방법, 페이지당 글 개수 수정, 선택한 라벨을 유지하는 방법까지 처음부터 차근차근 정리해 보겠습니다.
HTML이 처음인 분도 그대로 따라 할 수 있도록 최대한 쉽게 설명했습니다.
▶ 다음글 : 블로그스팟 글목록 만들기 ②｜네이버 스타일 글목록 HTML 전체 코드 적용 방법
댓글 없음:
댓글 쓰기