HTML 버튼 만들기 블로그 활용 생성기 - 경제적 자유를 향해서

버튼 커스터마이징

🔗 연결할 링크 (URL)

버튼 텍스트

배경 색상

글자 색상

버튼 스타일 (다중 선택)

아웃라인 고스트 그림자 가로 확장 반짝임 호버 확대

폰트 크기: 20px

테두리 둥글기: 12px

버튼 클릭하기

📜 생성된 HTML 코드

코딩의 '코' 자만 들어도 머리가 아프고 숫자나 영어로 가득 찬 까만 화면을 보면 숨이 턱 막히는 기분이었죠. 그런데 그런 제가 어쩌다 보니까 웹 기술의 가장 기본이라는 html 공부하면 좋다는 말을 듣고 무작정 책을 한 권 샀던 기억이 나네요. 처음에는 정말 돈 낭비 시간 낭비라고 스스로를 얼마나 자책했는지 모릅니다. 영어 철자 몇 개 친다고 해서 과연 내 삶에 무슨 변화가 생길까 의구심이 머릿속을 떠나지 않았거든요. 하지만 그 작은 꺾쇠괄호 하나가 제 인생의 터닝포인트가 될 줄은 그때는 정말 꿈에도 몰랐습니다. 솔직히 말씀드리면 저는 예전에 블로그 스킨 하나 바꾸는 것도 벌벌 떨던 기계치였습니다. 남들이 만들어 놓은 예쁜 템플릿을 그냥 복사해서 붙여넣기 바빴죠. 그러다가 링크 하나가 깨지거나 글자 크기가 마음에 안 들면 하루 종일 스트레스를 받았습니다. 어디를 고쳐야 할지 전혀 모르니까 그냥 처음부터 다시 만들곤 했어요. 지금 생각하면 참 미련했죠. 그 고생을 왜 사서 했나 싶어요. 그런데 우연한 기회로 회사에서 웹사이트 상세 페이지를 수정해야 하는 엄청난 난관에 봉착하게 되었습니다. 개발자분들은 다들 너무 바쁘고 디자이너분도 손을 쓸 수 없는 상황이라 결국 제가 총대를 메게 되었던 거죠. 그때 선배가 지나가면서 툭 던진 말이 아직도 귀에 생생하게 박혀 있습니다. "야 너도 이번 기회에 html 공부하면 금방 고칠 수 있어." 그 말이 제 자존심을 긁었는지 아니면 묘한 오기가 생겼는지 그날 밤 밤새도록 구글링을 했습니다. 처음 마주한 소스 코드는 그야말로 외계어가 따로 없더라고요. 이게 도대체 글씨인지 그림인지 눈이 핑핑 돌 지경이었습니다. 하지만 꾹 참고 한 줄씩 읽어봤어요. 제목을 나타내는 태그가 무엇인지 본문을 감싸는 태그가 무엇인지 아주 기초적인 것부터 파고들었습니다. 그렇게 새벽 4시쯤 되었을 때였나. 드디어 깨진 이미지 링크 하나를 제 손으로 직접 수정하는 데 성공했습니다. 화면을 새로고침하는 순간 엑스박스로 뜨던 그림이 정상적으로 짠 하고 나타나는데 소름이 돋더군요. 그 짜릿한 손맛을 본 뒤로는 누가 시키지 않아도 알아서 맹렬하게 몰두하기 시작했습니다. 사실 html 공부하면 가장 좋은 게 컴퓨터와 대화하는 법을 배우는 거예요. 우리가 외국에 여행을 가려면 최소한 그 나라 인사말은 알아야 하듯이 인터넷 세상에서 살아가려면 웹의 언어를 조금은 알아야 하거든요. 네이버 블로그도 마찬가지입니다. 스마트에디터가 아무리 좋아졌어도 가끔 글자 간격이 꼬이거나 원하는 대로 정렬이 안 될 때가 있죠. 그럴 때 당황하지 않고 HTML 편집 모드로 들어가서 코드 한 줄만 슥 수정해주면 깔끔하게 해결되는 경우가 많아요. 이걸 할 줄 아느냐 모르느냐는 하늘과 땅 차이라고 감히 말합니다. 예전에는 네이버 지식인에 물어보고 답변 올 때까지 마냥 기다렸는데 이제는 10초 만에 스스로 해결하니까요. 시간이 곧 돈인 세상에서 이 정도 무기를 장착한다는 건 엄청난 경쟁력이 되는 셈이죠. 제 주변에 주식 투자나 재테크를 정말 열심히 하는 동생이 하나 있어요. 그 친구는 매일 차트만 들여다보며 어디에 투자할지 고민하더라고요. 그래서 제가 하루는 진지하게 차라리 그 시간에 한 달만 투자해서 컴퓨터 기초를 다져보라고 권했습니다. 처음에는 그 동생도 콧방귀를 뀌었죠. 자기는 개발자가 될 것도 아닌데 왜 그런 걸 배워야 하냐면서요. 하지만 제 등쌀에 밀려 억지로 온라인 강의를 듣기 시작하더니 지금은 저보다 더 신나서 활용합니다. 자기가 원하는 주식 데이터를 웹사이트에서 자동으로 긁어오는 프로그램을 만들고 싶어 하더라고요. 물론 그 단계까지 가려면 다른 프로그래밍 언어도 배워야 하지만 그 모든 것의 출발점이 바로 여기서부터 시작된다는 점이 중요합니다. 기초 체력이 없으면 아무리 좋은 기술을 배우려고 해도 금방 지치기 마련이니까요. 집을 지을 때 바닥을 다지는 공사가 가장 지루하고 티가 안 나잖아요. 이 공부도 딱 그런 느낌입니다. 처음에는 화면에 글자 몇 개 띄우는 게 전부라서 엄청 유치해 보일 수 있어요. "겨우 이거 하려고 내가 퇴근하고 이 고생을 하고 있나" 하는 회의감이 폭풍처럼 밀려오는 순간이 반드시 옵니다. 저 역시 그런 슬럼프를 겪었고요. 책을 집어 던지고 맥주나 마시러 도망쳤던 날이 한두 번이 아닙니다. 하지만 그 고비를 딱 넘기고 나면 세상을 보는 눈이 완전히 달라져요. 매일 접속하는 포털 사이트나 쇼핑몰 페이지를 볼 때도 예전에는 그냥 예쁘다 하고 넘겼지만 이제는 "아, 이건 어떤 식으로 구조를 짰겠구나" 하고 분석하게 되죠. 보이지 않던 이면의 세계를 들여다볼 수 있는 눈이 생기는 겁니다. 이게 바로 지적 유희이자 자본주의 사회에서 살아남는 강력한 생존 기술이 아닐까 싶어요. 종종 제 블로그 이웃분들이 댓글로 이런 질문을 남겨주십니다. "학원 안 다니고 독학으로도 충분히 가능한가요?" 제 대답은 무조건 "예스"입니다. 요즘은 세상이 너무 좋아져서 유튜브나 무료 사이트에 고퀄리티 강의가 널려 있거든요. 의지만 있다면 돈 한 푼 안 들이고 방구석에서 마스터할 수 있습니다. 오히려 비싼 돈 주고 학원 등록했다가 진도 못 따라가서 중도 포기하는 사람을 제가 주변에서 정말 많이 봤어요. 그러니까 절대 처음부터 겁먹고 큰돈 쓸 생각은 하지 마세요. 하루에 딱 30분씩만 투자해서 내 이름 석 자 화면에 띄우는 것부터 차근차근 재미를 붙여보시길 바랍니다. 글을 쓰다 보니까 어느새 하늘이 조금씩 맑아지는 것 같네요. 내 통장 잔고도 이렇게 맑게 갠 날처럼 쭉쭉 늘어났으면 좋겠다는 황당한 상상을 잠시 해봅니다. 결국 인생은 내가 아는 만큼 보이고 행동하는 만큼 변하는 법이잖아요. 맨날 남이 만들어 놓은 틀 안에서 투덜거리며 갇혀 살 것인지 아니면 내가 직접 틀을 깨부수고 나만의 공간을 설계할 것인지는 오롯이 본인의 선택에 달려 있습니다. 망설이고 있는 지금 이 순간에도 시간은 야속하게 흘러가고 있어요. 오늘 밤에는 스마트폰으로 유튜브 쇼츠나 인스타그램 릴스 보면서 시간 때우지 말고 검색창에 단어 하나만 입력해보세요. 그 작은 움직임이 1년 뒤 여러분의 인생을 어떻게 바꾸어 놓을지 그 아무도 장담할 수 없으니까요. 제가 그랬던 것처럼 여러분도 새로운 세상의 문을 열 수 있는 열쇠를 손에 쥐게 되기를 바랍니다. 오늘 포스팅은 여기서 마무리할게요. 너무 진지충 모드로 이야기했나 싶어서 살짝 민망한 마음이 들기도 합니다. 그래도 누군가에게는 이 글이 작은 자극이 되었기를 진심으로 바래요. 글을 아무리 열심히 써도 방문자는 늘 제자리걸음이었고 애드센스 수익은 하루에 몇 센트 나올까 말까 하던 시절이었죠. 돈을 벌어보겠다고 시작했는데 오히려 스트레스만 쌓이고 내가 도대체 뭘 하고 있나 싶더라고요. 주변에서는 다들 티스토리나 네이버를 하라고 난리였는데 저는 왠지 모르게 구글의 시스템에 마음이 자꾸 끌렸습니다. 그래서 무작정 시작했던 게 바로 블로거(Blogger)라고 불리는 구글의 자체 서비스였습니다. 그런데 처음에는 정말 당황했어요. 제공되는 기본 글쓰기 에디터가 생각보다 너무 투박하고 기능이 별로 없었거든요. 네이버의 화려하고 편리한 스마트에디터에 익숙해져 있던 저에게 구글의 플랫폼은 마치 황무지처럼 삭막하게 느껴졌습니다. 행간 조절도 내 마음대로 안 되고 이미지 정렬 하나 바꾸는 것도 여간 까다로운 게 아니었습니다. "아, 역시 대세를 따랐어야 했나" 하는 후회가 밀려오던 그때 아는 개발자 형이 지나가면서 툭 한마디를 던지더군요. 글쓰기 모드를 기본 모드가 아니라 HTML 보기로 바꿔서 써보라고요. 그게 제 블로그 인생을 완전히 바꾸어 놓은 신의 한 수가 될 줄은 몰랐습니다. 솔직히 처음에는 거부감이 심했어요. 컴퓨터 전공자도 아닌 내가 무슨 꺾쇠괄호가 가득한 외계어를 쓰나 싶었죠. 단어 하나 잘못 입력하면 글이 통째로 날아갈 것 같은 불안감도 엄청나게 컸습니다. 하지만 답답한 마음에 밑져야 본전이라는 생각으로 코드 한 줄씩 공부해가며 직접 글을 올리기 시작했습니다. 그렇게 한 달쯤 지났을 때였나. 제 글들이 구글 검색 결과 최상단에 하나씩 꽂히기 시작하더군요. 네이버처럼 이웃 소통을 열심히 한 것도 아니었고 체험단 활동을 한 것도 아닌데 순수하게 검색 유입이 폭발했습니다. 그때 온몸에 소름이 돋으면서 깨달은 진리가 하나 있습니다. 아, 이래서 사람들이 다들 구글블로그 html로 작성하면 좋은점이 많다고 귀에 못이 박히도록 이야기했던 거구나 하고 말이죠. 가장 먼저 피부로 와닿았던 건 로딩 속도의 신세계였습니다. 우리가 일반적인 에디터로 글을 쓰고 사진을 넣으면 눈에 보이지 않는 쓰레기 코드들이 뒤죽박죽 엉켜서 들어가게 됩니다. 네이버나 티스토리에서 글을 복사해 그대로 붙여넣기 해보신 분들은 아마 무슨 뜻인지 아실 거예요. 서식 정보를 그대로 물고 들어와서 글자 크기가 제멋대로 변하고 배경에 이상한 색이 들어가죠. 그게 다 웹페이지를 무겁게 만드는 불필요한 찌꺼기 코드들입니다. 하지만 구글블로그 html로 작성하면 좋은점이 바로 이 부분에서 명확해집니다. 내가 원하는 태그만 딱 골라서 가장 간결하고 정갈하게 코드를 짤 수 있거든요. 페이지가 가벼워지니까 당연히 글이 열리는 속도가 엄청나게 빨라집니다. 성격 급한 우리나라 사람들은 사이트가 3초만 안 열려도 뒤로 가기 버튼을 눌러버리잖아요. 검색엔진 최적화, 즉 SEO 관점에서도 구글은 로딩 속도가 빠른 사이트를 굉장히 예뻐하고 점수를 잘 줍니다. 결국 속도가 빠르면 독자의 이탈률이 줄고 상위 노출 확률은 자연스럽게 올라갈 수밖에 없는 구조인 거죠. 두 번째로 느낀 장점은 디자인의 자유도가 무한대라는 점입니다. 일반 에디터에서는 줄간격을 160%나 180% 중에서 정해진 대로만 골라야 하죠. 글자 크기도 소, 중, 대 같은 기본 틀에 갇혀서 쓸 수밖에 없습니다. 하지만 html 모드에서는 내가 원하는 픽셀 단위로 미세하게 조정이 가능합니다. 인용구 상자를 만들 때도 테두리 선의 두께를 1px로 할지 점선으로 할지 실선으로 할지 내 마음대로 커스텀을 할 수 있어요. 남들과 똑같은 템플릿에서 벗어나 나만의 개성이 담긴 매거진 같은 글을 발행할 수 있게 되는 겁니다. 처음에는 이 작업이 귀찮고 시간이 오래 걸리는 것처럼 느껴져요. 저도 초반에는 글 하나 쓰는데 세 시간이 넘게 걸려서 입안이 다 헐었던 적이 있습니다. 메모장에 코드를 일일이 타이핑하고 오타가 없는지 검수하는 과정이 여간 고역이 아니었거든요. 그런데 이것도 요령이 생기니까 자주 쓰는 서식들을 메모장에 미리 저장해두고 복사해서 알맹이만 쏙 바꾸면 되더라고요. 나중에는 오히려 일반 에디터로 글을 쓰는 게 더 답답하고 느리게 느껴질 정도였습니다. 세 번째는 애드센스 광고 배치의 효율성이 극대화된다는 사실입니다. 수익형 블로그를 운영하시는 분들이라면 가장 예민하게 보시는 게 바로 광고의 클릭률(CTR)일 텐데요. 기본 에디터에서는 광고를 본문 상단, 중단, 하단 같은 정해진 위치에만 넣을 수 있습니다. 글의 흐름상 뜬금없는 자리에 광고가 툭 튀어나와서 독자의 몰입을 방해하곤 하죠. 하지만 구글블로그 html로 작성하면 좋은점이 내가 원하는 문맥의 정확한 틈새에 광고 코드를 삽입할 수 있다는 겁니다. 독자가 글을 읽다가 가장 호기심이 생길 만한 시점에 자연스럽게 광고를 노출하니까 클릭률이 예전보다 2배 이상 뛰었습니다. 수익이 변하는 걸 눈으로 확인하니까 그동안 코드 공부하느라 새벽까지 밤새웠던 피로가 눈 녹듯 사라지는 기분이었습니다. 네 번째는 플랫폼에 종속되지 않는 강력한 영속성을 가집니다. 네이버나 티스토리는 서비스 정책이 바뀌거나 만약에 서버가 종료되기라도 하면 내가 그동안 피땀 흘려 쓴 글들을 한순간에 잃어버릴 위험이 있죠. 실제로 작년에 모 플랫폼의 서버 사태 때 많은 분들이 눈물을 흘리며 이사를 가셨습니다. 하지만 구글의 블로거는 내가 작성한 HTML 코드를 그대로 백업해서 언제든지 개인 워드프레스나 다른 사이트로 완벽하게 이식할 수 있습니다. 내 글의 주도권을 온전히 내가 쥐고 있다는 안정감은 생각보다 엄청난 위안이 됩니다. 마지막 다섯 번째는 모바일 가독성을 내 손으로 직접 통제할 수 있다는 점이에요. 요즘은 아시다시피 방문자의 80% 이상이 스마트폰으로 글을 읽습니다. PC 화면에서는 분명히 예쁘게 보였는데 모바일로 보면 글자가 깨지거나 이미지가 잘리는 현상을 자주 경험해보셨을 거예요. HTML의 반응형 코드나 뷰포트 설정을 조금만 건드릴 줄 알게 되면 어떤 크기의 스마트폰 화면에서도 글자가 자로 잰 듯이 깔끔하게 떨어집니다. 줄바꿈이 이상하게 돼서 가독성이 떨어지는 문제를 원천적으로 차단할 수 있는 거죠. 물론 단점이 아예 없는 건 아닙니다. 진입 장벽이 높다는 게 가장 큰 걸림돌이긴 해요. 제 주변에 블로그를 새로 시작한 사촌 동생이 한 명 있는데요. 제가 구글블로그 html로 작성하면 좋은점을 아무리 침을 튀겨가며 설명해줘도 처음 한두 번 시도해보고는 머리가 아프다며 포기해버리더라고요. 결국 다시 원래 쓰던 편한 플랫폼으로 돌아갔습니다. 그 모습을 보면서 참 안타까웠어요. 조금만 버티면 신세계가 열리는데 그 초반의 지루함과 낯섦을 이겨내지 못하는 것 같아서요. 재테크에서 복리의 마법을 누리려면 지루한 인고의 시간이 필요하듯이 코딩 공부와 블로그 운영도 딱 그런 성격을 가지고 있습니다. 처음 1~2주는 정말 지옥 같아요. 태그 하나 빼먹어서 화면이 깨지면 원인을 찾느라 밤을 꼬박 새우기도 하죠. 하지만 그 과정을 거치면서 내 자산의 기초 체력이 길러지는 겁니다. 남들은 평생 남이 만들어 준 시스템의 노예로 살아갈 때 나는 인터넷 세상의 뒷배경을 이해하는 생산자의 시선을 갖게 되는 거죠. 글을 쓰다 보니까 벌써 시간이 이렇게 지나간 줄도 몰랐네요. 원래는 오늘 h1 태그나 p 태그 같은 실전 활용법까지 다 오픈하려고 했는데 이야기가 길어져서 그건 조만간 다음 포스팅에서 다뤄야겠습니다. 너무 처음부터 빡빡하게 공부하면 체할 수도 있으니까요. 어떠신가요 여러분? 맨날 남이 깔아놓은 판에서 눈치 보며 글 쓰느라 지치지 않으셨나요. 이번 기회에 단돈 만 원짜리 기초 서적 한 권 사서 나만의 단단한 성을 구축해보는 건 매우 가치 있는 도전이라고 생각합니다. 오늘 밤에는 노트북을 켜고 글쓰기 화면 오른쪽 상단에 있는 그 작은 전환 버튼을 한번 눌러보세요. 새로운 세상의 문을 여는 열쇠는 이미 여러분의 손가락 끝에 쥐어져 있을지도 모릅니다. 조금 서툴면 어떻고 시간이 좀 오래 걸리면 어떤가요. 내일의 내가 오늘의 나에게 고마워할 패스를 던지는 건데 말이죠.