웹디자인 용어, 눈으로 익히기

내용이 차지할 가로 폭의 한계예요.

화면이 아무리 넓어도 글줄을 끝까지 늘어뜨리면 읽기 힘들어요. 그래서 "내용은 가로 1120px까지만" 이라고 한계를 정하는데, 이 값이 페이지 너비예요. 책의 한 줄이 너무 길면 읽기 어려운 것과 같은 이유예요. max-width(최대 너비)라고 부르기도 해요.

상자의 안쪽 여백이에요.

내용물과 상자 테두리 사이의 여백이에요. 택배 상자 안에 뽁뽁이를 둘러두는 것과 같아요. 패딩이 좁으면 답답해 보이고, 넓으면 여유로워 보여요.

상자의 바깥쪽 여백이에요.

상자와 상자 사이를 벌려주는 바깥 여백이에요. 가구 사이의 통로 공간 같은 거예요. 패딩은 "안쪽", 마진은 "바깥쪽" — 이 한 쌍만 기억해도 여백 부탁은 끝나요.

여러 칸 사이의 일정한 간격이에요.

여러 개를 나란히 놓을 때 칸마다 간격을 한 번에 정해주는 낱말이에요. 마진을 하나하나 주는 것보다 갭(gap) 하나로 통일하면 칸 간격이 어긋나지 않아요.

화면 크기에 맞춰 배치가 스스로 바뀌는 것이에요.

같은 페이지가 폰에서는 한 줄, 컴퓨터에서는 세 칸으로 바뀌는 것처럼 화면 크기에 맞춰 스스로 모양을 고치는 걸 반응형이라고 불러요. "모바일에서도 잘 보여요"라는 말의 정체가 바로 이거예요.

모양이 바뀌는 화면 폭의 기준점이에요.

"이 폭부터는 모바일용 배치로 바꿔!"라고 미리 정해둔 경계선이에요. 보통 640px(모바일), 1024px(태블릿·웹) 같은 숫자로 약속해요. 위 눈금에서 막대가 어느 구간에 있는지가 지금 적용 중인 배치예요.

화면 가장자리에 딱 붙어 따라다니는 것이에요.

글을 내려 읽어도 메뉴가 항상 보이도록 상단에 붙여두는 걸 스티키(sticky), 또는 고정(fixed)이라고 불러요. 이 페이지 위쪽 메뉴와 목차 바도 스티키예요.

화면을 같은 크기 칸으로 나누는 바둑판이에요.

내용을 칸에 맞춰 가지런히 놓는 방법이에요. "3열 그리드"처럼 열 개수로 부탁하면 AI가 칸 너비를 알아서 맞춰요.

내용을 어느 쪽으로 붙일지 정하는 것이에요.

가로 정렬은 왼쪽·가운데·오른쪽, 세로 정렬은 위·중간·아래예요. 글자뿐 아니라 상자 자체를 정렬할 수도 있어요.

겹친 것들 중 누가 앞에 보일지 정하는 순서예요.

화면은 투명한 유리층이 겹쳐진 것 같아요. 팝업·드로어 같은 떠 있는 부품이 다른 것 위에 보이려면 이 순서를 이겨야 해요.

가로와 세로 길이의 비예요.

"이미지가 찌그러져요"를 막으려면 비율을 먼저 정해요. 비율을 고정해 두면 칸 크기가 변해도 모양이 유지돼요.

지금 눈에 보이는 화면 한 면이에요.

같은 페이지라도 뷰포트가 좁으면 모바일처럼, 넓으면 웹처럼 보여요. 브레이크포인트가 바로 이 뷰포트 폭을 재서 배치를 갈아끼우는 거예요.

화면 옆에서 서랍처럼 끼워 나오는 패널이에요.

보통 화면 오른쪽이나 왼쪽에서 슬라이드로 나오는 패널이에요. 메뉴나 설정 같은 부가 기능을 담아두고 필요할 때만 꺼내 써요. 서랍(drawer)이라는 이름도 여기서 왔어요.

누르면 펼쳐지고, 다시 누르면 접히는 항목이에요.

