화면 만들 때 쓰는 말들,
그림으로 한 번에

모든 페이지에 똑같이 붙는 맨 위 영역이에요. 보통 로고, 메뉴, 신청 버튼이 들어가요.

다른 페이지로 옮겨 다니는 메뉴예요. 한국에서는 GNB(Global Navigation Bar)라고도 불러요.

들어오자마자 보이는 첫 화면이에요. 뭘 하는 곳인지 한 문장으로 말하고 버튼 하나를 둬요.

화면 한쪽에 세로로 붙는 메뉴 영역이에요. 관리자 화면이나 문서 사이트에서 많이 써요.

회사 정보, 약관, 연락처처럼 급하지 않은 것을 모아 두는 맨 아래 영역이에요.

화면의 큰 영역을 어디에 둘지 정한 뼈대예요. 레이아웃이 먼저, 내용은 그다음이에요.

페이지를 주제별로 나눈 큰 덩어리예요. "후기 섹션 추가해줘"처럼 말하면 돼요.

내용이 너무 넓게 퍼지지 않게 가운데로 모아 주는 틀이에요. 큰 모니터에서도 읽기 좋게 해줘요.

칸을 줄과 열로 나눠 배치하는 방식이에요. "3열 그리드로"라고 말하면 세 칸씩 놓여요.

사진, 제목, 설명을 한 네모 안에 묶은 거예요. 테두리나 그림자로 구분해요.

카드를 여러 개 줄 맞춰 늘어놓은 거예요. 상품 목록, 포트폴리오에 흔해요.

같은 종류의 데이터를 줄과 칸으로 정리한 표예요. 신청자 목록 같은 것에 써요.

누르면 뭔가 일어나는 요소예요. 모양이 달라도 누르는 거면 다 버튼이에요.

제일 중요한 버튼이에요. 색을 꽉 채워서 눈에 띄게 하고, 한 화면에 하나만 둬요.

프라이머리 옆에 두는 두 번째 선택지예요. 테두리만 있어서 덜 튀어요.

배경도 테두리도 없는 글자 버튼이에요. 취소, 건너뛰기처럼 안 눌러도 되는 것에 써요.

지우기처럼 되돌릴 수 없는 행동에 쓰는 빨간 버튼이에요. 아무 데나 빨강을 쓰면 힘이 빠져요.

Call To Action. 이 페이지에서 꼭 하길 바라는 행동 하나예요. 신청, 구매, 시작하기 같은 것.

글자 없이 아이콘만 있는 버튼이에요. 닫기, 좋아요, 공유처럼 뜻이 뻔한 것에 써요.

스크롤해도 화면 구석에 떠 있는 동그란 버튼이에요. 자주 쓰는 행동 하나에 써요.

누르면 다른 곳으로 가는 글자예요. 밑줄이나 다른 색으로 표시해요.

관련 있는 버튼을 한 줄로 붙여 놓은 거예요. 보기 방식을 바꿀 때 많이 써요.

사용자한테 정보를 받는 입력칸 묶음이에요. 신청서, 문의, 로그인이 다 폼이에요.

한 줄짜리 입력칸이에요. 이름, 이메일, 전화번호처럼 짧은 걸 받아요.

여러 줄을 쓸 수 있는 큰 입력칸이에요. 문의 내용, 자기소개에 써요.

검색어를 넣는 입력칸이에요. 돋보기 아이콘이 같이 있어요.

몇 글자 치면 맞는 후보를 보여주는 거예요. 검색이나 주소 입력에 써요.

눌러서 펼친 목록에서 하나 고르는 칸이에요. 드롭다운이라고도 해요.

네모를 체크해서 고르는 거예요. 여러 개를 동시에 고를 수 있어요.

동그라미 중 하나만 고르는 거예요. 하나를 고르면 나머지는 풀려요.

켜고 끄는 스위치예요. 누르는 즉시 적용돼요. 이 페이지 오른쪽 위 다크 모드가 토글이에요.

손잡이를 끌어서 값을 정하는 거예요. 가격 범위, 볼륨에 써요.

더하기 빼기로 숫자를 조절하는 거예요. 장바구니 수량에 흔해요.

별 개수로 점수를 매기는 거예요. 후기에 써요.

색을 고르는 도구예요. "주황색"보다 #E1785C 같은 코드로 말하면 정확해요.

달력을 펼쳐서 날짜를 고르는 거예요. 직접 타이핑하는 것보다 실수가 적어요.

시와 분을 고르는 거예요. 예약, 알림 시간에 써요.

문자로 온 인증번호를 한 자리씩 넣는 칸이에요. 한 칸 채우면 다음 칸으로 넘어가요.

여러 단어를 칩 모양으로 넣는 칸이에요. 관심사, 키워드 입력에 써요.

파일을 올리는 영역이에요. 클릭해서 고르거나 끌어다 놓아요.

마우스로 잡아서 원하는 곳에 놓는 동작이에요. 순서 바꾸기, 파일 올리기에 써요.

이 칸에 뭘 넣는지 알려주는 이름표예요. 빨간 별은 필수라는 뜻이에요.

칸 안에 흐리게 적힌 예시예요. 타이핑을 시작하면 사라져요.

입력칸 아래 작은 안내 문구예요. 조건이나 힌트를 미리 알려줘요.

입력한 내용이 규칙에 맞는지 확인하는 거예요. 틀리면 바로 빨갛게 알려줘요.

폼에 적은 내용을 서버로 보내는 행동이에요. 보내기 버튼이 제출 버튼이에요.

