실무에서 꼭 알아야 할 UI/UX 기초 용어 총정리
현장에서 자주 쓰이는 핵심 UI/UX 기본 용어들을 정리
안녕하세요, 사랑받는 IT 프로덕트의 첫 스텝, 똑똑한개발자입니다.
저희 똑똑한개발자는 디자인부터 개발까지 한 번에 맡기는 턴키 방식으로 프로젝트를 완성하고 있는데요.
최근 UI/UX 관련 용어가 점점 다양해지면서, 디자이너와 프론트엔드 개발자 간 소통이 쉽지 않은 경우가 많아졌어요. 같은 단어라도 각 직군에서 다르게 이해하거나, 비슷한 개념이 혼동되는 일이 종종 발생하거든요.
그래서 오늘은 현장에서 자주 쓰이는 핵심 UI/UX 기본 용어들을 정리하고, 실무에서 어떻게 적용되는지 구체적인 사례와 함께 설명해 드리려고 해요.
디자인과 개발 사이 원활한 소통을 고민하는 분들에게 도움이 되길 바래요~!
사진출처: www.uxdesigninstitute.com UI와 UX, 헷갈리기 쉬운 두 개념 완벽 이해하기
UI와 UX는 비슷해 보여도 엄연히 다른 개념인데요, 이렇게 생각하면 훨씬 쉽게 구분할 수 있어요!
UI (User Interface)
사용자가 직접 보고, 터치하고, 조작하는 ‘화면 구성과 디자인’을 뜻해요.
버튼의 색상, 글자 크기, 메뉴 배치 같은 시각적 요소들이 모두 포함되는데요.
예를 들어, 쇼핑몰 앱에서 ‘장바구니에 추가’ 버튼이 어떻게 보이고 배치되어 있는지가 바로 UI예요.
UX (User Experience)
제품이나 서비스를 이용하면서 사용자가 느끼는 ‘전체적인 경험과 만족감’을 의미해요.
아무리 UI가 예쁘더라도 결제 과정이 복잡하면 좋은 UX라고 할 수 없겠죠?
즉, UX는 사용자의 편리함, 만족도, 즐거움 등 체감하는 경험에 초점을 두고 있어요.
출처: www.eleken.co 와이어프레임, 목업, 프로토타입의 차이 정리
디자인과 개발 단계에서 자주 등장하는 와이어프레임, 목업, 프로토타입!
각각 무엇이고 어떻게 다른지 쉽게 설명해 드릴게요.
와이어프레임 (Wireframe)
와이어프레임은 서비스나 앱의 기본 구조와 화면 배치를 단순하게 그린 설계도예요.
색상이나 이미지 없이, 선과 박스, 텍스트로만 구성되어 큰 틀과 기능 위치를 빠르게 구상하는 데 쓰여요.
예를 들어 로그인 화면에서 ‘아이디 입력란’, ‘비밀번호 입력란’, ‘로그인 버튼’ 위치만 대략적으로 표시한 게 와이어프레임!
목업 (Mockup)
목업은 와이어프레임에 실제 색상, 폰트, 이미지 등 디자인 요소를 적용해 완성도 높은 정적인 시각 자료를 만드는 단계예요.
최종 디자인의 느낌을 확인하고, 클라이언트나 팀원과 공유할 때 주로 사용돼요.
예를 들어 로그인 화면에 색상, 버튼 스타일, 로고, 폰트 등이 적용된 완성된 이미지가 목업!
프로토타입 (Prototype)
프로토타입은 인터랙션이 가능한 작동 시제품 같은 모델로, 실제 앱처럼 버튼 클릭이나 화면 전환이 가능해요.
사용자 경험을 테스트하고 피드백 받는 데 중요한 역할을 해요.
예를 들어 로그인 버튼을 누르면 다음 화면으로 넘어가거나, 입력 폼에 텍스트를 입력할 수 있는 시연 가능한 화면이 프로토타입이에요.
출처: danielnzau.hashnode.dev 스켈레톤 스크린과 로딩 스피너, 무엇이 다를까?
웹이나 앱에서 자주 볼 수 있는 ‘스켈레톤 스크린’과 ‘로딩 스피너’,
두 가지 로딩 UI의 차이를 쉽게 알려드릴게요.
스켈레톤 스크린 (Skeleton Screen)
콘텐츠가 완전히 로딩되기 전, 빈 화면 대신 뼈대 형태의 UI를 보여줌으로써 사용자에게 ‘곧 콘텐츠가 나타날 거예요’라는 심리적 안정감을 주는데요. 예를 들어, 페이스북이나 인스타그램 피드가 로딩될 때 회색 블록이 깜빡이는 모습이 스켈레톤 스크린이에요.
로딩 스피너 (Loading Spinner)
화면 한쪽에서 빙글빙글 도는 아이콘으로, ‘지금 로딩 중입니다’라는 신호를 사용자에게 전달하는데요.
데이터가 많거나 언제 끝날지 모를 때, 혹은 레이아웃을 미리 그리기 어려운 상황에서 진행 상황을 추정하기 어려울 때 주로 사용해요.
출처 : community.popupsmart.com 모달, 팝업, 오버레이 차이 쉽게 이해하기
웹이나 앱에서 자주 보이는 ‘모달’, ‘팝업’, ‘오버레이’는 비슷해 보이지만, 각각 쓰임새와 특징이 달라요.
모달 (Modal)
사용자가 반드시 확인하거나 처리해야 할 중요한 내용을 담은 창이에요.
화면 중앙에 뜨며, 모달이 닫힐 때까지 뒤쪽 화면과는 상호작용이 불가능해요.
예를 들어 회원 탈퇴 확인 창, 긴급 경고 메시지, 로그인 창 등이 대표적이며, 사용자의 집중이 필요한 상황에서 주로 사용돼요.
팝업 (Popup)
별도의 창이나 작은 레이어 형태로 나타나는 알림창이에요.
브라우저 밖으로 새 창이 뜨기도 하고, 페이지 내에서 작은 알림으로 나타나기도 해요.
광고창, 쿠키 동의창, 새 소식 알림 등이 여기에 해당하며, 추가 정보 전달이나 주의 환기 목적에 자주 쓰여요.
오버레이 (Overlay)
기존 화면 위에 반투명한 막을 덮어 배경을 흐리게 하거나 비활성화하는 효과가 오버레이인데요.
주로 모달이나 팝업과 함께 사용돼, 사용자의 시선을 특정 영역으로 집중시키고 뒤쪽 화면과의 상호작용을 막아요.
예를 들어 모달 창이 뜰 때 배경이 어두워지거나 메뉴가 열릴 때 화면이 흐려지는 현상이 오버레이에요!
출처: uxdesign.cc Default 상태와 Disabled 상태, 어떻게 다를까?
특히 폼이나 버튼에서 자주 보이는 ‘Default’와 ‘Disabled’ 상태,
정확하게 구분해서 이해하는 게 중요해요!
Default (기본 상태)
사용자가 아직 아무 조작을 하지 않은, ‘기본적으로 활성화된’ 상태를 의미해요.
예를 들어, 회원가입 페이지에서 ‘가입하기’ 버튼이 처음 화면에 나타날 때, 사용자가 바로 클릭할 수 있는 상태가 기본 상태예요.
Disabled (비활성화 상태)
사용자가 클릭하거나 입력할 수 없도록 기능이 잠긴 상태를 말해요.
예를 들어, 이메일 주소를 입력하지 않으면 ‘가입하기’ 버튼이 회색으로 변하면서 눌리지 않는 상태가 disabled 상태입니다. 보통 필수 입력값 미작성이나 유효성 검사 실패 시에 이 상태가 적용돼요.
사용성(Usability)과 접근성(Accessibility)의 차이점
UI/UX에서 자주 등장하는 ‘사용성’과 ‘접근성’, 두 개념은 비슷해 보여도 분명히 다른 의미를 가지고 있어요. 각각 어떤 차이가 있는지 쉽게 설명해 드릴게요.
사용성 (Usability)
제품이나 서비스가 얼마나 쉽고 직관적으로 사용 가능한지를 뜻해요.
예를 들어, 메뉴 구성이 명확하고 버튼이 눈에 잘 띄어 초보자도 쉽게 사용할 수 있다면, 사용성이 좋은 경우입니다.
사용성이 뛰어난 제품은 누구나 빠르게 적응해 불편 없이 이용할 수 있도록 돕죠.
접근성 (Accessibility)
장애가 있거나 연령대가 높은 사용자도 문제없이 서비스에 접근하고 이용할 수 있게 배려하는 개념이에요.
예를 들어, 시각장애인을 위한 스크린 리더 지원, 색약자를 위한 색상 대비 조정 등이 접근성에 포함돼요.
접근성이 좋은 서비스는 더 많은 사람이 제한 없이 사용할 수 있는 열린 환경을 제공하죠!
사용성과 접근성은 모두 사용자 경험(UX)의 핵심 요소인데요!
좋은 UX는 단순히 예쁜 디자인뿐 아니라, 모두가 편리하게 사용할 수 있도록 이 두 가지를 함께 고려하는 데서 완성돼요 :)
이번 글에서 UI/UX 기본 용어들을 정리해 봤는데요, 같은 용어라도 상황에 따라 조금씩 다르게 쓰일 수 있으니 꼭 정확한 의미를 이해하는 게 중요해요! 디자이너와 개발자가 서로 원활히 소통하는 데 도움이 되었으면 좋겠어요! 감사합니다.
똑똑한개발자 홈페이지
도구