제목만 보여두고, 누르면 내용이 펼쳐지는 목록이에요. 손풍금(아코디언)이 접히고 펼쳐지는 모습 같아서 붙은 이름이에요. 내용이 많아도 페이지가 길어지지 않게 해줘요.

여러 개 중 딱 하나만 고르는 동그란 버튼이에요.

옷 사이즈 S·M·L 중 하나만 고르는 것처럼, 여러 선택지 중 하나만 고르게 할 때 써요. 옛날 라디오의 채널 버튼이 하나만 눌리던 것에서 이름이 왔어요.

여러 개를 따로따로 체크하는 네모 칸이에요.

라디오 버튼과 달리 여러 개를 동시에 체크할 수 있어요. "알림 받기", "약관 동의"처럼 예/아니오 하나를 묻는 용도로도 하나씩 쓰여요.

밀어서 켜고 끄는 스위치예요.

암실 스위치처럼 왼쪽/오른쪽으로 밀어 켜고 끄는 부품이에요. 누르는 즉시 적용되는 설정에 써요. 다크 모드 켜기가 대표적인 예예요.

내용 위에 떠오르는 막아서는 창이에요.

진행 중인 화면 위에 새 창이 떠서 주의를 끄는 부품이에요. 저장 전 확인, 중요한 안내를 보여줄 때 써요. 배경을 누르거나 닫기 전에는 원래 화면으로 돌아갈 수 없어요.

잠깐 나타났다 사라지는 알림이에요.

토스터에서 빵이 튀어나오듯 화면 아래에 짧게 떴다가 사라지는 알림이에요. "저장했어요" 같은 가벼운 결과를 알릴 때 써요. 확인 버튼을 누를 필요가 없어요.

마우스를 올리면 나오는 작은 설명이에요.

버튼이나 낯선 아이콘에 마우스를 잠깐 올리면 떠오르는 풍선 도움말이에요. 화면을 어지럽히지 않으면서 설명을 곁들일 수 있어요.

같은 자리에서 내용을 갈아 끼우는 버튼 줄이에요.

서류철의 탭처럼 같은 자리에서 내용을 갈아 끼우는 버튼 줄이에요. 비슷한 내용을 여러 장으로 나눠 보여주고 싶을 때 써요.

짧은 글자를 담는 작은 꼬리표예요.

알약 모양의 작은 꼬리표예요. 눌러서 항목을 고르는 건 칩(chip), 그냥 붙어서 "NEW", "인기" 같은 상태를 알려주는 건 뱃지(badge)라고 불러요.

페이지 맨 위의 큰 첫인상 화면이에요.

페이지를 열자마자 보이는 큰 제목·설명·버튼이 담긴 첫 화면이에요. 영화의 주인공(hero)처럼 페이지의 얼굴이라 붙은 이름이에요.

내용을 한 묶음으로 담는 네모 덩어리예요.

그림·제목·설명을 한 묶음으로 담아 모서리 둥근 네모로 보여주는 부품이에요. 책장에 꽂힌 책처럼 내용을 한 장씩 보여줄 때 써요. 이 사이트의 서재(Shelves)도 카드 목록이에요.

페이지 위쪽의 얼굴이자 길잡이예요.

로고와 메뉴가 함께 있는 위쪽 띠예요. 어느 페이지에 있어도 같은 자리에 있어야 방문자가 길을 잃지 않아요.

본문 옆에 붙는 좁은 세로 띠예요.

메뉴·목차 같은 곁가지 내용을 모아두는 옆칸이에요. 문서 사이트와 설정 화면에서 특히 자주 보여요.

지금 어디쯤 왔는지 알려주는 경로 표시예요.

동화에서 떨어뜨린 빵 부스러기로 길을 되짚은 이야기에서 이름이 왔어요. 깊은 페이지에서 한 번에 위 단계로 돌아갈 수 있게 해줘요.

원하는 내용을 좁혀 찾게 해주는 칸이에요.

입력하는 순간 목록을 걸러주면 가장 친절해요. 검색 결과가 없을 때의 빈 상태 안내와 함께 쓰면 더 좋아요.

