코드보다 중요한 커뮤니케이션 언어｜퍼블리싱 용어 완벽 정리

퍼블리셔의 언어는 단순한 코드가 아닙니다. 기획자와 디자이너, 개발자 사이의 연결 언어입니다. 서로가 같은 용어를 다르게 이해하면, 완성된 화면은 달라집니다. 오늘은 실무에서 자주 등장하지만 헷갈리는 퍼블리싱 용어를 한눈에 정리해드립니다.

퍼블리셔는 코드로 말하는 커뮤니케이터다.

1. HTML 구조 관련 핵심 용어

시멘틱 마크업 (Semantic Markup)
의미를 가진 HTML 태그를 사용해 구조를 명확히 표현하는 것. <header>, <article>, <section> 등이 대표적입니다.

DOM (Document Object Model)
HTML 문서 구조를 트리 형태로 표현한 모델로, 자바스크립트로 조작할 수 있습니다.

Accessibility (접근성)
장애가 있는 사용자도 동일한 정보와 기능을 이용할 수 있도록 설계하는 개념. alt 속성, 키보드 네비게이션 등이 포함됩니다.

💡 실무 팁: HTML 구조를 짤 때, ‘이 요소가 무슨 역할을 하는가?’를 기준으로 태그를 선택하세요. 화면보다 의미가 먼저입니다.

박스 모델 (Box Model)
모든 HTML 요소는 content, padding, border, margin으로 구성된 박스로 표현됩니다.

Flexbox
1차원 레이아웃을 쉽게 구성하는 CSS 속성. display:flex;로 시작합니다.

Grid Layout
2차원 레이아웃을 제어할 수 있는 CSS 시스템. 복잡한 UI 구조에 유용합니다.

Media Query
화면 크기나 디바이스 특성에 따라 다른 스타일을 적용하는 CSS 문법. 반응형 웹의 핵심입니다.

💡 실무 팁: ‘반응형’이라는 말은 단순히 화면이 줄어드는 게 아니라, 디자인 의도가 유지되도록 구조를 조정하는 것입니다.

Design System
일관된 UI를 위해 색상, 버튼, 타이포그래피 등을 표준화한 시스템. Figma 등에서 공유됩니다.

Style Guide
디자인 원칙, 코드 규칙, 네이밍 규칙 등을 문서화한 가이드라인.

Pixel Perfect
디자인 시안과 실제 구현 결과가 픽셀 단위까지 동일한 상태. 실무에서는 '근사치 구현'을 허용하기도 합니다.

Component (컴포넌트)
재사용 가능한 UI 단위. 버튼, 카드, 모달 등. 프레임워크(React/Vue) 기반에서 중요한 개념입니다.

핸드오프 (Handoff)
디자이너 → 퍼블리셔 → 개발자로 작업을 넘기는 과정. 문서화와 명세 공유가 핵심입니다.

스펙 (Spec)
디자인 요소, 폰트, 색상, 여백 등 구체적 수치를 의미. 개발과 QA 기준이 됩니다.

마크업 가이드 (Markup Guide)
프로젝트 내 HTML/CSS 작성 규칙을 정리한 문서. 협업 시 코드 일관성을 유지하는 역할을 합니다.

💬 “좋은 퍼블리셔는 코드를 잘 짜는 사람이 아니라, 팀이 같은 언어로 소통하도록 돕는 사람이다.”

용어를 정확히 아는 순간, 협업이 달라집니다. 디자이너의 요구를 더 정확히 이해하고, 개발자에게 전달할 때 모호함이 줄어듭니다. 퍼블리셔의 말 한마디가 서비스의 완성도를 바꿀 수 있다는 점, 잊지 마세요.