[연재] 광고를 어디에 두나 — 도구는 고정바, 글은 본문 끝

계산기의 마지막 문단이 광고 뒤에 숨어 있었습니다

육아휴직 계산기 화면을 끝까지 내려봤어요. 계산기 아래에는 제도 설명 글이 붙어 있는데, 그 마지막 문단이 이렇습니다.

부부가 순서를 어떻게 두느냐도 영향을 줍니다. 동시에 쓰는 게 나은 경우와 이어서 쓰는 게 나은 경우가 갈립니다. 두 사람의 급여 차이에 따라 답이 바뀌므로…

그런데 화면에서는 첫 줄까지만 보이고 뒤가 없어요.

아래 두 줄이 쿠팡 배너 뒤로 들어가 있습니다. 스크롤을 더 내리면 되지 않냐고요? 이미 끝까지 내린 화면이에요. 브라우저에 물어봤더니 지금 스크롤 위치가 2202이고, 내려갈 수 있는 최대치도 2202였습니다. 더 내려갈 데가 없는 겁니다. 즉 저 두 줄은 어떻게 해도 안 보입니다.

폰에서는 더 심해요.

"동시에 쓰는 게 나은 경우와 이어서 쓰는 게 나은 경우가 갈립니다. 두 사…" 에서 문장이 잘립니다. 육아휴직을 부부가 어떻게 나눠 쓸지 알아보러 온 사람한테, 하필 그 답이 적힌 줄을 광고가 덮고 있었어요.

지난 편에서 저는 "광고를 어디에 둘지"를 규칙으로 정했다고 썼습니다. 도구는 하단 고정 바, 글은 본문 끝. 홈과 글 목록에는 안 붙인다. 규칙은 코드에 잘 박혀 있었어요. 그런데 그 규칙이 화면에서 지켜지는지는 아무도 안 봤던 겁니다. 오늘은 그 얘기예요.

떠 있는 것은 자리를 차지하지 않습니다

원인은 한 줄로 설명됩니다. 하단 고정 바는 이렇게 만들어져 있어요.

#cpBar{position:fixed;left:0;right:0;bottom:0;z-index:9999; …}

position:fixed. 화면에 붙박이로 떠 있으라는 뜻입니다. 스크롤을 해도 그 자리에 그대로 있어요. 그래서 도구를 쓰는 내내 광고가 아래에 보이는 거고, 그게 원래 의도였습니다.

문제는 이 "떠 있음"의 성질이에요. 떠 있는 물건은 페이지 안에서 자리를 차지하지 않습니다. 종이 위에 글을 쓰고 그 위에 포스트잇을 얹은 것과 같아요. 종이는 자기 위에 포스트잇이 붙은 걸 모릅니다. 글은 원래 길이대로 다 쓰여 있고, 다만 마지막 부분이 포스트잇에 가려질 뿐이에요.

바 높이를 재봤습니다. 데스크톱에서 129px, 폰에서 154px. 폰 화면 높이가 844px이니까 화면의 18% 예요. 페이지 맨 아래 18%는 영영 안 보이는 땅이었던 겁니다.

왜 여태 몰랐냐면요. 이 바를 만들 때 도구 화면은 전부 한 화면짜리였어요. 계산기는 입력하고 결과 보면 끝, 지도는 지도가 화면을 꽉 채우고 끝. 스크롤이 아예 없거나 짧으니 아래가 좀 가려져도 티가 안 났습니다.

그런데 그 뒤에 도구마다 설명 글을 붙였어요. 검색에서 들어온 사람이 "이게 뭐 하는 도구인지" 읽을 데가 필요했거든요. 배포 스크립트에도 그렇게 적혀 있습니다.

# 제도 설명 4장 + 계산기 화면에 제도 요약 주입. 계산기는 쪼갤 낱개가 없어서
# 낱개 페이지 대신 제도 자체를 글로 쓴다.

화면이 길어진 순간 광고가 글을 먹기 시작한 거예요. 바를 만든 날과 글을 붙인 날 사이에 아무 일도 없었으니 아무도 안 봤고요. 각각은 맞는 결정이었는데 둘이 만나는 자리가 틀어졌습니다. 이런 건 코드를 아무리 읽어도 안 나와요. 화면을 열어서 끝까지 내려봐야 나옵니다.

도구 아홉 곳을 열어보니 아홉 곳 다 그랬습니다

