용어는 어디서 왔을까
'사용자 경험(user experience)'이라는 말은 도널드 노먼(Donald Norman)이 1990년대 중반에 널리 알린 것으로 위키백과에 서술되어 있습니다 (1995년 CHI 학회 논문 "What You See, Some of What's in the Future, And How We Go About Doing It: HI at Apple Computer"가 근거로 인용됩니다). 같은 문서는 이 표현이 그 전에도 컴퓨터 소프트웨어와 관련해 쓰인 적이 있다고 덧붙입니다. 즉 노먼이 처음 만든 말이라기보다 널리 퍼뜨린 말에 가깝습니다. 그보다 먼저 있던 개념이 '사용성(usability)'으로, 과업을 해낼 수 있는가에 초점을 둡니다. UX는 여기에 즐거움이나 감정 같은 요소까지 넓힌 개념이고, UI(화면에서 조작하는 요소)는 UX를 이루는 한 부분으로 설명됩니다.
'반응형 웹 디자인'은 2010년 5월 에단 마코트가 A List Apart에 쓴 글에서 이름이 붙었습니다. 그는 유동적인 그리드, 유연한 이미지, 미디어 쿼리 세 가지를 재료로 들었고, 다양한 기기를 따로 만들 대상이 아니라 '같은 경험의 여러 면'으로 보자고 제안했습니다. 위키백과는 이보다 앞선 시도로 2001년 아우디 사이트(브라우저 너비에 맞춰 바뀌는 레이아웃)와 2004년 카메론 애덤스의 시연을 소개합니다. 2015년에는 구글이 모바일 친화적인 사이트를 모바일 검색에서 우대한다고 발표했습니다(위키백과 기준).
용어를 구분해서 보는 표
헷갈리기 쉬운 네 가지를 '무엇을 다루는가', '언제 쓰는가'로 비교했습니다. 아래 서술은 위키백과의 웹사이트 와이어프레임, 사용자 경험, 랜딩 페이지 항목을 바탕으로 정리했습니다.
| 용어 | 다루는 것 | 보통 쓰는 시점 |
|---|---|---|
| UI | 버튼, 아이콘, 레이아웃 같은 조작 요소 | 화면 설계와 시각 디자인 단계 |
| UX | 사용 전 과정에서 느끼는 효율과 만족 | 기획부터 운영까지 전 과정 |
| 와이어프레임 | 구조, 배치, 내비게이션, 정보의 우선순위(색·서체 제외) | 시각 디자인에 들어가기 전 |
| 랜딩 페이지 | 링크·광고·메일로 도착한 방문자를 맞는 한 페이지 | 캠페인·가입·판매 목적이 있을 때 |
실제 사례 세 가지
사례 1. 좋은 의도가 오작동을 낳은 투표용지: 2000년 팜비치 카운티 '나비 투표용지' (UX의 사례)
2000년 미국 대선에서 플로리다 팜비치 카운티는 후보 이름을 두 쪽에 번갈아 배치하고 구멍은 가운데 한 줄에 모아 둔 투표용지를 썼습니다. 선거 관리관 테레사 르포어(Theresa LePore)는 노년층 유권자를 위해 글자를 키우려고 양쪽 면을 쓴 것이라고 밝혔습니다(위키백과 서술 기준, 본인 설명). 결과적으로 과투표로 무효가 된 표가 약 1만 9천 장으로, 1996년의 약 3천 장보다 크게 늘었고 개혁당 후보 패트릭 뷰캐넌은 이 카운티에서 3,407표를 얻었습니다. 2001년 미국정치학회보(American Political Science Review)에 실린 연구는 이 용지가 체계적으로 치우친 투표 오류를 낳았다고 결론지었습니다. 다만 원인을 어디까지 용지 디자인으로 볼지, 선거 결과를 바꿨는지에 대해서는 당시에도 이견이 있었고 위키백과도 논쟁점으로 다룹니다. 배울 점은 하나입니다. '글자를 키운다'는 UI 개선이 '이름과 구멍을 짝짓는다'는 과업을 어렵게 만들었다면 UX는 오히려 나빠진 것이고, 실제 사용자를 대상으로 한 시험이 필요하다는 것입니다.
사례 2. 하나의 사이트로 여러 화면을: 반응형 디자인의 등장 (반응형의 사례)
마코트가 2010년 글을 쓰기 전에도 브라우저 너비에 따라 배치가 바뀌는 사이트는 있었습니다. 위키백과는 2001년 아우디 사이트를 예로 듭니다. 마코트의 기여는 흩어져 있던 기법을 '유동 그리드, 유연한 이미지, 미디어 쿼리'로 묶고 하나의 이름과 철학을 준 것입니다. 그는 기기별로 사이트를 따로 만드는 대신 하나의 경험으로 다루자고 했고, 이듬해인 2011년 같은 제목의 책을 냈습니다(위키백과 기준). 이 사례에서 얻을 점은 용어가 기술 자체만큼 중요하다는 것입니다. 이름이 생기자 팀들이 같은 목표를 두고 이야기할 수 있게 되었습니다.
사례 3. '폴드 위에 있어야 보인다'는 말의 현재 위치: 어보브 더 폴드 (통념 점검의 사례)
폴드는 접어서 진열한 신문 1면의 윗부분에서 온 말입니다. 웹에서는 스크롤 없이 보이는 영역을 가리키지만 화면 크기가 제각각이라 고정된 픽셀 기준은 없습니다. 위키백과에는 광고 네트워크마다 기준을 다르게 둔 예(상단 768픽셀, 1,000픽셀)가 나옵니다. 야코브 닐슨은 2006년 연구에서 방문자의 77%가 스크롤하지 않는다고 보고했고, NN/g의 후속 글에서는 폴드 위아래 콘텐츠를 대하는 정도가 평균 84% 차이 난다고 전합니다(위키백과 인용 기준). 그러나 문서 스스로 이 자료가 오래되었고 출처 보강이 필요하다고 표시하고 있어 오늘날의 행동과 같다고 단정할 수 없습니다. 핵심 메시지를 위쪽에 두되 '이 이상은 아무도 안 본다'는 식의 기준으로 쓰지는 말아야 한다는 것이 이 사례의 결론입니다.
내 사이트·프로젝트에 적용하기
- 구조 먼저: 색을 고르기 전에 와이어프레임으로 페이지의 목적, 정보 우선순위, 내비게이션을 합의합니다. 와이어프레임은 정적이라 호버나 펼침 같은 상호작용은 따로 설명해야 한다는 점을 기억하세요.
- 한 페이지, 한 목적: 랜딩 페이지는 도착 경로의 메시지와 이어져야 합니다. 위키백과는 메뉴를 줄이고 링크를 제한하는 방식을 일반적인 구성으로 소개합니다.
- CTA는 동사로 시작: "지금 가입하기", "더 알아보기"처럼 다음 행동이 보이게 쓰고, 어느 문구가 나은지는 A/B 테스트로 확인하는 방식이 일반적입니다.
- 여러 화면 크기에서 열어 보기: 휴대폰, 태블릿, 컴퓨터에서 레이아웃이 깨지지 않는지 직접 확인합니다.
흔한 오해와 정정
- 오해: UI와 UX는 같은 말이다. 실제: UI는 조작 요소이고 UX는 그것을 포함한 전체 경험입니다. 위키백과도 두 용어를 섞어 쓰는 실무자가 많다고 인정하므로, 대화할 때 범위를 확인하는 편이 안전합니다.
- 오해: 와이어프레임은 못 그린 디자인이다. 실제: 색과 장식이 없는 것은 의도입니다. 구조와 기능에 논의를 모으기 위해서입니다.
- 오해: 반응형이면 모바일 대응은 끝이다. 실제: 레이아웃이 줄어드는 것과 모바일에서 쓰기 편한 것은 다릅니다. 터치 조작과 로딩 속도 같은 별도 점검이 필요합니다.
- 오해: 폴드 아래는 아무도 안 본다. 실제: 폴드 위가 더 주목받는다는 연구는 있으나, 수치가 오래되었고 화면과 콘텐츠에 따라 달라 고정 규칙으로 삼기 어렵습니다.
한계와 더 알아볼 점
이 글의 용어 설명은 일반적으로 통용되는 정의이며, 회사와 팀에 따라 쓰임이 조금씩 다릅니다. 랜딩 페이지의 유형 구분도 자료마다 다르게 부릅니다 (위키백과는 정보 제공형 '레퍼런스'와 전환 유도형 '트랜잭셔널'로 나눕니다). 랜딩 페이지의 '메시지 일치가 전환율을 최대 50% 높인다'는 식의 수치는 업체 블로그 출처라 일반화하지 않았습니다. 이 글은 개념 정리를 위한 일반 정보이며 특정 서비스의 성과를 보장하지 않습니다.
자주 묻는 질문
와이어프레임은 왜 흑백으로만 그리나요?
디자인의 색상이나 세부 스타일보다 전체적인 레이아웃과 요소 배치에 먼저 집중하기 위해 의도적으로 단순하게 그리는 것이 일반적입니다. 위키백과는 와이어프레임이 '화면이 무엇을 하는가'를 보여 주는 것이지 어떻게 보이는가를 보여 주는 것이 아니라고 설명합니다.
반응형 디자인은 왜 중요한가요?
스마트폰, 태블릿, 컴퓨터 등 사용자가 접속하는 화면 크기가 다양해지면서, 어떤 기기에서 봐도 콘텐츠가 깨지지 않고 편하게 보이도록 하는 것이 필수가 되었기 때문입니다. 구글은 2015년 모바일 친화적 사이트를 모바일 검색에서 우대하기 시작했다고 발표했습니다.
저품질 와이어프레임과 고품질 와이어프레임은 무엇이 다른가요?
위키백과 기준으로 저충실도는 사각형과 라벨, 대체 텍스트로 거칠게 구조를 그리는 것이고, 고충실도는 실제 콘텐츠와 서체, 이미지 크기 등을 담아 완성에 가깝게 만든 것입니다. 초기에는 저충실도로 빠르게 논의하고 필요할 때 구체화하는 방식이 흔합니다.
랜딩 페이지와 홈페이지는 어떻게 다른가요?
홈페이지는 사이트 전체의 입구이고, 랜딩 페이지는 검색 결과나 광고, 메일 링크를 눌러 도착하는 특정 목적의 페이지입니다. 홈페이지가 랜딩 페이지 역할을 할 수도 있지만, 한 가지 행동을 유도하도록 메뉴를 줄인 별도 페이지를 쓰는 경우가 많습니다.
CTA 버튼은 클수록 좋은가요?
크기나 색 자체가 효과를 보장한다는 근거는 이 글에서 확인하지 못했습니다. 위키백과는 CTA의 성과를 보통 클릭률로 재고, A/B 테스트로 여러 안을 비교해 더 나은 쪽을 쓴다고 설명합니다. 내 사이트에서는 직접 비교해 보는 것이 가장 확실합니다.
이어서 읽어 보세요
- 소셜미디어 이미지 크기 완전정복: 플랫폼별 이미지 규격
- 웹사이트 로딩 속도 가이드: 화면 구성과 함께 챙길 성능 요소
- 색약 친화적 디자인 가이드: 접근성을 고려한 색 사용
- 명도 대비 검사기: 글자와 배경의 대비 확인