GN⁺: 더 나은 기본 Firefox UI를 만드는 방법
(github.com/black7375)파이어폭스 기본 UI 개선 방법
- 파이어폭스 v89 버전 이후 UI에 대한 논란이 있었고, 이에 대응하는 이 저장소가 인기를 얻음.
- Waterfox와 Floorp 브라우저도 이 테마를 기본으로 설정함.
- 2023년 현재, 모질라는 Windows 7과 Windows 8에 대한 지원을 종료하기로 결정함. v115가 마지막 지원 버전이며, 2024년 9월까지 사용 가능함.
원칙
- UI/UX 디자인에 대해 크게 3가지, 작게 16가지 기준을 가지고 있음.
- A/B 테스트를 할 수 없기 때문에 사용자 행동을 예측하는 것이 중요함.
- 직관성, 단순성, 가시성, 적응성, 일관성, 예측 가능성, 조작성, 효율성, 명확성, 근접성, 크기, 반응성, 유연성, 접근성, 기능성, 맥락성, 조화로움, 즐거움, 호환성 등을 고려함.
문제점
- 파이어폭스 v88 Photon UI와 v89 Proton UI 사이의 문제점을 지적함.
- 탭이 버튼처럼 보이는 것, 패딩이 너무 큰 것, 아이콘이 혼자서는 읽기 어려운 것 등이 주요 문제점임.
탭 문제 (적응성, 조작성)
- 적응성과 조작성을 고려하여 탭 디자인의 문제점을 분석함.
- 애플 사파리의 사례를 들어, 사용자 불만에 따른 탭 디자인 변경 사례를 소개함.
공간이 너무 많은 문제 (가시성, 근접성, 크기, 맥락성)
- 가시성, 근접성, 크기, 맥락성을 고려하여 공간이 너무 많은 것이 왜 문제인지 설명함.
- Fitts의 법칙을 이용하여 클릭하기 쉬운 UI를 설계하는 방법을 설명함.
- 구글 크롬과의 UI 간격 비교를 통해 문제점을 분석함.
아이콘의 도움 (명확성, 접근성)
- 명확성과 접근성을 고려하여 아이콘의 중요성을 설명함.
- 2023년 크롬 디자인 리프레시 사례를 통해 아이콘의 중요성을 강조함.
탭 재디자인
- 탭 상태에 대한 다양한 디자인 선택을 설명하고, 프로톤 UI에서의 일반적인 실수를 지적함.
- 탭의 너비에 따라 스마트하고 효율적인 동작을 설계함.
분포
- 좋은 UI에 대한 개인적 기준이 있지만, 어느 정도는 "취향"의 문제임.
- Lepton, Photon, Proton 탭을 비교하여 각각의 개념에 맞는 사례를 선택함.
아이콘 추가 및 패딩 조정
- 아이콘 추가와 패딩 조정을 통해 이전의 불만을 해결함.
- Edge, Chrome, Lepton의 메뉴 아이콘 비교를 통해 Lepton의 아이콘 디자인 우수성을 강조함.
테마
- 다양한 OS와 설정에 적응하는 UI를 제공함.
- Windows 7부터 macOS까지 다양한 OS의 디자인을 따름.
상호작용
- 사용자가 무슨 일이 일어나고 있는지 이해하는 데 도움이 되는 상호작용과 사용자를 즐겁게 하는 상호작용을 설계함.
결론
- 이 테마는 관습, 심리학, 연구 결과를 고려하여 기존 테마의 최고의 특성을 계승함.
- 상황에 맞게 OS, 다크 모드, 사용자 정의 테마 및 상호작용을 지원함.
GN⁺의 의견
- 이 글에서 가장 중요한 것은 사용자 경험을 향상시키기 위한 디자인 원칙과 문제 해결 방법에 대한 심도 있는 분석임.
- 파이어폭스 사용자들에게는 이 테마가 더 나은 브라우징 경험을 제공할 수 있는 실질적인 대안이 될 수 있음.
- UI/UX 디자인에 관심 있는 사람들에게는 디자인 결정의 배경과 그에 따른 영향을 이해하는 데 도움이 되는 통찰력 있는 자료임.
Hacker News 의견
- 새로운 UI의 주된 문제는 모든 것이 과도하게 크다는 것임. 이는 휴대폰 화면에는 적합할 수 있으나, 일반적인 데스크탑 화면에서는 공간 낭비가 됨. 이는 기사에서 언급한 것처럼 패딩이 증가한 부분도 있지만, "compact" UI 밀도 옵션을 제거한 것도 한몫함. 그러나
about:config에서browser.compactmode.show를 설정하여 다시 가져올 수 있음. 이 옵션은 "지원되지 않음"으로 표시되어 있지만, 몇 년 동안 그 상태로 유지되고 있음. - Lepton이라는 인기 있는 Firefox 테마의 저자로서, Mozilla의 덜 뛰어난 결정들을 어떻게 개선했는지, 그리고 그것이 어떻게 인기를 얻었는지에 대한 관점에서 내가 내린 여러 결정들을 볼 수 있음. 이 기사는 시리즈의 일부임.
- 브라우저 UX를 개선하는 것은 수직 탭으로 시작한다고 강하게 생각함. 수평 탭의 경우, 6~8개의 탭을 열면 관리나 추적이 어려워짐. 수직, 중첩 탭을 사용하면 새 탭에서 열리는 링크가 자동으로 자식 탭이 됨. 이를 통해 수평 탭보다 구조와 맥락을 더 쉽게 파악할 수 있음. 여기에 다른 사이트를 나타내는 색상을 추가하면 탭 그룹을 더 쉽게 볼 수 있음. 또한, 연구나 문서 작업의 진행 상황을 저장하기 위해 탭 "트리"를 북마크할 수 있음. CSS 파일과 몇 가지 스크린샷은 여기에 있음.
- 이 게시물은 테마 작성자가 UX 규칙에서 출발하여 객관적으로 더 나은 Firefox 테마를 만들었다고 독자들을 설득하려 하지만, 대부분의 변경 사항은 개인적인 취향으로 보임. 분명히 잘 만들어지고 유지되고 있지만, 개인적으로는 시각적으로 매력적이지 않고 부분적으로 더 복잡해 보임. 사람마다 취향이 다르고, Firefox는 하나의 디자인을 선택했지만 이러한 변경을 지원할 수 있도록 해주고 있음. 그것은 좋은 일임. 그러나 저자가 자신의 취향이 경험적으로 옳다는 것을 증명하려는 것은 다소 어리석어 보임.
- Firefox가 탭을 망쳐놓은 이후로 기본 브라우저로 사용하는 것을 포기함. 가끔 테스트를 위해 열어보지만, 여전히 버튼 대신 탭을 볼 때마다 반년 후에 다시 시도해보겠다고 마음속으로 메모함. 특히 밝은 테마는 밝은 회색 배경에 흰색 버튼으로 더욱 모욕적임. 심지어 Windows의 시스템 테마 설정을 존중하지 않음. Edge는 이해하지만, Chrome은 그렇지 않지만 적어도 대비가 충분함. Firefox는 완전히 표시를 놓침.
- 탭이 "버튼"인 것에 전혀 신경 쓰지 않는 사람도 있음. 처음 사용하는 사람들에게 정말 불편한가? 때때로 나 혼자만 그렇게 생각하는 것 같음.
- 모두가 자신의 애완 동물 불만을 적고 있으니, 여기 내 것들이 있음:
- 북마크 폴더가 많은 큰 트리를 가지고 있을 때, "북마크 추가" UI의 작은 팝업에서 새 북마크를 추가하는 것은 끔찍함.
- 북마크 사이드바는 이름으로 검색할 수 있지만, 북마크가 어디에 있는지 찾을 수는 없음. 북마크 검색 추가 기능(Bookmark search plus 2)이 이를 해결하지만, 필요하지 않아야 함.
- 여러 사이드바를 가질 수 없음. 따라서 수직 탭 처리를 위한 Tree Style Tabs와 북마크 폴더 및 검색을 동시에 열 수 없음. 말도 안 됨.
- 실제로 그것이 전부임. 대부분은 북마크 처리에 관한 것임! 나머지 UI는 괜찮은 것인지, 아니면 그것에 익숙해져서 이상한 점을 더 이상 보지 못하는 것인지 확실하지 않음. 하지만 Firefox에 꽤 만족하고 있음. 다른 사람들처럼 스타일 재설계에 대해 불평할 강한 필요를 느끼지 않음.
- 가장 큰 "불필요한 Firefox UI 변경 불만"은 4년 전에 browser.urlbar.clickSelectsAll을 제거한 것임. 예상할 수 있듯이, Mozilla는 신경 쓰지 않음. 버그 보고서를 읽어보면, 이것은 사용자 적대적인 것으로만 설명될 수 있음. 다른 어떤 텍스트 필드도 이렇게 동작하지 않음. Mozilla가 이 "기능"을 출시하고 그것을 선택하지 않을 수 있는 옵션을 제거한 이유를 도저히 이해할 수 없음.
- Firefox의 실제 UI/UX 악몽은 레거시 잔재임. 모든 기본 브라우저 기능이 자체적인 다른 뷰에서 열림. 설정은 브라우저 탭에서, 기록은 사이드바에서 열리지만, 기록을 관리하려면? 별도의 창에서 열림. 북마크, 다운로드도 그 창에서 열림. 다운로드는 작은 팝업이 있지만, 관리 다운로드는 그 창에서 열림. 북마크 - ctrl+shift+o는 그 창을 열지만, ctrl+b는 사이드바를 염. 프로필? 사용자 친화적인 프로필 기능은 없지만, about:profiles에 숨겨진 레거시 인터페이스처럼 보임. 비밀번호? 브라우저 탭에서 열리며, 다른 것과 정말 일치하지 않는 자체적인 모습을 가짐.
- Proton UI에 대해 아무도 언급하지 않는 최악의 점은, 현대적인 1080p(또는 더 높은 해상도) 모니터를 사용하지 않는 경우 객관적으로 엄청난 업그레이드임. 나의 노트북은 오래된 X220 Thinkpad이므로, 그 변경은 화면 공간을 무의미하게 낭비함으로써 내가 효율적으로 작업하는 능력에 영향을 미침. 이 경우에는 모든 것을 부풀린 Electron이나 React 앱으로 만드는 것과 같은 것이 아니라, Mozilla가 여전히 Firefox에 대해 신경 쓴다는 피상적인 인상을 만들기 위해 UI를 이유 없이 변경한 것임. Proton이 나에게 너무 싫어서 사용자 정의 userchrome을 실행함.