한 곳만 그럴 리가 없죠. 도구 화면을 하나씩 열어서, 끝까지 내린 다음 바 뒤에 들어간 글자가 있는지 세어봤습니다. 아홉 곳을 봤는데 아홉 곳 다 뭔가가 가려져 있었어요.

공통점이 보이시나요. 전부 "맨 아래에 적어두는 것들" 이에요. 출처, 주의사항, 근거, 한계. 화면에서 제일 조용한 자리에 두는 문장들인데, 하필 그 자리가 광고 자리와 겹쳤습니다.

여기서 좀 뜨끔했어요. 이 연재에서 제가 계속 하는 얘기가 "숫자에는 한계를 같이 적어야 한다" 거든요. 핸드폰 보험 계산기 편에서는 모르는 값을 0으로 두지 말자고 썼고, 시장 지표 편에서는 같은 시장을 두 값으로 말하지 말자고 썼어요. 그 문장들을 다 써 놓고 광고로 덮어놨던 겁니다.

129px을 비워 두는 다섯 줄

고치는 방법 자체는 쉬워요. 떠 있는 물건이 자리를 안 차지하니까, 그 높이만큼 본문 아래를 비워 두면 됩니다.

var bar = document.getElementById('cpBar');
if (!bar) return;                       // 24시간 안에 닫은 경우 — 비울 것도 없다
var pad = function () {
  document.body.style.paddingBottom = bar.offsetHeight + 'px';
};
pad();
addEventListener('resize', pad);
if (window.ResizeObserver) new ResizeObserver(pad).observe(bar);

다섯 줄인데 손이 간 자리가 세 군데예요.

첫째, 높이를 숫자로 안 적었습니다. 129px 이라고 박아두면 편하죠. 그런데 폰에서는 154px이고, 나중에 고지 문구가 한 줄 늘면 또 달라져요. 숫자를 적는 순간 바 높이와 비워둔 높이가 갈라지기 시작합니다. 그래서 매번 바한테 직접 물어봐요. "너 지금 몇 픽셀이니?"

둘째, 한 번만 재고 끝내지 않습니다. 쿠팡 배너는 남의 서버에서 늦게 그려져요. 페이지가 뜬 직후에 재면 배너가 아직 없어서 바가 얄팍합니다. 그때 잰 값으로 자리를 비워두면 배너가 도착한 뒤에 또 가려져요. 그래서 ResizeObserver 로 바 높이가 바뀔 때마다 다시 잽니다. 창 크기를 바꿔도 마찬가지고요.

셋째, 닫으면 도로 붙입니다. 바에는 닫기(×) 단추가 있어요. 눌러서 광고가 사라졌는데 아래에 129px짜리 빈 공간만 덩그러니 남으면 그게 더 이상하잖아요. 닫는 순간 비워둔 자리도 같이 없앱니다. 24시간 안에 닫은 적이 있어서 바가 아예 안 뜨는 경우도 마찬가지고요 — 그래서 코드 두 번째 줄에 "바가 없으면 아무것도 안 한다"가 있습니다.

고친 뒤 화면이에요.

"두 사람의 급여 차이에 따라 답이 바뀌므로, 실제 숫자를 넣어 두 가지를 다 계산해 보시는 편이 확실합니다." 문장이 끝까지 나옵니다. 폰에서도요.

확인은 실제로 배너를 넣어서 했어요. 배포 때 도구 페이지에 배너를 끼워 넣는 스크립트가 있는데, 그 스크립트를 제 컴퓨터의 사본에 그대로 돌린 다음 브라우저로 열었습니다. 비워둔 자리가 데스크톱 128px, 폰 154px로 들어갔고, 바 뒤에 남은 글자는 0개였어요. 닫기 단추를 누르니 0px로 돌아가고, 새로고침하니 바가 아예 안 뜨더라고요. 코드를 고쳤다는 말과 화면이 고쳐졌다는 말은 다른 말이라서, 이건 눈으로 봐야 끝납니다.

그런데 두 곳은 안 고쳐졌습니다

일곱 곳은 이걸로 끝났어요. 그런데 지분·지배구조와 기술사 스터디는 그대로였습니다.

왼쪽 계열사 목록 아래쪽과, 오른쪽 '소유-지배 괴리' 표 아래가 바에 물려 있어요.