아이콘 모서리에 붙는 작은 숫자나 점이에요. 안 읽은 알림 개수 같은 것.

색 점 하나로 상태를 보여주는 거예요. 초록은 온라인, 회색은 오프라인.

작은 알약 모양 라벨이에요. 필터로도 쓰고, ✕가 붙으면 지울 수 있어요.

단축키를 실제 키 모양으로 그린 거예요. 문서나 도움말에 써요.

사람을 나타내는 동그란 사진이에요. 사진이 없으면 이름 첫 글자를 넣어요.

아바타 여러 개를 겹쳐 놓은 거예요. "이 사람들이 참여 중"을 보여줄 때 써요.

내용 사이를 나누는 얇은 선이에요. 여백만으로 부족할 때 써요.

뜻을 그림으로 나타낸 작은 기호예요. Lucide처럼 세트 이름을 정해 주면 스타일이 통일돼요.

화면 가운데 떠서 뒤를 막는 창이에요. 닫기 전엔 다른 걸 못 해요. 중요한 확인에만 써요.

모달 뒤를 어둡게 덮는 반투명 층이에요. 시선을 앞에 집중시켜요.

화면 아래에서 올라오는 판이에요. 모바일에서 모달 대신 많이 써요.

되돌리기 어려운 행동 앞에서 한 번 더 물어보는 창이에요. 모달의 한 종류예요.

아래나 위에 잠깐 떴다가 저절로 사라지는 짧은 알림이에요. "저장됐어요" 같은 것.

페이지 안에 붙어 있는 안내 띠예요. 초록은 성공, 노랑은 주의, 빨강은 오류.

틀린 칸 바로 아래에 붙는 오류 문구예요. 어디가 틀렸는지 바로 보여서 알럿보다 나아요.

쿠키 사용 동의를 받는 띠예요. 유럽 사용자가 있으면 필요해요.

마우스를 올리면 뜨는 짧은 설명 말풍선이에요. 손을 떼면 사라져요.

눌러서 여는 작은 판이에요. 툴팁보다 크고, 안에 버튼이 들어가요.

얼마나 진행됐는지 막대로 보여줘요. 끝나는 시점을 알 때 써요.

빙글 도는 로딩 표시예요. 얼마나 걸릴지 모를 때 써요.

내용이 오기 전에 자리만 회색으로 그려 두는 거예요. 스피너보다 덜 답답해요.

아무것도 없을 때 보여주는 화면이에요. 빈 채로 두지 말고 다음 할 일을 알려줘요.

같은 모양의 항목을 세로로 늘어놓은 거예요. 글 목록, 신청 목록.

일어난 일을 시간 순서로 세로 선에 붙인 거예요. 진행 과정, 회사 연혁.

새로 온 소식을 시간 순으로 쌓은 목록이에요. 안 읽은 건 점으로 표시해요.

사진을 격자로 늘어놓은 거예요. 포트폴리오, 상품 사진.

사진을 누르면 화면 가득 크게 보여주는 거예요. 갤러리와 짝으로 써요.

자랑할 숫자를 크게 보여주는 거예요. 세 개 정도가 딱 좋아요.

숫자 하나에 변화량까지 붙인 카드예요. 대시보드에 써요.

요금제를 나란히 비교하는 표예요. 추천 플랜에 "인기" 표시를 해요.

실제 사용자의 말을 인용한 거예요. 이름과 소속이 있으면 더 믿어요.

쓰고 있는 회사 로고를 회색으로 늘어놓은 거예요. 신뢰를 주는 용도.

아바타, 이름, 한 줄 소개, 버튼이 든 사람 카드예요.

다른 사람 말이나 강조할 문장을 왼쪽 선과 함께 띄운 거예요.

코드나 명령어를 고정폭 글꼴로 보여주는 검은 상자예요. 복사 버튼을 같이 둬요.

페이지 위에 붙이는 공지 띠예요. 닫기 버튼을 꼭 같이 둬요.

화면 크기에 맞춰 배치가 바뀌는 거예요. 폰에서는 한 줄, PC에서는 세 줄. 이 페이지도 폰에서는 1열이에요.

모바일 화면부터 만들고 PC로 넓혀 가는 방식이에요. 반대로 하면 폰에서 깨져요.

배치가 바뀌는 화면 너비 기준이에요. 보통 768px, 1024px을 써요.

스크롤하면 위에 딱 붙어서 따라오는 거예요. 이 페이지 맨 위 헤더가 스티키예요.

스크롤과 상관없이 늘 같은 자리에 있는 거예요. 플로팅 버튼, 채팅 아이콘.

요소 바깥쪽 빈 공간이에요. 옆 요소와 얼마나 떨어질지 정해요.

요소 안쪽 빈 공간이에요. 테두리와 글자 사이 숨통이에요.

나란히 놓인 요소들 사이 거리예요. 그리드에서는 gap 하나로 한 번에 정해요.

네모 모서리를 얼마나 둥글게 할지예요. 999px이면 완전 동그라미가 돼요.

요소 아래 그림자를 넣어 떠 있는 느낌을 주는 거예요. 약하게가 보통 예뻐요.

배경을 어둡게, 글자를 밝게 뒤집은 테마예요. 오른쪽 위 스위치로 이 페이지도 바꿔 보세요.

투명했다가 서서히 나타나는 효과예요. 0.6초 정도가 자연스러워요.

스크롤해서 화면에 들어올 때 나타나는 효과예요. 이 페이지 카드들도 그렇게 떠요.

상태가 바뀔 때 뚝 바뀌지 않고 부드럽게 넘어가는 거예요. 0.2초면 충분해요.