사용자가 글자를 적어 넣는 칸이에요.

칸 안의 옅은 안내 글자는 플레이스홀더(placeholder)예요. 적는 순간 사라지니, 꼭 기억해야 할 설명은 칸 밖의 곁글자로 적어야 해요.

눌렀을 때 선택지가 펼쳐지는 좁은 상자예요.

여러 선택지 중 하나를 고르게 하되 자리를 아끼고 싶을 때 써요. 라디오 버튼과 같은 일을 하지만 더 좁아요. 대신 선택지가 한눈에 안 보이는 단점은 있어요.

옆으로 넘겨 가며 보는 슬라이드 목록이에요.

공간이 모자랄 때 콘텐츠를 옆으로 이어 붙이는 방법이에요. 이 사이트 홈의 Book Display도 캐러셀이에요. 넘겨야 할 장수가 너무 많으면 본 문장을 놓치니 3~5장이 적당해요.

진행 상황을 굵은 막대로 보여주는 것이에요.

얼마나 남았는지 보이면 기다림이 짧아 느껴져요. 파일 올리기, 설치, 읽은 위치 표시 등에 써요. 끝을 예측할 수 없으면 막대 대신 로더가 맞아요.

내용이 도착할 때까지 보여주는 빈 껍데기예요.

회색 뼈대(스켈레톤)나 빙글 도는 표시(로더)는 "살아 있고, 곧 와요"라는 뜻이에요. 하얀 빈 화면보다 훨씬 안정적으로 느껴져요.

색에 붙이는 이름표예요.

"포인트 색", "배경 색"처럼 색마다 이름을 붙여두고 화면 곳곳에서 이름으로 불러 쓰는 방식이에요. 나중에 이름이 가리키는 색 하나만 바꾸면 그 이름을 쓰는 모든 곳이 한꺼번에 바뀌어요.

사이트를 대표하는 굵은 색이에요.

버튼·링크·강조처럼 눈길을 끌어야 하는 곳에 쓰는 대표 색이에요. 이 사이트는 청록이 포인트 컬러예요. 포인트 색은 아껴 써야 강조가 살아요.

모서리를 둥글게 깎는 정도예요.

네모의 뾰족한 모서리를 얼마나 둥글게 할지 정하는 값이에요. 숫자가 클수록 동그래져요. 같은 화면의 상자들은 라운딩 값을 통일해야 가지런해 보여요.

글자 크기의 미리 정해진 단계예요.

제목은 크게, 본문은 보통, 곁설명은 작게 — 크기를 아무렇게나 쓰지 않고 몇 단계로 정해두고 쓰는 규칙이에요. 단계가 정해져 있어야 화면이 가지런해 보여요.

줄과 줄 사이의 간격이에요.

문장의 줄 간격이에요. 좁으면 답답하고, 넓으면 늘어져 보여요. 한국어 본문은 글자 크기의 1.6~1.8배 정도가 읽기 편해요.

화면 전체를 어두운 색으로 바꿔주는 모드예요.

밤에는 눈이 편하도록 화면 전체를 어둡게 바꾸는 기능이에요. 색을 하나하나 다시 고르는 게 아니라, 색 이름표(토큰)가 어두운 색을 가리키도록 갈아끼워서 만들어요.

상자 아래에 깔리는 부드러운 어둠이에요.

종이가 살짝 떠 있는 것 같은 입체감을 줘요. 다만 어디에나 넣으면 지저분해지니, 떠 있는 것(카드·팝업·드로어)에만 쓰는 게 좋아요.

상자의 가장자리 선이에요.

영역을 구분하는 가장 담백한 방법이에요. 옅은 회색 1px가 기본이고, 강조할 때만 포인트 색으로 굵게 바꿔요.

글자와 글자 사이의 간격이에요.

자간을 벌리면 여유 있고 꾸민 느낌, 좁이면 꽉 찬 느낌이 나요. 한글 본문은 보통 그대로 두고, 짧은 영문 라벨에만 조금 써요.

글자의 두께예요.

굵기 단계로 강조의 세기를 조절해요. 보통(400)·중간(600)·굵게(800) 세 단계만 써도 충분히 깔끔해요.

