브라우저 UI 셸 디자인
2010년 IE9 베타 리뷰는 웹페이지 콘텐츠 영역이 아니라 주소창·탭·버튼처럼 브라우저 자체를 감싸는 UI 셸(chrome)의 디자인을 다룬다. 글쓴이는 MS가 출시 전 HTML5 렌더링 속도를 벤치마크 테스트로 강조했지만, 실사용에서는 크롬 대비 체감 차이가 크지 않았다고 지적한다. 실험적 사이트가 아닌 이상 GPU 가속의 실질적 소득은 크지 않으며, 현재 병목은 렌더링 속도가 아니라 인터넷 다운로드 속도라는 관찰이다. 이는 벤치마크 마케팅과 실제 사용자 체감 사이의 괴리를 보여주는 사례다.
리뷰의 핵심은 IE9이 타이틀 영역을 없애고 탭을 전면에 내세운 것에서 보듯 크롬·사파리 같은 당시 최신 브라우저의 미니멀리즘 흐름을 뒤따른다는 점이다. 다만 글쓴이는 이 흐름을 그대로 칭찬하지 않고 Simplicity vs. Space Efficiency라는 구분으로 비판한다. 주소창과 탭을 한 줄에 배치해 공간은 아꼈지만, 서로 다른 성격의 요소를 인접시키면 인지적 부담이 커지고 탭이 몇 개만 떠도 제목이 보이지 않는 문제, 파비콘이 반복되며 리던던시가 생기는 문제가 뒤따른다는 것이다. 요소를 실제로 줄이는 것이 아니라 단지 공간 효율을 위해 빽빽하게 구겨 넣는 것은 진짜 심플함과는 다르다는 원칙을 제시한다.
디테일이 완성도를 가른다(Detail matters)는 관점도 이어진다. 새로고침 버튼과 정지(멈춤) 버튼처럼 서로 배타적으로만 쓰이는 기능은 하나로 합치는 것이 자연스러운데 IE9은 이를 분리해두었고, 글쓴이는 "좋은 것을 베끼는 것은 부끄러운 일이 아니다"라며 경쟁 브라우저의 좋은 선택을 반영하라고 제언한다. 비스타·윈도우7의 둥글둥글한 타이틀 윈도우·버튼·탭과 달리 각진 입력창이 이질적으로 도드라진다는 지적에는 스티브 잡스가 매킨토시를 만들며 둥근 모서리(Round Rects)에 집착했다는 일화가 인용된다. 마우스오버 시의 미묘한 밝기 변화 정도에 그친 피드백, 윈도우7의 '빛' 테마를 충분히 살리지 못한 버튼 디자인도 같은 맥락의 아쉬움으로 지적된다.
주소창의 자동완성 UI에 대해서는 "Let there be light"라는 대안이 제시된다. 크롬식 풀다운 메뉴 대신, 검색어나 URL을 입력하는 순간 현재 창 전체를 어둡게 하고 그 위에 밝은 글씨로 정보를 강조하는 방식이 윈도우7의 '빛' 테마와 더 잘 어울렸으리라는 것이다. 설정 어디에도 없는 북마크바(패널로만 열 수 있음) 문제도 함께 지적되며, 에어로 테마의 투명함과 불투명 배치가 서로 충돌해 북마크바가 들어설 자리를 찾기 어려운 구조적 딜레마로 설명된다. 글쓴이는 IE도 이제 브라우저 경쟁에 본격적으로 참가해 서로 베끼고 경쟁하며 더 나은 사용자 경험으로 이어지길 바란다는 낙관적 태도로 글을 맺으며, 스스로 맥·XP 사용자로서 이 비교에 편견이 섞여 있음을 인정하는 메타적 성찰도 덧붙인다.
핵심 내용
- Simplicity vs. Space Efficiency: 공간을 줄이는 것과 실제 심플함은 다른 문제 — 무리하게 요소를 인접 배치하면 인지 부담과 리던던시(반복 파비콘 등)가 커짐
- 상호 배타적인 기능(새로고침/정지)은 하나의 버튼으로 통합하는 것이 자연스러움 — "좋은 것을 베끼는 것은 부끄러운 일이 아니다"
- 스티브 잡스의 둥근 모서리(Round Rects) 집착 일화를 인용해 각진 요소가 주변 디자인 언어와 충돌하는 문제를 지적
- Detail matters: 마우스오버 피드백, 테마(에어로/빛) 활용의 일관성 같은 작은 디테일이 체감 완성도를 가름
- "Let there be light": 자동완성 UI를 풀다운 메뉴 대신 화면 전체를 어둡게 하고 정보를 강조하는 대안 제시
- 실제 성능 병목은 렌더링 속도가 아니라 인터넷 다운로드 속도라는 관찰 — 벤치마크 마케팅과 실사용 체감의 괴리
- 브라우저 간 상호 벤치마킹(베끼기)과 경쟁이 결국 사용자 경험 향상으로 이어진다는 낙관적 관점
관련 개념
- 모바일 브라우저 탭 전환 UI — 모바일 환경의 탭 UI 설계와 비교할 수 있는 데스크톱 브라우저 사례
- 윈도우 8 모던 UI — 비슷한 시기 마이크로소프트가 시도한 또 다른 UI 패러다임 전환과 그 한계
- 스큐어모피즘 — 둥근 모서리·그라데이션 등 이 시기 인터페이스 미학 논쟁과 맞닿아 있는 개념
- 크로스브라우저 호환성 — 같은 저자(無異)가 다룬 또 다른 브라우저 관련 UX 문제
- UI 디테일 비교와 지속적 개선 — 미세한 인터페이스 디테일을 계속 손보는 태도라는 공통된 문제의식
- 피츠의 법칙 — 작은 타깃(각진 버튼·패널) 조작의 어려움을 설명하는 이론적 배경
출처
- IE9이 구글과 애플에서 좀 더 배워야할 UX — 2010-09-17, 無異