디자인 회의에 처음 들어가면 이상한 광경을 봅니다. 같은 화면을 두고 누구는 "UI가 별로다"라고 하고, 바로 옆 사람은 "아니, UX가 문제야"라고 하거든요. 둘이 같은 말을 다르게 하는 걸까요, 아니면 서로 다른 걸 가리키는 걸까요?
와이어프레임과 목업은 또 뭐가 다른지, 프로토타입은 왜 따로 만드는지. 비슷하게 생긴 단어가 쏟아지면 결국 고개만 끄덕이게 됩니다. 뜻을 모르니 대화에 낄 수가 없죠.
그래서 오늘은 디자인 현장에서 가장 자주 헷갈리는 용어를 네 쌍, 여덟 개로 묶어 하나씩 풀어드리겠습니다. 짝으로 보면 차이가 훨씬 또렷해집니다.
1. UI (User Interface)
사용자가 눈으로 보고 손으로 만지는 '화면 그 자체'. 자동차로 치면 운전대와 계기판입니다.
UI는 User Interface(유저 인터페이스), 우리말로 '사용자 접점'입니다. 버튼, 글씨, 색, 아이콘처럼 눈에 보이는 모든 것이 UI예요. 앱을 열었을 때 "예쁘다" 또는 "복잡하다"고 느꼈다면, 그건 UI를 본 겁니다. 한마디로 서비스의 겉모습이죠.
이럴 때 써요: "이 버튼 색이 배경에 묻혀요. UI를 좀 더 또렷하게 바꿔주세요."
2. UX (User Experience)
화면을 쓰면서 겪는 '경험 전체'. 계기판이 아니라, 그 차를 타고 목적지까지 가는 동안의 편안함입니다.
UX는 User Experience(유저 익스피리언스), '사용자 경험'입니다. 원하는 걸 몇 번 만에 찾았는지, 중간에 헤매지 않았는지, 다 끝나고 기분이 어땠는지가 전부 UX예요. UI가 겉모습이라면 UX는 그 겉모습을 쓰는 동안의 느낌 전체입니다. 화면은 예쁜데 원하는 버튼을 도무지 못 찾겠다면? UI는 좋고 UX는 나쁜 겁니다.
이럴 때 써요: "가입 단계가 다섯 개나 돼요. UX가 너무 불편합니다."
3. 와이어프레임 (Wireframe)
색도 그림도 없이 '무엇이 어디에 놓일지'만 그린 밑그림. 건물 짓기 전의 설계 도면입니다.
와이어프레임(Wireframe)은 '철사(wire) 틀(frame)'이라는 이름 그대로, 화면의 뼈대만 잡은 그림입니다. 여기에 로고, 저기에 검색창, 아래에 목록. 이렇게 위치와 배치만 정하고 색이나 사진은 넣지 않아요. 빠르게 그리고 쉽게 고칠 수 있어서, 본격적인 디자인에 들어가기 전 방향을 맞출 때 씁니다.
이럴 때 써요: "디자인 들어가기 전에 와이어프레임부터 그려서 화면 순서를 맞춰봅시다."
4. 목업 (Mockup)
색과 글꼴까지 입혀 '완성된 화면처럼' 보이게 만든 그림. 다만 눌러도 아무 일이 안 일어납니다.
목업(Mockup)은 와이어프레임에 실제 색, 글꼴, 사진, 브랜드를 입힌 겉모습입니다. 완성된 앱 화면을 캡처한 것과 거의 똑같이 생겼어요. 하지만 그림일 뿐이라 버튼을 눌러도 화면이 넘어가지 않습니다. "다 만들면 이렇게 보인다"를 확인하는 단계죠. 뼈대가 와이어프레임이라면, 겉모습이 목업입니다.
이럴 때 써요: "목업 나오면 색감이랑 폰트가 브랜드랑 맞는지 봐주세요."
5. 프로토타입 (Prototype)
실제로 눌러보고 넘겨볼 수 있는 '작동하는 모형'. 팔지는 않는 시제품이라고 보면 됩니다.
프로토타입(Prototype)은 목업을 눌리게 만든 것입니다. 버튼을 누르면 다음 화면으로 넘어가고, 입력창에 글자도 쳐볼 수 있어요. 진짜 코드로 만든 건 아니지만 쓰는 느낌은 거의 똑같습니다. 그래서 개발을 시작하기 전에 사람들에게 미리 써보게 하고 문제를 찾아낼 수 있죠. 보통 와이어프레임 → 목업 → 프로토타입 순서로 발전합니다.
이럴 때 써요: "프로토타입으로 결제 흐름을 테스트해보고 헷갈리는 데를 고칩시다."
6. MVP (Minimum Viable Product)
'이것만 있으면 일단 써진다' 싶은 최소한의 진짜 제품. 프로토타입과 달리 손님에게 실제로 내놓습니다.
MVP는 Minimum Viable Product(미니멈 바이어블 프로덕트), '최소 기능 제품'입니다. 기능을 잔뜩 넣지 않고 핵심 하나만 담아 진짜로 출시하는 제품이에요. 프로토타입이 '만들기 전 연습용'이라면, MVP는 '작지만 실제로 파는 1호점'입니다. 사람들이 정말 쓰는지 시장에서 확인하고, 반응을 보며 조금씩 키워갑니다.
이럴 때 써요: "기능 다 넣지 말고 MVP부터 내서 시장 반응을 봅시다."
7. 반응형 (Responsive)
화면 크기에 맞춰 내용이 '물처럼' 늘어나고 줄어드는 방식. 그릇이 바뀌면 물 모양도 바뀌죠.
반응형(Responsive) 디자인은 하나의 화면이 기기 크기에 따라 자유롭게 늘었다 줄었다 하는 방식입니다. PC에서는 넓게 퍼지고, 폰에서는 좁게 접히죠. 화면 너비를 재서 그때그때 배치를 바꿉니다. 요즘 대부분의 웹사이트가 이 방식이에요. 기기 종류가 아무리 많아도 하나로 대응할 수 있어서 관리가 편합니다.
이럴 때 써요: "이 페이지 반응형으로 만들어서 폰에서도 안 깨지게 해주세요."
8. 적응형 (Adaptive)
미리 만들어 둔 '정해진 틀' 몇 개 중에서 기기에 맞는 걸 골라 보여주는 방식. 옷 사이즈 S·M·L처럼요.
적응형(Adaptive) 디자인은 화면 크기별로 딱딱 정해진 배치를 여러 개 만들어 두고, 접속한 기기에 맞는 틀을 골라 보여줍니다. 반응형이 물처럼 매끄럽게 변한다면, 적응형은 정해진 칸으로 '탁' 바뀌어요. 기기별로 화면을 따로 짜니 세밀하게 다듬기는 좋지만, 새 기기가 나오면 틀을 또 만들어야 합니다.
이럴 때 써요: "이번 서비스는 적응형으로 가서 화면 크기마다 딱 맞게 다듬읍시다."
자주 묻는 질문
UI랑 UX 중 뭐가 더 중요한가요?
둘 중 하나를 고르는 문제가 아니라 둘 다 필요합니다. 화면이 아무리 예뻐도(좋은 UI) 원하는 걸 못 찾으면(나쁜 UX) 사람들은 떠나요. 반대로 흐름이 편해도 글씨가 안 읽히면 역시 불편합니다. UI는 UX를 이루는 한 부분이라고 보는 게 정확합니다.
와이어프레임 없이 바로 디자인하면 안 되나요?
해도 되지만 대개 손해입니다. 색과 사진까지 다 넣은 뒤에 "버튼 위치가 틀렸다"는 걸 알면 처음부터 다시 그려야 하니까요. 와이어프레임은 빠르고 고치기 쉬워서, 먼저 뼈대를 맞추면 헛수고를 크게 줄일 수 있습니다. 급할수록 오히려 밑그림이 시간을 아껴줍니다.
우리 사이트는 반응형과 적응형 중 뭘 써야 하나요?
특별한 이유가 없다면 대부분 반응형을 택합니다. 새 기기가 계속 나와도 하나로 대응돼서 관리가 편하기 때문이에요. 다만 기기별로 화면을 아주 세밀하게 다르게 보여주고 싶거나 속도를 극단적으로 잡아야 한다면, 적응형이 더 나을 때도 있습니다.
여기까지 디자인 현장에서 가장 헷갈리는 용어 여덟 개를 살펴봤습니다. 이제 이 단어들이 회의에서 나와도 바로 그려지시나요? 겉모습(UI)과 경험(UX), 뼈대(와이어프레임)와 완성 그림(목업), 연습용(프로토타입)과 진짜 1호점(MVP), 물 같은 반응형과 틀 같은 적응형. 이 네 짝만 기억해도 절반은 끝난 셈입니다.
다음 편에서는 한 걸음 더 들어가, 사용자가 서비스를 처음 만나 익숙해지기까지의 경험을 다루는 용어를 준비했습니다. 온보딩(Onboarding), 어포던스(Affordance), 유저빌리티(Usability), 그리고 사용자 여정 지도까지. 'UX를 좋게 만든다'는 말이 실제로 무엇을 하는 일인지, 네 개의 용어로 이어가겠습니다.
참고 출처: The Definition of User Experience (UX) — Nielsen Norman Group