UI UX 차이, 홈페이지 기획에서 각각 정하는 것
UI와 UX는 겹치지만 정하는 것이 다릅니다. 한 줄 뜻과 차이 표, 홈페이지 기획에서 UX로 정할 다섯 가지와 UI로 정할 다섯 가지, 요청서에 나눠 적는 예시, 시안을 두 관점으로 보는 순서를 정리했습니다.
UI UX 차이는 한 줄로 이렇습니다. UI(사용자 인터페이스)는 사람이 보고 누르는 화면 요소입니다 — 버튼 · 메뉴 · 입력칸 · 글자 · 색 · 배치. UX(사용자 경험)는 그 화면들을 거쳐 원하는 일을 끝내기까지의 흐름과, 그동안 편하거나 막히는 느낌입니다. 홈페이지 · 앱 제작을 맡길 때는 UX(누가 · 무엇을 · 어떤 순서로)를 먼저 적고 UI(배치 · 버튼 · 글자 · 색)를 그다음에 적습니다. 이 글은 직무나 취업이 아니라 제작을 맡기는 쪽의 기준으로 씁니다.
UI UX 차이, 무엇을 보면 갈리나요
「문의 버튼이 눈에 띄는가」는 UI의 질문이고, 「첫 화면에서 문의 완료까지 막힘없이 몇 번 만에 가는가」는 UX의 질문입니다. 묻는 질문과 결과물이 다릅니다.
| 구분 | UI | UX |
|---|---|---|
| 묻는 것 | 어떻게 보이고 무엇을 누르나 | 원하는 일을 끝낼 수 있나, 얼마나 쉽게 |
| 다루는 것 | 버튼 · 메뉴 · 입력칸 · 글자 · 색 · 아이콘 · 배치 | 방문 목적 · 화면 순서 · 누르는 횟수 · 막히는 곳 · 오류 안내 |
| 결과물 | 디자인 시안 · 공통 요소 시안 | 방문자 정의 · 화면 목록 · 흐름도 · 화면 설계서 |
| 확인하는 법 | 크기 · 대비 · 모양이 고른지 재기 | 사람에게 과제를 주고 해 보게 한 뒤 막힌 곳 보기 |
| 예 | 문의 버튼의 색 · 크기 · 문구 | 문의까지 거치는 화면 수 · 입력칸 수 |
둘은 따로 움직이지 않습니다. UI는 UX를 이루는 부품이라 버튼 글자가 흐리면 흐름이 좋아도 막힙니다. 반대로 버튼이 눈에 잘 띄어도 문의 화면이 네 단계 뒤에 있으면 UI를 고쳐서는 풀리지 않습니다. 둘을 나눠 적는 까닭은 고칠 곳을 가려내기 위해서입니다.
홈페이지 기획에서 UX로는 무엇을 정하나요
다섯 줄입니다. 위에서 아래로 적으면 화면 목록과 흐름도가 따라 나옵니다.
- 누가 — 들어오는 사람 2~3유형. 예: 처음 알아보는 담당자 · 이미 거래하는 고객 · 입사 지원자
- 무엇을 — 유형마다 찾는 것 하나와 하게 할 행동 하나
- 어떤 순서로 — 들어오는 곳에서 행동을 마칠 때까지 거치는 화면을 번호로
- 몇 번 만에 — 누르는 횟수 목표. 예: 첫 화면에서 문의 완료까지 세 번 안(예시로 정한 값)
- 막히면 — 결과가 없을 때 · 입력이 틀렸을 때 보여 줄 문구
세 번째 줄이 흐름도가 됩니다. 화면 번호를 화살표로 잇는 법은 화면 설계서 쓰는 법 — 화면 목록부터 만드는 순서에 있습니다. 다 그은 뒤 들어오는 화살표가 없는 화면과 나가는 화살표가 없는 화면을 세면, 아무도 닿지 못하는 화면과 방문자가 멈춰 서는 화면이 드러납니다.
UI로는 무엇을 정하나요
UX로 정한 순서 위에 화면마다 모양을 얹습니다. 버튼 · 대비 값은 웹 접근성 국제 기준 WCAG 2.2에서, 글자 값은 아래 링크한 기존 글에서 가져왔습니다.
| 요소 | 정할 것 | 기준 예 |
|---|---|---|
| 배치 | 위에서 아래로 놓는 덩어리의 순서와 수 | 한 덩어리에 말 하나, 문의 버튼은 스크롤하지 않고 보이는 높이 안에 |
| 버튼 | 문구 · 크기 · 색 · 누른 뒤 모양 | 휴대폰 버튼은 가로세로 44px 이상 |
| 글자 | 크기 · 줄 간격 · 한 줄 길이 | 본문 16~18px, 줄 간격 1.6~1.8배 |
| 색 | 주 색 · 보조 색 · 오류 색 | 글자와 배경의 명도 대비 4.5:1 이상, 큰 글자(18pt · 24px 이상, 굵은 글씨는 14pt · 약 18.7px 이상)는 3:1 이상 |
| 공통 요소 | 같은 기능은 같은 모양 | 버튼 · 입력칸 · 표를 공통 요소 시안 한 장에 모아 정의 |
44px는 WCAG 2.2의 가장 높은 등급(AAA)에 적힌 값이고, 한 단계 아래 AA 등급의 최소 크기 기준은 24px입니다. 글자 크기와 줄 간격의 자리별 값은 홈페이지 글자 크기와 줄 간격 기준의 표를 따릅니다.
요청서에는 UI와 UX를 어떻게 나눠 적나요
화면 하나를 두 줄기로 나눠 적습니다. 아래는 서비스 소개 화면을 예시로 가정한 것입니다.
- UX 줄 — 누가: 처음 알아보는 담당자 / 할 일: 자기에게 맞는 항목을 골라 문의 / 들어오는 곳: 첫 화면 · 검색 / 다음 화면: 문의(고른 항목이 미리 선택된 채로) / 막힐 때: 항목을 못 고르면 비교표로
- UI 줄 — 배치: 항목 카드 5개를 세로로 / 카드: 이름 · 설명 3줄 · 버튼 / 버튼: 「이 항목으로 문의」, 주 색 / 휴대폰: 비교표는 가로로 밀어 보기
화면별 요청서 양식을 쓰고 있다면 윗단의 「보는 사람」과 화면마다 적는 「여기서 하게 할 일」이 UX 줄의 앞 두 칸입니다. 들어오는 곳 · 다음 화면 · 막힐 때는 그 아래 한 줄로 더하고, UI 줄은 「꼭 들어갈 것」 옆에 새 칸을 두어 적습니다 — 「작은 화면에서」 칸은 UI 줄의 휴대폰 항목과 같습니다. 양식은 홈페이지 요청서 양식 — 화면별 칸에 있습니다.
시안을 볼 때 두 관점으로 어떻게 확인하나요
- UX 먼저 — 방문자 유형마다 과제 하나(예: 「견적 문의 넣기」)를 정하고, 시안을 화면 순서대로 넘기며 따라갑니다. 누른 횟수와 멈춘 곳을 적습니다.
- 빈 화면 · 오류 화면 — 결과가 없을 때와 입력이 틀렸을 때의 화면이 시안에 있는지 봅니다.
- UI — 시안을 휴대폰 크기로 줄여 글자 · 버튼 크기와 대비를 봅니다.
- 일관성 — 같은 기능의 버튼 · 입력칸이 화면마다 같은 모양인지 봅니다.
- 의견 정리 — 한 문서에 UX 줄과 UI 줄을 나눠 적어 한 번에 보냅니다.
순서를 UX부터 두는 이유는 흐름 문제를 색이나 크기로 덮지 않기 위해서입니다. 1번에서 멈춘 곳이 나오면 그 화면의 UI 의견은 흐름을 고친 다음 회차로 넘깁니다.
자주 묻는 질문
UI 디자이너와 UX 디자이너를 따로 맡겨야 하나요?
작은 홈페이지는 한 사람이 함께 맡는 경우가 많습니다. 나눠 맡길 때는 결과물로 구분합니다 — 화면 목록 · 흐름도 · 화면 설계서가 UX 쪽, 디자인 시안 · 공통 요소 시안이 UI 쪽입니다. 견적서에 두 묶음이 각각 들어 있는지 봅니다.
UX는 오픈 전에 어떻게 확인하나요?
회사 밖 사람 3~5명(예시로 정한 수)에게 과제를 하나씩 주고 옆에서 말없이 지켜봅니다. 시안 이미지를 이어 붙여 눌러 볼 수 있게 만든 시안(프로토타입)으로도 됩니다. 두 사람 이상이 같은 곳에서 멈추면 그 자리가 첫 수정 대상입니다.
UIUX와 UXUI는 같은 말인가요?
같은 두 낱말을 순서만 바꿔 붙인 말입니다. 직무나 교육 과정 이름에서 둘을 묶어 부를 때 쓰고, 뜻은 이 글의 UI와 UX를 합친 범위입니다.
앱과 홈페이지는 UX가 다른가요?
뜻은 같고 무게가 다릅니다. 앱은 로그인한 사람이 같은 일을 자주 되풀이하므로 누르는 횟수를 줄이는 설계가 중요하고, 홈페이지는 처음 온 사람이 한 번에 목적을 찾게 하는 첫 화면과 메뉴가 중요합니다.
오늘 할 일
지금 홈페이지나 만들 홈페이지에 들어올 사람 한 유형을 정해, 첫 화면에서 문의 완료까지 거치는 화면 이름을 순서대로 적고 화면 사이마다 누르는 횟수를 적으십시오. 이 줄이 요청서의 첫 UX 항목입니다. 합이 세 번(본문에서 예시로 정한 목표)을 넘으면 건너뛸 수 있는 화면에 표시하고, 화면마다 누를 버튼의 문구를 옆에 적어 UI 항목의 첫 줄로 삼습니다.
