기획자가 반드시 알아야 하는 실무 퍼블리싱 용어 모음
기획서 쓰다 말고 퍼블리셔에게 "px랑 rem 차이 뭐예요?" 물어보셨던 분 계신가요? 이젠 그런 민망함, 끝내보자구요.
기획 업무를 하다 보면 퍼블리셔와 협업을 해야 할 때가 많습니다. 실무에서 가장 많이 부딪히는 부분 중 하나가 바로 퍼블리셔와의 커뮤니케이션이에요. 처음엔 HTML과 CSS가 마치 암호처럼 느껴졌고, '마진'이니 '패딩'이니 하는 용어들이 마치 외계어처럼 들리기도 했죠. 하지만 프로젝트를 몇 번 거치다 보니, 이 퍼블리싱 용어만 잘 알아도 업무의 효율이 어마어마하게 달라진다는 걸 뼈저리게 느꼈습니다. 오늘은 그런 저의 삽질과 깨달음을 바탕으로, 기획자가 꼭 알아야 할 퍼블리싱 용어들을 한 번에 정리해드릴게요. 현업 퍼블리셔와의 협업이 더 이상 두렵지 않도록, 실무 중심 용어들만 쏙쏙 골라왔어요!
목차
1. 박스 모델(Box Model): 마진과 패딩의 진실
웹에서 모든 요소는 일종의 박스예요. 이 박스는 컨텐츠 → 패딩 → 보더 → 마진 순서로 구성됩니다. 처음에 저도 ‘마진이 안 들어가요!’라고 퍼블리셔에게 자주 말했는데, 사실은 패딩을 착각한 거였죠. 마진은 ‘밖의 여백’, 패딩은 ‘안쪽 여백’이라는 개념을 정확히 잡고 시작하면 기획서 작성이나 와이어프레임 설계할 때 헷갈림이 줄어들어요.
2. 포지셔닝(Position): static부터 sticky까지
포지셔닝은 요소의 위치를 결정하는 속성이에요. 특히 absolute, relative, fixed, sticky는 꼭 이해하고 넘어가야 해요. 기획자로서 ‘상단 고정 배너’나 ‘하단 CTA 버튼’ 요청할 때, 어떤 포지셔닝을 쓰는지 알고 있으면 퍼블리셔와 협업이 훨씬 원활하거든요.
| 타입 | 특징 | 활용 예 |
|---|---|---|
| absolute | 부모 기준으로 위치 결정 | 툴팁, 드롭다운 |
| fixed | 브라우저 기준으로 고정 | 상단/하단 고정 메뉴 |
3. 단위(Unit): px, %, em, rem 헷갈릴 때
기획자들이 가장 많이 헷갈리는 단위 문제! px는 고정값, %는 부모 기준 비율, em은 현재 요소 기준, rem은 루트(root) 기준이에요. 디자인 시스템이나 반응형 레이아웃에서는 rem을 선호하죠. 저도 이거 이해하고 나서 기획서에 단위 쓸 때 자신감 생겼습니다.
- px: 고정 크기 (정밀한 UI 제어에 유리)
- %: 부모 요소 기준 상대 크기
- rem: 전체 기준(root), 요즘 UI에서 선호
4. 레이아웃(Flex & Grid): 기획자가 알아야 할 핵심
레이아웃 구성은 퍼블리싱의 핵심입니다. 예전에는 테이블이나 float을 썼지만 요즘은 대부분 Flexbox나 CSS Grid를 활용해요. Flex는 일렬 정렬에, Grid는 격자형 배치에 유리하죠. 기획서에서 ‘가로 정렬이 안 맞아요’ 같은 얘기를 할 때, 이 구조를 이해하고 말하면 훨씬 정확해져요.
5. z-index: 왜 내 버튼이 안 눌리지?
기획자들이 자주 겪는 오류 중 하나가 바로 버튼 클릭 안 되는 문제예요. 그럴 땐 의심할 게 바로 z-index입니다. 이 속성은 요소의 쌓임 순서를 정해줘요. z-index가 더 높은 요소가 위에 쌓이기 때문에, 버튼 위에 배너나 모달이 떠 있으면 클릭이 안 되죠. 저도 이거 몰라서 개발자 붙잡고 한참 헤맨 적 있어요.
| 상황 | 설명 |
|---|---|
| 버튼이 눌리지 않음 | 다른 요소가 z-index로 덮고 있을 수 있음 |
| 배너가 사라지지 않음 | 의도치 않은 z-index 값 때문일 수 있음 |
6. 시맨틱 태그: 그냥 div만 쓰면 안 되는 이유
HTML5부터 등장한 시맨틱 태그는 코드 구조를 명확하게 만들어줘요. <header>, <nav>, <main>, <footer>처럼 의미 있는 태그들을 사용하는 게 접근성 향상과 SEO에 도움이 됩니다. 기획자가 이런 태그의 존재를 이해하고 있으면, HTML 구조 기획이나 QA 시 확인이 훨씬 수월하답니다.
- header: 상단 헤더 영역
- nav: 네비게이션 메뉴
- main: 본문 주요 콘텐츠
- footer: 하단 정보 및 링크
물론입니다. 기본 개념만 알아도 개발자나 디자이너와 소통이 훨씬 원활해지고, 결과물 품질이 높아집니다.
마진은 바깥 여백, 패딩은 안쪽 여백입니다. 요소 간 간격을 조정할 때 가장 자주 쓰이죠.
rem은 전체(root) 기준, em은 부모 요소 기준이에요. 요즘은 일관성을 위해 rem을 더 자주 사용해요.
크롬 개발자 도구에서 요소 선택 후 ‘Computed’ 탭에서 z-index 값을 확인해보면 됩니다.
접근성, SEO, 코드 유지보수를 고려하면 반드시 사용하는 것이 좋습니다.
물론이죠. 퍼블리셔 입장에서 기획서에 rem, px 단위가 명확히 기재돼 있으면 큰 도움이 됩니다.
퍼블리싱 용어, 처음엔 어렵고 낯설기만 했던 단어들이었지만, 알고 보면 꽤 단순하고 실용적인 개념들이 많아요. 저도 몇 번 삽질해보면서 ‘아~ 이게 그 말이었구나’ 하고 무릎을 탁 쳤던 순간들이 많았죠. 여러분도 이번 기회에 꼭 필요한 용어들만 쏙쏙 익혀두시고, 퍼블리셔와 ‘이심전심’ 협업해보세요! 혹시 본문에서 더 궁금했던 내용이 있다면 댓글로 질문 주세요. 제가 아는 한도 내에서 최대한 쉽게 알려드릴게요. 우리 같이 성장해요!