이 둘은 화면을 꽉 쓰는 앱 같은 도구입니다. 페이지 전체가 스크롤되는 게 아니라, 화면 높이를 딱 채워놓고 그 안의 목록만 따로 굴러가요. 그러니 "페이지 아래를 비워라"라고 해봐야 비울 페이지 아래가 없습니다. 실제로 재보니 이 두 화면은 스크롤할 수 있는 양이 0 이었어요.

이건 바를 고쳐서 될 일이 아니라 도구가 자기 화면 높이를 계산할 때 바를 알아야 하는 일입니다. 시험 삼아 화면 높이에서 129px을 빼봤더니 목록은 살아나는데 아래쪽 안내 문구가 또 다른 데서 걸리더라고요. 도구마다 화면 짜는 방식이 달라서, 바 쪽에서 한 방에 해결하는 방법을 찾다가 접었습니다.

그래서 오늘 기준으로 두 도구는 아직 가려진 채예요. 여기 적어두는 이유는, 이런 걸 안 적으면 다음에 제가 이 글을 읽고 "다 고쳤구나" 하고 넘어가기 때문입니다. 고친 일곱 곳보다 못 고친 두 곳이 나중에 더 비쌉니다.

자리를 왜 둘로 갈랐나 — 쓰는 화면과 읽는 화면

여기서 원래 하려던 얘기로 돌아갈게요. 왜 도구는 고정 바고 글은 본문 끝인가.

지금 배너가 붙은 데를 세어보면 도구 화면 16곳과 글 101편입니다. 붙는 방식이 완전히 달라요.

도구는 이렇습니다.

성경 아틀라스 화면인데, 에덴 동산 지도 아래에 곡물이랑 A4용지랑 고양이 모래가 돌고 있어요. 좀 웃기죠. 그래도 도구에서는 이 자리가 맞다고 봤습니다. 도구는 쓰는 화면이에요. 사람이 여기서 값을 넣고, 눌러보고, 다시 넣고 합니다. 시작도 끝도 없어요. "다 썼다"는 시점이 없으니 "다 쓴 다음"에 광고를 놓을 수가 없습니다. 그러면 남는 자리는 화면 가장자리뿐이에요.

글은 반대입니다. 읽는 화면이고, 끝이 있어요.

읽는 내내 화면 아래를 덮고 있는 대신, 본문이 끝난 자리에 한 번만 놓습니다. 다 읽은 사람에게만 보이는 거예요. 배너 코드는 도구용과 글자 그대로 같은 걸 씁니다 — 이 얘기는 지난 편에서 했어요. 배너를 두 군데 적어두면 나중에 한쪽만 고치게 되고, 그러면 정산이 두 갈래로 갈리니까요.

순서도 자리입니다

위 사진을 다시 보시면, 광고 위아래로 뭐가 있는지 보여요.

본문 끝(해시태그) → 연재 앞뒤 이동 → 광고 → 댓글. 이 순서는 코드 한 줄에서 나옵니다.

{series_nav(p, posts)}
{tail}
{COMMENTS_HTML}

tail 이 광고 자리예요. 앞에는 연재 이동 단추, 뒤에는 댓글. 이 순서를 이렇게 잡은 이유가 두 개 있습니다.

연재 이동이 광고보다 앞인 이유 — 연재를 읽는 사람에게 제일 중요한 건 "다음 편"이에요. 그걸 광고 아래로 내리면, 다음 편으로 가려고 광고를 지나쳐야 합니다. 광고를 지나치는 습관이 붙으면 그 아래 있는 것도 같이 안 보게 돼요.

댓글이 광고보다 뒤인 이유 — 댓글은 쓰려고 마음먹은 사람이 찾아 내려오는 자리예요. 광고가 하나 껴 있다고 안 쓰진 않습니다. 반대로 댓글창을 광고 위에 두면 사람이 거기서 멈춰서, 광고는 아무도 안 보는 데 서 있게 되고요.

정리하면 "안 보면 손해인 것"은 광고 위, "찾아오는 것"은 광고 아래입니다. 이걸 A/B 테스트로 정한 건 아니에요. 트래픽이 없어서 테스트를 할 수도 없고요. 그냥 제가 남의 블로그를 읽을 때 어디서 짜증이 났는지를 떠올려서 정했습니다.

광고가 아예 없는 자리

붙이는 자리보다 안 붙이는 자리가 더 중요할 때가 있어요.