마우스를 올렸을 때의 모습이에요.

포인터가 올라간 순간 색이 바뀌거나 살짝 뜨는 반응이에요. "누를 수 있어요"라고 조용히 알려주는 신호예요. 터치폰에는 호버가 없으니, 눌리는 모습은 모바일에서도 보여야 해요.

상태가 바뀔 때 부드럽게 이어지는 것이에요.

색이나 크기가 갑자기 바뀌지 않고 스르륵 바뀌게 해주는 시간 설정이에요. 보통 0.2초 정도가 자연스러워요. 없으면 화면이 깜빡거리듯 느껴져요.

꾹 누르고 있을 때의 모습이에요.

버튼을 실제로 누르고 있을 때 살짝 작아지거나 눌리는 반응이에요. 물리 버튼의 감촉을 화면에서 흉내 내는 거예요. 호버(올림)와 눌림은 짝으로 다니는 표현이에요.

키보드로 지금 다룰 대상을 가리키는 표시예요.

마우스 없이 Tab 키로 버튼을 건너다닐 때 "여기"라고 알려주는 테두리예요. 이 표시를 없애버리면 키보드 사용자가 길을 잃어요.

아직 누르면 안 되는 상태로 만든 것이에요.

예를 들어 빈 양식의 저장 버튼이 비활성이에요. 왜 못 누르는지 곁설명을 함께 보여주면 훨씬 친절해요.

내용 없이 배치만 그린 설계 도면이에요.

디자인 전에 와이어프레임을 먼저 그리면 큰 방향 실수를 줄일 수 있어요. AI에게도 디자인보다 배치부터 확인하면 수정이 훨씬 빨라요.

와이어프레임 다음 단계의 시안이에요.

목업은 색과 그림을 입힌 겉모습 시안이에요. 프로토타입은 실제로 눌러 볼 수 있는 시제품이에요. 순서는 와이어프레임 → 목업 → 프로토타입이에요.

방문자가 처음 닿는 한 장짜리 페이지예요.

광고·링크를 눌렀을 때 도착하는 곳이에요. 가입·구매·구독처럼 한 가지 목적에 집중하고 다른 길(메뉴, 소개 글)은 덜어내는 게 원칙이에요.

"이것을 해줘"라고 부탁하는 중심 버튼이에요.

페이지가 방문자에게 바라는 딱 하나의 행동이에요. "가입하기", "구매하기"처럼 동사로 곧바로 말해야 잘 움직여요. 큰 CTA는 한 페이지에 하나가 좋아요.

버튼과 안내에 붙는 짧지만 중요한 글이에요.

화면 곳곳의 한마디가 느낌을 결정해요. 사람의 말투로 쓰면 기계 느낌이 사라지고, 오류 안내에는 "어떻게 고치면 되는지"를 함께 적어줘요.

긴 목록을 쪽으로 나눠주는 것이에요.

몇 쪽인지 보이면 전체 크기가 예상되고, 원하는 쪽으로 다시 갈 수도 있어요. 무한 스크롤과 장단점이 정반대라 목적에 따라 고르면 돼요.

아래로 내리면 내용이 계속 이어지는 방식이에요.

SNS 피드처럼 끝을 모르게 이어 붙이는 방식이에요. 다만 발이 묶이는 단점이 있어서, 글이나 검색 결과는 페이지네이션이 나을 때가 많아요.

내용이 하나도 없을 때 보여주는 화면이에요.

텅 빈 화면은 고장처럼 보여요. "아직 없어요 + 여기서 시작해보세요"를 보여주면 다음 행동으로 자연스럽게 이어져요.

손가락으로 누르는 영역의 크기예요.

손가락은 마우스보다 둔해요. 그래서 누르는 영역은 최소 44px 정도를 권해요. 화면에 작게 보이더라도 눌리는 영역은 넓게 잡을 수 있어요.

누구나 쓸 수 있도록 배려하는 것이에요.

접근성은 배려가 아니라 기본기예요. 챙겨 두면 키보드 사용자·어른·한눈에 보는 상황의 모든 사람에게 편해져요.