디자이너와 프론트엔드 개발자가 자주 쓰는 용어 총정리
안녕하세요 여러분 개발빔입니다.
프론트엔드 개발을 하다 보면 디자이너와의 협업은 떼려야 뗄 수 없는 관계인데요.
그만큼 긴밀하다보니, 디자인 피그마에서 나온 단어 하나, 슬랙 대화에서 오간 용어 하나가 잘못 해석되면 커뮤니케이션 오류로 이어지기도 해요.
오늘은 제가 5년 동안 프론트엔드 개발을 하며 디자이너와 함께 일하면서 자주 마주친 디자인 용어 + 프론트 용어 총정리를 해보려 합니다. 특히 웹디자인, UI 개발, 디자인 시스템 등 실무에서 많이 쓰이는 키워드를 중심으로 소개할게요.
디자이너가 자주 쓰는 실무 용어
1. 그리드(Grid)
웹디자인의 레이아웃을 구성하는 가이드라인입니다. 디자이너는 12그리드를 기준으로 작업하는 경우가 많고, 개발자는 display: grid 또는 flexbox를 조합해서 맞춰줍니다. "여기 8px 그리드 기준으로 맞췄어요~"라는 말은 픽셀 단위도 맞춰달라는 뜻이에요.
2. 여백(Space) / 마진(Margin) / 패딩(Padding)
Figma나 XD 상에서 "여기 마진이 좀 답답하네요"라고 들으면, 개발자 입장에서는 margin 혹은 padding 값을 더 주라는 말이죠. 디자이너는 보통 여백이라는 단어를 자주 쓰고, 개발자는 margin/padding으로 해석합니다.
3. 컴포넌트(Component)
디자인 시스템에서 말하는 컴포넌트는 재사용 가능한 UI 단위를 의미합니다.
버튼, 인풋, 드롭다운 등이고, 디자이너는 ‘컴포넌트화’해서 수정이 생기면 전체가 반영되도록 합니다. 개발자도 마찬가지로 컴포넌트를 기반으로 개발을 해요. 같은 단어지만 디자이너와 개발자의 이해가 살짝 다를 수 있죠.
4. 폰트 스타일 / 텍스트 스타일
디자이너는 보통 텍스트에 대한 정의를
H1,Body, Caption 식으로 만들어두고 이를 기준으로 작업합니다. 개발자는 이걸 font-size, font-weight, line-height 로 바꿔 구현해야 하죠. 스타일가이드를 잘 받아보는 게 중요해요.
프론트엔드 개발자가 자주 쓰는 용어
1. 픽셀 퍼펙트(Pixel Perfect)
디자인 시안과 100% 똑같이 구현한다는 의미입니다. 디자이너가 정성 들여 만든 작업을 최대한 그대로 구현하려는 자세인데, 현실적으로는 반응형 웹이나 브라우저 호환성을 고려해 100%는 어렵기도 합니다.
2. 반응형(Responsive)
PC, 태블릿, 모바일 등 다양한 해상도에서 UI가 자연스럽게 잘 보이도록 구현하는 걸 말해요. 디자이너가 디바이스별 시안을 주지 않으면 프론트가 임의로 레이아웃을 조정하는 경우도 있어서, 협업 시 중요한 체크포인트입니다.
3. 스타일 가이드(Design Guide)
디자인 시스템과 연결되는 개념입니다. 색상, 폰트, 컴포넌트 규칙을 정의한 문서로, 이게 있으면 유지보수나 퍼블리싱에서 정말 큰 도움이 됩니다. 특히 디자인 시스템 기반의 협업이 정착된 팀이라면 무조건 필수!
4. 웹 접근성(Web Accessibility)
색맹 사용자도 볼 수 있는 색상 대비, 키보드만으로도 조작할 수 있는 UI 등을 고려하는 개념이에요. 디자이너와 프론트가 모두 신경 써야 하는 부분이죠. 특히 공공기관 웹사이트에서는 필수 기준입니다.
디자이너와 개발자 사이, 이 용어 하나로 뉘앙스가 바뀐다
예를 들어 디자이너가 “여기 간격 좀 빡빡한 것 같아요”라고 말했을 때, 초보 개발자 시절엔 "빡빡한 게 뭐지? 몇 px를 원하는 거지?"라는 고민을 참 많이 했던 기억이 있어요.
경험이 쌓이면서 느낀 건, 디자이너가 쓰는 표현을 개발자 입장에서 번역할 줄 아는 센스가 협업에 있어 정말 중요하다는 점입니다.
협업툴로는 피그마 댓글, 슬랙, 노션 등을 주로 쓰는데, 같은 언어를 쓰는 것 같지만 해석이 조금씩 다르면 협업 속도가 급격히 느려지기 때문에 용어에 대한 이해는 필수!!!
디자인-개발 호흡이 중요한 이유!
제품 개발에 있어 프론트엔드 개발자와 디자이너의 호흡은 그 자체로 생산성을 좌우합니다. 용어 하나만 정확히 이해해도 커뮤니케이션 비용을 줄이고, 프로젝트 속도가 배 이상 빨라지거든요.
외주 개발사인 똑똑한개발자에서는 디자인부터 프론트 개발까지 턴키 방식으로 프로젝트를 진행하고 있어요. 그래서 디자인 가이드를 따로 요청하지 않아도 내부에서 바로 소통되며 빠르게 결과물을 낼 수 있는 구조입니다. 만약 외주 개발사 찾고 계시다면, 개발-디자인 간 협업이 매끄러운 똑똑한개발자 한 번 경험해보시는 거 추천드릴게요 :)
똑똑한개발자 홈페이지 :