홈 화면 맨 아래입니다. 광고가 없어요.

글 목록도 없습니다.

연재 목차도 없고요. 개인정보처리방침과 404 페이지도 마찬가지예요.

여기는 사람이 "뭘 읽을까" 고르는 자리입니다. 고르는 중에 광고를 들이미는 건 순서가 아니라고 봤어요. 식당에서 메뉴판 펴는데 옆 테이블 광고 전단을 얹어주는 느낌이잖아요.

이게 코드에서는 어떻게 되냐면, 따로 규칙을 안 만들었습니다. 글 페이지에만 눈에 안 보이는 표시(<!--INLINEAD-->)를 심어두고, 배포 때 그 표시를 찾아 배너로 바꿔요. 홈·목록·목차·방침에는 표시를 안 심었으니 자동으로 광고가 없습니다. "홈에는 광고를 넣지 마라"라는 조건문이 어디에도 없어요. 조건문으로 만들면 페이지가 늘어날 때마다 그 조건문을 고쳐야 하고, 언젠가 잊습니다.

같은 생각이 애드센스 쪽에도 한 번 더 있어요. 검색엔진에 안 내밀기로 한 얇은 페이지들이 있는데, 거기엔 애드센스 코드도 안 들어갑니다.

# noindex 페이지에는 광고를 안 붙인다. 검색엔진에 안 내미는 얇은 장에
# 광고만 얹어두면 심사에서 "가치가 별로 없는 콘텐츠"로 잡히는 자리를
# 늘리기만 한다(2026-08-02 거절 사유). 규칙을 여기 한 곳에 두면
# 앞으로 noindex 를 거는 페이지는 자동으로 광고에서도 빠진다.

괄호 안의 "거절 사유"가 뭔지는 나중에 한 편을 따로 잡아서 얘기할게요. 오늘 볼 건 마지막 줄이에요. "앞으로 ~를 거는 페이지는 자동으로." 규칙을 두 군데 적어두면 언젠가 갈라집니다. 한 군데 적어두면 안 갈라져요.

"광고처럼 튀지 않게"를 CSS로 옮기면

제휴 링크가 있는 글에는 배너 대신 이게 붙습니다.

이 카드의 스타일 첫 줄에 이렇게 적어놨어요.

/* 제휴 제품 블록 — 광고처럼 튀지 않게, 본문 다음의 조용한 카드로 */
.pd{max-width:44em;margin:34px 0 30px;padding:16px 18px;
  border:1px solid var(--border);border-radius:12px;background:var(--card-bg)}
.pd-h{font-size:12px;color:var(--muted);letter-spacing:.02em;margin-bottom:10px}

"광고처럼 튀지 않게"는 말인데, 그 말을 화면으로 옮기면 이런 값들이 됩니다.

• max-width:44em — 본문과 정확히 같은 폭이에요. 광고 블록이 본문보다 넓으면 그것만 튀어나와 보입니다. 폭을 맞추면 "이 글의 일부"처럼 앉아요.
• font-size:12px; color:var(--muted) — "이 글에서 다룬 제품"이라는 제목을 본문보다 작고 흐리게 뒀어요. 이 줄은 안내지 광고 문구가 아니니까요.
• border:1px solid — 배경색을 진하게 깔거나 색을 넣지 않고, 얇은 선 하나로만 구분했습니다. 눈에 띄게 하는 방법은 많은데, 여기서는 "여기부터는 본문이 아니다"만 알려주면 충분해요.
• @media print{.pd{display:none!important}} — 인쇄하면 안 나옵니다. 육아휴직 계산 결과를 뽑아서 회사에 내는 사람 종이에 제휴 링크가 찍히면 안 되잖아요.

여기서 갈라야 하는 게 하나 있어요. 광고처럼 안 보이게 하는 것과, 광고임을 숨기는 것은 다릅니다. 앞의 건 디자인이고 뒤의 건 거짓말이에요. 그래서 카드 안에는 이 문장이 반드시 들어갑니다.

제휴 링크입니다. 이 링크로 구매하시면 글쓴이가 일정액의 수수료를 받습니다. 가격은 같습니다.

링크 자체에도 "대가를 받는 링크"라는 표시를 붙이고요. 조용하게 두되, 조용하게 속이지는 않는 겁니다. 이 선은 CSS로 못 그어요. 사람이 문장으로 그어야 합니다.

