광고 캐러셀 폭 통일과 UI 정비로 세 페이지 일관성 확보

광고 영역 UI 정비 작업을 몰아서 처리했다. 캐러셀 폭 통일, 라운드 처리, 라벨 추가, 위치 조정까지 — 하나하나 보면 소소하지만 묶어보면 꽤 넓은 범위를 건드린 커밋이다.

왜 이 작업이 한 묶음이 됐나

광고 캐러셀이 페이지마다 폭이 제각각이었다. salary, severance, unemployment — 세 페이지 모두 독립적으로 레이아웃을 갖고 있다 보니, 언젠가 한 곳에서 폭을 바꿨을 때 다른 두 페이지가 그대로 남아버린 것 같다. 이런 건 보통 "나중에 맞추면 되겠지" 하고 넘어가다가 어느 날 나란히 열어보는 순간 눈에 딱 걸린다.

680px 통일이라는 숫자 자체보다, 세 페이지가 동일한 기준선을 갖게 됐다는 게 핵심이다. 다음번에 폭 변경이 생기면 공통 기준 하나만 바꾸면 된다. 지금까지는 세 군데를 다 찾아다녀야 했을 것.

변경 파일별로 보면

눈에 띄는 건 .sql 파일이 포함됐다는 점이다. 광고 폭 같은 UI 수치가 DB에도 들어가는 구조라는 뜻인데, 이런 경우 빌드 스크립트와 DB가 항상 같은 값을 바라보도록 배포 순서를 맞추는 게 중요하다. 이번처럼 커밋 하나에 묶어두면 적어도 "어떤 변경이 세트"인지는 명확하게 남는다.

UI 정비 네 가지를 하나씩

캐러셀 폭 680 통일 — 숫자를 맞추는 게 전부가 아니라, 맞춘 이후에 세 페이지가 실제로 동일하게 렌더링되는지 크로스 체크가 필요하다. 페이지마다 부모 컨테이너 폭이 다르면 같은 width: 680px을 줘도 결과가 달라질 수 있다.

라운드 wrapper — 광고 영역을 감싸는 컨테이너에 border-radius를 줬을 것이다. 이런 처리는 보통 콘텐츠와 광고 영역 사이의 시각적 분리를 부드럽게 하려는 의도다. 날카로운 사각형보다 사용자가 광고를 덜 거슬려 한다는 UX 인사이트가 배경에 있다.

/* 라운드 wrapper 패턴 예시 */
.ad-carousel-wrapper {
  width: 680px;
  border-radius: 12px;
  overflow: hidden; /* 자식 요소가 라운드 밖으로 튀어나오지 않도록 */
}

overflow: hidden을 빠뜨리면 라운드가 있어도 자식 요소가 모서리를 뚫고 나오는 경우가 있다. 이거 빠진 채 QA 통과하면 특정 브라우저에서만 깨져서 나중에 찾기 번거롭다.

'쇼핑 추천' 라벨 — 광고임을 명시하거나, 혹은 콘텍스트를 제공하는 라벨이다. 단순 광고 표기일 수도 있고, 사용자가 이 영역이 무엇인지 인지할 수 있도록 돕는 UX 레이블일 수도 있다. 어느 쪽이든 텍스트 한 줄이 사용자의 광고 영역 인식률을 꽤 바꾼다.

위치 이동 FAQ → bottom — 이게 가장 의사결정이 명확한 변경이다. FAQ 옆에 있던 광고를 페이지 하단으로 내렸다는 건, FAQ 가독성을 광고 노출보다 우선했다는 뜻이다. 광고 위치 결정은 항상 트레이드오프다. 상단/중단에 가까울수록 노출 가능성은 높지만 콘텐츠 흐름을 방해할 수 있고, 하단은 반대다. 이번 결정은 콘텐츠 우선 쪽으로 기울인 것.

이런 작업에서 신경 써야 할 것들

• 폭 변경은 빌드 아웃풋, DB, 퍼블리싱 코드 세 군데가 항상 같은 값을 갖는지 배포 전 확인
• 여러 페이지에 동일한 변경을 뿌릴 때, 페이지별 컨테이너 차이로 결과가 달라지는지 실제로 열어볼 것
• .sql 파일이 포함된 커밋은 배포 순서(코드 배포 → DB 적용 or 반대)를 팀이 공유하고 있어야 함
• 라운드 처리 시 overflow: hidden 세트로 챙기기

작은 UI 정비처럼 보여도 파일 범위가 여섯 개다. 영향 범위를 가볍게 보지 않는 게 중요하다.

끝.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.