관용적 디자인을 되살리자

• 사용자에게 즉각적으로 이해되는 디자인 관용구는 학습 부담을 줄이고 일관된 상호작용을 가능하게 함
• 과거 데스크톱 소프트웨어 시대에는 운영체제와 가이드라인 덕분에 메뉴 구조와 단축키 등 인터페이스가 통일되어 있었음
• 반면 브라우저 기반 소프트웨어 시대에는 프레임워크와 커스텀 구현 확산으로 인터페이스의 일관성이 붕괴됨
• Apple과 Substack은 제한된 커스터마이징과 통일된 디자인 시스템으로 현대적 관용구의 성공 사례를 보여줌
• 제품 설계자는 기존 관용구를 따르고, 명확성과 일관성을 우선시해 웹 전반의 표준화된 사용자 경험으로 나아가야 함

디자인 관용구

• 체크박스는 사용자가 별도의 학습 없이 즉시 이해할 수 있는 대표적 디자인 관용구로 제시됨
  • 로그인 유지 여부를 묻는 질문에 다양한 입력 방식이 가능하지만, 실제로는 항상 체크박스가 사용됨
  • 이는 사용자와 개발자 모두에게 익숙한 표준화된 상호작용 패턴으로 작동

균질한 인터페이스

• 인터페이스는 사용자가 시스템과 상호작용하는 수단이며, 생각할 필요가 적을수록 좋은 인터페이스로 평가됨
  • 예를 들어, Command+C 단축키로 복사하는 기능은 어디서나 동일하게 작동해야 함
• 그러나 현재의 웹 소프트웨어 환경에서는 인터페이스의 일관성이 사라짐
  • 날짜 선택, 카드 번호 입력 등 기본 기능조차 사이트마다 다르게 구현되어 있음
  • 단축키와 상호작용 방식이 앱마다 달라 사용자는 매번 “어디서 무엇을 눌러야 하는가”를 다시 학습해야 하는 상황

데스크톱 소프트웨어 시대

• Windows 95~7 시기의 데스크톱 소프트웨어는 높은 인터페이스 일관성을 유지
  • “File, Edit, View” 메뉴 구조가 모든 프로그램에서 동일하게 존재
  • 메뉴 항목의 밑줄은 키보드 단축키를 의미하며, ALT+F, N 등으로 조작 가능
  • 하단의 상태 표시줄(status bar) 은 현재 상태(페이지, 단어 수, 모드 등)를 명확히 표시
  • 텍스트 기반 메뉴 중심으로, 아이콘은 명확한 의미를 가질 때만 사용
• 이러한 관용구는 Microsoft Word뿐 아니라 Windows 전체 생태계에 걸쳐 통일되어 있었음
  • Windows XP의 로그아웃 화면에서도 모든 버튼이 명확히 버튼임을 시각적으로 표현하고, 단축키가 표시됨
• 이러한 일관성은 운영체제와 GUI 라이브러리의 제약 덕분에 가능했으며, Microsoft는 수백 페이지의 디자인 가이드라인을 배포해 개발자들이 이를 따르도록 유도

브라우저 소프트웨어 시대

• 현재의 웹 애플리케이션 시대는 이질적 인터페이스의 시대로 묘사됨
  • Figma와 Linear 같은 우수한 웹앱조차 공통 아이콘이나 단축키가 없음
  • 각 앱이 독자적으로 잘 설계되었지만, 서로 다른 상호작용 패턴을 가짐
  • 동일 회사 내에서도 Gmail, GSuite, Google Docs의 경험이 서로 다름
  • 결과적으로 사용자는 생산적 흐름(flow) 대신 조작 위치를 탐색하는 시간을 보내게 됨

• 모바일 전환의 영향

  • 터치스크린 등장으로 마우스·키보드 중심의 디자인 패턴이 재발명됨
  • 모바일과 데스크톱을 동시에 지원해야 하는 상황에서 중간 형태의 불완전한 UI가 확산
  • 예: 모바일용 햄버거 메뉴가 데스크톱에서도 그대로 사용되는 사례
  • 모듈형 컴포넌트 재사용 문화가 잘못된 패턴을 복제하며 품질 저하를 초래
  • 10년 이상 누적된 결과로 UI/UX 품질의 세대적 침식 발생

• HTML을 넘어선 관용구의 부족

  • 초기 웹에서는 파란색 밑줄 링크 등 명확한 관용구가 존재했으나, 현재는 사이트마다 스타일이 제각각
  • HTML/CSS 표준은 엄격하지만, 실제로는 대부분 React·TypeScript 기반 빌드 시스템을 사용
  • 결과적으로 표준 HTML 요소 대신 커스텀 구현이 난무하며 접근성 문제까지 초래
  • 예: <a> 대신 onclick이 달린 <span> 사용으로 스크린리더 기능이 깨짐
  • Figma처럼 WebAssembly 기반으로 HTML을 완전히 벗어난 앱도 존재
  • 브라우저의 뒤로가기 버튼, 단축키 등 기본 기능이 무시되며, 새로운 인간-컴퓨터 상호작용 패러다임이 재구성됨
  • 프런트엔드 개발이 속도와 가능성 중심으로 발전하면서, 일관된 관용구 정착이 어려움
  • 수많은 프레임워크와 상호작용 형식이 존재해 단일 표준 확립이 구조적으로 어려운 환경

관용적 디자인의 성공 사례

• Apple은 현대에 강력한 디자인 관용구를 유지하는 대표 사례로 꼽힘
  • 폰트, 버튼, 색상 등 전반적 디자인 시스템이 통일되어 있으며, iOS 전반의 일관된 상호작용 경험을 제공
  • 이러한 일관성이 “it just works”라는 신뢰감을 형성
• Substack 또한 제한된 커스터마이징과 미리 정해진 미학적 기본값을 통해 안정된 사용자 경험을 제공
  • Apple과 Substack의 디자인 원칙은 성공을 통해 업계 표준으로 확산, 결국 새로운 관용구로 자리잡음

제품 설계자가 따라야 할 원칙

• 제품 개발자는 가능한 한 기존 디자인 관용구를 따르는 것이 사용성과 호환성을 높이는 길로 제시됨
  • HTML/CSS의 기본 관용구를 준수: 링크는 밑줄·색상·포인터 커서·<a> 태그로 구현
  • 기본 HTML 요소를 JavaScript로 재구현하지 말 것, 예: React Button 대신 <button> 사용
  • 브라우저 관용구 준수: 뒤로가기 버튼 작동, URL 복사 시 동일 인터페이스 접근, CTRL+클릭 시 새 탭 열기
  • 일반 관용구에서 벗어날 경우, 조직 내부적으로라도 일관된 규칙을 유지
  • 텍스트 우선, 아이콘 최소화, 아이콘은 보편적으로 이해 가능한 경우에만 사용
  • 시각적 요소는 명확함이 미적 아름다움보다 우선
  • 판단이 어려울 경우, 우수한 웹사이트 사례와 과거의 인터페이스 디자인 서적을 참고
• 궁극적으로는 모든 웹의 날짜 선택기나 카드 입력 폼이 동일하게 작동하는 미래를 지향하며, 수십 년의 반복과 개선 끝에 최적의 관용구로 수렴하는 웹 환경을 목표로 제시됨