한 화면에 광고 둘은 세우지 않습니다

세 번째 규칙이에요. 제휴 카드가 붙은 글에는 쿠팡 배너를 넣지 않습니다. 코드에 이렇게 적혀 있어요.

# 링크가 있는 글에는 쿠팡 캐러셀을 넣지 않는다. 방금 읽은 그 제품을 바로
# 내미는 것이 아무 상품이나 도는 배너보다 낫고, 한 화면에 광고 블록이 둘씩
# 쌓이면 읽는 맛도 심사 점수도 나빠진다.

맥미니 리뷰를 다 읽은 사람 앞에 있어야 할 건 맥미니지, 고양이 모래가 아니에요. 그리고 둘 다 세우면 글 끝에 광고가 두 덩이 서게 되는데, 그 화면은 읽고 싶지 않습니다.

이게 실제로 지켜지고 있는지 세어봤어요. 사이트에 올라간 글이 257편인데,

• 제휴 카드가 붙은 글 156편
• 쿠팡 배너가 붙은 글 101편
• 둘 다 붙은 글 0편

156 + 101 = 257. 딱 맞습니다. 겹친 글이 하나도 없어요.

세어보기 전까진 저도 몰랐습니다. 코드에 규칙이 적혀 있다는 것과 화면에서 지켜진다는 건 다른 얘기라, 이런 건 세는 게 제일 빠릅니다. 세는 일은 사람이 눈으로 하면 틀려요. 257장을 눈으로 세면 반드시 틀립니다.

광고 데이터는 글보다 오래 삽니다

세다가 하나 걸렸어요. 제휴 링크를 적어둔 파일에는 207편이 들어 있는데, 실제로 카드가 붙은 글은 156편입니다. 51편이 붕 떠 있어요.

이유를 찾아보니 8월 3일에 있었던 일이었습니다. 협찬 글 53편을 사이트에서 내렸거든요. 협찬은 "네이버 블로그에 게재한다"가 계약 조건이라 네이버 쪽이 원본이고, 제 사이트에 사본을 둘 이유가 없었어요. 내린 주소는 네이버 원문으로 넘겨주게 해뒀고요.

그런데 그 글들의 제휴 링크는 안 지웠습니다. 글은 없어졌는데 링크 목록에는 남아 있는 거예요. 지금 화면에 잘못 나오는 건 없어요. 붙일 글이 없으니 아무 데도 안 붙습니다. 다만 사이트를 만들 때마다 이 줄이 찍혀요.

제휴 링크 156개 글에 적용 · slug 안 맞음 51건: [...]

이 줄을 만들어 둔 게 오늘 도움이 됐습니다. 안 만들었으면 "링크가 잘 붙었네"로 끝났을 거예요. 광고 데이터는 글보다 오래 삽니다. 글을 지워도 그 글에 붙어 있던 링크·번호·설정은 어딘가에 남아요. 그게 지금 조용하다고 앞으로도 조용하진 않습니다. 나중에 같은 주소로 다른 글을 올리면 엉뚱한 상품이 붙을 수 있어요.

51건은 아직 안 지웠습니다. 협찬 관계가 어떻게 될지 몰라서 지우기보다 남겨두는 쪽을 골랐고, 대신 매 배포마다 저 줄이 찍히게 뒀어요. 없앨 수 없으면 최소한 보이게 두는 것, 이게 지금 제가 쓰는 방법입니다.

왼쪽은 제 것, 아래는 남의 것

자리 얘기를 하나만 더 할게요. 사이트에는 광고가 아닌 배너도 있어요.

네이버 블로그로 가는 배너, 유튜브 쇼츠로 가는 배너. 제 채널로 보내는 것들입니다. 이건 왼쪽 사이드바 아래에 있어요. 방문자 수 바로 밑이고요.

수익이 되는 건 아래쪽(쿠팡), 제 것으로 보내는 건 왼쪽. 자리를 갈라둔 이유는 단순해요. 남의 광고는 지나가는 자리에, 내 것은 머무는 자리에 두려고요. 사이드바는 글을 읽는 동안 계속 옆에 있는데 본문을 안 가립니다. 반면 하단 고정 바는 눈에 잘 띄는 대신 본문을 가리죠 — 오늘 글 앞부분이 통째로 그 얘기였고요.

폰에서는 규칙이 더 세게 걸립니다

