디자이너들끼리는 대체 무슨 언어로 대화하는 걸까요?
👩🏼💻 ”gnb 정렬 좀 맞춰주세요.”
👨🏽💻 “cta 컴포넌트는 반응형으로 가져갈게요.”
🧑🏼💻 “레퍼런스는 무드보드에 올려뒀어요.”
사실 이 용어들, 알고 보면 하나도 어렵지 않아요.
디자인의 언어
여백, 정렬, 타이포그래피, 계층.
디자인을 조금이라도 배워본 사람이라면 한 번쯤 들어봤을 단어들이에요. 제 아티클을 보신 분들도 여러 번 봤을 거예요.
여백은 요소와 요소 사이의 빈 공간이에요. 이 빈 공간이 어디에 시선을 둘지 정해줘요. 여백이 넉넉하면 편안해 보이고, 촘촘하면 급해 보여요.
정렬은 요소들을 기준선에 맞춰 나란히 두는 거예요. 왼쪽 정렬, 가운데 정렬처럼요. 정렬이 흐트러지면 화면 전체가 어수선해 보여요.
타이포그래피는 글자를 다루는 기술 전체를 말해요. 서체를 고르는 것부터 크기, 자간, 줄 간격까지 다 포함돼요. 같은 문장도 타이포그래피에 따라 전혀 다른 인상을 줘요.
계층은 화면 안에서 뭐가 더 중요한지 순서를 정하는 거예요. 큰 글씨, 진한 색, 넓은 여백같이 이런 요소들이 모여서 사용자의 눈이 어디부터 봐야 할지 알려줘요.
이 네 가지는 디자인의 기본 문법 같은 거예요. 뒤에 나올 모든 용어가 사실 이 위에서 시작해요.
웹사이트의 언어
이제 화면 얘기로 넘어가볼게요. 웹사이트를 열면 늘 보이는 곳들이 있는데 그 자리는 각각의 이름이 있어요.
웹사이트를 처음 열었을 때 가장 먼저 눈에 들어오는 건 뭘까요? 대부분 로고와 메뉴가 있는 상단 영역일 거예요.
디자이너들은 이 메뉴를 그냥 ‘상단 메뉴’라고 부르지 않아요.
헤더(header)는 화면 맨 위 영역이에요. 로고나 메뉴가 자리 잡는 곳이에요. 푸터(footer)는 그 반대, 화면 맨 아래예요. 회사 정보나 연락처처럼 끝까지 읽은 사람에게 필요한 정보가 있어요.
🔗 참고: 왜 헤더는 항상 위에 있을까
gnb, Global Navigation Bar라고 해요. 사이트 전체를 돌아다닐 수 있게 해주는 상단 메뉴예요.
lnb는 Local Navigation Bar, 특정 페이지나 섹션 안에서 이동할 수 있도록 도와주는 메뉴예요. 쇼핑몰 카테고리 목록을 떠올리면 딱이에요.
favicon은 브라우저 탭을 보면 왼쪽에 뜨는 작은 아이콘이에요. 크기는 작지만, 여러 탭을 열어놓고 있을 때 이 아이콘 하나로 어느 사이트인지 구분해요.
이 다섯 용어를 알면, 어느 사이트를 봐도 구조가 눈에 들어와요. 어디에 뭐가 있어야 하는지 자연스럽게 예측하게 돼요.
UI/UX의 언어
이번엔 화면이 어떻게 움직이는지에 대한 이야기예요.
컴포넌트(Component)는 반복해서 쓰이는 디자인 조각이에요. 버튼, 입력창, 카드 같은 것들이요. 한 번 만들어두면 여기저기 갖다 쓸 수 있어서, 디자인도 개발도 훨씬 빨라져요.
반응형(Responsive)은 화면 크기에 따라 레이아웃이 알아서 바뀌는 걸 말해요. 같은 사이트인데 컴퓨터에서는 가로로 넓게, 휴대폰에서는 세로로 좁게 보이는 이유가 바로 이거예요.
cta는 Call To Action의 줄임말이에요. “자세히 보기”, “가입하기”처럼 사용자가 행동하게끔 유도하는 버튼이에요. 화면 안에서 가장 눈에 띄어야 하는 요소라, 색이나 위치를 특히 신경 써서 정해요.
인터랙션(Interaction)은 사용자의 행동에 화면이 반응하는 걸 말해요. 버튼을 누르면 색이 바뀌거나, 스크롤하면 요소가 스르륵 나타나는 것도 다 인터랙션이에요. 이런 작은 반응들이 쌓여서, 화면이 살아있다는 느낌을 줘요.
결국 이 네 용어는 사용자가 실제로 화면을 쓸 때 벌어지는 일들이에요. 눈에 보이는 디자인보다, 그 디자인을 쓰는 순간이 더 중요하다는 이야기예요.
디자이너의 언어
여기서부터는 조금 다른 결이에요. 디자이너의 작업은 보통 이런 순서로 흘러가요.
레퍼런스(Reference)는 작업을 시작하기 전에 참고하는 다른 디자인 사례예요. “레퍼런스 좀 찾아봐 주세요.”라는 말은, 방향을 잡기 전에 좋은 예시들을 둘러보자는 뜻이에요.
시안은 그 레퍼런스를 바탕으로 처음 화면에 옮겨본 초안이에요. 아직 확정된 건 아니지만, 머릿속 생각을 눈에 보이는 형태로 꺼내놓은 첫 결과물이에요.
디벨롭(Develop)은 그 시안을 계속 다듬어서 완성도를 높이는 작업이에요. 간격 하나, 색 하나를 미세하게 조정하면서 점점 더 나은 버전으로 만들어가는 과정이에요.
베리에이션(Variation)은 같은 시안을 색이나 스타일만 바꿔서 여러 개 만드는 거예요. 하나로 결정하기 전에, 여러 선택지를 놓고 비교해보기 위해서예요.
컨펌(Confirm)은 클라이언트나 팀원이 그 시안을 최종 승인하는 거예요. 보통 컨펌이 끝나면 다음 단계로 넘어가요.
핸드오프(Handoff)는 컨펌이 끝난 디자인을 개발자에게 넘기는 과정이에요. 색상 코드, 간격 수치, 폰트 정보까지 꼼꼼히 정리해서 넘겨야, 화면에 디자인한대로 실제로 구현돼요.
이 여섯 용어는 결과물보다는 과정에서 나오는 말들이에요.
레퍼런스를 모으는 순간부터 개발자에게 넘기는 순간까지, 디자인 작업의 각 단계와 상태를 간결하게 표현하기 위해 사용하는 실무 용어예요.
다음에 누군가 gnb 정렬을 얘기하고, cta 컴포넌트를 가져간다고 말해도 이제는 낯설지 않을 거예요.
알고 보면 어려운 말은 하나도 없었어요. 그냥 매일 쓰다 보니 줄어든, 아주 익숙한 말들이었을 뿐이에요.
written by 디자이너이솔
