갑자기 시작한 반응형 웹 작업이 예상보다 골치 아팠던 이유

생각 없이 시작한 HTML5 페이지 만들기

며칠 전부터 갑자기 내 개인 홈페이지를 좀 손보고 싶다는 생각이 들었다. 예전에 대충 만들어둔 거라 모바일에서 보면 화면이 다 깨지고, 글자 크기도 제각각이라 여간 불편한 게 아니었다. 요즘은 HTML5니 반응형이니 다들 기본으로 한다길래, 나도 큰 마음먹고 유튜브에서 강좌를 몇 개 찾아봤다. ‘그래, 어차피 간단한 페이지인데 며칠이면 되겠지’ 싶었다. 넥써쓰나 원스토어에서 요즘 HTML5 기반 게임을 그렇게 밀어준다고 하길래, 나도 기술 좀 익혀두면 어디든 써먹겠지 싶었던 게 화근이었다. 그래픽디자인학원을 다닐 걸 그랬나 싶을 정도로 처음부터 디자인 감각이 영 따라주질 않더라. 일단 메모장을 열고 무작정 태그를 치기 시작했다.

뷰포트 설정에서 마주한 첫 번째 장벽

문제는 역시나 모바일 화면이었다. 메타 태그에 viewport 설정을 제대로 안 하니까 글자가 아주 개미만 하게 나오더라. 이걸 맞추려고 검색창을 얼마나 뒤졌는지 모른다. 예전에는 그냥 고정 폭으로 만들면 그만이었는데, 이제는 기기마다 화면 크기가 다 다르니 그게 안 된다. 아는 사람은 다 알겠지만, CSS에서 media query를 써야 한다는 걸 알게 되기까지 꼬박 이틀이 걸렸다. 코드를 한 줄 수정할 때마다 새로고침을 수십 번씩 눌러댔다. 그러다 보니 어느덧 자정은 훌쩍 넘어가고, 눈은 침침해지고. 밥 먹는 시간도 아까워서 편의점에서 산 삼각김밥으로 때우면서 작업했다. 그때 쓴 돈이 대략 5,000원 정도였나. 나중에는 내가 웹을 만드는 건지, 눈을 혹사하는 건지 분간이 안 가더라.

차단기 내려가는 소리에 놀란 밤

한창 집중해서 코딩을 하고 있는데, 갑자기 거실 전등이 ‘탁’ 소리를 내며 나갔다. 집이 어두워지니 당황해서 두꺼비집을 열어봤는데, 전등 쪽 차단기만 툭 떨어져 있더라. 이게 혹시 내가 컴퓨터를 너무 많이 돌려서 그런가 싶어 괜히 쫄았다. 아파트 관리사무소에 전화해야 하나 고민하며 30분을 끙끙댔는데, 결국 그냥 차단기만 다시 올리니까 해결됐다. 그냥 일시적인 과부하였나 본데, 그 30분 동안의 공포는 정말이지 잊을 수가 없다. 만약 진짜 고장이었으면 전문가를 불렀어야 했을 텐데, 그 비용이 얼마일지 생각만 해도 아찔했다. 그런 사소한 일 하나에 흐름이 끊기니까 다시 집중하기가 참 어렵더라.

데이터 분석과 코딩 사이의 괴리감

사실 내가 이걸 시작한 또 다른 이유는 데이터 분석 자격증 공부를 하면서 ‘나만의 대시보드’ 같은 걸 하나 만들고 싶어서였다. 그런데 막상 HTML 태그랑 씨름하다 보니, 데이터는커녕 기본적인 정렬도 내 마음대로 안 된다는 걸 깨달았다. UI 디자인이라는 게 진짜 보통 일이 아니더라. ‘초등컴퓨터학원’이라도 다녀야 하나 자괴감이 들기도 했다. 반응형 웹이 좋긴 한데, 이게 기기마다 레이아웃이 미세하게 틀어지는 건 어떻게 잡아야 할지 여전히 모르겠다. 그냥 ‘이 정도면 됐지’ 하고 타협해버리는 나를 발견할 때마다 참 허탈하다.

결국 마무리되지 않은 채 남겨둔 것들

지금 이 글을 쓰는 시점에도 사실 내 웹사이트는 완벽하지 않다. 폰트 크기가 특정 브라우저에서는 또 이상하게 작게 나오고, 이미지는 로딩되는 데 시간이 좀 걸린다. 뭉크의 ‘절규’가 시간마다 모습이 바뀌는 것처럼, 내 웹사이트도 접속할 때마다 어딘가 조금씩 다르게 보이는 기분이랄까. 뭐, 그래도 일단 배포는 해뒀으니까 만족해야 하는 건지 잘 모르겠다. 나중에 더 배우면 고칠 수 있을까? 아니면 또 다른 핑계를 대면서 미루게 될까. 멘탈이 붕괴될 뿐이라는 말이 괜히 있는 게 아니라는 생각이 든다. 어쨌든 오늘 밤은 여기서 그만두고 좀 쉬어야겠다.