마지막으로 폰이에요.

폰에서는 화면 폭 600px을 기준으로 배너를 갈아끼웁니다. 그보다 좁으면 데스크톱용 728px짜리를 숨기고 320px짜리를 보여줘요. 안 그러면 배너가 화면 밖으로 삐져나가서 가로 스크롤이 생깁니다.

그런데 폭보다 무서운 게 높이예요. 아까 잰 숫자를 다시 보면, 하단 고정 바가 폰에서 154px이고 화면 높이가 844px입니다. 화면의 18%. 데스크톱에서는 14%였어요. 같은 광고인데 폰에서 4%p 더 먹습니다.

그래서 폰에서는 자리 규칙이 더 세게 걸려요. 글에 고정 바를 안 쓰기로 한 판단이 데스크톱에서는 "좀 거슬리는 정도"지만, 폰에서는 읽는 화면의 5분의 1을 광고에 내주느냐 마느냐의 차이입니다. 도구에서마저 마지막 문단이 잘렸던 것도 폰에서 더 심했고요.

그래서 사람은 어디에 남았나

이번 편에 나온 규칙은 셋이에요.

1. 도구는 하단 고정 바, 글은 본문 끝 — 쓰는 화면과 읽는 화면은 다르다 2. 본문 → 연재 이동 → 광고 → 댓글 — 안 보면 손해인 건 광고 위, 찾아오는 건 광고 아래 3. 제휴 카드가 있는 글에는 배너를 안 넣는다 — 한 화면에 광고 둘은 안 세운다

셋 다 기술 문제가 아니에요. if 문 한 줄이면 어느 쪽으로든 됩니다. 어느 쪽이 맞는지가 문제였고, 그건 재서 나오는 답이 아니었어요. A/B 테스트로 정한 게 하나도 없습니다. 방문자가 하루 7명인데 테스트할 게 없어요. 전부 "내가 읽는 사람이라면 어디서 짜증이 나나"로 정했습니다.

그런데 오늘 진짜 배운 건 그게 아니에요.

규칙을 코드에 박아뒀다고 지켜지는 게 아니라는 것. 세 규칙은 다 지켜지고 있었어요(257편 중 겹친 글 0편). 그런데 그 규칙들이 전부 "어느 자리에 놓느냐"만 정하고 있었고, 놓은 다음 그게 무엇을 덮는지는 아무 규칙도 안 보고 있었습니다. 광고를 정해진 자리에 정확히 놓았는데, 그 자리가 마지막 문단 위였던 거예요.

이건 화면을 열어야만 나옵니다. 코드를 읽으면 "바를 아래에 고정한다"까지만 보이고, 그 아래에 뭐가 깔려 있는지는 안 보여요. 브라우저를 열고, 끝까지 내리고, "어? 문장이 왜 여기서 끊기지?" 하고 멈춰 서야 나옵니다.

기계가 잘한 건 따로 있어요. 높이를 매번 다시 재는 코드, 배너가 늦게 그려지는 걸 감시하는 장치, 닫으면 되돌리는 처리, 표시가 없는 페이지는 안 건드리는 규칙 — 이건 제가 손으로 짰으면 어딘가 빠뜨렸을 겁니다.

놓을 자리를 정하는 것도, 놓고 나서 무엇이 가려졌는지 보는 것도 아직 사람 몫이더라고요. 앞의 건 판단이고 뒤의 건 그냥 눈으로 확인하는 일인데, 둘 다 코드 안에는 없습니다.

아, 그리고 못 고친 두 곳. 지분·지배구조와 기술사 스터디는 여전히 아래쪽이 가려져 있어요. 다음에 그 도구를 손볼 때 같이 고치려고 합니다. 못 고친 걸 못 고쳤다고 적어두는 것도 오늘 배운 것 중 하나예요.

#쿠팡파트너스 #제휴마케팅 #광고배치 #배너광고 #수익형블로그 #블로그수익화 #개인홈페이지 #정적사이트 #CloudflarePages #웹퍼블리싱 #CSS #positionfixed #ResizeObserver #모바일웹 #반응형웹 #UX #사용성 #웹접근성 #클로드 #ClaudeCode #바이브코딩 #AI활용법 #휴먼인더루프 #육아휴직계산기 #성경아틀라스 #지분구조 #사이드프로젝트 #1인개발 #웹사이트만들기 #빅터하우스